hexo 搭建个人博客系统

使用阿里云服务器 + 域名 + hexo 搭建个人博客；

主体过程

• 本地环境配置：安装 Node.js，Git，Hexo
• 阿里云服配置：域名备案，添加安全组，域名解析
• 服务器环境配置：安装 Node.js，Git，Nginx，Pm2
• Github 配置： webhooks

本地环境：Win10，云服务器：Ubuntu 16.04

---

本地环境配置

安装 Node.js

NVM 可以帮助我们快速切换 node 版本。所以，我们选择使用 nvm 来安装 node.js ：

下载 Windows 10 版 的 nvm 安装包，『下载地址』

• 解压,以管理员身份运行 nvm-setup.exe，一路 next；
• 命令行输入：nvm，检查是否安装成功；

配置淘宝镜像：

• 由于 nvm 默认的 下载地址 是外国外服务器，速度非常慢，因而切换到淘宝的镜像，加快下载速度。
• 在 nvm 的安装路径下（默认为：C:\Users\TheBetterKong\AppData\Roaming\nvm），打开 settings.txt，加入（注意：将 root 和 path 的内容换成自己的）：

root: C:\Users\TheBetterKong\AppData\Roaming\nvm
path: C:\Program Files\nodejs
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

安装 Node.js：

• 安装最新的 node.js 及配套 npm ：nvm install latest
• 查看安装过的 node 版本：nvm list
• 使用你想使用的版本：nvm use 想要使用的node版本，一般就是使用刚刚安装的最新版
• 检查 node 和 npm : node -v、npm -v

安装配置 Git

『下载地址』，这个安装很简单，安装完成后，确认：git -version

配置 Git ssh，也即：使用 SSH 连接到 GitHub，目的：之后部署代码上传时不需要每次都输入用户名密码。

• 配置 Github 用户名和邮箱地址：

git config --global user.name “xxxxxx”          # 替换为 Github 用户名
git config --global user.email “xxxxxx@xx.com”  # 替换为 Github 邮箱地址

• 配置完成后，可以使用 git config --list查看配置信息；
• 生成 ssh 公钥：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com" # 你的 GitHub邮箱地址

• 按提示，四次 Enter 后生成完毕，生成过程中会提示生成路径；
• 按提示路径，打开~/.ssh文件夹，里面会包含两个文件：『id_rsa（私有秘钥）』和『id_rsa.pub（公有密钥）』，记事本打开『id_rsa.pub』，全选复制；
• 进入 Github，打开 setting，选择 SSH and GPG keys，new SSH key，将刚刚的公钥内容粘贴进去；
• 完成上述过程后，输入 ssh -T git@github.com 测试；
  • 这里我遇到了一个坑，一直提示我：Permissions for 'C:\\Users\\TheBetterKong/.ssh/id_rsa' are too open.，『解决办法』
• 配置完成；

安装和使用 Hexo

安装 Hexo

• 执行 npm install -g hexo-cli，全局安装 hexo-cli；安装完成后，输入 hexo -v 验证安装；

使用 Hexo

• 本地新建一个文件夹（Blog：当成 hexo 的代码库）；
• 打开命令行，cd 进入到 Blog 文件夹，输入 hexo init 初始化 hexo 库（即：在当前文件夹生成网站所需要的文件，手脚架）；
• 正常情况下，在安装手脚架时会自动安装了所有 node_modules，如果不知道是否完整安装了所有开发所需的 moudles，可以输入 npm install，再次手动安装代码仓库所依赖的 modules；

至此，所有配置完毕，可以本地执行：

hexo generate   # 也可简写为 hexo g
hexo server     # 简写为 hexo s

在浏览器中打开：http://localhost:4000 ，会看到 Hexo 模板的效果；

至此，一个简单的 Hexo 网站就搭建出来了，有兴趣的话，可以先执行：

hexo new post "first blog" # 注意标题中有空格需要用双引号包起来

生成一个简单的 Blog，在 source/_post 文件夹中，修改 first-blog.md 文件就能修改文章内容了，之后重新 hexo s 就能在本地查看到效果了。

配置 Hexo 至 Github

安装 hexo 的 git 部署插件：

npm install hexo-deployer-git --save

安装完毕后，登录 Github，新建一个 public 仓库，并记录该仓库的 SSH 地址；

打开，Blog 文件夹里的 _config.yml 文件，修改其 deploy 配置：

deploy:
  type: git
  repo: https://github.com/Ackerly/name.git  //替换为刚才新建git代码库的ssh链接
  branch: master  //注意！！！  :后面有空格，如果没有空格，这行代码失效

配置完毕后，尝试将本地 blog 的代码上传到 Github：

hexo clean && hexo g 
hexo d 

无错误出现，可登录 Github 查看更新情况；

---

服务器配置

这里我在阿里云的云翼计划里，购买了轻量应用服务器，学生优惠话 1 核-2GB 内存 + 40G 的 SSD 5Mbps 的带宽 每个月不到十块，还是很香的！

配置安全组

一般需要在防火墙上开放如下端口：

应用类型	协议	端口号
HTTP	TCP	80
HTTPS	TCP	443
SSH	TCP	22

域名解析

备案后的域名；

域名控制台->域名列表->解析->添加记录

按照相关信息填取，『记录值』：你的公网 ip；

如有不懂，详情参考域名所属的官方文档；

安装 Node.js（选做）

