读前提示
教程链接:使用GitHub Page创建个人网站和博客 | GitHub 中文社区
点进网站就是非常详细的步骤介绍,基本按部就班来跟着做就OK了,结果不是很熟悉操作,踩了几个坑还是顺利搞定了。
踩坑后的建议:一定要先完成前置条件!学完入门教程、熟悉掌握GIthub使用机制再开始。
看到这里你就可以右上角点叉退出,自己跟着教程做了。
下面是本着写了都写了,不发白不发的原则上传的,中途会去坑里看看。
目录
- 读前提示
- 开始:创建Repository
- 步骤1:启用 GitHub Pages
- 1)点击您仓库的 **Settings** 菜单
- 2)进入设置后,点击 **Code and automation** 下的 Pages
- 踩坑记录:等待时间不足……
- 步骤2:配置您的网站
- 1)切换到`my-pages`分支,点击`_config.yml`文件
- 2)右上角有个编辑按钮,打开文件编辑器
- 3)写入配置内容
- 4)提交保存
- 5)等待20秒,刷新页面
- 踩坑记录:原因不明+瞎操作
- 踩坑:效果查看(第一次失败记录)
- 踩坑:重试步骤1(成功)
- 步骤3:自定义你的网站首页
- 1) 修改`index.md`文件
- 2)提交`my-page`分支中的修改
- 踩坑记录:提交错误分支
- 踩坑记录:提交了main 分支 ……
- 步骤4:发布一篇文章
- 1)到`my-page`分支,创建文件
- 2)修改标题和内容
- 4)等待20秒左右,刷新页面
- 步骤5:合并您的拉取请求
- 创建拉取请求
- 1)手动创建:点击顶部菜单`Pull Request`
- 2)点击`New Pull Request`
- 3)**base:** 下拉框中请确保选择的是 **main** 分支
- 4)选择 **compare:** 下拉框,并点击需要比较的分支
- 5)点击 **Create pull request**
- 6)输入标题和描述 (自动创建从这步开始)
- 7) 点击 **Create pull request**提交
- 合并拉取请求
- 1) 打开拉取请求
- 2)点击Merg Pull request
- 3)点击 confirm merge
- 4) 删除`my_pages`branch
- 5)效果查看
- 6)修改网页配置
- 踩坑记录:不了解pull request 机制
- pull request
- protect branch
- 完成!
开始:创建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)写入配置内容
- 为了使用
minima主题,我们在_config.yml文件里添加下面的内容
theme: minima
能够编写,把上面代码复制粘贴过去,按绿色按钮提交

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
---

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
![![[Github Page-20240619105016474.webp]]](https://i-blog.csdnimg.cn/direct/4e8720fee5054d08bb3a593ba8247b36.png)
2)点击New Pull Request

这里可以看到已经生成的My pages的PR(Pull Request) ,但是test-branch还没有,所以可以给test-branch建一个拉取请求。
3)base: 下拉框中请确保选择的是 main 分支
![![[Github Page-20240619111427805.webp]]](https://i-blog.csdnimg.cn/direct/914b0b2e72f541558333e9f095157f1b.png)
4)选择 compare: 下拉框,并点击需要比较的分支
这里使用的是test-branch分支,然后就可以看到一个Create pull requesst 的绿色按钮
![![[Github Page-20240619111707999.webp]]](https://i-blog.csdnimg.cn/direct/d19f1dea94a0488baac4a373c9acd502.png)
如果这里切换到my-pages分支,按钮显示的名字是View pull request, 因为是已经有的PR。
![![[Github Page-20240619111411840.webp]]](https://i-blog.csdnimg.cn/direct/e0e8955f31e34d1fab2fb0bbb41a1ca6.png)
5)点击 Create pull request
这步等同于点击黄色消息中的Compare & pull request
点击后出现下面的输入框。
![![[Github Page-20240619111852137.webp]]](https://i-blog.csdnimg.cn/direct/c980402e1f2f4555ae514a4d1d776537.png)
6)输入标题和描述 (自动创建从这步开始)
![![[Github Page-20240619112321833.webp]]](https://i-blog.csdnimg.cn/direct/5e142f07e9e74389b1c79b53b0532abd.png)
7) 点击 Create pull request提交
然后页面会自动跳转到你新建的拉取请求
![![[Github Page-20240619112358437.webp]]](https://i-blog.csdnimg.cn/direct/fb67eafa1137446a94473f191cda60aa.png)
合并拉取请求
1) 打开拉取请求
现在转到my_pages的Pull request上。

上图也可以看到,在Pull request页面下,先前给test_branch生成的PR,名字显示就是步骤6)的title。
2)点击Merg Pull request
![![[Github Page-20240619113224508.webp]]](https://i-blog.csdnimg.cn/direct/aa3c6fc4927d4e528eba4baf0f4572db.png)
3)点击 confirm merge
![![[Github Page-20240619113322588.webp]]](https://i-blog.csdnimg.cn/direct/5b1d765d0e2f456fa4fc9bc706e04931.png)
4) 删除my_pagesbranch
![![[Github Page-20240619113517962.webp]]](https://i-blog.csdnimg.cn/direct/70ebbab7ac184c389f46cb6baf8c4291.png)
5)效果查看
Code页面: Branches下拉框的my_pages分支已经被删除。

Pull Request中的My Pages 也消失不见

同步的刷新页面,也变成了404状态。
![![[Github Page-20240619113913932.webp]]](https://i-blog.csdnimg.cn/direct/30227b80b01743b8b4737dd15894bdce.png)
6)修改网页配置
前面踩了一堆的坑,走到这步终于明白了分支的作用,这里网站404是因为在前面的步骤里,setting-page使用了my_pages分支,现在my page 被删,网页也因此404了。
现在只需要切换回main,然后等待网页刷新。
![![[Github Page-20240619115301086.webp]]](https://i-blog.csdnimg.cn/direct/85dc267662a5474fa92b952c96430293.png)
踩坑记录:不了解pull request 机制
GitHub 快速入门教程 | GitHub 中文社区
pull request
这里还有一个是pull request 的坑。这个功能是github 用来同步不同分支文件。 不同的Branch分支类似于不同的文件版本,可以合并到main分支下面。如果点击并且提交就可能修改文件。
在创建文件过程中,这种提示或者选项会经常跳出来。
![![[Github Page-20240619002708160.webp]]](https://i-blog.csdnimg.cn/direct/1e4c40b53b644951b59a822e9455b5af.png)
如果中途不明不白,没忍住点击了提交,就可能造成混乱。T T
protect branch
还有个分支保护 Branch Protect 的功能,为了保护原始分支,防止它被强制修改。
About rulesets - GitHub Docs
![![[Github Page-20240619002450212.webp]]](https://i-blog.csdnimg.cn/direct/0d0d4a93bf9149a9a60d03c092e85a00.png)
完成!
完成所有步骤后,如果github中的README文件显示如下,就表示通过了!
![![[Github Page-20240619115551560.webp]]](https://i-blog.csdnimg.cn/direct/462e81a56f7142b1afd16e2f70fc5c10.png)




















