Hexo 建站记录

Posted on | In | | Views:
| 13k | 0:12

Hexo 是一个轻便的博客框架。根据官网的一些文档及网上的教程，尝试用 Hexo 搭建一个静态的博客站点。下面的操作在 win10 64 位家庭版中完成。bash 命令在 git bash 中操作。

基础

前提

首先需要安装 git 和 npm，git 已经安装好了。到 npm 官网 下载并安装 npm。

安装

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
# 安装
npm install hexo-cli -g

# 查看版本
$ hexo -v
hexo: 3.5.0
hexo-cli: 1.0.4
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.7.0
node: 9.5.0
v8: 6.2.414.46-node.18
uv: 1.19.1
zlib: 1.2.11
ares: 1.13.0
modules: 59
nghttp2: 1.29.0
napi: 2
openssl: 1.0.2n
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

# 建站
hexo init hexo
cd hexo
npm install

配置站点

打开 _config.yml 文件，修改一些基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site
title: Yiwei Niu's blog
subtitle: to share, to learn
description: a beginner, a learner
author: Yiwei Niu
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://yiweiniu.github.io/blog
root: /blog/
permalink: :year/:month/:title/
permalink_defaults:

安装主题

选择了 Next 这一主题：

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

将 _config.yml 中 theme 设置为 next。

生成

1
hexo g

部署

先在 GitHub 上建立了一个空的 repository，名字为 blog。然后修改 _config.yml 文件，注意这里设置的 branch 名字。第一个 branch 名字 为 gh-pages，这样命名是默认的项目主页。利用新的 hexo-deployer-git 就可以很方便地将网站和源码同时放在 git 上，这样即便更换电脑也可以从源码拉取代码，重新生成网站。参考自: 使用hexo，如果换了电脑怎么更新博客？

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: git@github.com:YiweiNiu/blog.git
    branch: gh-pages

首先需要配置 ssh 公钥

1
2
# 生成
ssh-keygen -t rsa (一路回车)

打开 git 网站，在设置部分添加 ssh keys，然后将 ~/.ssh/id_rsa.pub 中的内容复制到其中。

接下来就可以部署到 git 了。

1
2
3
npm install hexo-deployer-git --save
# 部署
hexo d

本地调试

可以在本地调试

1
2
3
4
# 安装
npm install hexo-server --save
# 运行本地服务器
hexo s [-p 4000]

服务器默认运行在 0.0.0.0，您可以覆盖默认的 IP 设置。默认端口为 4000，可以用 -p 设置端口。

1
hexo server -i 192.168.1.1

高级

添加「标签」页面

新建「标签」页面，并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签，若你的所有文章都未包含标签，此页面将是空的。 底下代码是一篇包含标签的文章的例子：

1
2
3
4
5
title: 标签测试文章
tags:
  - Testing
  - Another Tag
---

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

1
hexo new page tags

编辑刚新建的页面，将页面的 type 设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

1
2
3
4
5
6
---
title: tags
date: 2018-02-07 17:14:22
type: "tags"
comments: false
---

添加「分类」页面

新建「分类」页面，并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类，若你的所有文章都未包含分类，此页面将是空的。 底下代码是一篇包含分类的文章的例子：

1
2
3
title: 分类测试文章
categories: Testing
---

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：

1
hexo new page categories

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

1
2
3
4
5
6
---
title: categories
date: 2018-02-07 17:14:06
type: "categories"
comments: false
---

设置页面文章的篇数

我想在首页及 archive/tag 页面展示不同的文章数，参考这里进行了设置：如何设置页面文章的篇数？

首先检查这几个插件是否安装上了：

1
2
3
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

然后打开站点的 _config.yml 添加下面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
index_generator:
  path: ''
  per_page: 8
  order_by: -date

archive_generator:
  per_page: 0
  yearly: true
  monthly: false

tag_generator:
  per_page: 10

资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过打开 _config.yml 文件，修改 post_asset_folder 选项设为 true，

1
2
_config.yml
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在 Hexo2 时代，社区创建了很多插件来解决这个问题。但是，随着 Hexo3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3
4
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
{% post_link post_name post_name_show %}

比如：

1
2
3
{% asset_img zotero_rna_1518862657_29629.png zotero_example %}

{% post_link Detect-Microbial-Contamination-in-Contigs-by-Kraken "Detect Microbial Contamination in Contigs by Kraken" %}

注意：图片标题不能以下划线起始 _，不知道为什么。

置顶文章

突然发现有时候有博客置顶的功能。参考这篇博客：解决Hexo置顶问题。

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的 Front-matter 中加上 top: true 即可。

改变 Markdown 渲染器

