HEXO入门教程

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 9k | 阅读时长 ≈ 8 分钟

hexo简介

hexo是一个开源的博客系统，其完美支持Markdown的语法，是使用node.js生成静态页面，非常快，官网是https://hexo.io/zh-cn/，其部署非常简单，先安装好Node.js 等之后，再运行以下命令：

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

上述init完成之后，就会自动生成很多目录，内容如下：

1
2
3
4
5
6
7
8
9
.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── public #生成的html文件，这里面的文件都需要提交到github
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹

如果hexo server运行没有问题的话，就可以在浏览器中输入 http://localhost 回车就可以预览效果了。

配置github

看到这一步，就是要去注册github了，这里只说明一点，其他的如配置ssh key，初始化git等损人和，请参考下面的链接即可。

如果你手上没有域名，需要使用github提供的域名的话，在新建仓库时，其仓库名称必须是以github的登陆名开头，以.github.io结尾的名字。

如下图，登陆名是webw3c，那仓库名必须设置为webw3c.github.io。

推送到github

第一步：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置：

最后面要填写如上字段，注意repo要修改为自己的。

第二步：要安装一个部署插件 hexo-deployer-git。

1
2
npm install hexo-deployer-git --save
hexo g -d  #更新且推送到github

推送成功之后，就可以在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客了。

常用hexo命令

新建一个页面是使用hexo new “”

1
2
3
4
5
6
7
8
9
10
hexo new "postName" #新建文章，文件生成在在 /source/_posts 下看到一个“文章标题.md”
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

hexo s -g #生成并本地预览
hexo d -g #生成并上传

站点配置文件

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

先来看站点配置文件，其配置文件含义参考官方链接：https://hexo.io/docs/configuration，其中文的实例可以参考：http://www.mashangxue123.com/Hexo/982564298.html

一般只需要修改site部分，以及theme部分，当然还有deploy，这里给出我的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Site
title: 无名老卒BLOG
subtitle: 自己不能胜任的事情，切莫轻易答应别人，一旦答应了别人，就必须实践自己的诺言。
description:
keywords: centos
author: wumingx
language: zh-CN
timezone: 

....
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:fang141x/fang141x.github.io
    gitee: git@gitee.com:fang2000/hexo
  branch: master

注意，next主题要设置中文，网上大部分都是说要配置为zh-Hans，但我没有成功，后面使用zh-cn就成功了。这是跟主题相关的，如next主题是要查看themes\next\languages这个目录下的文件名。

主题设置

启用主题

hexo是有大量的主题，我选择了next这个主题，样式选择了Gemini scheme。

目前next的最新版本已经是7.1.1了，其官方链接为：https://theme-next.org/，旧的官司链接：http://theme-next.iissnan.com

  1. 首先下载主题

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

  2. 设置hexo站点配置文件，打开_config.yml将theme设置为next。如上的站点配置文件。

  3. 设置next主题配置文件，找到Scheme Settings，将你需用启用的 scheme 前面注释 # 去除即可。

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

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

  4. 重新发布。

    1
    2
    hexo clean
    hexo g -d

next主题设置

这部分内容直接查看以下链接即可。目前我使用的是版本为v7.1.1

菜单栏设置

1）首先，增加页面：

1
2
3
4
$ cd your-hexo-site
$ hexo new page tags		#标签页面
$ hexo new page categories	#目录页面
$ hexo new page about		#自我简介页面

2）再设置页面类型：comments: false表示取消评论；type为页面类型

  • tags设置

    1
    2
    3
    4
    5
    6
    ---
    title: tags
    date: 2019-05-19 09:38:38
    type: "tags"
    comments: false
    ---

  • 目录页设置

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2019-05-19 09:38:38
    type: "categories"
    ---

  • 自我简介页设置，自我发挥即可。

3）最后修改主题的配置文件_config.yaml

1
2
3
4
5
6
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user

注意，|| 后面的名字表示图标名，而这个名字是在https://fontawesome.com/icons?d=gallery&m=free这里面查到的。

