Hexo使用入门

发表于 | 更新于 | 评论数： | 阅读次数：
本文字数： 6.2k | 阅读时长 ≈ 11 分钟

Hexo博客搭建的基础大致流程为：

  • 安装Node.js → 安装Hexo → 本地测试运行 → 安装及配置主题 →安装Git → 注册github与coding并创建pages仓库 → 部署
  • Node.js和git的安装大家自己去网上搜下，相关的文章很多

    Hexo安装和配置

Hexo安装

在终端执行以下命令通过npm安装Hexo(这里有个前提是你的电脑node环境已经装好)

npm install -g hexo-cli

Hexo初始化

Hexo安装完成后,先提前建好一个文件夹用来做我们博客项目的文件夹。比如我这里在用户主目录下建了一个hexo文件夹，里面建了一个blog文件夹。

在blog文件夹中打开终端，或者通关cd命令进入blog这个目录

cd hexo/blog

执行命令：

hexo init # hexo会在当前文件夹建立网站所需要的所有文件

npm install # 安装依赖模块

新建完成后，blog文件夹目录结构如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

启动hexo本地站点，并开启调试模式（即加上 –debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误

hexo s -d # 等同于hexo server –debug，在本地服务器运行

然后打开浏览器输入http://localhost:4000。可以看到如下界面：

新建页面和文章

1
2
hexo new "title"  # 生成新文章：\source\_posts\title.md
hexo new page "title"  # 生成新的页面，后面可在主题配置文件中配置页面

生成文章或页面的模板放在博客文件夹根目录下的 scaffolds/ 文件夹里面，文章对应的是 post.md ，页面对应的是page.md，草稿的是draft.md

编辑文章

打开新建的文章\source_posts\postName.md，其中postName是hexo new “title”中的title

1
2
3
4
5
6
7
8
9
---
title: postName  # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2018-8-6 23:49:28  # 文章生成时间，一般不改
categories: diary  # 文章分类目录，多个分类使用[a,b,c]这种格式
tags: [Hexo,diary]  # 文章标签
---
#这里开始使用markdown格式输入你的正文。
<!--more--> 
#more标签以下的内容要点击“阅读全文”才能看见，#more标签以上的内容为你首页显示文章的摘要部分

MD文章编辑

如果你对MD语法不熟悉，推荐你去马克飞象使用它的在线网页编辑，可以实现一边打字一边查看效果，很方便。
地址：https://maxiang.io/
我这里用的mac的MacDown编辑，类似的软件还有 Mou 、Typora

到这里hexo就算是安装好了，接下来就是一些详细的配置了。

常用命令总结

1
2
3
4
5
6
7
hexo init [folder] # 初始化一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来
hexo version # 查看版本
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g # 等于hexo generate # 生成静态文件
hexo s # 等于hexo server # 本地预览
hexo d # 等于hexo deploy # 部署，可与hexo g合并为 hexo d -g

博文插入图片

1.首先确认站点配置文件_config.yml 中有 post_asset_folder:true。
Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder
当您设置post_asset_folder为true参数后，在建立文件时，Hexo
会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。

2.在hexo的目录下执行npm install hexo-asset-image --save

3.完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。

比如我这里新建一篇文章 执行：hexo new "Hexo使用入门" 就会在我的source/_posts目录下生成 Hexo使用入门.md 文件 和 Hexo使用入门 文件夹，将我们这篇文章要用到的图片放入该文件夹就行了

需要引入某张图片，就这样写 ![](Hexo使用入门/5.png)

这里有一个坑，如果同时使用了hexo-abbrlink插件做了链接持久化的话,引用图片就需要这样写：{% asset_img slug [title] %} , 比如上面的引用5.png，就写成

{% asset_img 5.png %}

备注：这种方式本地直接打开文件显示不了，本人还是推荐使用图床的方式存图片，方便放在其他博客，还可以减少请求压力。阿里云oss、七牛云、腾讯云cos 等等还有很多，只是这3个大品牌你值得拥有～～～（空了写教程，其实使用很简单的）

Hexo Next主题安装与配置

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

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

编辑站点配置文件 _config.yml ，找到 theme 字段，并将其值更改为 next。

