Windows+Hexo+Github page 建站

官方网站

参考

部署思路

在本地 windows 上部署 HEXO 项目目录
部署到 Github page

安装环境

1	使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo
    npm install hexo-cli hexo-server -g 
模块解释：
    hexo-cli    是 Hexo 的命令行工具，可用于快速新建、发布、部署博客；
    hexo-server 是 Hexo 的内建服务器，可用于部署前的预览和测试。-g 选项，表示全局安装。我们这里采用 nginx 托管。

安装 pug 以及 stylus 的渲染器

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

Hexo 常用指令

基本配置

在本地创建并初始化一个 HEXO 项目目录

$ hexo init <folder>
$ cd <folder>
$ npm install

如: 目录为 blog  
    $ hexo init blog
    $ cd ./blog
    $ npm install

一个项目的目录大致结构

hexo init test
tree test -L 2（该命令只适用于 Linux, Windows 上无法指定目录深度）
test
├── _config.yml
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _data
│   └── _drafts
│   └── _posts
│   └── about
│   └── categories
│   └── link
└── themes
    ├── hexo-theme-butterfly
    └── landscape

目录解释

文件或目录	描述
_config.yml	网站的配置信息，您可以在此配置大部分的参数。
package.json	应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。
scaffolds	模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。又如：hexo new photo “My Gallery”，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章
source	资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，（开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。）Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
_drafts	放置未发布的草稿的地方
_posts	放发布的 markdown 文章的地方
themes	主题文件夹。Hexo 会根据主题来渲染生成静态页面。

博客文章，页面内容存在于 test/source 目录下
需要修改配置的地方
- 项目主目录下的 _config.yml
  - 可以配置网站主页的标题和副标题
  - URL
  - 作者名
  - 默认语言
  - 时区，日期格式
  - 文章的目录，标签的目录，结构目录，分类目录
  - 使用的主题
  - 部署的位置：如gitpage, 或者自己搭建的服务器
  - 等等
- 主题目录下的 _config.yml
  - 网页图标在 favicon 设置
  - 页面 github 连接在 social: fa fa-github 设置
  - 作者的头像在 avatar 设置
  - 主页的背景图片在 top_img 处设置
  - 以及其他页面背景相关的图片也在该文件的设置，不一一列举，可以根据主题作者的配置做适当的修改即可
  - 配置 gitalk 相关参数
  - Flink 处设置相关的个人信息和友情链接
  - 贴赞助二维码等等
- 主题用到的相关图片资源存在 themes\hexo-theme-butterfly\source\img 目录下

关于主题和主题的配置

推荐使用 butterfly , 目前个人见过最棒的 Hexo 主题之一

开始写作

文章布局模板

新建博文草稿

hexo new draft first-draft  
    draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以
hexo new [layout] <title>  
    [layout] 博客文章的页面布局模板, 若不填写，默认为 post。可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。
    <title>  博客文章， 必须有   
布局（Layout）
    Hexo 有三种默认布局：post、page 和 draft。
    在创建者三种不同类型的文件时，它们将会被保存到不同的路径；
    而您自定义的其他布局和 post 相同，新建的文件都将储存到 source/_posts 文件夹。

以 markdown 格式编辑 first-draft.md 文档
预览草稿
1
hexo server --draft
发布草稿到 post
1
hexo publish draft first-draft

生成静态文件: hexo g

hexo g 
生成静态文件，存放到：hexo_blog/public 目录下  

hexo generate --watch
Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1 checksum，只有变动的文件才会写入。

部署到远端服务器上: hexo d

部署前配置  hexo_blog/_config.yml

远程仓库：
deploy:
  type: git  
  repo: git@github.com:Saitamata/Saitamata.github.io.git
  branch: master

hexo g -d

关于一键部署
1
多种部署方案

设置 Categories

确认站点配置文件 hexo_blog/_config.yml 打开了
1
category_dir: categories

确认主题配置文件 hexo_blog/theme/Butterfly/_config.yml 打开了

# Main menu navigation
# format: xxx: /xxx/||icon
# ---------------
menu:
Home: /||fa fa-home
Archives: /archives/||fa fa-archive
Tags: /tags/||fa fa-tags
Categories: /categories/||fa fa-folder-open  # 后面指定了图标
Link: /link/||fa fa-link
About: /about/||fa fa-heart

新建 categories 文件

1 2	hexo new page categories 此时会在source目录下生成 categories/index.md 文件

