从头开始搭建自己的博客

起因

其实在很早之前就使用过 hexo 搭建了一套博客，部署在了 GitHub Pages 上，但由于大家都懂的一些原因导致站点经常访问不上或者速度很慢，后来也没有继续维护下去，后续的文章都集中发到了公司内部的空间中。

随着技术文章和博客积累的越来越多，终于下定决心要好好整理一下自己的知识体系，并把内容放到一个属于自己的平台上，于是就又有了自建博客站点的打算。

正好遇到双十一阿里云服务器搞活动，就花了点小钱买了一台服务器和一个域名，从此就正式开始了搭建博客的日程。

搭建方案

博客系统搭建

博客使用 Hexo 搭建，主题使用的 inside，主要工作量在主题的定制上，可以参考：Hexo + inside 博客个性化定制

以及官方的主题定制教程：Inside 主题配置

博客搭建注意事项

关于 CDN

文章中涉及到使用 CDN 的库，涉及第三方的都使用了第三方提供的 CDN 资源，只要注意辨别别用国外小众的域名即可。

部分我们自己编写的 js 文件，要是想放到 CDN 上，可以使用 jsdelivr 这个工具。

这个工具最强大的地方是可以直接将 GitHub 上的代码同步到 CDN 上。只需要我们在 Git 中建立相对应的仓库，并且发布 release 即可。可参考：https://github.com/suzhihao/libs

另外 inside 官方也支持直接配置 CDN 的 prefix：

1
2
3
assets:
  prefix: https://cdn.example.com
  suffix: '?m=webp&q=80'

配置完后所有的图片都会加上统一的前缀，正好可以和 jsdelivr 配合使用。

但我仍不建议直接使用博客源码 master 仓库上的文件同步 CDN，因为 CDN 有缓存机制，所以同一个文件要是没有 hash 值或者版本号会出现更新问题，所以基本上都是配合 GitHub 的 release 一同使用。

关于评论系统

评论系统没有使用文章中推荐的 Valine，而是使用了 gitalk。

主要考虑到评论的账号可以和 GitHub 打通，并且我的博客源码也放在 GitHub 上，可以直接使用源码仓库的 Issues 作为评论仓库。省去了单独去别的平台注册服务的麻烦。

Hexo new xxx 标题错乱

GitHub 也有人提了相同的 Issue，大概就是使用 Hexo 命令创建新的文章，标题会出现乱码，如下所示：

1
2
3
4
5
6
7
8
9
10
---
title:
  '[object Object]': null
date:
  '[object Object]': null
tags: []
category: ''
description: ''
toc: true
---

排查了很久之后发现居然是我的 vscode 的 prettier 插件自动格式化了 scaffolds 目录下的代码！！！

原文件应该是这样的：

1
2
3
4
---
title: {{ title }}
date: {{ date }}
---

格式化后变成了这样：

1
2
3
4
---
title: { { title } }
date: { { date } }
---

添加的空格 Hexo 无法识别导致了生成的文件乱码。

最最最坑的一点

本地调试 Hexo 时，经常会出现修改了配置不生效的情况，一开始调试了很久没有发现原因，最终定位是缓存的原因。

当发现修改了配置没有生效时，运行npm run clean清除缓存再重启即可。

博客系统部署

部署我使用的是一台阿里云的轻量应用服务器 + nginx 的方式部署静态资源。

后续有空的话应该会结合 docker 和 CI/CD 再写一篇文章，本文暂时就基于静态文件手动部署。

服务器配置

安装 node 和设置 npm 仓库。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#!/bin/sh

yum install -y gcc-c++ git

mkdir -p /usr/local/src

cd /usr/local/src

wget https://www.npmmirror.com/mirrors/node/v10.13.0/node-v10.13.0-linux-x64.tar.xz

tar xvf node-v10.13.0-linux-x64.tar.xz

mv node-v10.13.0-linux-x64 node

ln -s /usr/local/src/node/bin/node /usr/sbin/node

ln -s /usr/local/src/node/bin/npm /usr/sbin/npm

npm install pm2 -g

ln -s /usr/local/src/node/bin/pm2 /usr/sbin/pm2

npm set registry https://registry.npmmirror.com

node 版本号根据个人喜好更改即可。

安装 nginx

网上也有很多安装 nginx 的教程，这里不再过多介绍。

要注意一点的是默认 nginx 安装是不带 ssl 相关的库的，要是以后涉及配置 https 又得重新安装，所以最好一次性全部把相关依赖装全。

推荐启用的模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 进入源码目录
cd nginx-1.21.3

# 添加扩展
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module --with-http_v2_module --with-http_gzip_static_module --with-stream --with-stream_ssl_module

# 编译
make

# 安装，仅第一次需要，重新安装nginx不要执行这一步
make install

# 备份原有 nginx 二进制文件（仅覆盖安装需要执行）
cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

# 将重新编译好的 nginx 二进制文件拷贝至原来的目录中（仅覆盖安装需要执行）
cp ./objs/nginx /usr/local/nginx/sbin/nginx
配置 HTTPS

使用acme.sh 可以获得免费的证书。

但在阿里云的机器上执行：

1
curl  https://get.acme.sh | sh -s email=my@example.com

发现有超时的现象，所以就手动将其代码：https://raw.githubusercontent.com/acmesh-official/acme.sh/master/acme.sh 下载下来后手动执行就能解决问题。

如果发现之前安装的 nginx 不支持 HTTPS 可以按照此教程重新安装：https://www.cnblogs.com/michaelcnblogs/p/12832411.html

未完待续。。。

其他
#部署 #服务器
从头开始搭建自己的博客
https://www.wobushi.top/2021/从头开始搭建自己的博客/
作者
Pride Su
发布于
2021年12月19日
许可协议