个人建站学习2022
0%

基于 Ubuntu 18.04 的 Hexo 博客搭建

发表于 分类于 Valine：

虽然不属于游戏服务器，我还是想把搭建这个博客的过程记录下来。
Hexo 博客框架基于 Node.js 。因此首先要安装 nodejs 和 npm ，然后再进行 hexo 的安装。

Ubuntu 18.04 安装 nodejs 和 npm

Ubuntu 18.04 上使用 apt 安装的 node 和 npm 版本很低，因此这里使用官网下载的方式进行安装。官网下载地址为 https://nodejs.org/en/download/

当前的 LTS 版本为16.15.0，右键复制链接，然后在服务器终端内使用 wget 下载并安装。

1
2
3
4
5
6
cd ~
mkdir nodejs
cd nodejs
wget https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz
tar xf https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz
cd node-v16.15.0-linux-x64

~/nodejs/node-v16.15.0-linux-x64 这个路径内就是 nodejs 和 npm 的文件了，下面链接可执行文件，使得命令行可以直接执行 node 和 npm 命令。

1
2
sudo ln -s /home/xulouzhe/nodejs/node-v16.15.0-linux-x64/bin/node   /usr/local/bin/node
sudo ln -s /home/xulouzhe/nodejs/node-v16.15.0-linux-x64/bin/npm   /usr/local/bin/npm

注意上面命令中的 /home/xulouzhe/ 是我的服务器内的路径，需要根据实际路径修改。
此时，使用 node -v 和 npm -v 就应该可以显示对应版本了

1
2
3
4
xulouzhe@MC:~$ node -v
v16.15.0
xulouzhe@MC:~$ npm -v
8.5.5

Ubuntu 18.04 安装 hexo

1
2
# 安装hexo
npm install hexo-cli g

此时使用hexo应该可以使用了，如果提示找不到hexo命令，可以尝试链接hexo到可执行文件目录

1
2
# 链接hexo
sudo ln -s /home/xulouzhe/nodejs/node-v16.15.0-linux-x64/bin/hexo   /usr/local/bin/hexo

hexo的使用方法

进入想生成博客目录的路径，执行init命令生成博客文件

1
2
cd 网站目录
hexo init 目录名

会生成如下所示的目录结构

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中 _config.yml 为网站配置文件，title 属性为博客标题， language 设置为 zh-CN 可将博客变为中文主题， description 属性为博客描述。详细配置方法可以见 https://hexo.io/zh-cn/docs/configuration
其他路径中 source/_posts 目录存放文章， source/_drafts 目录存放草稿。 _posts 目录内会生成一篇默认文章，指导 hexo 的简单用法。
此时，执行

1
2
hexo generate
hexo server

就可以在 ip:4000 地址看到你的博客了。
以下是一些 hexo 常用的命令

1
2
3
4
5
6
7
8
9
10
11
# 在 source/_posts 路径内生成生成 文章标题.md 的空白文章
hexo new "文章标题"

# 生成网页静态文件，可以简写为 hexo g
hexo generate

# 部署之前生成的静态文件至 public 文件夹，可以简写为 hexo d
hexo deploy

# 清除缓存和静态文件，一般装插件出现问题时使用
hexo clean

使用 Nginx 部署 Hexo 博客

安装 Nginx 就不说了，是可以再发一篇博客的工作量，这里提供最基础的 Nginx 配置

1
2
3
4
5
6
7
server{
    listen 80;
    listen [::]:80;

    # 下面的 root 后路径修改为 Hexo 博客 public 目录所在路径
    root /home/wwwroot/blog.xlz.pub/public;
}

使用 pm2 自动监控文件变化并自动生成和部署网页

安装 pm2 

1
sudo npm install -g pm2

在博客路径的 source 文件夹内新建 start.js 文件，内容如下：

1
2
3
4
5
6
7
var process = require('child_process');

process.exec(' hexo g -d', function (error, stdout, stderr) {
    if (error !== null) {
      console.log('exec error: ' + error);
    }
});

在 source 文件夹内再新建 watch.json 文件，内容如下：

1
2
3
4
5
6
7
8
9
{
  "apps" : [{
    "name"       : "blog",
    "script"     : "./start.js",
    "exec_interpreter": "node",
    "exec_mode"  : "fork_mode",
    "watch"      : "_posts"
  }]
}

在 source 目录内使用 pm2 命令进行监控：

1
pm2 start watch.json

Hexo 博客 Markdown 文档内插入图片

先修改博客配置文件 _config.yml 内的 post_asset_folder 属性为 true

1
post_asset_folder: true

然后，在博客文件夹内安装插件 hexo-asset-link

1
npm i -s hexo-asset-link

在开启了 post_asset_folder 选项后，在生成新 md 文档时会在同一目录生成同名文件夹，将图片文件移动至文件夹内，然后在 Markdown 文档内使用如下格式即可插入图片。

1
![名称](图片所在文件夹/图片文件名)

其他小坑

装插件后显示出现错误，使用 hexo clean 命令清除缓存后再生成静态文件解决~