github pages 搭建个人博客

太过爱你忘了你带给我的痛 2021-07-29 03:00 610阅读 0赞

## 前言 ##

终于算是搭建完自己的博客了, 不容易啊, 这里特别感谢给我很大帮助的[博客][Link 1]的博主,–BYQiu 膜拜大佬, 一直想要一个自己的博客, 以前用的是 CSDN , 一开始用的还可以, 但是用着用着就有些体验就没有那么好了, 发布博客的时候不能第一时间就发布, 上传文件资源的时候, 还需要审核, 关键还被打下来了, 最最重要的就是觉得 CSDN 更新之后那个代码高亮显示感觉很丑, 反正种种之原因, 我毅然选择搭建自己的博客, 这样我自己想做什么, 自己操作就行, 自由度高, 自己用着也舒心.

## 关于GitHub Pages ##

这是它的官网介绍[GitHub pages][], 简单来说Github Pages 是 Github 免费给开发者提供的一款托管个人网站的产品, 现在只能托管静态内容, 但是博客就是静态的啊, 所以非常适合用来搭博客, 这样我们就不用为了搭一个博客,还去弄个服务器,到最后弄得一度怀疑人生, 这也是我要搭个人博客的一个主要原因, 因为用用它来达博客真的非常简单.

## 开始搭建 ##

### 主页效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjY4MTkz_size_16_color_FFFFFF_t_70]

### 使用GitHub Pages 建立博客 ###

这里就不介绍怎么创建 GitHub 了, 毕竟作为全球最大的同性交友网站, 想要搭博客的大佬们,大部分应该知道,我也懒嘛(٩(๑❛ᴗ❛๑)۶)如果兄弟们有要求的话, 还可以加上来的.

接下来我们就直接简单粗博一点, 点击 [RainbomSea.github.io][]

点击右上角的 **Fork** 拿到我的博客仓库

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtMy82MTA0MTMwMi5qcGc][]

Fork成功之后, 你就可以看到我的仓库已经复制到你的账号下了, 然后就是修改仓库名

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtMy8zNzcwOTczOC5qcGc][]

点击 **Setting** 把仓库名改成 `你的Github账户名.github.io` 点击 **Rename**

然后往下找到 `GitHub Pages` 一栏， 这里选择将你的仓库的主分支启用为`Github`页面

![e3r3ee.png][]

这时其实你的博客已经算是撘好了, 在浏览器输入链接 `你的Github账户名.github.io` 就可以访问, 不过这里我设置了域名的原因, 你可能还是访问不了, 你需要把`CNAME`文件里面的内容清空才可以

当然,现在看到的都是我的博客的内容, 如果不喜欢这个主题也可以找自己喜欢的, 如果想用自己的博客就可以不需要fork我的仓库了, 可以我仓库里面的内容全部删除, 然后把自己喜欢的博客的主题上传上去就行.

### 克隆仓库到本地 ###

博客算是搭建完了, 但要变成自己的内容, 还需要修改代码, 这里我们把博客克隆岛到本地来修改

为了方便我们把修改的内容上传, 我可以下载一个 Github桌面客户端 – [链接地址][Link 2]

下载完后我们打开软件首先需要登录, 输入GitHub账户和密码登录成功之后,把你的仓库克隆下来

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xNTYwNzc0Mi5qcGc][]

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC84NDE5NzMzOS5qcGc][]

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85NDczODI0MS5qcGc][]

克隆需要一些时间, 等克隆成功之后就可以在你保存的目录下看到你的仓库的文件夹了

### 修改仓库内容 ###

首先吧`CNAME`文件里面的内容清空,如果要设置域名,可以看我的下一篇博客[自定义域名][Link 3]

成功克隆仓库之后,我们就可以开始修改仓库内容, 让它变成自己的了

首先我们用自己电脑上的编辑器打开仓库(项目)文件夹, 这里我用的**Atom**(这是一款神奇的编辑器, 你值得拥有), 我们可以看到它的目录结构

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8yNjgxNTgyMC5qcGc][]

如果不想太多了解代码, 简单一些, 我们只需要改一点点就行

### 网站基本设置 ###

先来看 `_config.yml` 文件

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85MTIwNzUuanBn][]

这里一般都看的懂, 根据自己的来改就行

