Hexo 建站教程

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

本文主要介绍 Hexo 建站的过程和可能遇到的一些问题。

安装前提

Hexo 建站环境配置详见：Hexo 建站环境配置

Hexo 安装

进入 Hexo 官方网站 就能看见 Hexo 的安装命令

1
npm install -g hexo-cli

安装完成后，打开 Git Bash，输入 hexo -v 查看版本信息，验证安装是否成功。

1
hexo -v

提示：如果 npm 速度慢或者安装失败，可以通过淘宝镜像安装，即使用如下命令

1
cnpm install -g hexo-cli

Hexo 初始化

选定一个文件夹，如 F:\Blog （名字可以随便取），之后所有的文件都会在这个目录下。进入 Blog 文件夹，鼠标右键 Git Bash Here 进入 Git Bash ，输入 hexo init 命令初始化，接着输入 npm install 安装必备的组件。

1
2
hexo init
npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

下面对这几个文件进行简单的说明

  1. _config.yml是网站的配置信息，可以在此配置大部分的参数

  2. source 是用来存放发表后的博文的

    • _drafts 为草稿
    • _posts 为已发表文章

  3. themes 文件夹存放主题

打开 _config.yml 可以进行简单修改，更多详细信息可以参考 官方网站配置说明

1
2
3
4
5
6
7
title: EmoryHuang    # 在浏览器中打开时，显示在标签页上的标题
subtitle: ''    # 副标题
description: ''    # 站点的基本信息
keywords:      # 网站关键词
author: EmoryHuang    # 作者名称，
language: zh-CN    # 网站语言
timezone: ''    # 设置时区

博客生成、预览

初始化完成之后就可以生成博客并进行预览

1
2
hexo g # 生成
hexo s # 启动服务

hexo g 生成静态网页，hexo s 打开本地服务器，然后浏览器打开 http://localhost:4000/，就可以看到博客了，当然现在还是非常丑，之后可以通过添加主题进行美化。

在 Git Bash 中按 ctrl+c 关闭本地服务器。

部署到 GitHub

安装 Git 部署程序插件

1
npm install hexo-deployer-git --save

打开博客根目录下的_config.yml 文件，修改最后一行的配置（注意冒号后面有空格）：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:EmoryHuang/EmoryHuang.github.io.git
  branch: master

repository 修改为你自己的 github 项目地址，将我的用户名替换即可。

接下来就是把博客部署到 GitHub 上：

1
hexo d

之后进入你的 GitHub 仓库，会发现多了很多文件，在浏览器中打开 https://你的GitHub用户名.github.io 来查看博客页面，如果无法显示，可以稍微等几分钟。如果依然不行，那么就检查一下是否有出错的步骤。

建议每次部署时，首先通过 hexo clean 清除掉 public 文件夹，再使用 hexo d -g 部署。

1
2
hexo clean
hexo d -g

Hexo 命令使用

1
2
3
4
5
6
hexo new "postName"      # 新建文章
hexo generate            # 生成静态页面
hexo server              # 开启预览访问端口
hexo deploy              # 部署到GitHub
hexo help                # 查看帮助
hexo version             # 查看Hexo的版本

上述命令可简写为：

1
2
3
4
hexo n                   # 新建文章
hexo g                   # 生成静态页面
hexo s                   # 开启预览访问端口
hexo d                   # 部署到GitHub

Hexo 写文章

首先需要新建一篇文章，具体的使用方法为 hexo new [layout] <title> 其中 layout 为可选项

1
hexo new "MyBlog"   #新建一篇名为MyBlog的文章

上述命令会在 source/_post/ 文件夹下生成 MyBlog.md 的文件。

可以通过这种方法新建文章，当然也可以直接在这个文件夹下创建 MyBlog.md 文件，效果是一样的。

通过命令新建文章并打开 MyBlog.md 文件，会发现信息：

1
2
3
4
5
---
title: myblog
date: 2021-04-29 20:04:20
tags:
---

这在 Hexo 中称为 Front-matter，它是以 --- 分隔的区域，用于指定个别文件的变量

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签 无
categories 分类 无
excerpt 摘要 无

举例如下，通过 Front-matter，可以很方便的指定个别文件的变量

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Hexo建站教程
tags:
  - Hexo
  - 博客搭建
categories: 学习教程
comment: true
excerpt: Hexo 是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。本文主要介绍Hexo建站的过程和可能遇到的一些问题。
index_img: https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/2132319733.jpg
banner_img: https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/2132319733.jpg
abbrlink: 2132319733
date: 2021-04-29 20:30:36
---

在正文部分，可以按照 markdown 语法书写，可以参考 MarkDown 写作语法

书写完成之后，就可以把文章部署到 GitHub 上了

1
2
hexo clean
hexo d -g

参考

相关内容