修改 categories/index.md

---
title: categories
date: 2019-08-16 16:20:05
type: "categories"     <!-- 必须 -->
comments: false       <!-- 必须 -->
---

为文章添加 categories

---
title: CentOS7 基于 Hexo 建站  
date: 2019-08-15 15:18:36  
tags: 
  - Hexo
  - Blog  
categories: 
  - Web
---

可以在 hexo_blog\source\_posts\ 下创建与 categories 对应的目录

1
2
3

hexo_blog\source\_posts\ 下文章的 `md` 文件可以存放在对应的目录中分类，如：

创建：hexo_blog\source\_posts\Web，并把 'Centos7基于Hexo建站.md' 文件放在 Web 目录下

添加 `about` 页面

hexo new page “about”

1	INFO Created: E:\...\hexo_blog\source\about\index.md

修改 about\index.md

---
title: about
date: 2019-08-16 16:30:59
---

> Baethan 的个人学习分享小天地

添加友情连接

创建友情链接页面

1. 前往你的 Hexo 博客的根目录, 打开 MINGW64  
2. 输入 hexo new page link
3. 你会找到source/link/index.md这个文件
4. 修改这个文件：
   ---
   title: Link
   date: 2019-08-16 17:11:23
   type: "link"
   ---

友情链接添加
在 Hexo 博客目录中的 source/_data(没有_data，则手动创建)，创建一个文件 link.yml

class:
class_name: 友情链接
link_list:
  1:
    name: xxx
    link: https://blog.xxx.com
    avatar: https://cdn.xxxxx.top/avatar.png
    descr: xxxxxxx
  2:
    name: xxxxxx
    link: https://www.xxxxxxcn/
    avatar: https://xxxxx/avatar.png
    descr: xxxxxxx  

class2:
 class_name: 链接无效
 link_list:
   1:
     name: 梦xxx
     link: https://blog.xxx.com
     avatar: https://xxxx/avatar.png
     descr: xxxx
   2:
     name: xx
     link: https://www.axxxx.cn/
     avatar: https://x
     descr: xx

Link 页面个人信息配置
theme/Butterfly/_config.yml 中 Flink: 后

设置本地搜索

npm install  hexo-generator-search --save

配置：theme/Butterfly/_config.yml:
  local_search:
  enable: true
  labels:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

注意事项

关于 yaml 配置

1
2
3

注意： 
键值对的冒号后面要有空格  
采用空格缩进

Markdwon 格式特别注意（巨坑）
1. 使用 ``` … ``` 标示代码块，在第二个 ``` 后不要有空格，否则会导致代码块渲染混乱
2. 要输出有特殊意义的字符，使用转义字符 \
关于buttferfly 的很多配置在 clone 下来的配置中都没有，多参考，研究摸索

发布到 GitHub Pages 上

安装相关的包
1
npm install hexo-deployer-git --save

平滑升級

推荐把主题默认的配置文件_config.yml 复制到 Hexo 工作目录下的 source/_data/butterfly.yml，
如果 source/_data 的目录不存在那就创建一个。
注意：
   1. 如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 
   (不是合并而是替换), 之后你就只需要在 Butterfly 目录下通过 git pull 的方式就可以平滑地
   升级 theme-butterfly 了。
   2. 但是 themes/Butterfly/source/img/ 目录下的资源如果自己有替换在 source/_data/img/目录下
   可能不会生效，具体怎么配置还需要研究。（建议使用图床，然后不要修改img中的内容）
   3. 个人使用图床：https://imgchr.com/

List||fa fa-list:
  - Book || /Book/ || fa fa-book

fa fa-book 中的 fa-book 以及 fa fa-list 中的 fa-list 都是图标名，具体样式可以参考：
   https://fontawesome.dashgame.com/

关于图床

1	个人使用：https://imgchr.com/

关于字数统计

1. 打开 hexo 工作目录
2. npm install hexo-wordcount --save or yarn add hexo-wordcount
3. 配置 butterfly.yml:
      wordcount:
        enable: true
        post_wordcount: true
        min2read: true
        total_wordcount: true

FAQ

访问 http://localhost:4000/

extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug
缺乏渲染器
解决：
        npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus

文章作者: 卖报小行家

文章链接: https://saitamata.github.io/2020/05/01/%E6%95%99%E7%A8%8B/Hexo/Windows-Hexo-GithubPage-%E5%BB%BA%E7%AB%99/