社交网络设置

然后就是看着

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xMzA3MDAyNy5qcGc][]

这里就是你其他的一些社交网络账户了网站与他对的就是下面这张图, 侧边栏也有

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85ODk5MDIxNC5qcGc][]

没有可以删除或注释掉, 如果有其他的那就写上, 然后打开`_includes`文件夹下的`footer.html`文件

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC81NTQ1NjYyNy5qcGc][]

找到图上面的代码, 复制图片中的两段中的一段, 粘贴到他们上面或者下面, 按照下图根据据自己情况来改

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xMDcyMTk0Ni5qcGc][]

然后还有在`_layouts`目录下的 `page.html`的 100行左右也按照上面的来修改一下

博客评论修改

然后就来看到`_config.yml`的这里

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC82MTk5MTA4MC5qcGc][]

这里是你关于博客的评论, 原博主讲的很详细了, 这里就直接引用一下[为博客添加 Gitalk 评论插件][Gitalk]

其他设置

其他还有就是 `_config.yml` 的 friends , `package.json, manifest` 根据自己的来修改还

剩下就是 `about.html, index.html, tags.html `的开头部分,更据自己的来改

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC81NjYxODgwNi5qcGc][]

还有就是图片都放在 img 文件夹下 另外你修改一下pwa/icons的图片, 改成自己涉设计的就行

### 上传图片, 查看效果 ###

修改完代码之后,我们就可以上传了, 打开GitHub,

![aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xNjcxODA1MC5qcGc][]

按照图片上的操作之后, 我们的博客就已经完工了, 可以访问自己博客的地址浏览看一下效果.

[Link 1]: https://www.jianshu.com/p/e68fba58f75c
[GitHub pages]: https://pages.github.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjY4MTkz_size_16_color_FFFFFF_t_70]: /images/20210728/ef0615682b8d40ccaae96357d745563a.png
[RainbomSea.github.io]: https://github.com/RainbomSea/RainbomSea.github.io
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtMy82MTA0MTMwMi5qcGc]: /images/20210728/e2adc163084745a584389945ff44ca5f.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtMy8zNzcwOTczOC5qcGc]: /images/20210728/4763655e9de645d1bf14323650615052.png
[e3r3ee.png]: /images/20210728/8b3cbb31872040f3bb4b94492316e31c.png
[Link 2]: https://desktop.github.com/
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xNTYwNzc0Mi5qcGc]: /images/20210728/f1b284a909984f9f92bbe3cc4d3fea05.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC84NDE5NzMzOS5qcGc]: /images/20210728/245fb006f2bf4dfa9727deac3599c8e6.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85NDczODI0MS5qcGc]: /images/20210728/280c7e39dec24f7483aec44c02e7b0d3.png
[Link 3]: https://rainbomsea.xyz/2018/10/06/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%9A%E5%AE%A2%E5%9F%9F%E5%90%8D/
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8yNjgxNTgyMC5qcGc]: /images/20210728/7f53bcdd1aa04aba847d2313f37caede.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85MTIwNzUuanBn]: /images/20210728/3b6f9df50abb401c98a1a69a264ba751.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xMzA3MDAyNy5qcGc]: /images/20210728/344546f0636e4129bf72b8241a33a628.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC85ODk5MDIxNC5qcGc]: /images/20210728/1f5ced9a517447c3b496754ebe910876.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC81NTQ1NjYyNy5qcGc]: /images/20210728/ecb36a390e874d19832a60ed2f0fc35a.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xMDcyMTk0Ni5qcGc]: /images/20210728/2290ffd60a584a6c8696ec215d96e892.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC82MTk5MTA4MC5qcGc]: /images/20210728/af800a40d2d5453893c350fbda1b4547.png
[Gitalk]: https://www.jianshu.com/p/78c64d07124d
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC81NjYxODgwNi5qcGc]: /images/20210728/c84e7e41e39946e8ac89b982b88588a7.png
[aHR0cDovL2JvbGctaW1hZ2VzLm9zcy1jbi1zaGVuemhlbi5hbGl5dW5jcy5jb20vMTgtMTAtNC8xNjcxODA1MC5qcGc]: /images/20210728/df5e7cbcbfb9440095b9fa7475db1017.png