记一次github博客的搭建

记录一下个人博客搭建过程中遇到的问题。

github博客搭建

参考 https://www.cnblogs.com/wxyww/p/xiaoshujiang.html

申请仓库，克隆主题文件，选主题花费了我大量时间。

这里比较简单吧~~~

 

主题修改

Edit

1. _config.yml for base information
2. _posts for articles, keep the name in right style
3. assets/image for ico images
4. _includes/side-panel.html for pictures of background and author.
5. _includes/head.html for ico

 

来自 <https://github.com/Duola-li/Duola-li.github.io>

 

 

md推送

使用小书匠推送md。需要获取token，权限也会给出必要的要求。

这样每次写新文章，直接写md，然后推送到_post中就好了，不过要注意命名和备份。

命名规则：YY-MM-DD-Title.md

比如 2020-02-18-Markdown学习笔记

后发现小书匠经常上传错误，可能是github的原因，但是行号，等等设置极其不方便，准备换了。据说vscode非常好，准备试试。

 

种草 vscode https://www.jianshu.com/p/cb8d2194d5ef

 

图床搭建

参考：https://www.jianshu.com/p/6807a3646a9b

其实和搭建博客一样，上传项目，开启pages服务。而且这次使用的码云，非常方便，访问速度也快。

同样码云图床申请token，在小书匠中进行配置，能够直接上传图片并字典插入绝对地址以供博客调用。非常方便。

简单弄了个展示页 https://octan3.gitee.io/images_bed/，

这里的图片批量上传，需要顺序化命名，并且要png，静态网页嘛~

有个工具批量修改文件名字非常好：图片名字修改工具  renamer(jb51.net)

 

 

思维导图展示

需求：编辑思维导图，方便快捷的发布到博客上。最好固定地址，不要每次上传一张图片。

而且小书匠提供生成思维导图，虽然是html格式的图片（src用base64）

4条路走。

1. 最开始是小书匠默认的附件生成，发现无法引用，因为地址是相对地址，而博客会根据时间解析地址，导致附件的地址错误。
2. gitee图床存储。发现不能访问，感觉是跨域请求。
3. 又改回github，在assets/images/文件下。单独请求可以，但是文章中不行。(原来是网页中的src标签不支持引用html格式的图片，给小书匠提了意见也没接受，奇葩的脑回路)
4. 使用processon，可以使用各种主题，重复编辑，固定发布图片地址。

 

速度优化

谷歌浏览器F12，network分析，发现最慢的是下面这三个：jQuery，字体，mathJax。因为原网站在国外，所以访问速度慢。使用国内的CND镜像版本可以提高访问速度。

很多web资源可以从下面网站中调用。

https://www.bootcdn.cn/font-awesome/

https://www.bootcdn.cn/mathjax/

https://www.bootcdn.cn/Jquery/ 

jquery在external.html,其他两个在_includes/header.html文件中使用。替换掉对应版本就好。

 

评论系统

综合对比，使用gittalk。因为disqus国内不能访问~

https://www.jianshu.com/p/e58beec4dfd1

其中把js和css也用bootcdn优化了一下。

弄完之后随便去一个博客，登录系统创建issue就行了。