Hexo框架学习——从安装到配置

第一章 Hexo入门

Hexo 是一个快速、简洁且高效的博客框架。

1.1 Hexo的下载与安装

1.1.1 Hexo下载

在下载Hexo之前，我们需要确保电脑上已经安装好以下软件：

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

• Git

保证以上两个软件可以正常运行后，我们需要保证npm的网络畅通无阻，最好配置国内镜像：

 npm config set registry http://registry.npm.taobao.org

保证网络通畅后，我们可以输入以下命令，安装hexo：

 npm install -g hexo-cli

以上命令安装的是hexo的脚手架，如果你要安装Hexo的瘦身版，自己定制Hexo，官方推荐的下载方式：

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

 $ npm install hexo

安装以后，可以使用以下两种方式执行 Hexo：

1. npx hexo <command>

2. Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：

 echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

1.1.2 Hexo 安装

以上过程完成了hexo的下载，接下来我们进行Hexo的安装：

这里我们以创建testBlog为例，首先打开cmd，同时在磁盘目录创建一个文件夹（按自己兴趣可创建可不创建）：

我这里在D盘创建了test文件夹：

用cmd执行如下命令：

 hexo init testBlog
 #官方命令格式：hexo init <folder>

这个命令是创建我们博客的文件夹，相当于建设一栋房子的骨架。创建好后我们进入testBlog：

Hexo的骨架如下：

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

接下来我们进行下一步（已完成的可忽略）：

 npm install

1.2 Hexo 框架文件分析

我们研究一个框架，肯定要知道该框架文件夹下的文件作用。

1.2.1 source

资源文件夹。 是存放用户资源的地方。

这个文件夹非常重要，我们博客展现出来的文章最初就是存放在这里。Hexo默认创建的md文件存放在该文件夹下的 _posts 文件夹下，Hexo规定开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

1.2.2 scaffolds

Hexo的模板文件。

我们在创建md文件的时候，官方默认是非常空白的，如果我们有自己的编写方式可以后续在这里自定义自己的模板。后续我会教大家来自定义自己的模板。

1.2.3 themes

我们要建造自己的博客，肯定会带有自己的特色，Hexo提供支持自定义自己的主题，什么是主题？看下图：

是不是觉得这个主题非常棒！（我自己是这么认为的，🤭），通过主题文件夹，我们就可以布置自己喜欢的主题了。

1.2.4 _config.yml

这个Hexo的配置文件，很是重要。

1.2.5 package.json

这个文件不用过多介绍，很少用得到。

1.3 _config.yml 配置详解

我们打开 _config.yml 配置文件，这一看是不是大吃一惊，这么多！不过不要紧，我把配置参数做了注释，很容易就能了解了：

 # Hexo Configuration
 ## Docs: https://hexo.io/docs/configuration.html
 ## Source: https://github.com/hexojs/hexo/
 ​
 # Site
 title: Hexo             #网站标题
 subtitle: ''            #网站副标题
 description: ''         #网站描述
 keywords:               #网站的关键词。 支持多个关键词。
 author: John Doe        #您的名字
 language: en            #语言
 timezone: ''            #时区
 ​
 # URL
 ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
 url: http://example.com                     #网址, 必须以 http:// 或 https:// 开头
 permalink: :year/:month/:day/:title/        #文章的 永久链接 格式
 permalink_defaults:                         #永久链接中各部分的默认值
 pretty_urls:                                #改写 permalink 的值来美化 URL
   trailing_index: true # Set to false to remove trailing 'index.html' from permalinks   #是否在永久链接中保留尾部的 index.html，设置为 false 时去除
   trailing_html: true # Set to false to remove trailing '.html' from permalinks         #是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) 
 ​
 # Directory
 source_dir: source          #源文件夹。您的内容存储在哪里
 public_dir: public          #公用文件夹。静态站点将在哪里生成
 tag_dir: tags               #标签文件夹
 archive_dir: archives       #归档文件夹
 category_dir: categories    #分类文件夹
 code_dir: downloads/code    #Include code 文件夹，source_dir 下的子目录
 i18n_dir: :lang             #国际化（i18n）文件夹
 skip_render:                #匹配到的文件将会被不做改动地复制到 public 目录中。 您可使用 glob 表达式来匹配路径。
 ​
 # Writing
 new_post_name: :title.md # File name of new posts       新文章的文件名称
 default_layout: post                                    #预设布局
 titlecase: false # Transform title into titlecase       #把标题转换为 title case
 external_link:                                          #在新标签中打开链接
   enable: true # Open external links in new tab         #在新标签中打开链接
   field: site # Apply to the whole site                 #对整个网站（site）生效或仅对文章（post）生效
   exclude: ''                       #需要排除的域名。 主域名和子域名如 www 需分别配置
 filename_case: 0                    #将文件名转换为小写1；2上壳体
 render_drafts: false                #显示草稿
 post_asset_folder: false            #启用 资源文件夹
 relative_link: false                #把链接改为与根目录的相对位址
 future: true                        #显示未来的文章
 syntax_highlighter: highlight.js    #代码块的设置, 请参考 代码高亮 进行设置
 highlight:                          #   代码块的设置, 请参考 Highlight.js 进行设置
   line_number: true
   auto_detect: false
   tab_replace: ''
   wrap: true
   hljs: false
 prismjs:                            #代码块的设置, 请参考 PrismJS 进行设置
   preprocess: true
   line_number: true
   tab_replace: ''
 ​
 # Home page setting
 # path: Root pat