当搭建个人独立博客的想法萌生之后,自己试着在网上做了了解。其中自然有大名鼎鼎、早有耳闻的 WordPress 。但是我也意外地发现了一个叫做 Hexo 的东西。

简单来说,这是一种静态博客框架,具有全静态化、响应快、轻量级等优点,比起 WordPress 简单很多,还是挺合我这个极简主义者胃口的。

二话不说,就决定用这个了。

后来我才意识到,在 Hexo 静态博客这回事上,自己真是个小白。因为博客的整个搭建过程不仅涉及到 Hexo 本地端的运行环境问题,也包括 Linux SSH 的命令行操作,这一切对于我而言是既陌生又艰难的。所幸跌跌撞撞最后还是大功告成了。

那么,作为第一篇技术折腾类的博文,我就来写写自己搭建 Hexo 静态博客的整个过程吧。

说实话,网上关于 Hexo 的教程其实挺多的,但是每份教程的方法又各有不同,而且绝大多数都是使用的 Github Pages。我这里要说的则是把博客放到 VPS 上面,还是有些不太一样的。这也是我遇到问题的地方和决定要写这样一篇博文的原因之一。

配置本地端

以下均以 Windows 为例。

安装依赖

Node.js: https://nodejs.org/zh-cn/download/
Git: https://git-scm.com/download/

安装 Hexo 本地端

npm install hexo-cli -g

在 blog 目录下初始化 Hexo 博客,也可以是任意你想要的名字

hexo init blog

进入博客根目录,并安装相关插件依赖等

cd blog
npm install

测试安装效果

#渲染静态页面
hexo g
#本地运行 Hexo Server
hexo s

然后可以在 http://localhost:4000/ 查看运行效果。

Hexo 默认渲染界面.png

发表文章、替换主题等功能和命令,请查阅官方帮助文档。

使用集成便携式环境 PortableHexo

讲道理,这是在我手动折腾 Hexo 之后,才忽然发现竟然有好心人做了打包集成,直接拿来用就行了……(哭出声 c010.gif

PortableHexo 又称 Hexo 懒人携带版,是深圳比特萌信息技术有限公司的作品。它添加了一些适合适合毫无基础的用户的脚本(就是 hexo g 渲染这样的脚本,可有可无,适合超级小白),最关键是无需安装 Nodejs 和 Git ,集成就很棒。

项目官网: https://portablehexo.bitmoe.cn/
Github: https://github.com/BitMOE/PortableHexo

下载过来,找个地方解压,基本上就可以开始用了,相当于完成了上面的手动操作过程。

配置服务端

安装 Nginx

首先需要安装 CentOS 7 EPEL 源,然后安装 Nginx

sudo yum install epel-release
sudo yum install nginx

启动 Nginx

Nginx 安装完成后需要手动启动

sudo systemctl start nginx

如果开启了防火墙,记得添加放行 80 和 443 端口。

sudo firewall-cmd --permanent --zone=public --add-service=http 
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
sudo systemctl restart firewalld.service

配置完成后,访问使用浏览器服务器 ip ,如果能看到以下界面,表示运行成功。

Nginx 默认页.png

部署 Hexo 到服务器

Hexo 可以使用 git 方式部署。

配置服务器 Git

首先,在 VPS 上安装 git

yum install git

创建空白 git 仓库

cd
mkdir blog.git && cd blog.git
git init --bare

设置 git hook

在路径 /root/blog.git/hooks/post-receive 使用 Vim 创建文件,输入以下内容

#!/bin/bash
GIT_REPO=/root/blog.git  #git仓库
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/usr/share/nginx/html #网站目录(通过上面的默认页可以看到目录路径)
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

赋予脚本的执行权限

chmod +x post-receive

配置本地 Git

在博客目录下运行下面命令,安装 git 部署工具。

npm install hexo-deployer-git --save

修改博客的配置文件 _config.yml,修改 deploy 选项为(其中 vps_ip_address 处请输入你的服务器 IP )

deploy:
  type: git
  message: update
  repo:
    s1: root@vps_ip_address:/root/blog.git/,master

然后运行 hexo d 部署本地渲染网页到服务器上。

其他部署方式

hexo-deployer-upyun

这是 Hexo 的一个插件,可用于将静态网页部署到又拍云对象存储上,实现 0 成本博客。

Github: https://github.com/Menci/hexo-deployer-upyun

首先,在 Hexo 的命令行中安装插件

npm install hexo-deployer-upyun --save

接着,修改博客配置文件 _config.yml 为如下:

deploy:
  type: upyun
  bucket: bucket
  operator: operator
  password: password
  endpoint: v0.api.upyun.com
  secret: secret
  try_times: 5
  ignore_path_re:
    dir: null
    file: ".DS_Store$"

其中 bucket 为存储桶名称, operator 为操作员名称, password 为操作员密码。

不过,这个插件似乎有点问题,在 Windows 下会将多级目录以文件夹的形式部署(详见 Issue #2 Upload Subdirectory as File

解决办法也很简单,使用此分支的文件,替换 compiled.jsindex.js 即可。

更多部署方式,如 Heroku, Netlify, Rsync, OpenShift, FTP/SFTP 等,请参考官方文档,不再赘述。

参考资料

  1. 从 0 开始搭建 hexo 博客: https://eliyar.biz/how_to_build_hexo_blog/
  2. Hexo Docs: https://hexo.io/docs/
文章目录