Kun's Blog

Hexo 搭建博客

Posted on   |   Updated on | In | Visitors   |   1.8k words

Hexo 集简洁大方美观与一体！

必要的环境配置

安装 homebrew

打开 terminal，输入以下命令：

1
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

安装 Node

使用 homebrew 安装，brew install node 一键搞定。

node.js 安装完成后，npm 也安装了。

安装 Git

1
$ sudo brew install git

配置 GitHub

使用 GitHub Page 搭建博客, 需要遵循一定的规则, 需要在 github 建立仓库,仓库名为 username.github.io, 更多详情请参考官方文档.

我想大部分想用 Hexo 创建博客的人都会有吧，可以跳过这一步。

安装 Hexo

  • 安装

    1
    2
    3
    4
    $ mkdir hexo # 创建名为 hexo 的文件夹
    $ cd hexo
    $ npm install -g hexo-cli
    $ npm install hexo --save

  • 部署 Hexo：初始化

    1
    $ hexo init

  • 安装 Hexo 插件：生成 sitemap，Rss，部署到 git 等

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $ npm install hexo-generator-index --save
    $ npm install hexo-generator-archive --save
    $ npm install hexo-generator-category --save
    $ npm install hexo-generator-tag --save
    $ npm install hexo-server --save
    $ npm install hexo-deployer-git --save
    $ npm install hexo-deployer-heroku --save
    $ npm install hexo-deployer-rsync --save
    $ npm install hexo-deployer-openshift --save
    $ npm install hexo-renderer-marked@0.2 --save
    $ npm install hexo-renderer-stylus@0.2 --save
    $ npm install hexo-generator-feed@1 --save
    $ npm install hexo-generator-sitemap@1 --save
     $ npm install https://github.com/CodeFalling/hexo-asset-image --save

来 Hexo 吧

创建新博文

执行 new 命令，生成制定名称的文章至 hexo\source_posts\postName.md。

1
$ hexo new [layout] "postName" # 新建文章

其中 layout 是可选参数，默认值为 post。有哪些 layout呢，请到 scaffolds目录下查看，这些文件名称就是 layout名称。当然你可以添加自己的 layout，方法就是添加一个文件即可，同时你也可以编辑现有的 layout，比如 post 的 layout默认是hexo\scaffolds\post.md。

可以修该默认的 post 格式，例如添加 categories/description，以避免每次手动输入，只需修改 hexo\scaffolds\posts.md 文件，如下：

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
categories:
tags:
description:
---

更多信息参考：Writing

接下来，你就可以用喜爱的编辑器尽情书写你的文章。

对于文章摘要，在需要显示摘要的地方（Markdown 文件中）添加如下代码即可：

1
<!--more-->

more 以上内容即是文章摘要，在主页显示，more 以下内容点击 Read More 链接打开全文才显示。

生成静态站点文件

执行如下命令，生成静态页面至 hexo\public\ 目录。

1
$ hexo generate

参考：Generating

本地启动

执行如下命令，启动本地服务，进行文章预览调试。

1
$ hexo server

然后浏览器输入 http://localhost:4000 就可以看见效果。

参考：Server

部署到 Git

请注意这一步很重要：需要修改主目录（hexo\）下的 _config.yml 文件。

添加如下内容：

1
2
3
4
deploy:
	type: git
	reposotory: git:github.com:<your github name>/<your github name>.github.io.git
	branch: master

需要注意的是：每个 : 后面必须有一个空格！

然后 terminal 输入：

1
$ hexo deploy

参考：Deployment

主题设置

该博客采用 iissnan 的 Next 主题，他的博客有详细的安装教程，有需要的朋友直接参考他写的教程，一气呵成!

下载主题

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

应用 Hexo 主题

在 hexo 目录下找到 _config.yml 配置文件，找到 theme 字段，并将其值更改为
next，如下所示：

1
theme: next

404页面

GitHub Pages 自定义404页面非常容易，直接在 themes\next\source目录下创建自己的 404.html 就可以，内容自己写。

自定义页面

执行如下 new page 命令：

1
2
$ hexo new page "about"
$ hexo new page "categories"

在 hexo\source\ 下生成 about 和 categories 目录，里面均有个 index.md 文件。

当然了，上述步骤也可以手动生成，效果完全等价。

其他设置

请参考 Next 官方网站详细的说明文档：

最后附上我的两个 _config.yml 配置文件，仅供参考。

主目录下的 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Kun's Blog
subtitle:
description: Stay Hungry, Stay Foolish
author: Kun XIE
avatar: /images/avatar.jif
email: cnxiekun@gmail.com
language: en
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://cnxiekun.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Comment
# disqus_shortname: cnxiekun


# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# 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
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: false 
    permalinkClass: header-anchor
    permalinkSymbol: 


# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: 
    github: git@github.com:cnxiekun/cnxiekun.github.io.git
    coding: git@git.coding.net:cnxiekun/cnxiekun.git
  branch: master

Next 主题目录下的 _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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

# Specify the date when the site was setup
since: 2017

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags
  about: /about
  #sitemap: /sitemap.xml
  #commonweal: /404.html

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat



# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces


# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------


# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  GitHub: https://github.com/cnxiekun
  Weibo: http://weibo.com/1740393132
  #LinkLabel: Link
  #Zhihu: Link


# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  # Twitter: twitter
  Weibo: weibo
  # Zhihu: battery-3


# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.gif


# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true

sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  display: post
  #display: always
  #display: hide
  #display: remove

  # Sidebar offset from top menubar in pixels.
  offset: 12
  offset_float: 0

  # Back to top in sidebar
  b2t: false

  # Scroll percent label in b2t button
  scrollpercent: false


word_count: true

# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: true
  image: /images/Avatar.jpg


# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# highlight_theme: night bright


# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML


# Local search
local_search:
  enable: true


#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: true

# Assets
css: css
js: js
images: images

# Theme version
version: 5.1.0

我的 Hexo 源代码（包括 Next 主题）都托管在了 GitHub，欢迎 fork，仅需修改少量设置即可使用。

本文标题:  Hexo 搭建博客

文章作者:  

发布时间:  2017年03月26日 - 00时00分00秒

最后更新:  2021年07月12日 - 15时17分24秒

原始链接:  https://cnxiekun.github.io/2017/03/26/Hexo-%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/

转载请保留以上信息。