通过github pages+hexo搭建个人博客

前言

最近疫情封控在家，闲暇之余又开始折腾起网络来，主要是基于家里面的群晖NAS设备，初衷就是想尽可能把这台DS920+充分利用起来，通过在群晖里成功搭建Chevereto图床、Lsky兰空2.0图床以及Minio对象储存服务，并利用github page搭建个人博客网站，同时利用了cloudflare的DNS解析和CDN加速实现了全站https访问。

一、通过github pages+hexo搭建个人博客网站

很久之前为了看看世界，接触了VPS，本着不浪费的原则，研究了个人博客网站的搭建，当时用了wordpress和typecho，功能很多，插件丰富，但是还是觉得太麻烦和臃肿了，个人博客网站颇有大材小用感觉，而且wordpress原生也不支持markdown，这次就采用了免费的githubpage+hexo博客框架进行搭建。

具体搭建方法参照的GitHub Pages + Hexo搭建个人博客网站，史上最全教程 这篇文章的步骤，还是非常简单。记录一下关键之处以免后期遗忘：

（一）github仓库的创建

注册登录github，创建账号这些常规操作就不说了。然后点击右上角的新建仓库。

仓库名字一定要和自己的用户名一模一样，<用户名>.github.io 这其实就是你的个人博客默认网址。

然后点击创建仓库即可。其余步骤参考链接里面说得非常清楚，我这里只是记录一下自己搭建过程的关键步骤。

（二）准备本地环境（nodeJS、GIT）安装hexo框架

Hexo博客依赖nodeJS环境，在nodejs官网 下载安装即可，默认就会安装npm环境，mac和win版本都有，因为我自己家里面是mac，办公室是win环境，我都安装了。
Git安装教程更多，不再赘述。
安装hexo框架就是咔咔在终端复制代码就搞定，不再赘述。

（三）更换为fluid主题

看了一下，博主推荐的fluid主题确实不错，我也选择了这个，安装方法用的fluid 官方推荐的方法一：通过 npm 直接安装，这种方式后期有了新版可以一键更新。整个界面还是非常简洁流畅舒适的。

（四）主题配置（！！！这里有大坑，搞了好久）

按照参考链接的教程和fluid官方wiki，想要实现“网页统计”、“展示PV和UV统计”、“阅读量统计”、开通评论功能等等。
要实现上述的统计、评论等功能，需要注册 Leancloud 免费服务来实现。
注册leancloud时候，一定一定一定要选择国际版，我之前就是跟着教程选了国内版，一直有问题。

这里注册完国际版的leancloud之后，创建应用，点击设置，在应用凭证里面记录下APP ID、APP KEY，和服务器地址API（这里这个地址要做一个域名解析，后面马上会说，这个也很有用，不然很有可能评论模块加载不出来，我被困在这里好久。）

以上信息记录好了之后，就开始搭建评论管理模块、对应用凭证里面的api服务器地址进行解析。

这里你就需要一个域名了，域名注册也很简单，好几年前刚刚开始折腾的时候找过免费域名注册网站，google上可以搜到很多，现在我个人推荐还是腾讯云买域名吧，就买最便宜的，我这个.asia后缀的一年几块钱，腾讯云的域名用dnspod解析，并且可以自动免费签发ssl证书，对我这样的小白来说再好不过，实在不想自己再去折腾SSL证书配置这些。

当然这个个人博客网站本身的解析我又另外再注册了一个域名，用cloudflare的DNS来解析，免费白嫖CF的CDN（因为github.io国内访问会抽风），也可以全自动开启全站强制https非常方便。

因此我最终注册了2个域名，一个用来专门访问博客，另外一个就用来给群晖和leancloud服务使用，包括后面在群晖内自建的mino对象储存、Chevereto图床、Lsky兰空2.0图床等生成的外链都可以直接访问，暂时不需要运营商付费的OSS服务啦。

这一步完成后，按照参考教程和fluid主题官方文档 的说明，将leancloud的中获取的APPID和APPkey填写在主题配置文件_config.fluid.yml的对应位置即可。

以上完成之后，在我自己测试过程中发现2个问题，一是经常有时评论区域不显示，二是没有专门的后台评论管理界面。第一个问题我发现是因为没有在_config.fluid.yml主题配置文件中填写leancloud的reset-api，即server_url: 这一栏要填写你在leancloud中取得的服务器地址。

这里的地址leancloud会默认生成一个，我个人觉得为了更快解析，还是用刚刚注册的域名对其做一个国内的CNAME域名解析服务，这个操作很简单，我直接用腾讯云自带的DNSPOD新增一个解析即可。

