0
0

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

读前提示

  • 教程链接：使用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

能够编写，把上面代码复制粘贴过去，按绿色按钮提交
在这里插入图片描述

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_pages

branch

![![[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)

标签： github github page 笔记
本文转载自: https://blog.csdn.net/WHYbeHERE/article/details/140378572
版权归原作者 Avasla 所有， 如有侵权，请联系我们删除。
登录后发布评论

“如何使用Github Page搭建个人网站【踩坑实录&多图预警】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航