第一次搭建Hexo博客过程 in MacOS

2018-07-16 约 2193 字预计阅读 5 分钟

第一次在自己服务器搭建博客，总会有那么一点点失误，碰到一点坑，在这里总结一下搭建hexo的具体步骤。

参考：

Hexo之旅(二)：Hexo博客搭建(在 Mac OS 平台)

如何在服务器上搭建hexo博客

Hexo架构

首先我们要理解hexo是如何生成静态博客以及如何实现通过服务器访问静态博客的

通过上图我们可以知道，整个流程就是在本地通过 hexo g 渲染博客的静态文件，然后通过 hexo d 把静态文件 push到服务器上我们自己创建的git仓库,服务器再通过 git-hooks 同步网站根目录，这样就可以访问了

配置本地环境

安装依赖

Hexo 依赖于 Node.js 和 Git，需要先安装。

安装Git

Git安装（廖雪峰教程）

安装Node.js

Node的话建议用nvm管理，否则很容易出现 command not found: hexo 的情况，出现这种情况主要是node的版本问题可以通过nvm来控制一下node的版本来解决

参考：Hexo安装后hexo指令无法被找到的解决方法

使用Homebrew安裝nvm

1
2
3
4
5
6


brew install nvm
//这个过程中可能需要安装gcc或者其它需要依赖的工具 按照提示一次安装好即可
mkdir ~/.nvm
echo "export NVM_DIR=~/.nvm" >> .bash_profile
echo ". $(brew --prefix nvm)/nvm.sh" >> .bash_profile
//这个步骤中mac下的brew需要通过--prefix这种形式完成，如果是zsh的话可以输出到.zshrc文件

重启终端后用 nvm help 来验证nvm是否正确安装

使用nvm安裝Node.js

安裝完了nvm，接著安裝主角 Node.js。先用 nvm ls-remote 指令看一下有哪些版本可以安裝：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


 nvm ls-remote
         .
         .
         .
        v9.10.0
        v9.10.1
        v9.11.0
        v9.11.1
        v9.11.2
        v10.0.0
        v10.1.0
        v10.2.0
        v10.2.1
        v10.3.0
        v10.4.0
        .
        .
        .

然后直接用一下命令安装最新稳定版node

1

nvm install stable

使用nvm无痛切换Node.js版本

检查当前使用的 Node.js 版本使用命令 nvm ls。如果输出结果如下表示正确：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$ nvm ls
       v0.12.10
->      v10.6.0
         system
default -> v10.6.0
node -> stable (-> v10.6.0) (default)
stable -> 10.6 (-> v10.6.0) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.3 (-> N/A)
lts/carbon -> v8.11.3 (-> N/A)

第一个 -> 表示当前使用的版本，default -> 表示默认版本，必须保证这两个，不然后面安装hexo会提示 -bash: hexo: command not found ，不能在命令行使用。设置的方法是，先通过 nvm ls 看看本地安装了什么版本，如果本地没有，则应该使用上一步的方法先安装，然后执行这个命令指定版本：

1

nvm use v10.6.0

再通过这个命令指定默认版本：

1

nvm alias default v10.6.0

部署Hexo

安装Hexo

所有必备的依赖都安装完成后，即可使用 npm 安装 Hexo：

1

npm install -g hexo-cli

-g 或 –global 表示全局安装模块，如果没有这个参数，会安装在当前目录的node_modules子目录下。安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3


hexo init <folder>
cd <folder>
npm install

npm install 表示安装当前目录package.json文件中配置的dependencies模块。

更新 Hexo

官方发布了新版本后，可以在Hexo建立的博客目录内运行：

1

npm update

用如下命令可以检查package.json文件中配置的dependencies的版本号：

1

npm ls --depth=0

安装 Hexo 插件

1

npm install <module> --save

下面是一些可选插件的安装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


npm i hexo-all-minifier --save
npm install hexo-admin --save
npm install hexo-generator-archive --save
npm install hexo-generator-tag --save
npm install hexo-generator-feed --save
npm install hexo-wordcount --save
npm install hexo-helper-qrcode --save
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
npm i -S hexo-prism-plugin
npm install hexo-abbrlink --save
npm install hexo-generator-sitemap --save

配置服务器环境

部署 Nginx

安装 Nginx && 启动 Nginx

我服务器的Nginx是用Docker部署的，早已经部署好。这步暂时跳过，日后补充…（又偷懒了（逃～

配置虚拟主机 && 创建新的网站目录 && 创建虚拟主机配置文件

同上（逃～

部署 Hexo 到服务器

Hexo 可以使用 git 方式部署。 (网站的目录在下面统一用 <your-website> 代替，如你的目录在 /var/www/html ，那就用 /var/www/html 替换 <your-website> )

创建空白 git 仓库，并且设置 git hook

1
2
3


cd ~
mkdir blog_hexo.git && cd blog_hexo.git
git init --bare

新建 post-receive 脚本

1
2


cd hooks
touch post-receive

编辑 ~/blog_hexo.git/hooks/post-receive 脚本

1
2
3
4
5
6
7
8


#!/bin/bash
GIT_REPO=/home/xxx/blog_hexo.git
TMP_GIT_CLONE=/tmp/HexoBlog
PUBLIC_WWW=<your-website>
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

赋予脚本执行权限

1
2


chmod 755 post-receive
//或 chmod +x post-receive

注意：

这里要先确保 <your-website> 目录下没有任何文件。备份好文件后执行一下命令：
1

sudo rm -rf <your-website>/*
执行 ls -l <your-website> 命令检查该目录及其子目录（文件）所有者和用户组是否为你当前使用的用户。若显示：
1

drwxr-xr-x 2 root root 4096 Jun 4 07:00 <your-website>
则说明你的网站目录的所有者以及用户组都是root，那么当你用git-hooks把tmp目录的静态博客拷贝到 <your-website> 时，会由于没有权限而导致拷贝失败，所以我们需要把的所有者和用户组都改为你当前使用的用户。执行以下命令即可：
1

sudo chown $USER:$USER -R <your-website>

配置本机

在博客目录下运行下面命令，安装 git 部署插件。

1

npm install hexo-deployer-git --save

修改博客的配置文件 _config.yml，修改deploy选项：

1
2
3
4
5


deploy:
  type: git
  message: update
  repo: xxx@127.0.0.1:/home/xxx/blog_hexo.git
  branch: master

然后运行 hexo clean && hexo g && hexo d 即可部署本地渲染网页到服务器上，之后只需要访问额你的域名就可以访问你的hexo博客啦！如我的博客是 reb.mallotec.com **注：**请把127.0.0.1替换成自己服务器的ip

附：Hexo 个性化–>NexT主题

参考：Hexo之旅(三)：Hexo博客个性化及NexT主题配置

文档

NexT 主题提供了详细的使用文档。

下载主题

主题的安装很简单，执行以下命令即可：

1
2
3


cd your-hexo-folder
mkdir themes/next
curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

或

1
2


cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

启用 NexT 主题

克隆/下载完成后，打开站点配置文件，找到theme字段，并将其值更改为next。

这里注意区分两个配置文件：站点配置文件：是你的 hexo 博客目录下面的 _config.yml 文件。主题配置文件：是 themes/next 目录下的 _config.yml 文件。

验证主题是否启用（这步我没执行过= =）

运行hexo s --debug，并访问http://localhost:4000，确保站点正确运行。

重新渲染博客

启用主题后最好重新渲染一遍博客，命令：

1

hexo clean && hexo g && hexo d