记录本次建站配置过程

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

前置条件：安装 git，nodejs

初始化

1
2
3
npm install -g hexo
hexo init <folder>
cd <folder>
1
2
npm install
npm install -D hexo-deployer-git

部署

git 相关

gitee.com/<username> 上创建 <username> 同名仓库：

1
https://gitee.com/<username>/<username>.git

修改配置文件

1
2
3
4
deploy:
  type: git
  repo: https://gitee.com/<username>/<username>.git
  branch: master

branch 可以是 master 分支，也可以是自定义的其他分支（如：gh-pages）

部署上传

1
hexo g -d

地址：https://<username>.gitee.io，即为你的 Pages 页地址。

备份源文件

1
2
3
4
5
6
git init
git remote add origin <git-repo-url>
git checkout -b src
git add .
git commit -m "初始化"
git push origin src

其中 <git-repo-url> 可以与 _config.yml 配置文件中，博客静态文件的 deploy/repo 相同，也可以是自己其他私有仓库的地址，避免直接公开博客源文件。

异地更新

1
git clone <git-repo-url>

重复初始化

修改主题

下载安装

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

修改配置

修改 _config.yml 配置文件：

1
2
# 修改语言为中文，注意是 zh-CN
language: zh-CN

新建文件：

1
source/_data/next.yml

复制 themes/next/_config.yml 内的文件至 next.yml，然后修改 next.yml 文件。

选择 主题：

1
2
3
4
#scheme: Muse
#scheme: Mist
scheme: Pisces
...

设置 语言：

（注意 NexT 6.0 以上版本语言配置是 zh-CN，而不是 zh-Hans）

1
language: zh-CN

设置 菜单：

1
2
3
hexo new page tags
hexo new page categories
hexo new page about
  • tags 用于给文章打标签，比较详细，具体到你文档的知识点标签。例如：是介绍 闭包，还是介绍作用域；
  • categories 用于给文章设置分类，相对笼统。例如：这篇文章是介绍 JavaScript 语言相关知识的，还是介绍 Python 相关方面知识的，是 前端，还是后端；
  • about 是博客的介绍页。

修改对应生成的文件：

1
2
3
# /source/tags/index.md
title: 标签
type: "tags"
1
2
3
# /source/categories/index.md
title: "分类"
type: "categories"
1
2
# /source/about/index.md
title: 关于

注意文章头中 tags 和 categories 的书写：

1
2
3
4
5
6
7
8
title: 记录本次建站配置过程
date: 2018-05-26 00:28:51
tags:
  - 标签1
  - 标签2
categories:
  - 一级分类
  - 二级分类

上述 标签1 、标签2 是一个列表，相互之间没有从属。而 一级分类、二级分类 是有从属或者是层级关系的。

升级主题

1
2
$ cd themes/next
$ git pull

永久链接

hexo 自动生成的链接规则为：:year/:month/:day/:title，特别是 :title，会造成生成的链接非常长，更何况其中包含中文字符时，官方的方案会更加让人难以忍受。幸好有大神也有这样的痛点，写了插件：hexo-abbrlink，使用上很简单：

1
npm install hexo-abbrlink

然后编辑配置文件 _config.yml 的 permalink 参数：

1
permalink: posts/:abbrlink.html

当然你也可以根据自己的需求自定，如：

1
permalink: posts/:year:month:abbrlink.html

:abbrlink 的生成规则及其他配置请参看项目文档 。

其他主题推荐

hexo-theme-material：https://github.com/viosey/hexo-theme-material

优化体验

如果用 VSCode 作为博客的编辑器，可以隐藏一些不必要的文件（如：配置完成后隐藏配置文件）来优化体验。一般情况下，撰写博客文章，并不会一下子写完，如果后期灵感迸发，我们还会进一步修改文章，为了更快的找到我们最近编辑的文件，我们可以让我们的文件按照最后的修改时间排序，便于我们找到最新编辑的文件。综上，可在工作区配置中添加如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "files.exclude": {
    "**/.git": true,
    "**/.deploy*": true,
    "**/node_modules": true,
    "*.json": true,
    "*.lock": true,
    "themes": true,
    "source/_data": true,
    "public": true
  },
  "explorer.sortOrder": "modified"
}

安装插件：

  • Markdown All in One
  • vscode-hexo

基础操作

生成和部署

1
hexo d -g

生成和启动测试服务器

1
hexo s -g

按照模板生成文章

1
hexo new "您的文章标题"

问题处理

windows 下 git 出现恼人的 warning: LF will be replaced by CRLF 警告，修改 git 配置：

1
git config --global core.autocrlf false

若不想全局更换 autocrlf 配置，可局部配置：

1
2
cd .\.deploy_git\
git config --edit

编辑配置文件，添加如下配置：

1
2
[core]
    autocrlf = false

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行命令：

1
hexo clean

参考：