如何使用Github Page搭建个人网站【踩坑实录&多图预警】_github pages

读前提示

• 教程链接：使用GitHub Page创建个人网站和博客 | GitHub 中文社区

• 点进网站就是非常详细的步骤介绍，基本按部就班来跟着做就OK了，结果不是很熟悉操作，踩了几个坑还是顺利搞定了。

• 踩坑后的建议：一定要先完成前置条件！学完入门教程、熟悉掌握GIthub使用机制再开始。

• 看到这里你就可以右上角点叉退出，自己跟着教程做了。

• 下面是本着写了都写了，不发白不发的原则上传的，中途会去坑里看看。

---

开始：创建Repository

点击绿色按钮，输入账号密码后，全部默认设置不懂，全点确认，完成后页面自动跳转。

步骤1：启用 GitHub Pages

下面是官方步骤一的说明

1）点击您仓库的 Settings 菜单

2）进入设置后，点击 Code and automation 下的 Pages

3）请确保 Source 下拉框选择 “Deploy from a branch”，Branch 选择 main

已经默认设置好了，这步没有其他操作

4）点击 Save 保存

上面弹出蓝色消息，表示保存好了。

然后没什么动静……也没有网址链接。

踩坑记录：等待时间不足……

这里教程提示说，会有网站的链接地址出现， 但是上面根本没有找到。。。(可能就是当时没等够时间)

步骤2：配置您的网站

1）切换到my-pages分支，点击_config.yml文件

回去到仓库页面，上面第一个黄框，分支这里一定要切换，原本默认显示是main，切换了才能找到下面的文件，不切换没有

【吐槽教程为什么不配图，没图不熟悉的操作起来真的就跟睁眼瞎一样，也没找到其他的视频教学过程。】

2）右上角有个编辑按钮，打开文件编辑器

盲猜是这只笔。

3）写入配置内容

1. 为了使用minima主题，我们在_config.yml文件里添加下面的内容

   theme: minima
1

能够编写，把上面代码复制粘贴过去，按绿色按钮提交

4）提交保存

这时会弹出一个确认信息框，继续绿色按钮确认提交

不用再去搞其他东西！！！

5）等待20秒，刷新页面

下面是主题修改的前后对比。
（PS: 这一步是后面补的，主页内容有变化）

踩坑记录：原因不明+瞎操作

踩坑：效果查看（第一次失败记录）

提交了配置文件后，好像什么事都没发生，说好的网址没出来，又回去主页面

踩坑：重试步骤1（成功）

接着回去setting页面，把步骤1从走了一次，这次网页终于生成了。

就是图中的设置：Deploy from a branch 下面一行选择main然后按save 保存。
这次保存完，就弹出了上面的网址。
如果选错了，就不会有网址弹出来。第一次尝试可能是等待时间不够，所以没有成功。

页面显示如下：

步骤3：自定义你的网站首页

1） 修改index.md文件

同样，打开文件后点击右上角的编辑按钮——那支笔。

编辑模式状态下，可以修改内容。内容修改后，绿色按钮"commit changes"才可以被点击，否则就和下图一样，为不可点击状态。

2）提交my-page分支中的修改

这步开始误以为直接修改文件就可以同步更新网站了。

编辑完，还是要去到Setting，提交“my-pages”的修改。

这步如果没有提交，或者提交错了分支，网页都会变得很奇怪。这部分的踩坑记录记在文章末尾。

踩坑记录：提交错误分支

不同的Branch（分支）类似于不同的版本。这里注意到“Branch” 选项下面其实还有’Main’, ‘None’ 的选项，踩过坑后发现，选择哪个分支提交，网页就会根据分支下的文件设置更新网站

踩坑记录：提交了main 分支 ……

选择”Main“ 会根据Main分支的内容更新网站。 因为网站没有index文件，所以根据规则会显示README 文件。

页面如下：

步骤4：发布一篇文章

1）到my-page分支，创建文件

点击目录右上的+号，create new file。

2）修改标题和内容

• 文件取名格式为 _posts/YYYY-MM-DD-title.md
• 将下面的内容放于文件顶部

---
title: "YOUR-TITLE"
date: YYYY-MM-DD
---
1
2
3
4

3）提交修改

4）等待20秒左右，刷新页面

网页上出现了新的文章标题

文件格式front matter配置说明：Front Matter | Jekyll • Simple, blog-aware, static sites

这步很顺利，没有踩坑的。

步骤5：合并您的拉取请求

这步骤分为创建、合并、删除三个步骤，目的是把my-page分支的内容合并到main分支上。

创建拉取请求

如果上面步骤都正常顺利的情况下，会自动生成类似下面的这条黄色消息。点击 Compare & pull request 会自动创建拉取请求，然后我们直接跳到下面的第6步。否则我们将手动创建，请跟随下面的说明。

在这步之前，我已经点击了My pages的这条消息，自动创建拉取请求。（当时不知道是什么用的，踩了一堆坑。) 所以，这里另外创建了分支test-branch做演示记录。

1）手动创建：点击顶部菜单Pull Request

2）点击New Pull Request

这里可以看到已经生成的My pages的PR（Pull Request) ，但是test-branch还没有，所以可以给test-branch建一个拉取请求。

3）base: 下拉框中请确保选择的是 main 分支

4）选择 compare: 下拉框，并点击需要比较的分支

这里使用的是test-branch分支，然后就可以看到一个Create pull requesst 的绿色按钮

如果这里切换到my-pages分支，按钮显示的名字是View pull request, 因为是已经有的PR。

5）点击 Create pull request

这步等同于点击黄色消息中的Compare & pull request
点击后出现下面的输入框。

6）输入标题和描述 （自动创建从这步开始）

7） 点击 Create pull request提交

然后页面会自动跳转到你新建的拉取请求

合并拉取请求

1） 打开拉取请求

现在转到my_pages的Pull request上。

上图也可以看到，在Pull request页面下，先前给test_branch生成的PR，名字显示就是步骤6）的title。

2）点击Merg Pull request

3）点击 confirm merge

4） 删除my_pagesbranch

5）效果查看

Code页面： Branches下拉框的my_pages分支已经被删除。

Pull Request中的My Pages 也消失不见

同步的刷新页面，也变成了404状态。

6）修改网页配置

前面踩了一堆的坑，走到这步终于明白了分支的作用，这里网站404是因为在前面的步骤里，setting-page使用了my_pages分支，现在my page 被删，网页也因此404了。

现在只需要切换回main，然后等待网页刷新。

踩坑记录：不了解pull request 机制

GitHub 快速入门教程 | GitHub 中文社区

pull request

这里还有一个是pull request 的坑。这个功能是github 用来同步不同分支文件。 不同的Branch分支类似于不同的文件版本，可以合并到main分支下面。如果点击并且提交就可能修改文件。

在创建文件过程中，这种提示或者选项会经常跳出来。

如果中途不明不白，没忍住点击了提交，就可能造成混乱。T T

protect branch

还有个分支保护 Branch Protect 的功能，为了保护原始分支，防止它被强制修改。

About rulesets - GitHub Docs

完成！

完成所有步骤后，如果github中的README文件显示如下，就表示通过了！