由于使用 VNote 做笔记，顺便发布到博客上。VNote 默认的 Markdown 渲染器是 markdown-it，而 Hexo 的渲染器是 GFM。并且 GFM 不支持上标、下标、脚注等。为了二者能保持一致，所以我想更换 Hexo 默认的渲染器。

1
2
npm un hexo-renderer-marked --save # 卸载原有渲染器
npm i hexo-renderer-markdown-it-plus --save    # 安装新的

编辑站点的 _config.yml，配置插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-renderer-markdown-it-plus config
## Docs: https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus
markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    pre_class: highlight
    plugins:
        - plugin:
            name: markdown-it-mark
            enable: true

查看 hexo-renderer-markdown-it-plus 了解更多。

文章加密

当然，这种加密方式非常不安全，只能阻挡普通的浏览者。参考：hexo文章密码访问的"破解"方法。

既然是博客，加密其实也没有多大意义。所以这节内容是为了玩一玩。

安装 hexo-blog-encrypt 插件

1
npm install hexo-blog-encrypt --save

启用文章加密功能，修改站点的 _config.yml 文件：

1
2
3
4
# Security
##
encrypt:
    enable: true

然后在想要加密的文章头部加上对应字段，如 password, abstract, message 等：

1
2
3
4
5
6
7
8
9
---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.    # 文章摘要
message: Welcome to my blog, enter password to read.    # 密码提示
---

添加站点地图并提交到谷歌

配置站点地图，主要用于 SEO 优化。主要参考了这篇博客：next添加sitemap

安装 hexo-generator-sitemap 插件

1
npm install hexo-generator-sitemap --save

提交 sitemap 到 Google

这块在官方文档里面有提到（官方文档其实很容易上手，跟着官方走还是很容易的，有些地方可能不够详细，但是网上关于next的配置博客也不少，如｜Hexo优化｜如何向google提交sitemap（详细），这里给出傻瓜式详细步骤：

  1. 进入 Google Webmaster Central
  2. 点击骚红色的”ADD A PROPERTY”
  3. 在弹出来的小框中加入你的站点地址 http://yoursite.com ，然后点击”Continue”
  4. Tab栏选择”Alternate methods”，选中HTML tag可以看见
    <meta name="google-site-verification" content="xxxxxxxxxxxxxxxxxx" /> #复制content的值
  5. 打开next主题的配置文件_config.yml，找到google_site_verification字段（找不到就新建）：
1
2
3
4
>># Google Webmaster tools verification setting
>># See: https://www.google.com/webmasters/
>>google_site_verification: xxxxxxxxxxxxxxxxxx #4中content的值
>>
  1. 执行命令重新发布站点
    hexo d -g
  2. 回到4中的 Google Webmaster Central 页面，点击骚红色的”VERIFY”，done！

添加蜘蛛协议

robots.txt 是搜索引擎中访问网站的时候要查看的第一个文件。robots.txt 文件告诉蜘蛛程序在服务器上什么文件是可以被查看的。

在站点 source 文件夹下新建 robots.txt 文件，文件内容如下:

1
2
3
4
5
6
7
8
9
10
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/

Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Sitemap: https://yiweiniu.github.io/blog/sitemap.xml

配置主题

下面的配置基于 Next v6.0.6，不同版本可能会有一定差异。

下面如果需要修改配置文件，都是在 themes/next 下的 _config.yml，这种站点配置和主题配置分离的方式非常灵活方便。

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。

1
2
3
4
5
6
7
8
# Scheme Settings
# ---------------------------------------------------------------

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

侧栏菜单

打开 themes/next 下的 _config.yml 文件，搜索 menu 关键字

1
2
3
4
5
6
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: https://yiweiniu.github.io/ || user

添加头像

打开 themes/next 下的 _config.yml 文件，搜索 Sidebar Avatar 关键字，去掉 avatar 前面的#

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

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。

链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

1
2
3
4
5
social:
  E-Mail: mailto:xiaohuwangwang@qq.com || envelope
  GitHub: https://github.com/YiweiNiu || github
  Weibo: http://weibo.com/u/3049858680 || weibo
  Twitter: https://twitter.com/ywniu || twitter

阅读更多

在文章中使用 < !--more--> 手动进行截断。这种方法可以根据文章的内容，自己在合适的位置添加 < !--more--> 标签，使用灵活，也是 Hexo 推荐的方法。

自动形成摘要，在主题配置文件中添加。默认截取的长度为 150 字符，可以根据需要自行设定

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

显示文章字数统计,阅读时长

在你站点的根目录下

1
npm install hexo-symbols-count-time --save

修改站点配置 _config.yml，添加下面的内容：

1
2
3
4
5
6
7
# word count
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  symbols: true
  time: true
  total_symbols: false
  total_time: false

修改主题配置 themes/next 下的 _config.yml，搜索关键字 post_wordcount

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: false
  item_text_post: false
  item_text_total: false
  awl: 5
  wpm: 200