我们知道，categories代表分类，但是分类下面的内容是不会显示的，但可以一个分类一个栏目，如下是本博客的设置：

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || home
  Linux基础: /categories/Linux基础 || linux
  工具教程: /categories/工具教程 || tools
  Docker: /categories/Docker || docker
  性能优化: /categories/性能优化 || fighter-jet
  抓包分析: /categories/抓包分析 || network-wired
  其他: /categories/其他 || thermometer
  tags: /tags/ || tags
  about: /about/ || user

404页面设置

打开hexo/source目录，手工新建404.md的文件，使用腾讯公益404页面，内容如下：

1
2
3
4
5
---
comments: false
---

<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homepagename='返回主页' homepageurl="/" charset="utf-8"></script>

然后修改主题配置文件，将menu下面的commonweal修改为commonweal: /404.html || heartbeat，然后重新发布即可。

设置「阅读全文」

如果不设置的话，打开首页，会出现文章内容全部展示的情况。有三个方法可以设置：

  • 在文章中使用 <!-- more --> 手动进行截断，推荐使用

  • 在文章的 front-matter 中添加 description，并提供文章摘录

  • 自动形成摘要，在 主题配置文件 中添加：

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150

图片设置

图片上传一般有三种方法，一是使用微博图床，二是使用七牛云储存，但听说已经翻车了，三是手工上传图片。微博图床我是有使用过的，使用起来还是很满意的，只需要在chrome安装这个插件，登陆之后就可以使用了，很方便，具体可以参考https://github.com/Semibold/Weibo-Picture-Store，但我还是怕翻车，所以只使用第三种方法。这里介绍typora的教程：

1）在typora 偏好设置里面，图片插入的选择如下：

2）在hexo/source/_post的目录下面新建assets目录，然后打开cmd，进入hexo/source目录，使用mklink来创建一个目录链接，如下：

1
2
E:\hexo\source>mklink /D assets _posts\assets
为 assets <<===>> _posts\assets 创建的符号链接

3）在typora，编辑，图片工具，设置图片根目录，把hexo\source\_posts设置为根目录，如下图：

这样三步之后，使用typora可以很方便地贴图，远离图床吧，翻车太容易~

插件设置

字数统计及阅读时长

安装hexo-symbols-count-time

只需要在hexo下安装此插件即可。

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

站点配置文件修改

修改hexo目录下面的_config.yaml，在最后面添加以下行即可。

1
2
3
4
5
symbols_count_time:
  symbols: true # 文章字数
  time: true # 阅读时长
  total_symbols: true # 所有文章总字数
  total_time: true # 所有文章阅读中时长

主题配置文件修改

由于选用的主题是next，其配置文件是里面有这个配置了，就不需要重新添加了。如果没有，可以添加如下行：

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: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: false    # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

全英文链接

默认的文章页链接是跟title相关的，如果文章标题是中文，那链接也是中文的，不太友好，第一次我是使用了hexo-abbrlink这个插件，但是生成的链接都是随机的，也不是友好的。参考了http://yangq.me/post/19acb239这篇文章，将文章页的链接自定义，比较麻烦，但可以实现自己想要的链接。以下是配置方法：

文章页全英文

在md文件的Front-matter区域，增加一个urlname属性，用来放文章的英文名字。

1
2
3
4
5
6
7
8
title: hexo链接持久化终极解决之道
urlname: hexo_permalink
date: 2017-08-31 23:53:24
comments: true
categories:
- 综合
tags:
- hexo

然后修改
_config.yml里的配置:

1
2
3
permalink: :category/:year:month:day-:urlname.html
permalink_defaults:
  urlname: index

这里设的是index,也就是说如果md里面没有这个urlname属性，则就显示index。

目录全英文

打开站点配置文件，找到category_map，给分类设置一个英文的名字:

1
2
3
default_category: uncategorized
category_map:
  综合: common

这样在Front-matter里，分类该写中文写中文，最终的链接会翻译成英文。

本站的设置如下：

1
2
3
4
5
6
7
8
category_map:
  其他: others
  Linux基础: linux
  工具教程: tools
  Docker&k8s: k8s
  性能优化: performance
  抓包分析: tcpip
  个人专用: person

阅读量统计

