Skip to main content

从0开始部署一个Github Pages

前言​

我们都知道，建立网站要经历一个长时间的过程，从设计开始，再经历coding过程，最后部署到线上。我们会写web网页，但是要想让我们可以通过网页访问，我们需要一个服务器，很长一段时间内，无论大小网页都需要服务器来处理，这个过程就是部署。但是，如果我们的是静态网页呢？不需要任何解析和数据交换，使用服务器还有意义吗？因此，静态网页托管服务出现了，很多大型互联网企业会为用户提供静态网页托管服务，并且大部分是免费的，省去了购买服务器和维护流程，部署上去就完事。Github Pages就是其中一员，它是一个静态网页托管服务，它可以把你的静态网页部署到Github上，这样，你就可以通过网页访问了。

🔔 几种静态网页托管服务对比

Github Pages | 免费，可以灵活的自定义域名，可以使用Github Action持续集成（非常好用，本站使用了它）。缺点：服务器在境外，国内访问速度慢，不过使用微博图床插件可以解决资源加载速度慢问题。
CODING | 国内代码平台，UI好看，但是变相收费，目前不提供托管服务了。
gitee | 国内托管平台，前些日子关闭了所有开源仓库，需要实名认证才能操作，不能自定义域名。
腾讯云服务 | 国内服务器大头，不过静态网页托管依赖小程序云环境，没有小程序还是算了，不能自定义域名。
另外还有NetLify、阿里云等

Github Pages为Github提供的一项静态网站托管服务，它直接从Github仓库获取静态文件进行构建并发布，然后提供一个github.io的二级域名供用户访问，支持绑定自定义域名，支持开启HTTPS，开启HTTPS会自动申请证书同时在证书过期前自动续签，这一切都是免费的，使用起来极其简单，只需要将你的代码和文件提交到Github，然后开启Pages服务即可，本博客站就托管于Github Pages。

本文将从最基础最简单的操作讲述如何从0开始部署一个静态网页托管服务。建议先看附录！

一、注册Github账号，安装Github Desktop​

首先，Github处于“半墙”状态，看它主页你就知道为什么了...因此你很可能无法访问，那么你需要一个boost或者ladder。
搞定ladder之后，进入Github，选择注册，按照流程来就可以。
注册完毕之后，访问Github Desktop并安装到桌面，我为什么推荐使用这个呢，因为它是一个简单的桌面版Github，可以支持所有的Github功能，比如提交代码等等。对于没使用过git工具的人来说，图形界面一定要比命令窗口友好的多，由于本文是从0开始，那么我们就用最简单的。如果你有兴趣使用git工具，参考git教程。

二、新建仓库​

在Github中，点击右上角的“+”，选择“New repository”。
1654389739458.png 取一个名字，并将仓库设为public，勾选生成README.md文件。
1654389808112.png 点击“Create repository”。其他不用管。
1654389869019.png 如下，就建好了。
image.png

三、使用Github Desktop将仓库克隆到本地​

打开Github Desktop。
1654389990656.png
按照提示，跳转到浏览器登录。登陆完成后可看到下面的界面。
1654390091831.png
点击File->Clone。
1654390155573.png
选择仓库名。并指定放在本地一个空文件夹。
1654390214688.png
点击Clone。在刚才的路径就可以看到了。
image.png
Github Desktop也出现了文件管理器。

四、将你的代码放入仓库并Push到github​

打开生成的文件夹，将你的代码文件以及所有文件夹复制进去。
image.png

⚠ 警告

你必须将网站的主页命名为index.html，否则会出现404错误。并且index.html只能在文件夹根目录！！！

打开Github Desktop。这时你可以看到更新了仓库。
image.png
填写下面的版本信息，随便填。并提交。
image.png
点击Repository->Push。提交到Github。
1654390664950.png
提交成功！
1654390704321.png

五、设置GithubPages​

进入Github，查看文件是否已经提交上来了。
1654390776750.png
提交成功后，设置GithubPages。
点击Settings->Pages。
image.png 1654390880541.png 将source改为main,点击save。
image.png 出现提示表示设置成功，稍等片刻。
image.png 可到Actions查看进度。
1654391015260.png 部署成功！
image.png image.png 点击网页进入。
就可以看到我写的内容啦！
1654391093680.png

六、怎么维护和更新代码？​

你只要在本地的文件夹内编辑好文件，再打开Github Desktop，在没有冲突的情况下，提交即可。

附录：如果文件很少怎么办？​

我只想上传一个index.htnl，还需要安装github desktop吗？答案是不需要的！你只要选择上传文件即可，再点击下面的保存，但是，文件逻辑顺序一定要对。如果你要上传大文件，这个方法不行。
什么？你的网站还没开始写？那就别装github desktop了，直接在github上coding！将链接中的.com改为.dev，打开线上vscode，在里面即可完成编码过程。
1654391365480.png image.png

👀你学会了吗？