上图就是解析成功后的API访问域名，也就是你需要填写到fluid主题配置文件_config.fluid.yml中leancloud的server_url的位置。这样就不会出现评论区时而加载不出来的情况。

针对第二个问题，后台评论管理系统，这个也很简单，由于我选择valine评论系统，具体怎么配置这里主要参考了这位黑石博客大佬的教程 ，里面大佬已经说得很详细了，我这里就自己记录一下最需要注意的地方。
仍然进入leancloud的后台，在云引擎-部署里面选择部署项目，填写黑石博客大佬提供的valine-admin-server
https://github.com/heson525/Valine-Admin-Server

云引擎部署成功后，在leancloud设置-域名绑定中绑定用于进入博客评论系统后台管理界面的域名，这里推荐使用刚刚在腾讯云中购买的域名，加上leancloud前缀，添加一条CNAME解析即可，非常简单。最终访问评论后台的域名为，例如：https://leancloud.xxx.com

域名解析完成后，按照黑石大佬的教程，根据自己的需要，在云引擎里面添加环境变量，即可以实现邮件通知等功能。下面是我自己配置好的valine评论管理后台界面，里面可以自由删除、查看评论消息：

最后，注意一下黑石大佬在文章最后说的如何解决LeanCloud流控问题，参照他的教程在github中使用GitHub+Actions大法设置一下即可，很简单，不再赘述。

（五）发布博客到github

至此，我们的hexo博客本地化运行环境就基本搭建成功了，在博客目录打开终端，运行hexo g -d hexo s命令之后，即可通过浏览器访问 http://localhost:4000 ，这样就能够看到本地化的hexo博客。
之后需要将我们搭建好的博客推送到github仓库中，这样我们通过https://仓库名.github.io在互联网中访问我们的个人博客网站啦。
这里具体操作也跟着GitHub Pages + Hexo搭建个人博客网站，史上最全教程教程走即可，但是这里有个小坑，如果完全按照教程的设置，你会发现推送失败，因为github为了安全原因修改了推送的验证机制，这里我在教程的评论区找到了解决方法：

如上所述，按照这样修改_config.yml文件的结尾deploy部署的信息即可成功推送了。
通过浏览器访问：https://smartpippin.github.io即可访问自己的个人网站啦。
至此，通过github pages搭建个人博客网站的任务就顺利完成了，可以看一下hexo或者fluid的官方wiki，进行主题细微设置调整和常用的hexo写文章、发布文章的命令等等就OK啦。

二、自定义域名+cloudflare开启全站https，实现博客文章生成简洁的永久链接

（一）自定义网站域名

完成网站搭建后，你的个人网站网址是github pages默认的https://xxx.github.io ，正常使用一般也是没有问题的。但是由于国内访问github网络环境的问题，经常可能会打不开github.io的域名，此时就需要用自定义域名加上CDN加速，实现国内外顺畅访问。
这里推荐cloudflare来进行域名解析，原因很简单，两个字免费。而且cloudflare也可以强制一键开启全站https，很傻瓜的操作就可以完成。

腾讯云购买域名

首先，我自己仍然在腾讯云购买了asia后缀的域名，也就是我现在的博客网站：smartpippin.asia一年只要几块钱，购买完成后，不用腾讯的DNSPOD解析服务，而选择cloudflare的DNS解析，以便享受其提供的CDN加速服务。

使用Cloudflare解析域名

进入cloudflare网站，点击添加站点，将你刚刚注册的域名添加到cloudflare里面。

上图是我已经添加成功后的效果。
之后在购买域名的服务商管理界面，修改域名解析的DNS服务器，将其修改为cloudflare的DNS服务器：

在github pages中添加自定义域名解析

这里参考使用腾讯云DNS解析 + Github Pages，免费搭建个人网站 这篇文章里面的办法，在github pages设置里面添加上你的自定义域名，同时在cloudflare的DNS解析记录中添加2个CNAME记录值：

这里设置完成后， github 会自动的在仓库根目录里生成一个CNAME文件，我们要将这个CNAME文件下载下来，并将这个Cname解析文件放在hexo博客目录的source文件夹里面，这样在更新博客推送到github仓库时才能将cname文件生成在public推送目录里面，不进行这一步则自定义域名解析会失效。（这里可以参考官方文档说明）

此时输入自定义域名smartpippin.asia即可访问自己的个人网站。

（二）用cloudflare自动设置SSL证书，开启全站https

这个就更简单了，进入cloudflare控制台，进入ssl/tls选项，自己看着描述开启即可。傻瓜操作非常简单。

到这里就顺利实现了自定义域名+CDN加速+全站开启https了。