进入 GitHub 搜索 nvm 或者直接进入『地址』，找到 nvm 的安装脚本，如果没有找到，可以用下面的安装脚本命令：

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

安装完 nvm 以后，会提示我们再开一个新的终端来连接服务器，重连后，使用:

nvm ls-remote                   # 显示当前可下载的版本，选一个下载就行
nvm install v13.12.0
nvm use v13.12.0                # 把 node 版本指向 6.10.3
nvm alias default v13.12.0      # 将此版本设置为默认版本
node --version                  # 检查是否安装成功
npm -v

安装 Git

sudo apt-get update -y      # 更新系统和 apt 包列表
sudo apt-get upgrade -y
sudo apt-get install git    # 安装
git --version               # 查看是否安装成功

同样，配置 SSH：

git config --global user.name "xxxxxx"          # 自行替换你的 GitHub 用户名
git config --global user.email "xxxxxx@xx.com"  # 自行替换你的 GitHub 电子邮件地址

生成秘钥（在 root 权限下操作）：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"   # 自行替换你的 GitHub 电子邮件地址

复制生成的共有秘钥：

cd ~/.ssh
cat id_rsa.pub

在 Github 上创建 SSH key：

• 登录 Github->头像->settings->SSH and GPG keys->New SSH key->将粘贴板上的秘钥粘贴上一个新的 key（命名时，注意区分本地和服务器的 SSH key）

在服务器上，创建用来存放 Github 代码的文件夹：

cd /
mkdir www                                       # 用于存放业务代码
cd www
mkdir myBlog                                    # 用于存放前端代码
cd myBlog
git clone https://github.com/Ackerly/name.git   # 自行替换为用于存放博客代码的仓库 ssh 地址

至此 git 的安装及代码库的部署以及完成，但是现在代码只是暂时同步了当前仓库的最新内容。但是如果有人在本地推送新的代码上去，服务端需要重新拉取代码：

git pull    # git 代码拉取命令

安装及配置 Nginx

安装：

• 安装 Nginx：sudo apt-get install nginx；
• 启动 Nginx：sudo systemctl start nginx；
• 设置系统自启 Nginx：sudo systemctl enable nginx；

配置：

• 配置 nginx 的目的：让你的域名直接访问到服务器博客代码，进而显示博客页面；
• /etc/nginx/conf.d/ 文件夹，是我们进行子配置的配置项存放处，/etc/nginx/nginx.conf 主配置文件会默认把这个文件夹中所有子配置项都引入；

具体做法：

• 在 /etc/nginx/conf.d 目录下创建一个文件，叫 blog.conf；

cd /etc/nginx/conf.d
vim blog.conf

• 编辑 blog.conf 文件内容：

server{
	listen    80;
	root /www/myBlog/TheBetterKong_Blog; # 在服务端的代码路径
	server_name www.thebetterkong.cn;  # 购买的域名
	location /{
	}
}

• :wq，保存退出；
• 重启 Nginx：systemctl restart nginx

至此，在浏览器输入你的域名就可以访问博客页面；

配置 webhooks

根据官方介绍 webhook 的作用是：

webhook 是用 Go 语言编写的轻量级可配置工具，可让您轻松地在服务器上创建 HTTP 端点（挂钩），可用于执行已配置的命令。您还可以将数据从 HTTP 请求（例如标头，有效负载或查询变量）传递到命令。webhook 还允许您指定必须满足的规则才能触发该挂钩。

简而言之，我们这里配置它的目的就是，使你在本地写完 blog，push 到 github 之后，服务器上的 blog 仓库会自动 git pull，完成更新部署。

安装 webhook

使用如下命令：

sudo apt-get update
sudo apt-get install webhook

详情可见：webhook

配置

在你服务器上，blog 仓库的同级目录下进行：

• 新建一个名为 redeploy.sh 的 shell 脚本，用来执行 git pull 指令，内容如下：

  #!/bin/sh
  git pull
  

• 给上述文件添加可执行权限：chmod +x redeploy.sh；
• 然后新建 webhook 的配置文件，命名为 hooks.json，内容如下：

  [
  {
      "id": "redeploy-blog",
      "execute-command": "/home/kxf/www/redeploy.sh",
      "command-working-directory": "/home/kxf/www/TheBetterKong_Blog"
  }
  ]
  

• 后台运行 webhook：$ nohup /path/to/webhook -hooks hooks.json -verbose &
• 它将默认在 9000 端口监听，你会得到一个 url 为：http://yourserver:9000/hooks/redeploy-blog

配置仓库 webhooks

『git webhooks』能够实时的将变化的代码提交到服务器；

打开GitHub仓库->Settings->Webhooks->add webhook：

• URL: 上一步得到的 url：http://yourserver:9000/hooks/redeploy-blog
• Content type: application/json
• secret：不填
• 选择: Just the push event
• 勾选 Active

至此，webhook 部署完毕。可以在本地，push 一下进行测试，github 的 webhook 界面也能看到相关的状态信息。

结束

至此，Blog 已经搭建完毕；

• 可以在本地代码库 source/_post 文件夹中随意加入一个 markdown 文件；
• 接下来进入代码库文件夹，当前文件夹启动命令行（右键 git bash here 也可以）
• 输入命令 hexo clean && hexo g；
• 再输入命令 hexo d；
• 浏览器输入域名，博客出现 md 文件的内容的文章即为设置成功；

之后，就是 Blog 的主题配置等工作，可参考我的 Blog 如下两部分：

• myBlog 日程表
• myBlog 专题