如何在网上（利用github）发布自己制作的网页

   许多刚刚接触前端学习的同学在学习了HTML后制作了自己的网页，但HTML格式的网页只能在本地打开，今天搬砖老刘较大家如何创建免费的域名网站（GitHub）上传自己的网页。

一、前期准备工作：

1.注册GitHub账户    （这里自行搜索网址进行注册 网址放不出来）

2.下载安装git。下载地址:Git - Downloads

3.准备好自己制作完成的网页文件

二、GitHub域名创建

1.登录完成后点击右上角+号创建存储库并填写域名等信息（操作流程如下图所示）

  

 

2.点击页面最后的continue to layouts，然后就可以进入设置页面主题（可以随便选 后边会上传自己的网页把它替换掉），先选择一个主题，点击 publish pages。之后会生成一个网址 记住好自己的网址方便以后打开

三、利用git 进行上传操作（如果你在执行本步骤发生任何错误，请移步至下方 四、解决方案）

1.打开随便一个本地磁盘（这里以D盘为例）右键空白部分选择Git Bash Here

 2.执行以下命令，用来在d 盘创建 yinongkeji 文件放你的github上的yinongkeji repository，克隆yinongkeji repository到 yinongkeji 文件中。（这里的文件名可与之前你输入的的域名一致）

mkdir yinongkeji
cd yinongkeji/
 git clone https://github/yinongkeji01/yinongkeji.git

克隆的地址：

3.此时打开刚才D盘发现已经有了yinongkeji文件夹 并且里面有个 README.md文件 表示克隆成功

这个文件就是刚在创建的存储库里main分支里的内容，而我们需要编辑的是另一个分支——gh-pages，因为这个分支才能够真正定义github pages的内容和样式，也就是可以呈现你网页的地方。

4.输入以下命令，为了在本地新建一个gh-pages分支，而这个分支是远程分支origin/gh-pages的镜像，也就是我们可以在本地的gh-pages看到github上的gh-pages的内容。

 cd yinongkeji/
git checkout -b gh-pages origin/gh-pages

此刻再打开D盘中的yinongkeji文件夹就会发现文件内容已经发生改变（此时文件夹内容已经替换为gh-pages分支中的文件）5.执行如下命令，删除原有的gh-pages文件，并提交（commit）本次修改。

git rm -rf .
git add .
 git commit -m "delete all foles"

此时D盘中文件夹为空，现在我们将自己写好的网页内容复制到这个文件夹中。注：如果有多个HTML文件时将主页面命名为index 

5.输入如下命令，为了本地gh-pages中的网页文件同步到远程的gh-pages中。 

  git add .
 git commit -m "add yinongkeji"

git push origin gh-pages

 输入最后一行 git push origin gh-pages，按回车，等一会，会有弹出框让你输入你的 github 账号和密码。

 输入完账号密码过一会儿就上传完成啦！

6.此时此刻你就可以登陆你刚才创建好的域名，你就会发现它已经变成你设计的模样了！

四、可能出现的问题及其解决方案

 1.问题一：克隆失败！git clone出现 fatal: unable to access 'https://github/...

克隆失败解决（本人亲测有效）：在开启shadowsocks的前提下，手动配置git的代理。git客户端输入如下两个命令就可以了。

git config --global http.proxy http://127.0.0.1:1080

git config --global https.proxy http://127.0.0.1:1080

http://也可以改成sockets5://,但是区别在于：socks5不支持通过pubkey免密登录github，每次提交代码只能输入用户名和密码。http可以支持免密登录。

取消代理：

git config --global --unset http.proxy

git config --global --unset https.proxy

参考链接：(10条消息) git clone出现 fatal: unable to access 'https://github/...'的解决办法(亲测有效)_qq_33349365的博客-CSDN博客

问题二、在执行最后push操作时出现：remote: Support for password authentication was removed on ..........

解决：1、在个人设置页面，找到Setting

2、选择开发者设置Developer setting

3、选择个人访问令牌Personal access tokens，然后选中生成令牌Generate new token

 

4、设置token的有效期，访问权限等

选择要授予此令牌token的范围或权限。

要使用token从命令行访问仓库，请选择repo。
要使用token从命令行删除仓库，请选择delete_repo
其他根据需要进行勾选
5、生成令牌Generate token

6.记住自己的token 在输入密码时替换成为token即可

参考链接：(10条消息) remote: Support for password authentication was removed on August 13, 2021_IT博客技术分享-CSDN博客

以下是我设计开发的网页，供大家参考学习（由于本人水平有限 许多功能还没完善）

陕西益农科技有限责任公司 (yinongkeji01.github.io)