HEXO入门教程

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%