前言

Hexo是基于Nodejs的轻量级博客系统，使用Markdown来渲染文章，体积小、快速、简洁、安装简单。

搭建步骤

安装git和node工具，前置工作，不做详细介绍

安装yarn
1
npm install -g yarn
安装hexo
1
yarn global add hexo
初始化hexo

创建一个目录，作为博客的目录，并执行以下命令进行初始化

1
2
3
mkdir hexo
cd hexo
hexo init
启动博客

查看public目录是否已经生成，如果没有，执行下面的命令生成，后续修改主题、配置等，如果遇到找不到页面的情况，均可使用下面的命令重新生成。

1
2
hexo clean
hexo g

后台模式启动

1
hexo s &

debug模式启动

1
hexo s --debug

访问：http://localhost:4000

更换博客主题

默认的博客主题可能并不能打动我们，所以我们要选择一款喜欢的主题，这里使用的是maupassant主题。

1，获取主题，在hexo目录下执行

1
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

2，安装主题依赖

1
2
npm install hexo-renderer-pug --save
npm install hexo-renderer-sass --save

3，启用主题，只需要修改站点配置文件_config.yml即可，设置theme参数

1
theme: maupassant

网站图标设置

将favicon.ico放在Hexo根目录的source文件夹下即可，建议的大小：32px*32px

设置搜索功能

1，安装插件

1
npm install hexo-generator-searchdb --save

2，修改站点配置，修改配置文件，设置search参数

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

3，修改主题配置，开启self_search，并关闭其他搜索

1
self_search: true

设置rss功能

1，安装RSS插件

1
npm install hexo-generator-feed

2，修改站点配置

1
2
3
4
5
6
7
8
# Extensions
plugins:
    hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20

在底部添加备案信息

进入目录：hexo/themes/maupassant/layout/_partial，找到文件：footer.pug，添加如下代码：

1
2
3
|  非爱青山绿水，惟图隐迹埋石。
| 备案信息：
a(rel='nofollow', target='_blank', href="http://www.miitbeian.gov.cn/") 浙-ICP备xxxxx号

文章模版设置

正常情况下，我们使用“hexo new 文章名”命令就能创建一篇文章，而且会自动给我们生成文章的front-matter模版信息，但是这个模版可能不一定适用，
所以我们最好是创建一个自己常用的模版，这样会方便很多。

如何设置模版呢？在hexo根目录下，有一个“scaffolds”文件夹，里面有draft.md,page.md,post.md 3个模版文件，文章对应的post.md，我们只需要更改这个文件的内容即可。

我们设置模版内容如下：

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }} #文章标题
date: {{ date }} #文章时间
toc: true #是否显示目录
categories: #文章分类，如果是多个分类，必须用[]括起来，否则就会成为上一个分类的子类
     - [分类名称]
tags: #文章标签
     - 标签名称
description: 摘要内容 #自定义显示的摘要，或者直接在文章内容中插入<!--more-->以隐藏后面的内容
---

文章版权信息设置

文章需要添加版权信息？安排！

1，首先到主题的_config.yml文件中开启版权配置

1
2
3
post_copyright:
  enable: true 
  author: guolin

2，替换主题版权页面代码，文件位置：主题/layout/_widget/copyright.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
div
  link(rel='stylesheet', type='text/css', href='/css/copyright.css')
  ul.post-copyright
    li.post-copyright-author
    strong 本文作者：
    = theme.post_copyright.author
    li.post-copyright-link
    strong 本文链接：
    a(href='/' + page.path)= page.permalink
    li.post-copyright-license
    strong 版权声明：
    | 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0 CN</a> 许可协议。转载请注明出处！
br

3，替换主题版权页面的样式，文件位置：主题/source/css/copyright.css

1
2
3
4
5
6
7
8
.post-copyright {
  margin: 2em 0 0;
  padding: 0.5em 1em;
  border-left: 3px solid #FF1700;
  background-color: #F9F9F9;
  list-style: none;
}
.post-copyright  li{margin:8px 0;}

配置Github托管

1，到github站点，创建托管站点的仓库

点击：new repository

填写仓库名为：Github用户名.github.io，这里必须这样填写，否则无法访问，我这里如下

1
Ln-guolin.github.io

选中：Initialize this repository with a README

2，修改站点配置，增加git信息

1
2
3
4
deploy:
    type: git
    repo: https://github.com/Ln-guolin/Ln-guolin.github.io.git
    branch: master

3，安装git插件

1
npm install --save hexo-deployer-git

4，发布站点到github，会让你输入github账号密码

1
2
3
hexo clean
hexo g
hexo deploy

好了，截止此步骤，已经可以通过“Ln-guolin.github.io”访问自己的站点了

5，我们继续配置，使用自己的域名绑定到站点

根据路径:站点仓库 >> Settings >> GitHub Pages >> Custom domain，找到custom domain，并填写自己的域名。

然后，我们去配置域名的cname解析记录到站点即可，记录值：Ln-guolin.github.io。

如果是1级域名，要解析@和www两个记录，配置完成后就能通过域名访问啦

6，关键步骤，配置好域名之后，我们每次hexo deploy都会导致github pages settings的domain配置被清空，所以我们需要在站点source目录下创建一个CNAME文件，内容为你的域名即可。

配置顶部菜单和友链

1，顶部菜单，到主题下的配置文件中，修改menu参数，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: Utils
    directory: utils/
    icon: fa-wrench
  - page: about
    directory: about/
    icon: fa-user
  - page: rss
    directory: atom.xml
    icon: fa-rss

菜单的图标

2，友情链接，到主题下的配置文件中，修改link参数，如下：

1
2
3
4
5
6
7
links:
  - title: blog.soilove.cn
    url: https://blog.soilove.cn/
  - title: github
    url: https://github.com/Ln-guolin
  - title: dockerhub
    url: https://hub.docker.com/u/guolin123

其他

新建文章发布

1，新建文章，hexo会生成一个.md文件，位置：hexo/source/_posts，在里面写文章即可

1
hexo new 文章

2，生产静态文件

1
hexo g

3，发布文章

1
hexo deploy
新建页面发布

新建about页面

1
hexo new page "about"
文章内嵌网页

希望在文章中嵌入网页，我们可以使用iframe标签实现，具体代码示例如下：

1
2
3
<iframe src="http://util.soilove.cn/json/" 
width=100% height=800px frameborder=0 allowfullscreen>
</iframe>
文章内嵌视频

在文章中嵌入视频，我们同样可以使用iframe标签实现，这一刻是不是觉得iframe太好用了[笑哭]，具体代码示例如下：

1
2
3
<iframe src="https://soilove.oss-cn-hangzhou.aliyuncs.com/32e/lehuo/hy.mp4" 
width=600 height=350 frameborder=0 allowfullscreen>
</iframe>
文章内嵌图片

在文章中嵌入图片，常用的有2种方法，一个是markdown自身语法支持的写法，一个是使用img标签，我们来看看。

markdown图片插入方法：

1
![图片名称](https://soilove.oss-cn-hangzhou.aliyuncs.com/32e/%E9%93%BE%E8%A1%A8.png)

img标签插入方法：

1
2
<img src="https://soilove.oss-cn-hangzhou.aliyuncs.com/32e/%E9%93%BE%E8%A1%A8.png" 
width = "300px" height = "200px" alt="图片名称" align=left />