theme: next # 当前主题名称。值为false时禁用主题

这里如果git clone太慢的话，可以看看 git clone太慢解决方式

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好先使用 hexo clean 来清除 Hexo 的缓存。

主题设定

选择 Scheme

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

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置 文件themes/next/_config.yml，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

设置站点首页不显示文章全文

打开 主题配置文件 _config.yml 文件，注意不是站点配置文件，该文件在对应主题文件夹下。找到如下：

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

把这里的false改为true就可以了在首页启动显示文章预览了，length是显示预览的长度。

这里我们可以通过在文章使用标志来精确控制文章的摘要预览，比如这篇文章就是在这个段落的末尾添加了该标志，所以本文在首页的预览就会显示到这个段落为止。

强烈推荐使用该标志来控制文章的摘要预览，因为这种方式可以让摘要也按照css文件中的样式来渲染。如果使用了自动摘要的功能，你会发现文章摘要是一大团没有样式的文本，很是难看。

其他的文章配置（字数统计、阅读时长）
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
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
# 自动将页面滚动到<!-- more -->标记下的地方。
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# 自动保存每篇文章或页面上一次滚动的地方。
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
# 自动在首页对文章进行摘要描述作为前言文本。
excerpt_description: true

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 不推荐使用自动摘要。
# 请在文章中使用<!-- more -->标志来精确控制摘要长度。
auto_excerpt:
  enable: true
  length: 200

# Post meta display settings
# 文章元数据展示设置
post_meta:
  # 文本显示
  item_text: true
  # 创建时间
  created_at: true
  # 更新时间
  # 这个更新时间有点问题，因为每次重新生成文章/部署时都会刷新更新时间，不建议使用
  updated_at: false
  # 目录分类
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 文章字数展示设置
# 显示统计字数和估计阅读时长
# 注意：这个要安装插件，先进入站点文件夹根目录
# 然后：npm install hexo-wordcount --save
post_wordcount:
  # 文本显示
  item_text: true
  # 文章字数统计
  wordcount: true
  # 阅读时长
  min2read: true
  # 站点总字数统计
  totalcount: false
  # 该post_wordcount的所有设置另起一行显示
  separated_meta: true

上面的字数统计和估计阅读时长需要安装hexo-wordcount插件，执行

npm install hexo-wordcount –save

添加链接持久化

hexo默认的链接是http://xxx.yy.com/2013/07/14/hello-world这种类型的，这源于站点配置文件_config.yml里的配置:permalink: :year/:month/:day/:title/.这种默认配置的缺点就是当我们创建的博文名包含中文的名的时候，url链接地址经常会变成一串很长的难以理解的字符串，不利于博文的链接分享，以及搜索引擎搜索，另外就是年月日都会有分隔符。我们可以让url链接持久化来解决这个问。

  1. 安装hexo-abbrlink插件

    npm install hexo-abbrlink –save

  2. 修改站点配置文件 _config.yml

    • permalink: post/:abbrlink.html

    • 添加 abbrlink:

1
2
3
4
5
6
permalink: post/:abbrlink.html  # :year/:month/:day/:title/     # 文章的永久链接格式
permalink_defaults:     # 永久链接中个部分的默认值
# abbrlink config 需安装插件hexo-abbrlink
abbrlink:
  alg: crc32  # 算法： crc16(default) and crc32
  rep: hex    # 进制： dec(default) and hex

添加百度分享

修改 主题配置文件 _config.yml

1
2
baidushare:
  type: slide  #还有一个值是button是显示在文章最后的一排小图标按钮，有点丑，可以自己试试看

添加站内搜索功能

  • 安装 hexo-generator-search 插件

    $ npm install hexo-generator-search –save

  • 配置站点文件_config.yml:

    1
    2
    3
    4
    # 站内搜索
    search:
      path: search.xml
      field: post

  • 配置主题文件_config.yml:

    1
    2
    local_search:
      enable: true

添加阅读次数统计

参考 这里 写得很详细（主要还是因为我懒）

还有一些修改没写。留着有时间再来写吧。。。
添加百度统计，codingpage、来必应评论、标签页、打赏、原创声明、存
同步到Github，域名解析

参考链接：

大爷，赏点？
0%