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

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

读前提示

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

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

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

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

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

目录

读前提示开始:创建Repository步骤1:启用 GitHub Pages1)点击您仓库的 **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 request3)点击 confirm merge4) 删除`my_pages`branch5)效果查看6)修改网页配置

踩坑记录:不了解pull request 机制pull requestprotect 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

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文件显示如下,就表示通过了!

相关推荐

【金城江区酒店预订】金城江区酒店价格查询,金城江区酒店网上预订
什么是品牌维护 如何着力做好知名品牌维护
365正规网站是多少

什么是品牌维护 如何着力做好知名品牌维护

📅 08-30 👁️ 4336
杂俎的解释
365正规网站是多少

杂俎的解释

📅 08-05 👁️ 9343