博客建站

搭建Hexo框架

1. Hexo 安装

官网：https://hexo.io/zh-cn/docs/

注意安装Hexo之前需要安装Node.js和Git

使用 npm 安装 Hexo npm install -g hexo-cli

2. 建站

初始化博客文件夹，安装相关依赖

hexo init <folder>
cd <folder>
npm install

文件夹内生成以下目录结构

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

3. 配置

_config.yml文件配置网站

由于后期要更换不同的主题，所以这一部分可以直接根据该文件注释自行填写

4. 部署

这里采用一键部署，部署到Github Pages上

1. 如果想网站建立在github pages根目录下，建立repository <username>.github.io
   如果想建立在github pages子目录下，建立repository 任意名字都行

1. 安装 hexo-deployer-git
   npm install hexo-deployer-git --save

3. 在 _config.yml 中添加以下配置,如果配置已经存在，请将其替换为如下:

   # 配置根目录
   url: https://<username>.github.io
   # 配置子目录
   url: https://<username>.github.io/<repository name>
   
   deploy:
     type: git
     # 不管配置根目录还是子目录都一样
     repo: https://github.com/<username>/<repository name>
     # example: https://github.com/hexojs/hexojs.github.io
     branch: main

4. 依次输入清理缓存、生成博客文件（静态页面）、提交远程仓库命令

   hexo cl
   hexo g
   hexo d  //如果只想本地查看，hexo s

5. Github Pages 开启
   打开仓库，settings -> Pages -> 选择 source， branch 之后save

5. 基本操作命令

create
hexo init [folder] // 新建一个网站

layout
默认为post，还有page，draft，可以自定义

hexo new [layout] <title> 创建一篇新文章或者新的页面

draft

hexo publish [layout] <title> 将草稿移动到 source/_posts 文件夹
hexo s --draft 草稿默认不会显示在页面中，您可在执行时加上 –draft 参数

Scaffold -> layout

新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件(.md)来建立文件
hexo new photo "My Gallery"
Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章

Front-matter

参数	描述	默认值
title	标题，最好用引号括起来	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
categories	分类（不适用于分页）	无
tags	标签（不适用于分页）	无
excerpt	摘要，优先于 <!-- more -->	无
index_img	文章封面图，用 /img/ 相对路径	无
math	公式转换，关闭时加速加载	true
sticky	文章置顶，数值越大越靠前	无

配置布局模板
scaffolds文件里存放着每个布局的模板，新建文件的时候，会自带模板里的front-matter
参考布局模板

title: {{ title }}
excerpt: ''
index_img: /img/home/
math: false
date: {{ date }}
updated:
category_bar: ["分类"]
categories:
tags:
sticky: 

分类与标签

分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
  - Diary
  - Life  //Life 成为 Diary 的子分类
tags:
- PS3
- Games

Hexo 还提供了一种类 WordPress 的分类方式，用于指定多个同级分类：

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]  # 文章会同时出现在三个类别中

配置Fluid主题

Hexo的theme可以自行选择，这里采用fluid主题，颜值比较高，社区比较成熟
官网：https://hexo.fluid-dev.com/docs/start/

1. 配置主题

• release安装
  安装：下载 最新release版本解压到 themes 目录，并将解压出的文件夹重命名为fluid
  修改 Hexo 博客目录中的 _config.yml theme: fluid # 指定主题

  
  

• 覆盖配置
  博客目录下创建 _config.fluid.yml 文件，将theme->fluid的 _config.yml全部配置（或部分配置）复制过去。
  以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可

  只要存在于 _config.fluid.yml 的配置都是高优先级，修改theme里的 _config.yml 是无效的

• 更新主题版本

  1. 先将原文件夹重命名为别的名称，例如 fluid-bkp，用于升级失败进行回退；
  2. 按照安装步骤，重新下载 release并解压重命名为 fluid；
  3. 修改博客目录下的_config.fluid.yml文件，对照最新版的_config.yml的新特性修改

2. 创建关于页

参考官方文档

3. 个人配置

打开_config_fluid.yml文件,然后根据注释和之前的配置文件，开始进行私人配置

修改部分
网页访问统计： 采用leancloud API
Header： 修改title
Footer： 修改pv uv统计source
Home Page： 修改banner部分
Post： 修改banner，views，侧边栏
Comment： 添加valine
剩余页面： 都只修改了image

hexo博客目录下source，新建img目录存放图片
hexo博客目录下，scaffolds，修改post layout的front-matter（根据新特性）

代码折叠插件：
hexo-sliding-spoiler 修改参考
npm install hexo-sliding-spoiler --save

post目录里可以自己建立多级文件夹（可以设置和category相同的目录，方便日后整理文档），
img还是设置相对路径 /img/… 不受到多级目录的影响

4. 域名设置

注册任意一个域名商，这里选用namecheap, 挑选域名
Using GitHub Pages with a custom domain: Namecheap Edition(https://gist.github.com/plembo/84f80c920bb5ac6f19e53fe6f8db1ff7)

如果配置的是project site，必须要把博客目录下的_config.yml site参数设置成 custom domain，而不是原来的domain，否则网站会有文件错误
如果配置的是user site，url参数可以保持之前配置过的不变，不影响文件结构
Github Pages 设置custom domain