使用github搭建博客

Categories:  Tool 2022-11-20

使用github搭建博客

本文主要介绍基于github+jekyll搭建个人博客基本流程.

基本流程

1. 找一个喜欢的github博客(各种xxx.github.io),将对应博客仓库fork到自己仓库
   1. 其实可以先创建一个原始的练练手, 但是最一步到位的还是找个模板改

2. 将仓库改名为username.github.io(username为自己github账户名), 在Settings->Pages->Build and deployment里配置根据build对应分支 修改仓库的About, 主要是博客名称,和访问链接(即username.github.io)

3. 这是已经可用直接在浏览器通过username.github.io访问仓库.然后我们需要自定义博客的样式. 主要是通过修改_config.yml来定制属于自己的页面展示信息, 例如博客展示的名称, 将一些跳转按钮的url改成自己的.

4. 自定义gitalk信息, 将评论区跟自己的仓库绑定. 基本流程参考:Gitalk的配置和安装说明 - 不忘前行 - 博客园 其实直接全局所有关键字gitalk, 然后根据上文中提到的格式修改即可. 注意: 如何没开issue, 需要开一下issue, 然后发一条issue.

5. 博客基本框架已经搭好了,然后在post文件夹下用md写博客即可

文字枯燥, 基本流程可以参考这个视频, 真正保姆级视频, 其中对于如何一步步修改_config.yml文件有详细的操作展示:(136) How to make a personal website with github pages - YouTube

博客模板

附上我使用的博客模板, 感谢tw93大佬,tw93/tw93.github.io: 🧗‍♂️ Tw93 的个人博客 / 形而上班 模板特点

• 对移动端支持良好, 并且自动生成每篇文章的二维码

  配置修改细节

  修改Favicon.ico图标

  改成自己的图标 ```

图标挑选:[Material Filled风格的角色图标，适用于平面设计和用户界面设计。](https://igoutu.cn/icon/set/%E8%A7%92%E8%89%B2/material)

### gitalk出现Validation Failed

参考解决方案: [(19条消息) gitalk Error: Validation Failed\_death05的博客-CSDN博客](https://blog.csdn.net/death05/article/details/83618887)

简要来说就是博客id太长, 超过github创建issue的50个字符限制,导致创建失败,因此我们可以将id使用md5编码,进而控制长度可用

## 博客写作

### 固定前缀
博文需在在前面加固定前缀, 示例如下

layout: post title: JavaScript的加载和执行性能优化 date: 2015-02-03 11:21:29 summary: 管理浏览器中的JavaScript代码是一个棘手的问题，因为代码在执行过程中会阻塞浏览器的其他进程，比如用户界面的绘制。每次遇到script标签，页面都必须停下来等待代码下载（如果是外链文件）并执行，然后继续处理其他部分。尽管如此，还是有一些方法减少JavaScript对性能的影响 … categories: JavaScript — ```

Buy Me a Coffee !