教你搭建 hexo 博客并通过 ngnix 部署到服务器上

国际惯例搭好一个博客先写个搭建教程。

搭建环境

首先 hexo 基于 node.js 运行所以我们要先在 linux 服务器上安装上 node.js 环境

• 下载链接：https://nodejs.org/en/download/

• 下载到本地你的电脑上：

• 然后我们通过 XShell 连接你的服务器，我这里用的是 阿里云，然后执行下面两句创建一个放 node.js 的文件夹

cd /opt
mkdir nodeJs

• 下载到本地后，我们上传到服务器上，我这里使用的是 XFtp 上传

• 然后在服务器这找到刚才的上传的文件，并解压

tar -xvf node-v12.13.1-linux-x64.tar.xz
mv node-v12.13.1-linux-x64.tar.xz nodejs

• 接下来我们把它加到环境里

vim /etc/profile

• 按 i 键进入编辑模式，在最后一行的后面添加如下所示的语句（后面写你自己创建的文件的路径）

• 使配置文件生效

source /etc/profile

• 验证是否安装成功

node -v
npm -v

• 能正常显示版本信息则安装成功，接下来我们来配置一下 淘宝的源，这样会提高下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 同理 cnpm -v 确认是否安装成功（正常显示版本则成功）
• 然后下载 hexo

cnpm install hexo-cli

• 然后我们随便选择一个地方初始哈我们的博客的文件夹，我这里选的是 root 目录下

cd
mkdir blog
cd blog
hexo init

• 显示图上信息则初始化成功

• 我们用 ls 命令查看一下 blog 文件夹下 hexo 帮我们创建了什么文件

我们 ls 查看一下

• 简单介绍一下：
  • 第一个 config.yml 是 hexo 的配置文件以后要用到
  • themes 里面放的是主题的文件
  • source 以后会用来存放你写的博客
• 这些都是初始化生成的文件我们在 blog 文件夹内输入启动 hexo 的命令

hexo s

• 出现如下信息则证明，hexo 已经在你的 4000 端口号 部署完成了

• 我们通过服务器访问一下

• 这样前面加上自己服务器的 ip 地址，后面冒号加 4000 的端口号访问，成功页面如上（这里我改了一下标题）
• 要修改启动端口的话，想要改为 80 端口，则输入 hexo s -p 80 命令即可

更换主题

• 我的 blog 使用的主题是 Butterfly 主题，个人很喜欢，你也可以去 github 上找其他的主题
• 首先你需要下载一个 git （这个后面还会用到）

yum install git

• 然后 clone 主题（这步要在一开始建的 hexo 初始化的目录 blog 目录下进行）

git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

• clone 完成以后，我们到 blog 文件夹下的 _config.yml 修改一下主题

vim _config.yml

• 进入后一直往下找，找到下图位置，修改为 Butterfly，如果你是别的主题那就写上别的主题的名字

• 改为上图即可，与冒号中间有空格

• 接下来，hexo 更新配置后的素质三连

  • hexo clean 这个是清除掉已生成的文件
  • hexo g 这个是根据你的改动生成新的文件
  • hexo s -p 80 开启 hexo server，绑定到 80 端口

• 等启动完成后访问你的域名或者你的服务器 ip 地址

• 我这里访问就出现了问题：

• 网页打开无法渲染页面，不要慌输入下面的命令安装渲染组件（这是一条命令太长了，不是两条！！）

npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus

• 等待安装完成后输入 hexo s -p 80，再去访问

• OK 到这里主题也就完成更换了，觉得不好看再去挑几个嘛。

部署到 Nginx上

• 我们发现 hexo 在运行的时候，终端一直被挂起无法干别的事，去百度了一圈找到了好几种方法
  • 第一种是比较简单通过 node.js 的 forever 实现
    参考链接：http://www.tuijiankan.com/2015/05/08/hexo-forever-run/
  • 第二种是使用 pm2 来实现
    参考链接：https://blog.csdn.net/sinat_18268881/article/details/91353032
  • 第三种就是使用的 Nginx 来实现，接下来我们重点说这个

安装 nginx

• 首先安装 nginx

yum install -y nginx

• 安装完成后配置一下 nginx

vim /etc/nginx/nginx.conf

• 找到如下：

• 这里原本是 nginx，我们把它改成 root

• server_name 后面填你域名或者服务器的 ip
• root 这里的 /data/www/hexo 是 nginx 的web 项目路径，会访问到里面的 index.html 页面
• 然后重启 nginx

systemctl restart nginx

配置Git

• 首先下个 hexo 关于 git 的管理插件

npm install hexo-deployer-git --save

• 创建 /data/www/hexo目录，用于存放博客生成的静态文件

cd /
mkdir data
cd data
mkdir www
cd www
mkdir hexo

• 然后创建 /data/GitLibrary 目录，用于托管文件项目。

cd /data
mkdir GitLibrary

• 初始化 git 仓库

git init --bare hexo.git

• 利用 git hooks （钩子函数）创建一个脚本，post-recive 脚本将在 blog.git仓库接收到 push 时执行。

vim /data/GitLibrary/hexo.git/hooks/post-receive

• 内容添加为：

GIT_REPO=/data/GitLibrary/hexo.git    # git仓库
PUBLIC_WWW=/data/www/hexo             # 网站目录
TMP_GIT_CLONE=/tmp/hexo

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

配置 Hexo

• 上面的步骤操作完后，打开 hexo根目录下的 _confi.yml，拉到最下面

• 格式：用户名@域名或 IP 地址:/data/GitLibrary/hexo
  • 这里的用户名是你服务器的，一般来说都是 root
  • @后面加上你的域名或者 ip
  • 后面如果上面步骤一致则就是 /data/GitLibrary/hexo 不用改
• 然后我们来个 素质二连
  • hexo clean 这个还是清除已生成的文件
  • hexo g -d 这个命令就是 hexo g + hexo d 意思就是先生成，再推到 git 上去

hexo clean
hexo g -d

最后

基本步骤应该没有啥大问题，中间我也是踩了很多的坑，不过总体来说要比我上次搭的 lnmp + wordpress 快上一百倍了。。。

最后感谢 小游 水风车 ，一开始也只是在知乎上闲逛，看见 有了自己一台服务器能干什么 后，看见了小游大佬的回答，突然感觉自己好像白学计算机了，而且搭个博客也是我一直想做的事，今天终于算是真正实现啦！

8 月份的时候搭过一个无奈太过复杂（好吧还是我太菜了 2333），接下来也会跟着大佬的脚步，弄个云盘，弄个图床什么的研究一下 cdn 也行 ，反正就是好好搞了。

如果还有什么问题我这里没有说清楚的，可以看下面的链接，我基本上都是看着链接自己弄的，应该可以解决大部分问题。

附上参考链接：

• 将Hexo部署在自己的服务器上
• VPS配置Git Hooks实现hexo博客更新
• hexo 部署至Git遇到的坑
• codesheep教你搭建hexo博客|无坑版
• 如何在个人服务器上部署Hexo博客