手把手教你使用GitHub Pages自动化部署，轻松搭建你的个人网站

2024-01-24 11:31:36

在GitHub这个代码托管平台上，构建自己的网站是一件非常方便且简单的事情，因为你只需创建一个仓库，然后将你的网站文件提交到这个仓库中，接着，GitHub就会自动帮你把网站部署到网络上，供全世界的人访问。
此外，GitHub 还提供了一种名为“Pages”的功能，它可以让你把网站部署到GitHub的服务器上，并自动帮你处理网站的部署工作，也就是说，你无需手动地把网站文件上传到GitHub服务器，然后在服务器上进行配置，让网站能正常运行。
在本文中，我将详细地介绍如何在GitHub上使用Pages功能，自动地部署一个静态网站。

步骤一：创建一个GitHub仓库

首先，你需要创建一个GitHub仓库，该仓库用于存储你的网站文件。

访问GitHub网站并登录你的账户。
点击页面右上角的“+”号，然后选择“New repository”。
输入仓库名称，然后点击“Create repository”。

步骤二：初始化你的网站仓库

接下来，你需要初始化你的网站仓库，以便能够添加网站文件。

在GitHub上打开你的仓库。
点击“Code”选项卡，然后点击“Create new file”。
在文件名输入框中输入“index.html”，然后点击“Commit new file”。

步骤三：添加你的网站文件

现在，你可以将你的网站文件添加到仓库中了。

将你的网站文件复制到本地计算机。
在终端中，导航到你的仓库目录。
执行以下命令将你的网站文件添加到仓库中：

git add .

执行以下命令提交你的更改：

git commit -m "Initial commit"

步骤四：启用GitHub Pages

接下来，你需要启用GitHub Pages，以便能够自动部署你的网站。

在GitHub上打开你的仓库。
点击“Settings”选项卡。
在“GitHub Pages”部分，选择“Branch”选项，然后选择“main”。
点击“Save”按钮。

步骤五：测试你的网站

现在，你可以测试你的网站是否能够正常运行了。

在终端中，导航到你的仓库目录。
执行以下命令启动一个本地服务器：

npm run serve

在浏览器中打开以下网址：

http://localhost:3000

如果你的网站能够正常显示，那么说明你的网站已经成功部署到了GitHub Pages。

步骤六：提交代码到GitHub

当你想更新你的网站时，只需将你的更改提交到GitHub，GitHub就会自动帮你把更改部署到网站上。

在终端中，导航到你的仓库目录。
执行以下命令将你的更改添加到仓库中：

git add .

执行以下命令提交你的更改：

git commit -m "Update website"

执行以下命令将你的更改推送到GitHub：

git push

步骤七：处理报错

在使用GitHub Pages部署网站时，你可能会遇到一些报错。下面是一些常见的报错及其解决方案：

404 Not Found ：该错误通常是由于你的网站文件没有正确提交到GitHub仓库中。请确保你已经按照步骤三中的步骤将你的网站文件添加到仓库中，并提交了更改。
500 Internal Server Error ：该错误通常是由于你的网站代码中存在错误。请检查你的网站代码，并确保它没有语法错误或其他错误。
DNS Error ：该错误通常是由于你的域名还没有解析到GitHub Pages的服务器上。请等待一段时间，让你的域名解析生效，然后再尝试访问你的网站。