使用阿里云服务器 + 域名 + 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:UsersTheBetterKongAppDataRoamingnvm），打开 settings.txt，加入（注意：将 root 和 path 的内容换成自己的）：

root: C:UsersTheBetterKongAppDataRoamingnvm
path: C:Program Filesnodejs
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 的带宽 每个月不到十块，还是很香的！

配置安全组

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

域名解析

备案后的域名；

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

按照相关信息填取，『记录值』：你的公网 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 专题

最后

以上就是光亮香水为你收集整理的hexo 搭建个人博客系统主体过程本地环境配置服务器配置结束的全部内容，希望文章能够帮你解决hexo 搭建个人博客系统主体过程本地环境配置服务器配置结束所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。