参考链接：https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/LEANCLOUD-COUNTER-SECURITY.md，未成功，弃用，我使用了busuanzi_count，只需要将enable修改为true即可。

valine留言系统

参考链接：https://vonsdite.cn/posts/c7d98860.html

图片放大

使用fancybox来让博文里面的图片能够点击放大查看。但我在网上找了很多资料，都没有成功，估计都是比较老的资料了吧。还是找官方的资料比较靠谱：https://github.com/theme-next/theme-next-fancybox3

1）进入hexo\themes/next下载fancybox：

1
2
3
4
E:\hexo>cd themes/next

E:\hexo\themes\next>git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
Cloning into 'source/lib/fancybox'...

2）配置一下主题配置文件将fancybox设置成true即可。

还有一个方法，不需要git，只需要设置next主题配置文件就可以了。如下：

1
2
fancybox: //cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js
fancybox_css: //cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css

加载进度条

其官网是https://github.com/theme-next/theme-next-pace，里面有安装的方法，跟fancybox是方法。

各主题样式的效果图，请查看：https://juejin.im/post/5c7d4700e51d4541d82d8b6b

添加版权说明

查找creative_commons，将post修改为true

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

如果想修改声明，打开hexo\themes\next\languages\zh-CN.yml修改如下：

1
2
3
4
5
6
copyright:
  author: 本文作者
  link: 本文链接
  title: 本文主题
  license_title: 版权声明
  license_content: "本博客所有文章除特别声明外，转载请注明出处！如有侵权，请联系我删除。"

再修改./themes/next/layout/_partials/post/post-copyright.swig，这里面的代码主要是参考了 3.16. 16、自定义文章底部版权 

1
2
3
4
<li class="post-copyright-title">
  <strong>{{ __('post.copyright.title') + __('symbol.colon') }}</strong>
  {{ post.title | default(config.title) }}
</li>

这样就会显示本文作者、本文链接、本文主题、版权声明这四项了。默认是没有本文主题这一项的，是不太友好的。

文章置顶

先安装hexo-generator-index-pin-top：

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

然后在需要置顶的文章的Front-matter中加上top: true即可，也可配置为数字，top: 11，数字越大，优先级越高。参考链接：http://wangwlj.com/2018/01/09/blog_pin_post/

配置私有域名

首先得先注册一个域名。然后再推送到github。但由于github太慢，对百度收录也不好，还是找一个国内的代码托管的网站，之前有考虑过gitee，但是绑定自己的域名是需要收费的，就找了coding了。

1）先注册。打开https://coding.net/register，这里面有个坑，必须注册个人版的，这样才会有Page服务，另外，coding个人版应该是跟腾讯云团体有合并了，现在注册coding个人版，就必须 先删除腾讯云才可以。注意：不要注册企业版，我在企业版花了大量的时间。

2）注册好了之后，登陆https://dev.tencent.com/user后台，再设置一下个人信息，如用户名、密码、邮箱。等于重新注册了一下，感觉整合的不是太好~

3）创建一个新的仓库，注意点就是新建项目的时候命名规则和 Github 上的一样，就是 用户名.coding.me 可以看下图，还有记得别忘了添加 SSH key。

4）仓库建好后进入仓库，选左侧的 Page 服务，在点击 设置，在设置中绑定新的域名，输入后点击绑定就可以了。然后再解析一下域名

5）推送代码到coding，在站点配置文件，修改deploy选项，修改如下：

1
2
3
4
5
6
deploy:
  type: git
  repo: 
    github: git@github.com:fang141x/fang141x.github.io.git
    coding: git@git.dev.tencent.com:fang141x/fang141x.coding.me.git
  branch: master

推送成功之后即可访问了。

参考资料

http://blog.haoji.me/build-blog-website-by-hexo-github.html

超详细 的搭建教程：https://segmentfault.com/a/1190000017986794

hexo插件用法：https://vonsdite.cn/categories/Hexo/

hexo常用功能设置：https://yunhao.space/2018/06/29/hexo-next-function-setting/

hexo指南：https://hexo-guide.readthedocs.io/zh_CN/latest/

Hexo博客+Next主题深度优化与定制

相关文章
0%