GitHub Pages 网页部署指南

当我们在本地做出了一个网站之后，想要把它部署到网上，让其他人可以通过网址来访问这个网站，该怎么做呢？

通常，我们会想到租借一个服务器，在上面就可以存放我们的网站内容。但是这样做非常复杂，并且资金消耗也巨大（而且很多时候只能用爱发电）。如果我们制作的网站不是一个规模非常巨大的网站时，我们也可以考虑把我们的网页文件托管到一些免费托管服务平台上。这个时候我们就可以在这些托管平台的域名之上部署属于自己的网站。Github Pages就是这样一个网站。

例如以上情况，我们自己手动写了一个Hello World网页，并将其托管到了Github Pages上（放进了一个仓库）。此时我们就可以在昵称.github.io的域名之上访问到我们的仓库以及仓库中的网页。

以下是具体步骤

一、在GitHub上创建仓库

先登录GitHub，来到仓库页面，点击右上角绿色的New按钮创建一个新的仓库。

取一个仓库名字，设置为public，不要勾选Add a Readme File。然后点击创建，创建完毕后如下图。

二、在本地创建仓库

在创建仓库之前要先确保你已经设置过了ssh密钥。如果还没有设置的话可以查看我之前一篇文章个人博客搭建指南上的第六部分【创建GitHub仓库】的前半部分内容进行设置。

创建完成后，我们可以在本地选择一个文件夹，作为网页的仓库。然后在这个文件夹下git bash（没有安装过git的可以看个人博客搭建指南上的第一部分内容），复制刚刚GitHub仓库界面的…or create a new repository on the command line部分的代码，如下：

可以出现如下结果

然后，在这个文件夹下创建一个简单的html网页。新建一个txt文件，并把它的名称包括后缀一起改为index.html（只有名为index.html的网页文件才会最先显示）。然后使用vscode打开这个文件。在文件中按下英文叹号"!"，然后会显示代码提示，按下回车，就可以建立这样一个简单的网页代码框架。

(如果没有显示也可以直接复制以下代码)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

然后可以在body部分输入一串内容，比如Hello World，如下

这样一个简单会显示hello world的网站就做好了。

然后我们打开git，将这个文件上传到GitHub上。

1
2
3

git add *
git commit -m "index.html"
git push

这个时候刚刚的GitHub仓库中应该就可以出现刚刚上传过的网页了。

三、部署网页

接下来就需要使用GitHub pages功能部署刚刚上传的网页。

来到这个仓库上面右端的Settings，并点击左侧的Pages，来到如下页面

点击Branch中的None，选择main分支，然后点击save。

这个时候就可以点击页面上方的Action栏，点击里面的pages build and deployment，就可以进入到网页部署界面。

如果deploy还没有完成（未显示绿色勾），可以等待一会。在部署完成后，在deploy中就会显示刚刚部署的网页的网址。点击这个网址，我们就可以来到刚刚部署的网站了。