我的 Hexo 搭建博客之路前言一直想搭建个人网站, 当我了解到 hexo 是一款快速、简洁且高效的博客框架，我就迫不

前言

一直想搭建个人网站, 当我了解到 hexo 是一款快速、简洁且高效的博客框架，我就迫不及待想尝试下。

什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装 Hexo

在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js
Git

Node.js 版本限制 我们强烈建议永远安装最新版本的 Hexo，以及推荐的 Node.js 版本。

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

npm install hexo-cli -g

1. 建立网站

# 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
$ hexo init <folder> 
$ cd <folder>
$ npm install

2. 启动服务器

hexo s 或 hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

配置

您可以在 _config.yml 中修改大部分的配置。

独立的 _config.[theme].yml 文件

该特性自 Hexo 5.0.0 起提供

我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题，那么这些信息对你将会非常有用：Hexo 在合并主题配置时，Hexo 配置文件中的 theme_config 的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

顺序: theme_config > _config.[theme].yml > 主题目录下的_config.yml

新建文章

$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。示例hexo new "My New Post"

生成静态文件

generate 该命令可以简写为

$ hexo g
或 $ hexo generate

-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

部署 deploy 命令

deploy 该命令可以简写为

$ hexo d
或 $ hexo deploy

-g, --generate 部署之前预先生成静态文件

clean 命令

清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

list 命令

列出网站资料

$ hexo list
Usage: hexo list <type>

Description:
List the information of the site.

Arguments:
  type  Available types: page, post, route, tag, category

写作

你可以执行下列命令来创建一篇新文章。

$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

默认布局为post

default_layout: post

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

文件名称

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
`layout`	布局	-
`title`	标题	-
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）	-
`categories`	分类（不适用于分页）	-
`permalink`	覆盖文章网址	-

hexo 插件

git 自动部署插件

需要安装 hexo-deployer-git。详细使用请点击链接进行查看。

$ npm install hexo-deployer-git --save

自定义配置

其实就是一个迁移过程，将配置和文章这两块内容记住修改点，然后迁移到新项目即可。

_config.yml

title: Blogs of acc8226
description: a personal website of acc8226
author: acc8226
## 中文简体 zh-CN, 可以选择更改为en
language: zh-CN
timezone: Asia/Shanghai

# 其中 :category 取目录，post_title 则去取文章中的title
permalink: :category/:post_title/

## updated_option supports 'mtime' 使用文件的最后修改时间, 'date' 使用 date 作为 updated 的值。可被用于 Git 工作流之中, 'empty'
updated_option: 'date'

# 代码高亮
highlight:
  enable: true
  line_number: true
  auto_detect: true

# 分页
index_generator:
  path: ''
  per_page: 5
  order_by: -date

_config.next.yml 主题设置

# 数学公式的支持
math:
  every_page: true
# 目前只开启 mathjax
  mathjax:
    enable: true
    tags: none
  katex:
    enable: false
    copy_tex: false
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle. 
  rounded: true
  # If true, the avatar will be rotated with the cursor. 鼠标放在头像上时是否旋转
  rotated: true
social:
  GitHub: https://github.com/acc8226 || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/u/1846300870 || fab fa-weibo
# 修改页脚
footer:
  # 网站开始时间
  since: 2018
  icon:
    # If you want to animate the icon, set it to true.
    animated: true
  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: acc8226<br/><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"><img src="https://www.upyun.com/static/img/%E6%A0%B7%E5%BC%8F%E5%9B%BE.7cf927c.png width='34%' "/></a>

hexo-src 构建项目的地址 codeup.aliyun.com/5eacd743380…
发布 hexo 博客的· 云效 Flow flow.aliyun.com/pipelines/1…

构建工作

cnpm install hexo-cli -g
cnpm install

hexo clean
hexo g

代码上传, 我这里写了 2 个版本。可以根据需要选其一。

强制上传版

git config user.name "flow"
git config user.email "flow@feipig.fun" 

cd public 
git init

git add . 
git commit -m "force push by flow"
git push --force  "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}" master

基于上版更新条记录版

git config --global user.name "flow"
git config --global user.email "flow@feipig.fun"

git clone "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}"

cd ${userName}/
git rm -rf .
cp -r ../public/* ./

git add .
git commit -m "committed by flow"
git push origin master

使用 gitee page 的发布项目

新建目标项目：gitee.com/kaiLee/kaiL…

我这里可以使用 username + accessToken 方式 clone 等操作。提取一系列私密变量后

userName kaiLee
accessToken 70e185c4cc2d56418e1d2c8385bca1b7
hostName gitee.com
repoPath kaiLee.git

改造成了这样：

git clone https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}

新建文章示例

通过命令行创建：

或直接创建目录和文件：

建立 \source_posts\demo\demo.md
键入以下内容

---
title: demo-title
date: 2020-12-12 17:15:55
categories:
- foo
- bar
---

根据 post.md 的格式

---
title: {{ title }}
date: {{ date }}
tags:
---

next 主题添加 categories 和 tags

$ cd hexo-site
$ hexo new page tags

编辑新页面并将类型更改为标签，主题将在此页面中自动显示标签云。页面内容如下:

title: Tags
date: 2014-12-22 12:39:04
type: tags
---

添加 categories 则是类似的方法

$ cd hexo-site
$ hexo new page categories

编辑新页面并将类型更改为标签，主题将在此页面中自动显示标签云。页面内容如下:

title: categories
date: 2014-12-22 12:39:04
type: categories
---

添加 about

next 主题添加 404 页面

自定义404页

在终端中，切换到站点根目录的源文件夹。创建一个名为404的新文件夹，然后在其中创建一个新页面:

$ cd hexo-site
$ hexo new page 404

如果你想启用公益404(腾讯在中国提供的服务) ，请编辑404/index.md，像这样:

---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>

通过编辑主题配置文件在菜单中添加404:

menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  commonweal: /404/ || fa fa-heartbeat

添加本地搜索

Local 本地Search 搜寻

$ npm install hexo-generator-searchdb

添加依赖

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

期间遇到的一些问题

部署 Gitee Pages 常见问题

如何创建一个首页访问地址不带二级目录的 pages，如ipvb.gitee.io？

你需要建立一个与自己个性地址同名的仓库，如 gitee.com/ipvb 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 gitee.com/ipvb/ipvb 部署完成后，就能以 ipvb.gitee.io 进行访问了。

当要部署的项目与自己的个性地址不一致时，部署完成后存在一些资源访问404？

答：当需要部署的仓库和自己的个性地址不一致时，如：gitee.com/ipvb/blog ，生成的pages url 为 ipvb.gitee.io/blog ，而访问的资源404，如 ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的，生成的资源 url 应该为 ipvb.gitee.io/blog/style.… 才对。对于不同的静态资源生成器，配置如下：

Hexo 配置文件_config.yml的url和root修改如下：

url: https://ipvb.gitee.io/blog
root: /blog

当如果是建立与自己个性地址同名的仓库，是不会存在这个问题的。比如 kailee.gitee.io/ 这个地址。

总结

完整的教程可以参照 Hexo官网进行实践。