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

Author Avatar
Reborn 7月 16, 2018
  • 在其它设备中阅读本文章

第一次在自己服务器搭建博客,总会有那么一点点失误,碰到一点坑,在这里总结一下搭建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

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 指令看一下有哪些版本可以安裝:

 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

nvm install stable

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

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

$ 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 看看本地安装了什么版本,如果本地没有,则应该使用上一步的方法先安装,然后执行这个命令指定版本:

nvm use v10.6.0

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

nvm alias default v10.6.0

部署Hexo

安装Hexo

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

npm install -g hexo-cli

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

hexo init <folder>
cd <folder>
npm install

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

更新 Hexo

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

npm update

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

npm ls --depth=0

安装 Hexo 插件

npm install <module> --save

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

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

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

新建 post-receive 脚本

cd hooks
touch post-receive

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

#!/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}

赋予脚本执行权限

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

注意:

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

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

    drwxr-xr-x  2 root   root   4096 Jun  4 07:00 <your-website>
    

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

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

配置本机

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

npm install hexo-deployer-git --save

修改博客的配置文件 _config.yml,修改deploy选项:

deploy:
  type: git
  message: update
  repo: [email protected]:/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 主题提供了详细的 使用文档

下载主题

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

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

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,确保站点正确运行。

重新渲染博客

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

hexo clean && hexo g && hexo d