（三）添加abbrlink2插件，实现博客文章永久链接

hexo博客默认生成的文章链接长这样：

https://xxx.com/2021/03/10/hello-world/index.html

真可谓是又臭又长，而且分享也不方便，我发现了一个hexo生成永久静态链接的插件，hexo-abbrlink2 使用起来也很简单，在博客根目录按照说明输入命令，修改一下config.yml文件即可：

设置完成后重新部署博客，之后你的文章链接就会这样：

https://smartpippin.asia/posts/1001/

这样文章的链接就非常的整洁有序。该作者还有一个功能类似的插件abbrlink 两个功能类似但是生成的永久链接形式稍有区别，个人更喜欢abbrlink2。

三、关于Chevereto图床、Lsky兰空2.0图床以及Minio对象储存服务

基本上，通过以上一、二步骤的操作，个人博客网站就算全部完工大吉了，现在就只需要用typora或者obsidian等工具写文章就可以了。

这里我个人用的是obsidian，安装了remotely save插件，通过webdav服务，在mac、win、ios等等设备和系统之间实现了实时所有文章的同步写作，非常方便。我自己将obsidian的文章仓库就建在群晖的NAS和微软的onedrive服务里面，基本实现了双重备份保险。关于obsidian的具体操作，非常傻瓜，这里随便百度一下就有教程，此处不在赘述。

既然网站搞定，写作工具搞定，现在就是万事俱备只欠东风。文章中要引用文件、图片、音乐等等怎么办呢？全部放在github pages仓库里？显然不太现实，速度也很慢，用百度网盘、阿里云盘等等国内各种网盘服务？偶尔分享点文件还可以，但是写文章引用的大量图片怎么办？想起6年多以前，自己刚刚大学毕业开始折腾网络的时候，那时用wordpress、typecho建了网站玩玩，当时没有NAS，就用的国内的七牛云、阿里云的对象存储服务（OSS），少量的不要钱，但是速度慢，量多了还是要收费。

现在既然有了群晖NAS，有了公网ip，肯定要充分利用起来。随便百度谷歌一下，初步考虑自建图床，自己尝试了Chevereto图床、Lsky兰空2.0图床这两个图床服务，感觉都非常不错。

（一）Chevereto图床（推荐指数：★★★）

Chevereto图床的搭建完全参照了哔站这位up主的教程，表示感谢。因为Chevereto正式版要收费，我尝试过安装其他版本都没有很成功，最后还是依样画葫芦按照这位up主提供的版本安装成功了。
同时，使用Chevereto图床的时候可以修改默认最大上传图片的大小，修改方法参考这个博主的教程 ，这里注意按照哔站up主安装的Chevereto图床的php.ini文件直接通过群晖的web station套件里面搜索下面2个选项进行修改（修改为：10240M）：

post_max_size
upload_max_filesize

在图床网站上再修改一下上传上限即可：

此时，图片上传上限变为10GB，完全够用啦。

但是呢，按照哔站这个up主安装成功的Chevereto图床不能搭配Picgo 工具使用，picgo里面的Chevereto插件我试了好久都没有成功，估计跟我这个Chevereto图床版本有关系。
随后我就暂时放弃了Chevereto图床，开始尝试第二种Lsky兰空2.0图床工具。

（二）Lsky兰空2.0图床（推荐指数：★★★★）

兰空图床应该是国人自己开发的，我用群晖docker安装的，使用了一下，体验也很不错，可以配合picgo的兰空图床插件使用，实现博客写作时候图片便捷快速上传并生成外链。

这里兰空图床安装参考了在群晖上使用 Docker 安装 Lsky Pro （兰空）图床「SQLite 版」 的教程，非常简单，直接在docker里面成功安装了兰空图床，这里注意就是docker安装时的文件夹映射：

【有用的小工具】群晖DSM系统自带反向代理服务功能

这里有一个小插曲，顺便说明一下群晖的一个特色功能，即群晖控制面板-登录门户-高级-反向代理服务器的功能，这里可以将你的想要的安装在群晖DSM里面的各种服务，如上面的Chevereto、兰空图床、下面要说到的mino服务等等，很方便的实现反向代理，只需要动动鼠标即可将http自动变成https。有些服务，诸如bitwarden密码管理器服务端是必须要强制https才可以用的。不用群晖提供的这个反代功能就需要自己再额外准备一台VPS，通过Nginx反向代理进行访问，感觉有点麻烦，我就没有尝试了。
用群晖这个反代唯一的不足，但是这也不是群晖的问题，是因为国内不开放80和443端口，所以在没有VPS作为中转的情况下，只有带端口访问了，当然我个人也不怎么介意。若实在不想要带端口访问，只有买VPS再配置Nginx反向代理了。
这里具体的操作方法，参考这篇博客的说明，也是非常简单。用群晖自带反向代理实现 HTTPS 访问 个人建议设置端口时可以采取后移一位的方法，比如我的qb下载器默认http端口是8085，那么我的反代端口就设置为往后增加1，即8086端口，这样可以方便记忆。另外设置好之后记得在路由器的端口转发将设置的端口转发出去，才能在外网访问。

