Hexo搭建个人博客

发表于 | 分类于 |

记录通过Hexo搭建个人博客系统的全过程。其中主题选择NexT，部署平台为Github Pages 和 Coding.net，图床选用七牛云，写作软件选用Yu Writer。

前言

我一直以来想搭建一个自己的博客，因为对PHP有那么一点点了解，所以先尝试了WordPress。但是搭建完之后，不知道为什么速度委实感人；在线编辑，打开速度太慢，离线编辑又没有好的双向同步工具，只好放弃；但最近发现Hexo来搭建博客也不错，首先满足我的离线编辑需求，其次我也非常喜欢MarkDown简洁的语法，并且利用Github或者Coding.net的Pages服务可以直接发布到网上，不占用我的云服务器资源，所以果断转向Hexo。

搭建Hexo

安装Node.js和npm

Hexo是基于Node.js的，相关的环境已经可以用npm来进行管理，所以我们只需要安装好Node.js和npm就可以自动安装Hexo了，另外在安装的过程中需要用到Git，所以Git也需要一并安装。
我用的是MacBook Pro，直接通过brew安装Node.js和npm。

1
$ brew install node npm git

如果是Ubuntu，则可以通过apt安装

1
$ sudo apt install node npm git

如果是Windows 10，我建议使用WSL，安装Ubuntu来进行管理。

安装Hexo

安装Hexo环境

这里利用全局安装的方法安装Hexo，所以需要用到root权限。

1
$ sudo npm install hexo-cli -g

创建默认的博客环境

选取一个文件夹作为博客服务的默认文件夹，然后执行如下命令,

1
2
3
$ mkdir blog
$ cd blog
$ hexo init

这里我新建了一个blog文件夹作为我的博客的默认路径，
安装完后 会生成如下文件

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
    └── landscape

开启博客服务

1
2
3
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

至此我们的博客服务就开启了，通过浏览器打开http://localhost:4000这个地址 就可以访问我们的博客了。
另外参数server可以简写为s，访问端口可以通过-p参数指定，如想通过8080端口访问网页，上述命令可以简写为

1
2
3
$ hexo s -p 8080
INFO  Start processing
INFO  Hexo is running at http://localhost:8080 . Press Ctrl+C to stop.

创建一个新的页面

1
$ hexo new "Hello Vae"

执行上述命令后，会在source/_posts文件夹下创建一个名为Hello Vae.md的文件，这个文件就是我们新的页面文件。

配置NexT主题

安装NexT主题

原始的Hexo 主题不太适合做个人的博客（主要是没人做图），所以选择了NexT这个简洁大方的且易于配置的主题。
还是在blog的根目录执行如下命令，等待安装完成。

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

安装完成后，在themes文件加下，会出现next文件夹，这个就是存储我们NexT主题相关文件。
编辑blog录中的_config.yml配置文件， 找到 theme 字段，并将其值更改为 next，如此来开启Next主题。

配置Mist Scheme

NexT主题提供三种不一样的风格可供选择，我的博客选择的是Mist。修改方法如下
编辑next目录中的_config.yml配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

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

其余的配置可参照NexT官方帮助文档。

启用畅言评论系统

NexT主题原生支持畅言的评论系统。只需要开启相关的服务即可。
编辑next目录中的_config.yml配置文件，启用畅言评论系统。
畅言的appid和appkey,可以从畅言后台的左侧菜单”后台总览”获取.

1
2
3
4
5
# changyan
changyan:
enable: true
appid: *******
appkey: **********

以后在每篇博客的注释部分 comments: true即可开启评论功能，如：

1
2
3
4
5
6
7
8
9
10
---
title: Hexo搭建个人博客
date: 2018-10-30 09:33:35
comments: true
categories:
- Hexo
tags:
- Hexo
- NexT
---

配置本地搜索

既然是博客系统，那就避免不了搜索自己之前写的文档，自己的个人博客，文章数量不会太多，配置本地搜索即可满足需求。

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令

    1
    $ npm install hexo-generator-searchdb --save

  2. 编辑blog录中的_config.yml配置文件，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path:  search.xml  
      field:  post  
      format:  html  
      limit:  10000

  3. 编辑next目录中的_config.yml配置文件，启用本地搜索功能：

    1
    2
    3
    # Local search  
    local_search:  
      enable: true

发布到GitHub

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用Github Pages默认提供的域名github.io或者自定义域名来发布站点。Github Pages支持自动利用 Hexo 生成站点，也同样支持纯 HTML 文档，将你的Hexo站点托管在Github Pages上是一个不错的选择。

创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了，是不是很方便？
由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。
几个注意的地方：

  1. 注册的邮箱一定要验证，否则不会成功；
  2. 仓库名字必须是：username.github.io，其中username是你的用户名；
    创建成功后，以后你的博客所有代码都是放在这个仓库里啦。

创建SSH Key

输入命令ssh-keygen -t rsa –C “youremail@example.com”。此处的邮箱地址，填写你注册的邮箱地址。在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。

配置发布内容

编辑blog录中的_config.yml配置文件，搜索 scheme 关键字，修改成以下内容：

1
2
3
4
deploy:
  type: git
  repo:
    github: https://github.com/vae-0118/vae-0118.github.io.git,master

发布到GitHub Pages

配置完成后，运行如下执行，即可将博客发布到GitHub Pages上：

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

上述命令的后两条还可简化为

1
$ hexo g -d

发布到Coding.net

设置七牛云图床

利用Yu Writer写博客