GitHub 页面网站在本地呈现但不在服务器上呈现

Question

我在https://kajalv.com. I made a number of changes now and they look fine locally. (Also, downloading the repo and opening index.html works fine.) But when I pushed to my master repository at https://github.com/kajalv/kajalv.github.io开发个人网站，有些CSS好像丢了

例如，这在本地有效，但更改在实际站点上不可见 -

#contactContainer img
{
  height: 80px;
  width: 80px;
  border-radius: 50%;
  opacity: .5;
  border: 2px solid black;
  box-shadow: 5px;
  margin-bottom: 40px;
}

同样，段落字体颜色设置为黑色，但此更改未反映在网站上：

.eduInfo p
{
  color: black;
}

另一个问题是我的图标。我在本地打开 index.html 文件时可以看到它，但在实际站点上看不到。我已使用此代码设置它。

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

我检查了是否有任何未提交的更改，但有 none:

On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean

我有很多这样的更改，但我假设它们都是同一个问题。可能是什么问题呢？这可能是 GitHub 页面使用我的更改非常缓慢的问题吗？

Answer 1

我检查了您的网站，您列出的所有 css 都为我正确呈现。这可能是您的浏览器只是缓存 css 文件的问题，在这种情况下，硬刷新（Mac Chrome 上的 cmd-shift-r，[=] 上的 ctrl 和单击刷新16=] Chrome) 会修复它。

根据我的经验 GitHub 页面有时也需要几分钟才能更新。

Answer 2

我查看了您的上次提交，我可以在您的页面上看到这些更改。我还可以在页面上的回购协议中看到你的图标。

如果更改在本地而不是在 GH 页面上正常工作，请给它一些时间。这是一个缓存问题。通常，GH 页面需要几分钟才能更新。您也可以尝试清空浏览器缓存，在Chrome，您可以打开开发工具-> 应用程序-> 清除存储-> [检查所有内容] -> 清除站点数据。或者，在开发工具打开的情况下，您可以右键单击刷新按钮并选择 Empty Cache 和 Hard Reload。

对于额外的措施，您可以在“网络”选项卡中选中“禁用缓存”，尽管这不会在所有情况下都清除缓存，因此不要仅仅依赖此功能。

如果这不起作用，请尝试使用隐私浏览模式，但请确保关闭更新之间的会话以确保清除缓存。

P.S.: 你的页面看起来很酷，干得好:)

Answer 3

检查已部署页面上 CSS 的不透明度值。您可能会看到它只设置为 1%，而不是您设置的 .5。

如果是这样，这不是 GitHub 页面的问题，而是打包程序编译的缩小构建代码的问题。这是我在使用 create-react-app 时遇到的问题。

您可以在此处找到更多信息

https://github.com/facebook/create-react-app/issues/7980

GitHub 页面网站在本地呈现但不在服务器上呈现

GitHub Pages website rendering locally but not on server

css

github-pages