本地网页html上传到github后格式不一致

Posted 2023-04-11

参考技术A 前面试验了使用Github和Hugo来构建自己的在线文档网站的基本步骤，接下来想要定制一个自己的网站，而不是仅仅使用模板。

从一些经验帖来看，通用的做法就是

1）在Github上新建一个XX.Github.io的仓库，并开启Github Pages功能。

这时仓库下将生成index.md和_config.yml。如此我们才能保证在线网站的基本访问功能。
2）在本地新建文档，使用hugo server命令生成public文件夹，这个文件夹里是hugo构建的所有静态页面，我们只需要将文件夹下的内容推送到步骤1中创建的仓库中（仓库中的index.md和_config.yml需要一直保留）就可以在公网上访问我们在本地构建好的网站。

实践的过程中就遇到问题了：

本地生成的网站长这样

使用public文件夹推送到Github上的网站长这样

小白的我，甚至不知道这样的现象如何描述，也许是CSS样式丢失？效果不一致？

对照教程，并没有哪里做的不对，大家也没有遇到我这样的现象。

只找到一条解决记录如下，但是我当时并没有看懂，只单纯地注释掉了自己config.toml里的首行“ baseURL = "https://example.com/"，但是并没能起什么作用。

最后呢？解决了。解决办法呢？F12键，也许这才是正确的调试办法吧。

既然说这是CSS样式的问题，那是不是CSS引用出现了问题，结合上面的解决记录，我试着将“ baseURL = "https://example.com/"改成了“ baseURL = "https://XX.github.io/" （XX是我github的用户名），也许这样CSS样式指向才正确。
果然，public里有index.html效果达到了，推送到Github也正常。

github怎么在网页上上传本地文件

第一步：建立git仓库
cd到你的本地项目根目录下，执行git命令

git init1

第二步：将项目的所有文件添加到仓库中

git add .1

如果想添加某个特定的文件，只需把.换成特定的文件名即可

第三步：将add的文件commit到仓库

git commit -m "注释语句"1

第四步：去github上创建自己的Repository，创建页面如下图所示：

点击下面的Create repository，就会进入到类似下面的一个页面，拿到创建的仓库的https地址，红框标示的就是

第五步：重点来了，将本地的仓库关联到github上

git remote add origin https://github.com/hanhailong/CustomRatingBar1

后面的https链接地址换成你自己的仓库url地址，也就是上面红框中标出来的地址

第六步：上传github之前，要先pull一下，执行如下命令：

git pull origin master1

敲回车后，会执行输出类似如下

第七步，也就是最后一步，上传代码到github远程仓库

git push -u origin master1

执行完后，如果没有异常，等待执行完就上传成功了，中间可能会让你输入Username和Password，你只要输入github的账号和密码就行了

最后附上代码上传成功后的截图：

谢谢大家！

参考技术A 　　1、注册github账号。
　　2、创建个人的github仓库，如图，
　　或者也可以进入个人中心去创建，
　　还可以直接点击右上角的“”+“”添加，
　　3、创建自己的Repository,如图：
　　4、新建完成后会进入类似于下面的页面，复制创建仓库的地址，如图：
　　5、打开本地git命令窗口或者cmd命令窗口，cd到你存放项目的根目录下，并执行一下命令行：
　　git clone 仓库地址(上面一步复制出来的地址)，如下图，是我复制我创建的仓库地址：
　　6、打开项目文件夹，会发现刚才在github里面新建的文件都存在本地了，如图：
　　将要上传的文件拷贝到这个目录下，拷贝完成后，再执行下命令git status，看git是否获取到文件的更改，如图：
　　7、再执行命令git add --all,将所有文件都添加到仓库中，如果想添加某一个文件，则将后面的--all换成你要提交的文件名即可。
　　8、然后还需要将增加的文件commit到仓库里去，执行命令git commmit -m "注释语句"，如图：
　　9、此时还没完，还要将commit的代码push到远程分支，由于我们本地只有master分支，所以我们可以直接执行命令git push，如图：
　　会让你输入用户名和密码，你输入你github登录的用户名和密码即可。
　　此时，刷新网页上新建仓库的地址，你就会看到新增的文件都已经成功上传到git上去了： 参考技术B 网页端只能在线编辑，要上传只能用Git解决