（三）minio对象储存服务（推荐指数：★★★★★）

minio这个东西呢，是我之前找兰空图床教程的时候偶然发现的，当时没怎么在意，因为群晖NAS本来就自带drive这些工具，分享文件也没问题啊。但是在博客网站搭建完成后，我发现如果需要在文章中插入外链图片就用Chevereto、兰空图床也没问题，但是当你需要引用一个mp3一个视频文件或者其他类型的文件时，图床是没办法解决的，群晖自带的文件分享外链也不好用，打不开或者有时间限制，反正设置很麻烦，也不能实现写博客实时上传。
因此我又认真研究了一下minio，完全解决了上述所有的痛点，可以实现所有的文件实时上传，即时生成永久只读外链，非常安全、有序、便捷，操作简单得没边，我这边文章中所有的图片都是在minio中引用的外链。（这里还插一句，群晖DSM里面还有个套件叫Alist也挺不错，可以试用一下 ，但是个人还是觉得minio配合写博客最合适。）
因此5星强烈推荐使用。
不过minio的安装需要一点linux命令行常识，这个也简单，百度一下常用linux命令即可，总体来说主要是要修改几个配置文件内容和权限，剩下的就是跟着教程复制粘贴就搞定。
当然，安装minio我是走了不少弯路的，套件中心有minio套件，docker里面也有，但是我安装之后都存在外链不能正确读取分享的问题，因此这两个方法我都没用。
在我搜了一圈之后，参考了这位博主的minio安装教程Synology 安装使用 MinIO 我选择的是minio8.0版本，按照博主的教程，依样画葫芦，很快就搞定。

安装完成后一定要按照教程修改一下外网分享链接的地址。修改之后记得将minio的网页端口和服务端口都进行一下群晖反向代理，并将4个端口都在路由器做端口转发，这样你的外链文件就可以实现https安全访问。

关于minio生成永久只读外链的方法

安装完成minio之后，创建储存单元，minio里面叫buckets（储存桶），如上图所示，我自己建立了3个bucket，可以把它想象成win里面的磁盘或者文件夹。比如我的博客文章里面的图片文件全都放在名为hexo的储存桶里面。可以直接通过网页上传文件：

最推荐的上传文件的方法就是直接通过webdav挂载群晖上miniodata文件夹，所有minio存储的文件都在群晖这个共享文件夹里面：

如上面三张图片所示，这样你需要什么文件或者图片形成外链，只需要将该图片或者文件放在miniodata对应的文件夹中，该文件或图片就自动上传到minio桶里面了，实时同步，并且外链也即时自动生成了。
上述就是minio上传文件的原理和方法。然而，当你这样上传文件或者图片之后，你希望引用生成的外链，你进入minio，点击分享外链的按钮，你会发现系统自动生成的是一长串而且有使用期限的链接。

这当然不是我们想要的，这里我也查了好多文章，minio自带一个minio client admin管理员可以进行配置，但是我看了下很麻烦。我们参考这篇文章里面的傻瓜式解决办法minio怎么打开永久访问链接简单来说就是在你需要获取永久访问链接的bucket设置里面，增加一条readonly规则即可。

之后凡是这个bucket里面的任何文件都是公开可读了，都可以通过https://域名+bucketName+文件路径永久访问，例如我自己的一个mp3文件：

 https://smartming.asia:9000/test/santi.mp3

尾声

至此，通过github pages+hexo+cloudflare搭建的个人博客网站已经全部完成，同时通过minio对象存储服务，可以很方便的引用博客中用到的外链图片文件等等。记录下自己搭建网站过程的坑，怕以后忘了。感谢网络上各位大佬的教程。

参考资料

1.GitHub Pages + Hexo搭建个人博客网站，史上最全教程
2.所有关于Valine评论系统的配置都在这里【合集】
3.使用腾讯云DNS解析 + Github Pages，免费搭建个人网站
4.Chevereto图床的搭建
5.在群晖上使用 Docker 安装 Lsky Pro （兰空）图床「SQLite 版」
6.用群晖自带反向代理实现 HTTPS 访问
7.Synology 安装使用 MinIO
8.minio怎么打开永久访问链接