HEXO的安装配置

Posted on | Visitors:

HEXO是一款基于Node.js的静态博客框架，hexo github链接，本文仅是讲解入门的安装及使用方法。

前期准备

安装Nodejs

方案一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sudo apt-get update

sudo apt-get install python gcc make g++

wget https://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz

tar zxvf node-v6.9.1.tar.gz

cd node-v6.9.1

./configure

make install

node -v

方案二

1
curl -sL https://deb.nodesource.com/setup | sudo bash

方案三

1
sudo apt-get install nodejs

安装使用HEXO

安装

1
2
npm install hexo-cli -g
npm install hexo -g

使用

  1. 初始化
1
2
hexo init blog
cd blog
  1. 开启本地服务器
1
hexo server
  1. 创建新博客
1
hexo new "Hello Hexo"
  1. 生成静态博客
1
2
3
hexo generate
# 等价于
hexo g

结合Github

  1. git的安装就不说了
  2. 建立Repository，命名为{yourName}.github.io
  3. 修改hexo根目录下的_config.yml文件的如下内容(具体参数自行修改)
1
2
3
4
5
6
deploy:
  type: git
  repo: https://github.com/{your_github}/{yourName}.github.io.git
  branch: master
  // 如果你配置了SSH，修改为如下配置，省去每次发布输密码的烦恼
  repo: git@github.com:{your_github}/{yourName}.github.io.git
  1. 执行命令
1
npm install hexo-deployer-git --save
  1. 执行命令发布博客，之后就可以通过http://{yourName}.github.io访问到你的博客了
1
2
3
hexo deploy
# 等价于
hexo d
  1. 之后每次修改或新写博客，需要如下命令发布修改
1
2
3
hexo clean //若只新加可以不用执行
hexo generate
hexo deploy

设置主题(以next为例) [next主题配置原文]

安装

1
git clone https://github.com/xxx/xxx.git themes/xxx

配置

1
2
3
# hexo根目录下的`_config.yml` 修改

themes: xxx

主题更新

1
2
cd themes/xxx
git pull

选择主题Scheme

1
2
3
4
5
6
# 在主题目录下的`_config.yml`

# 默认
scheme: Muse -> 黑白主调，大量留白
# scheme: Mist -> 紧凑型
# scheme: Pisces -> 双栏

设置语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 支持语言

# 根目录下的`_config.yml`修改
# 简体中文
language: zh-Hans
# English
language: en
# Français
language: fr-FR
# Português
language: pt
# 繁體中文
language: zh-hk 或者 zh-tw
# Русский язык
language: ru
# Deutsch
language: de
# 日本語
language: ja
# Indonesian
language: id

菜单设置

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

菜单图标配置

1
2
3
4
5
6
7
8
9
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

设置头像

1
2
3
4
5
6
7
8
# 完整互联网路径
avatar: http://example.com/avatar.png

# 将头像放置主题目录下的 `source/uploads/ `
avatar: /uploads/avatar.png

# 放置在 `source/images/`
avatar: /images/avatar.png

设置作者昵称

1
2
3
#编辑根目录`_config.yml`

author: 你的昵称

设置描述

1
2
3
# 编辑根目录`_config.yml`

description: 你的描述，随性而写

配置多说评论

多说评论已停止运营

1
2
3
4
# 多说账号自行申请
# 编辑根目录`_config.yml`

# duoshuo_shortname: 多说昵称

推荐主题

1
2
3
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

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

安装三方插件

显示emoji

  • 卸载hexo原来的 hexo-renderer-marked 插件

    1
    $ npm un hexo-renderer-marked --save

  • 安装 markdown-it

    1
    $ npm i hexo-renderer-markdown-it --save

  • 安装 markdown-it-emoji 插件

    1
    npm install markdown-it-emoji --save

  • 配置 _config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # 在_config.yml文件中加入下面这段话
    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
      render:
        html: true
        xhtmlOut: false
        breaks: true
        linkify: true
        typographer: true
        quotes: '“”‘’'
      plugins:
        - markdown-it-abbr
        - markdown-it-footnote
        - markdown-it-ins
        - markdown-it-sub
        - markdown-it-sup
        - markdown-it-emoji  # add emoji
      anchors:
        level: 2
        collisionSuffix: 'v'
        permalink: true
        permalinkClass: header-anchor
        permalinkSymbol: ¶