Deniffer's 博客搭建与优化

Deniffer‘s 博客搭建碎碎念

折腾了两天终于弄好了，我的个人博客又双叒叕跑起来了，由于之前云服务器过期的教训，我不想再把博客部署到云服务器上，而是想找一些可靠的静态资源托管服务， 所幸我找到了一些好的方案，但是离我最理想状态下的方案还是有一定的距离。但是如果再投入人力在博客搭建这方面，我觉得ROI(Return On Investment, 投入产出比)太低了，博客的本意是想让我们更加投入精力到文章的创作上，而不是折腾这些（花钱世界可达）方面上，所以也算是一个总结吧，让后来的人少走一些弯路，多花点时间在文章的写作上。

先聊聊目前选择的编辑器

Typora or VSCode or 飞书文档

 其实这三个里面我最喜欢的编辑器是typora， 原因我就是用它来写MarkDown体验实在是太好，完全是沉浸式创作。 其次,就是飞书文档我觉得也是不错的，无论是历史编辑记录还是即时渲染，我觉得都是创作者很想要的功能。 再然后就是VSCode，说实话，我从大三就开始用VSCode 做考研笔记了，在code snippets的帮助下写起各种latex语法也是很舒服的。但是之后因为入了typora的坑 以及工作中更多是在飞书文档中写东西，所以也很久没在VSCode上写了， 我觉得VSCode 比不上Typora 和VSCode的地方在于，他的即时渲染功能是和编辑是完全分开的，所以导致你如果想要看渲染后的效果这一个行为，就多了一步。
  然后聊聊对博客很重要的图片上传功能， 这三者都支持上传图片，在这里面我觉得做的最好的还是VSCode，如果使用PicGo的话，可以很好的对图片做布局上的优化. 所以我最后还是选择了typora hhh,毕竟颜值各方面都很能打.

静态博客平台的选择

hugo or hexo or other

  其实我用过的静态博客平台就只有hexo和hugo,其他没试过 感觉也是大差不差的。就我个人角度来说,我会更倾向于使用hugo,因为他真的太快了,快到真的你hugo 一下他就全都生成出来了。 这对于文章很多的人来说,这个点就很关键了。而且hugo的使用还是蛮简单的, 也有很多好看的主题, 我的博客就是使用hugo生成的, 并且使用的是FixIt主题。

关于部署

折腾了很久还是选择了阿里云OSS + CDN (和GitHub Page + CDN 做backup)的方案

  之前我的博客一直是部署在阿里云的服务器上的,由于我的服务器只用来挂博客,我觉得太亏了没必要, 之后就没有继续续费。 导致我之前的博客过期了, 让一些看我B站视频的同学无法访问我的博客,给我带来了许多困扰。 这次我吸取了教训, 寻求更廉价可持续的方案。 于是在我一顿搜索之后, 我发现阿里云OSS也是可以挂载静态网站的, 我大喜之下直接开冲, 因为如果可以挂载在OSS上的话, 按照我目前博客的流量来说 我觉得可能一年也花不了我几块钱。
 最后我成功地将博客放在了阿里云OSS上，并写了一个脚本，一键上传。 但是我发现，挂在OSS上，国外的访问速度不太尽人意， 以及想到阿里云OSS也有一定几率会挂掉的考虑，我决定同时在Github Page 也部署一份， 这样可以有一个backup的方法。我最初的想法是用同一个域名"blog.deniffer.com" 从DNS解析入手，如果是国内的解析就走OSS的网站， 如果是国外的解析就走Github Page 的网站，这样就能保证速度的问题。理想很美好，但是现实很骨感，我一顿操作下来发现，Github Page 并不支持这样做。于是我只能退而求其次，让Github Page指向另外一个域名,做完全冗余的备份，并且套上CDN，让国内也有不错的访问体验。试试Github Page的访问速度吧

其实如果我不追求访问速度的话，理论上Github Page 就已经完全足够用了，但是字节范里面有一条“追求极致”，因此我还是选择了以OSS为主，Github Page 作为Backup的方案，当然这套方案还是不够理想，如果能找到上面理想方案的解法，我觉得就更好了(不过理想方案也有一点不好的地方,在于没有backup)

Hugo 踩坑

• Hugo默认生成的public 只会增量更新!! 如果你一开始使用的是Hugo server -D production的话, 你会同时渲染草稿的html, 这是一个很坑的点, 然后也会将对应的草稿上传, 不过在主页面看不到罢了
• Hugo能支持的图片路径, 可以选择在static目录下新建一个img的文件夹存放文件, 然后在文章里面用/img/xx.png引用即可, Hugo在生成html的时候会将整个static目录复制到public目录下, 其次如果你在文章这样引用的话,其实编辑器是无法识别到该图片的, 如果是使用typora的话,可以在toc上面加一个typora-root-url 指向static目录, 注意这里可能根据每个文件所在的目录不同,建议从根目录下开始比如: /user/blog/static 这样
• 由于我需要同时上传github和oss 我写了个脚本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

cd blog/
#scp -r public ubuntu@server.deniffer.com:/var/www/
rm -rf pubilc/
hugo

scp -r public/*  deployGithubPage
## 更新Github Page
cd deployGithubPage
git add .
git commit -m "update blog"
git pull
git push

cd ..
## 全量更新 update oss blog
./ossutilmac64 rm oss://deniffer-blog --include "*" -rf
./ossutilmac64 cp -r public --recursive oss://deniffer-blog

关于网站的优化

  这我觉得算是最重要的点吧,因为你肯定不想别人想看你的博客,输入网址过后,半分钟过去了还一点反应都没有, 也是我最近花最多时间的地方, 因为我真的想把博客做成秒开的那种,由于我目前博客网站需要的资源不多, 所以我觉得还是有希望的。 工欲善其事，必先利其器, 我首先要介绍的是

• Google家的网站分析, 输入你的网站进去,他会告诉你,你的网站在PC端和移动端的表现,而且也会告诉你到底是什么导致你的网站加载缓慢。 你可以根据他的提示,做对应的修改。
• 学会用F12,看输入网站之后,你的网站到底请求了什么资源,如果是不需要引用的资源,可以直接关掉. 其次是看究竟是什么导致的加载慢
• 学会使用Nginx, 开启Gzip等压缩算法
• 将图片等资源放到CDN上

  • 优点:

    • 就是访问速度会变快
    • 图片资源会有对应图像处理逻辑（只要你的OSS存储设置了对应的功能，能极大的降低图像的大小）。
    • 对应在写文章的时候，就不需要每个文章单独一个文件夹了，每个文章可以只是一个md文件
    • 可以比较方便地迁移到托管网站

  • 缺点:

    • 图片等资源和文本资源不在同一处，迁移过程可能会比较麻烦，
    • 有一定的费用开销
    • 访问速度相对较慢