Hexo 搭建个人博客

发表于 | 分类于

选择Hexo搭建个人博客

之前使用过多种应用来搭建个人博客，也迁移多多次。写博客也渐渐习惯了Markdown，最终选择了Hexo，选择它的理由主要是我喜欢的几项功能都能够给予满足。

选择Hexo的几个理由：

  1. 支持MD文件转网页。
  2. 借助github，无需额外搭建服务器。
  3. 主题多样，尤其是Next主题简洁，符合个人审美观。
  4. 借助VPS，可以做到随处写随处发布。

准备的几项工作：

安装Git（必须）

作用： 把本地的hexo内容提交到github上。
下载地址： git官网
验证： 在Git Bash中输入：

1
2
$ git --version
git version 2.12.0.windows.1

安装Node.js（必须）

下载地址： node官网
验证： 在Git Bash中输入：

1
2
$  node -v
v8.9.1

github账户注册和配置

如果已经有账号，请跳过此步骤！
第一步： Github 注册
Github官网
第二步： 创建代码库
登录之后，点击页面右上角的加号，选择New repository。
在Repository name的输入框内填写linyemin.github.io。（这里要注意name的格式一定是xxxxx.github.io）

安装Hexo

在你的计算机上创建一个目录，用于存放Hexo的相关文件。

1
2
3
4
5
6
7
$ mkdir myblog
$ cd myblog
$ npm i -g hexo
C:\Users\lin\AppData\Roaming\npm\hexo -> C:\Users\lin\AppData\Roaming\npm\node_m                                odules\hexo\bin\hexo
 {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}                                )
+ hexo@3.4.2
added 369 packages in 64.941s

到这一步就安装完成了，下面来验证下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ hexo -v
hexo-cli: 1.0.4
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 8.9.1
v8: 6.1.534.47
uv: 1.15.0
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.25.0
openssl: 1.0.2m
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

Hexo的本地配置

初始化hexo
hexo init
然后输入：
npm install
之后npm会自动安装你需要的组件。
体验Hexo
继续执行下面的命令，输入：
hexo g
这个命令是将MD文件转换为HTML的警惕网页
hexo s
这个命令是启动服务，默认端口为4000，可以根据自己需求来进行修改。

1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

Hexo与github进行关联

主要分为两步

  • 配置git个人信息
  • 配置Deployment信息

    配置git个人信息

    如果已经有相关配置，跳过这个环节。

  1. 在Git Bash里面输入（xxxxx中替换你自己的信息）：

    1
    2
    git config --global user.name "xxxxx"
    git config --global user.email "xxxxxxxxxx@163.com"

  2. 生成密钥

    1
    ssh-keygen -t rsa -C "xxxxxxxxxxxxxx@163.com"

配置Deployment信息

在Git Bash中安装deployer-git插件

1
npm install hexo-deployer-git --save

在安装hexo的目录下找到_config.yml，然后修改：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:linyemin/linyemin.github.io.git
  branch: master

替换掉里面的repo内容，也就是在github中的仓库地址。

测试和github关联成功

1
2
$ hexo clean
$ hexo g -d //生成及部署到github

部署成功后，直接在浏览器中查看https://linyemin.github.io，这里的地址需要替换成你自己的仓库地址。如果可以成功看到网页，则说明你部署成功。

Next主题的配置

1) 安装Next
在安装hexo的目录下：

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

2) 配置Next
在当前目录下，修改_config.yml文件

1
theme: next

3) 验证主题

1
2
$ hexo clean
$ hexo g -d

查看网页是否已经替换了主题.
4) 主题设定
Next提供了三种主题，即Scheme。在themes/next/_config.yml中进行配置：

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

这里选择Pisces，这个也是我比较喜欢的Scheme。
5) 设置语言
编辑在主目录下myblog里的_config.yml：

1
language: zh-Hans

目前Next支持的语言如下：

1
2
3
4
5
6
7
8
9
10
语言   |   代码   |   设定实例
English   |   en   |   language: en
简体中文   |   zh-Hans   |   language: zh-Hans
Français   |   fr-FR   |   language: fr-FR
Português   |   pt   |   language: pt
繁體中文   |   zh-hk   |   或者 zh-tw	language: zh-hk
Русский язык   |   ru   |   language: ru
Deutsch   |   de   |   language: de
日本語   |   ja   |   language: ja
Indonesian   |   id   |   language: id

6) 设置菜单
修改_config.yml文件

1
2
3
4
5
6
7
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

7) 修改Scheme Pisces的主页面大小
默认的右侧偏小（个人感觉），往往会造成代码段阅读的不友好（被跨行），因此需要调节主页内容版块的大小。
打开文件myblog/themes/next/source/css/_variables/custom.styl

1
2
$main-desktop                   = 1200px
$content-desktop                = 900px

8) 验证修改

1
2
$ hexo clean
$ hexo g -d

最终效果如下图：