0%

hexo的安装之路

发表于 更新于 分类于
本文字数： 5.3k 阅读时长 ≈ 5 分钟

1. 前言

作为一个新手，安装 hexo 的过程并不是很顺利的；写下本文，记录下自己在 Ubuntu 上配置的细节，以便于自己今后的恢复工作。

2. 安装

2.1 依赖安装

hexo 是基于 Node.js 的，安装 hexo 之前要先安装 Node.js

本人直接下载的针对Linux的64位安装包，解压到~/.local文件夹下，直接使用的user模式。

测试安装成功与否：

1
npm --version

以我目前的安装版本为例会显示

1
3.10.10

此外，还需要Git的支持，这个不在介绍了。

2.2 hexo 安装

1
npm install hexo-cli -g

执行hexo -v查看自己的配置

2.3 开始使用

在你所需要的路径下执行

1
hexo init blog

会在该路径下创建一个名为blog的文件夹，之后的博客网站文件会在该文件夹下；
然后

1
2
3
cd blog
npm install
hexo server

就可以看到一个初始版本的博客网站了，注意以上的hexo server的一个简写版本为hexo s.

2.4 安装主题

以 NexT 主题为例，这里可以参考其官方教程安装。下面是我的安装过程。

在blog文件夹下

1
2
3
4
5
cd themes
mkdir next
git clone https://github.com/iissnan/hexo-theme-next.git next
cd next
git checkout tags/v5.1.0

其中版本号可以执行git tag -l查看到版本列表。

打开blog文件夹下的_config.yml文件，将其内的theme:后面修改为next即可。

2.5 其他包的安装

1
2
3
npm install hexo-deployer-git --save
npm un hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save

解释一下，第一行是为了往其他平台（大部分都是GitHub Pages）发布需要的包；第二行是卸载掉hexo自带的基础markdown解析引擎；第三行是安装丰富解析的markdown-it解析引擎。

之所以替换，是因为标准的markdown不支持reference引用。替换后记得在_config.yml文件添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: false
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-sup
    - markdown-it-sub
    - markdown-it-abbr
    # - markdown-it-emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol:

以上的markdown-it-emoji注释掉了，因为目前我不需要，主要是支持emoji表情的，如有需要可以执行如下安装[1]

1
npm install markdown-it-emoji --save

3. 配置

3.1 Git 配置

如果要发布到GitHub Pages上，需要优先配置本地Git连接上GitHub

生成密钥(本人使用)：

1
ssh-keygen

回车即可，然后会在~/.ssh/目录下创建两个文件：

id_rsa 本地私钥

id_rsa.pub 需上传的公钥

将 id_rsa.pub 文件中的内容粘贴到 GitHub 指定配置中即可。

当然关于密钥这里也可以参考GitHub官方教程。

1
ssh-keygen -t rsa -C "your_email@example.com"

本地Git账号密码配置：

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

如果忘了自己是否已经配置过可以执行：

1
git config -l

查看配置列表。

3.2 hexo 基本配置

3.2.1 站点相关配置：

1
2
3
4
5
6
7
# Site
title: [站点主标题]
subtitle: [站点副标题]
description: [站点描述]
author: [作者]
language: [语言，默认是英文，可修改为：zh-Hans]
timezone: [站点的时区，可不填]

3.2.2 站点URL配置：

1
2
3
4
url: [站点网址]
root: [站点所在网址的根目录]
permalink: [永久链接格式，可不做修改]
permalink_defaults: [默认永久链接格式，为空即可]

举个例子：假如你的网址是http://yoursite.com，而你的博客位于该网址的/blog文件夹下则可以有如下设置

1
2
3
4
url: http://yoursite.com
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:

如果是往GitHub Pages上发布的话可以用如下配置：

1
2
3
4
url: http://yourname.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

3.2.3 Deploy配置：

以往GitHub Pages上发布为例

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io.git
  branch: master

3.2.4 主题

以 NexT 为例：

1
theme: next

3.3 主题配置

这里主要以 NexT 为例。

3.3.1 菜单栏配置

按需所取，这里我只用到了分类、归档和标签：

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

注意：开启新的页面需要执行

1
hexo hexo new page [page name]

并对新页面加以配置。以我自己的配置为例：

1
2
hexo hexo new page categories
hexo hexo new page tags

分别打开位于blog/source/categories以及blog/source/tags下的index.md 文件，分别进行以下配置

1
2
3
4
title: 分类
date: 2017-09-20 22:03:42
type: "categories"
comments: false
1
2
3
4
title: 标签
date: 2017-09-20 22:03:42
type: "tags"
comments: false

3.3.2 主题风格

个人觉得Pisces好看点：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

3.3.3 个人社交链接

按需求来吧：

1
2
3
social:
    GitHub: https://github.com/yourname
    Weibo: https://weibo.com/youruid

3.3.4 头像设置：

1
avatar: /images/avatar.jpg

在主题文件夹下的source/images 文件夹里添加自己的头像，按照上述方式饮用即可。

3.3.5 打赏

注意：NexT自带的打赏插件，默认只有英文描述，如果需要中文支持需要修改其源代码：
打开 themes/next/layout/_macro/reward.swig 代码：
修改其中的

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.wechatpay %}
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
        <p>WeChat Pay</p>
      </div>
    {% endif %}

    {% if theme.alipay %}
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
        <p>Alipay</p>
      </div>
    {% endif %}

为

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.wechatpay %}
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
        <p>{{ theme.reward_wechatpay_name }}</p>
      </div>
    {% endif %}

    {% if theme.alipay %}
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
        <p>{{ theme.reward_alipay_name }}</p>
      </div>
    {% endif %}

即新添加了两个可以配置的变量theme.reward_wechatpay_name以及theme.reward_alipay_name，然后就可以在主题的配置文件中进行如下配置：

1
2
3
4
5
6
7
# Reward
reward_title: 打赏
reward_comment: 您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.png
reward_wechatpay_name: 微信打赏
alipay: /images/alipay.jpg
reward_alipay_name: 支付宝打赏

3.3.6 代码主题风格

NexT主题提供了normal | night | night eighties | night blue | night bright五种风格的代码高亮主题

1
highlight_theme: night eighties

3.3.7 访问量统计

这里使用的是不蒜子插件，本人配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数
  page_pv_footer: 次

暂时配置就这些，如果再有的话，会继续补充！

  1. yangfch3.com/2016/05/08/hexo-experiences/hexo-renderer-marked-it.txt ↩︎

您的支持将鼓励我继续创作！