修改网页底部

在图标库中找到你自己喜欢的图标，打开 themes/next 下的 _config.yml，搜索关键字 authoricon，替换图标名。

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
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2017

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
    # `heart` is recommended with animation in red (#ff0000).
    name: mars
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false
  # -------------------------------------------------------------
  # Any custom text can be defined here.
  #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

开启版权声明

主题配置文件下,搜索关键字 creative_commons

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

浏览进度

浏览页面的时候显示当前浏览进度

1
2
# Scroll percent label in b2t button.
scrollpercent: true

评论系统 DISQUS

先到 Disqus 网站配置一下，在右上角有一个齿轮的标记 setting，在下拉列表中选择 add disqus to site，需要填写 Site URL，Site Name，Site Shortname，完事后就注册了一个账号。

编辑 主题配置文件， 将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否显示评论数量。

1
2
3
4
disqus:
  enable: false
  shortname: disqus_short_name
  count: true

内容分享

在网站 AddThis 上注册账号。 可以使用 Google/Facebook/Twitter 账号进行第三方登陆。从菜单获得 AddThis id：More… --> General --> ID。在 主题配置文件 中，把 #Share 下的 #add_this_id 取消注释， 改为 add_this_id: put_your_add_this_id_here。

本地搜索

添加百度/谷歌/本地 自定义站点内容搜索

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

1
npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

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

编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

添加谷歌统计

注册 Google Analytics。

在主题下的 _config.yml 文件中添加：

1
google_analytics: UA-[TrackingID]-1

阅读次数统计（LeanCloud)

安装插件

1
$ npm install hexo-leancloud-counter-security --save

配置站点文件

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  username: <<your username>> # Will be asked while deploying if is left blank
  password: <<your password>> # Recommmended to be left blank. Will be asked while deploying if is left blank

配置主题文件

1
2
3
4
5
6
7
8
9
10
11
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in lc counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  security: true
  betterPerformance: false

参考了这篇博客：https://theme-next.org/docs/third-party-services/statistics-and-analytics。对 LeanCloud 进行配置。

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: sxYNFK15bXIJqayGqYdiJNsw-gzGzoHsz
  app_key: inuUVGRl3VjbS7oJLrS8uYMe

修改超链接样式

Next 主题默认的超链接样式是下划线，纯白色，在网页中很不明显。我参考了这篇博客对超链接样式进行了修改： Hexo + Next 的优化

在 /theme/next/source/css/_custom/custom.styl 中修改，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
.post-body a {
    color: #428BCA;
    text-decoration: none;
    border-bottom: 1px dashed #6465a5;
    background-color: transparent;
    word-wrap: break-word;
}
.post-body a: hover{
    color:#f15838;
    border-bottom: 1px dashed #f28a31;
}

其中 a 定义了超链接的基本样式，a:hover 定义了超链接在鼠标悬停时颜色的变化。.post-body 使得改变的样式只作用与文章内部，否则你会发现文章标题下面的分类等等样式都会被改变。

日常使用

创建新文章

1
2
3
4
5
6
7
8
# 创建新文章
hexo new "xxx xxx xxx"

# 测试
hexo s

# 生成站点并部署
hexo d -g

更新 Next 主题

先备份 themes/next 下的 _config.yml。

1
2
cd themes/next
git pull

再把 _config.yml 拷贝回去。

更新 hexo 及插件

更新 hexo

1
npm update -g hexo

更新插件

1
npm update

更换电脑

有哪些文件需要同步？

在尝试使用 git 同步博客的原始时，发现会遇到各种问题。觉得不如用坚果云选择性同步这几个文件夹。然后在另一台电脑上搭建博客环境、安装相关插件后。同步这些文件，然后重新生成、部署站点。如果遇到问题，参考这篇笔记。

最后……样式虽然重要，内容才是一切。

更新历史

  • 20180207：创建笔记，记录了建站的过程
  • 20180320：更新了 Next 主题，并修改相应内容
  • 20180322：调整了笔记结构，增加了文章加密，站点地图等部分
  • 20180324：增加了“改变 Markdown 渲染器”，更改了“更换电脑”部分
  • 20180328：由于 hexo-neat 报错，移除了“静态资源压缩”部分
  • 20180330：增加“设置页面文章的篇数”,"文章置顶"部分
  • 20180404：将主题更新到了 6.1.0，更新了“修改网页底部”部分
  • 20180710：添加了“添加谷歌统计”部分
  • 20180815：添加了“修改超链接样式”部分
  • 20181105：移除了“不蒜子”部分，增加了“leancloud”部分
  • 20190714: 将 Next 主题更新到 7.2.0，修改了 “Leanclod” 部分

参考

0%