Hexo搭建博客记录

hexo搭建静态页博客非常简单,并能通过github的pages服务发布而不用租服务器。以下是我使用hexo搭建博客的过程以及踩的一些坑。


准备环境

首先配置好node环境(不记录如何安装node)

通过npm或cnpm安装hexo客户端

1
npm install hexo-cli -g

搭建站点

站点配置

新建hexo站点文件夹

1
2
3
hexo init your-hexo-site
cd your-hexo-site
npm install

修改根目录下的_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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Tim Jiang 博客
subtitle: 佛系程序猿的笔记
description: 佛系程序猿的笔记
keywords: java,python,linux
author: Tim Jiang
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: blog.timjt.com
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:

# Writing
new_post_name: :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: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# 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/
# 表示使用next主题,需要单独下载
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
# 用于rss生成
plugins: hexo-generate-feed

因为我使用next主题,所以clone下next主题(http://theme-next.iissnan.com/getting-started.html),下载完之后去根目录下的_config.yml配置主题,如上。

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

主题配置

找到next主题配置文件themes\next_config.yml,参考官网,进行你需要的配置

favicon 可以进行网站logo配置,将你相应的图片放入next主题下的images文件夹

1
2
3
4
5
favicon:
small: /images/logo16.png
medium: /images/logo32.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

rss 需要先通过npm安装hexo-generate-feed

1
rss: /atom.xml

menu 可以开启导航菜单,新增菜单时,需要在根目录的source中新增相同名称的文件夹,以及index.md

1
2
3
4
5
6
7
8
9
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat


华丽丽的分割线

评论配置

配置评论,我使用的是gitment,简单快捷,需要先去github申请OAuth secret,以下配置需填入自己的github信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
enable: true
mint: false # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: true # Comments lazy loading with a button
cleanly: true # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: Tim-JT # MUST HAVE, Your Github ID
github_repo: Tim-JT.github.io # MUST HAVE, The repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

注意mint设置为false,因为gitment原作者提供的跨域转发服务的https证书已经过期,这里需要修改themes\next\layout_third-party\comments\gitment.swig
具体参考
https://github.com/imsun/gitment/issues/170
https://www.wenjunjiang.win/2017/07/02/gitment%E8%AF%84%E8%AE%BA%E6%A8%A1%E5%9D%97%E6%8E%A5%E5%85%A5hexo/

1
2
3
4
5
6
7
8
9
{% if theme.gitment.mint %}
{% set CommentsClass = "Gitmint" %}
<link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
<script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>
{% else %}
{% set CommentsClass = "Gitment" %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
{% endif %}

替换为

1
2
3
4
5
6
7
8
9
{% if theme.gitment.mint %}
{% set CommentsClass = "Gitmint" %}
<link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
<script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>
{% else %}
{% set CommentsClass = "Gitment" %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://www.wenjunjiang.win/js/gitment.js"></script>
{% endif %}

引用来源

  1. hexo的next主题个性化配置教程
  2. https://github.com/imsun/gitment/issues/170
  3. https://www.wenjunjiang.win/2017/07/02/gitment%E8%AF%84%E8%AE%BA%E6%A8%A1%E5%9D%97%E6%8E%A5%E5%85%A5hexo/

本文标题:Hexo搭建博客记录

文章作者:Tim Jiang

发布时间:2018年10月09日 - 10:10

最后更新:2018年10月10日 - 15:10

原始链接:www.timjt.com/3515830238/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

显示 Gitment 评论