初识hexo

hexo是一款基于node.js的快速、简洁且高效的博客框架, 官网：https://hexo.io/zh-cn/

使用前提: 电脑上得有git和node.js的环境

1
2
3
4
PS E:\hexo> git --version
git version 2.31.1.windows.1
PS E:\hexo> node --version
v12.16.1

已经安装好git和node.js后

1
2
3
4
5
6
7
8
9
10
# 全局安装hexo
npm install hexo-cli -g
# 查看hexo版本
hexo -v 
# 安装成功会出现如下显示
os: Windows_NT 10.0.18363 win32 x64
node: 12.19.1
v8: 7.8.279.23-node.44
uv: 1.39.0
......

hexo使用

初始化本地hexo的文件

在某个目录初始化hexo博客

启动

1
2
3
# 两种启动命令
hexo server
hexo s [--draft][--debug]  # 可以选择性将_draft目录下的源文件一同展示; 调试模式启动, 对文件的更改无需停止网站只需刷新即可看到效果

启动成功后就可以访问localhost:4000查看hexo博客默认首页

1
2
3
4
5
# 其他的命令
hexo new "md文件名"  # hexo n
hexo clean  # 清理生成的静态页面(public文件夹和db.json被删除)
hexo g  # 等同于 hexo generate, 将md等打包生成静态页面(到public目录下)
hexo d    # 等同于 hexo deploy, 发布, 需要进行相关配置

根路径下的目录

  • public: md文件、样式文件等打包成的静态资源都放在这个目录下, 默认localhost:4000实际上就是访问的public/

  • source: 源文件(md文件), generate后就是public/下的前端静态文件

  • themes: 主题文件, 可以下载并配置hexo主题插件

  • scaffolds:

    • 控制新创建的md文件的模板(可以提前配置好文件标题、创建时间等)

    • 我们使用hexo new可以在source/_post或者source/_draft目录下生成md文件, 一般_post下都是放正式的要发布的文章, 而_draft下放的文章默认generate后都不会生成静态页面文件到public目录下

    • hexo new page会新建一个文件夹, 文件夹下默认有一个index.md的文章文件, 用的就是scaffolds/page.md作为模版文件创建的, hexo g后public/下就会有相应的page

      1
      2
      3
      4
      5
      hexo new post/draft "md文件名称"
      hexo new page "文件夹名称"
      hexo new "md文件名称"  # 同 hexo new post ""

      hexo P draft_filename  # filename不包含后缀. 将草稿状态md发布为正式文章, 其实就是把 source/_draft下的md文件移动到 source/_post 下

hexo的配置文件

以下只列举一些我编辑过的主要配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: yincaiTA' Blog
subtitle: ''
description: '小善的学习笔记 🐟'
keywords: yincaiTA,Java,愔才
author: yincaiTA
# 语言: [en, zh-CN, zh-TW]
language: zh-CN
# 时区(用上海就行): https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: PRC

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://lsycai.top
permalink: :year/:i_month/:i_day/:title/

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true  # 点击链接新产生一个tab
  field: site  # 网站内生效
  exclude: ''
filename_case: 0  # Transform filenames to 1 lower case; 2 upper case
render_drafts: false  # Display drafts?
post_asset_folder: false  # 生成md时会同时生成同名文件夹; 生成html时,文件夹内的图片会被复制到这个html存在的目录
relative_link: false  # 链接相对于根文件夹, 设置为true后 butterfly 的很多样式会出错, 像icon显示、代码块展开/复制等
future: true
# 这个highlight可以与主题进行搭配
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: '    '  # tab替换为4个空格
  wrap: true
  hljs: true

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  branch: master  # 分支
  repository: git@github.com:yincaita/yincaita.github.io.git  # 最后是仓库名.git

# 本地搜索插件, hexo-generator-search 的配置, https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: post  # 只有posts的md会被纳入, 并在 hexo g 的时候读入文章生成 search.xml 的本地搜索数据, 放在public/目录下
  content: true  # 将文章全部数据进行纳入

发布到Github Pages

1
2
3
npm install hexo-deployer-git --save

hexo d

就能使用 https://yincaita.github.io/ 进行访问了

域名映射配置

在域名服务商那里配置, 以阿里云为例

  1. 域名映射 github.io 页面的配置
  2. 配置Github Pages 的domain记录: github -> settings -> Pages -> add a domain

阿里云域名解析

最后在hexo生成的public/下配置个CNAME文件(直接把CNAME文件放到source目录下即可, 因为source目录下的内容会在 hexo g 后自动放到public目录下), 文件内容就是域名, 静态博客就能以域名的形式访问.

Github Pages配置domain