使用hexo搭建博客(windows)

为什么用Hexo+github

本文简要记录了本博客的搭建过程。本博客采用Hexo+github的方式进行搭建。属于静态博客。优点有三:

  1. 利用github自带免费空间,和github.io的免费域名,经济。
  2. hexo+github过程步骤简便,而且功能齐全。next主题简洁大方。
  3. 对markdown支持好。

相对于购买VPS和域名使用wordpress的方式生成的动态博客,hexo+github的最大优势莫过于搭建超级简单,不用在买域名和空间上费心思。不过缺点就是以后对网站的功能要求高了,hexo+github可能无法满足需求。等到博客的文章和访问量到了一定程度再考虑。

Hexo的安装

创建GitHub仓库

如果没有账号请先到GitHub注册。

登录账号之后开始创建仓库。

然后在仓库名字内输入: 你的用户名.github.io 之后点创建仓库。

之后是本地环境

Git 安装

Git官网下载界面下载适合自己系统的Git版本。然后安装,全部默认下一步就可以。

Nodejs 安装

Nodejs官网下载界面同的方式下载适合的版本,安装,也是全部下一步就可以。

Hexo 安装

Hexo官网会看到一条命令。

打开命令行,win+R,输入cmd,回车,输入以下命令,就是官网那条:

1
npm install hexo-cli -g

之后再命令行中定位到你放置博客的位置。我的就放在c盘根目录下的blog文件夹。

之后输入以下命令

1
hexo init 你的用户名.github.io

Next 安装

hexo自带的主题是landscape,本博客选用了Next主题。

首先进入博客文件根目录:你的用户名.github.io

1
cd 你的用户名.github.io

输入以下命令安装Next主题

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

这里先说明两份配置文件,一个是在博客文件根目录下,我的博客中路径为C:\blog\zhangjiej.github.io_config.yml 这个称为站点配置文件

另一个在主题目录下,我的博客中路径为

C:\blog\zhangjiej.github.io\themes\next_config.yml 称之为主题配置文件

Hexo与Next的配置

站点配置文件的修改

详细的配置说明请见Hexo官方文档

修改配置文件之前请备份。

这里先列出来几个必须修改的配置。其他部分可先不用修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
title: 张杰钧的博客  # 博客的名字,也称站点名称

author: 张杰钧 # 作者名字

description: Life was like a box of chocolates... # 对站点的描述,搜索引擎会抓取,可以自定义(这个还是加上比较好)

language: zh-Hans # 语言 简体中文

theme: next # 配置主题

deploy: # 部署相关配置
type: git # 使用 Git 提交
repo: https://github.com/zhangjiej/zhangjiej.github.io.git # 就是存放博客的仓库地址

大家可以参考里面内容与对应我博客的页面上的内容弄清楚对应关系,然后自行修改。注意缩进与冒号后面的空格。

主题配置文件的修改

对于主题文件的修改,最权威的也是官方文档

先备份,然后不用修改,直接使用默认配置即可。

其实这个时候我们的博客就算搭建完毕。

博客的书写

下面书写第一篇博客。进入source\_post 文件夹,发现已经有一篇文档了。这就是系统为我们生成的第一篇博客。我们的博客文件都会以.md的形式放置在这个文件夹中。

如果你没接触过markdown,就要先熟悉markdown语法以及一个合适的markdown编辑器。我是用的是Typora。回到根目录就是zhangjiej.github.io(我没试过其他位置行不行)输入以下命令:

1
hexo new “我的第一篇博客”

这样就会在_post文件夹中生成一个.md文件。下面就是要编辑这个.md文件。打开文档,里面只有以下内容

1
2
3
4
5
---
title: 我的第一篇博客
date: 2018-01-15 21:58:37
tags:
---

这两排三横线---之间的内容称为Front-matter里面的属性均是Hexo会使用的。文章的正文就在下面书写即可。

标签功能和分类功能

在这里先介绍两个很实用的功能,标签和分类。首先分类是在文章标题下面,本文的分类就是Hexo和安装。分层结构。Hexo是一级,安装是二级。而标签功能则是显示在文章末尾,本文标签就是hexo和next,它们是平面结构,相互同等地位。分类不要超过三级。分类和标签以及时间组合在一起形成了对博客文章的分类。

首先修改主题配置文件打开文件,定位menu配置

1
2
3
4
5
6
7
8
9
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

只需要将tags和categories前面的#号去电即可。注意缩进对齐。作用是在网站的导航处显示标签分类。如下图所示。

下一步配置标签和分类页面。在博客根目录输入以下命令

1
2
hexo new page "tags"
hexo new page "categories"

你会发现生成了两个index.md文件分别在source下的tagscategories文件夹内。编辑文件

1
2
3
title: categories
date: 2018-01-11 15:44:59
type: categories
1
2
3
title: tags
date: 2018-01-11 15:45:07
type: tags

其实就是将type的值修改了而已。

之后要做的就是在每篇博客的Front-matter处添加标签和分类的信息。

1
2
3
4
5
6
7
8
9
10
---
title: 使用hexo搭建博客(windows)
date: 2018-01-03
tags:
- hexo
- next
categories:
- hexo
- 安装
---

注意格式:-后面要有空格,标签是并列的数量不限,而分类是上下分级的,最多三级。

这样Hexo就会自动为每篇博客设置分类和标签。也可以在左边的分类和标签页面查看。

博客的发布

首先可以现在本地查看效果,输入命令

1
hexo s

然后用浏览器打开http://localhost:4000查看效果。

发布则需要安装工具hexo-deployer-git,输入以下命令:

1
npm install hexo-deployer-git --save

之后就可以发布了,命令如下:

1
2
3
4
5
6
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

也可以一次性执行
hexo clean && hexo g && hexo d

Hexo是将.md文件生成为静态网页文件,存放在public文件夹中,然后将其中内容发布到仓库上。第一次发布的时候需要配置git。

1
2
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

我填入的是Github的用户名和邮箱。之后还需要登录Github。上传成功几分钟后就可以通过网址看到自己的博客了。

参考链接

免费个人博客搭建详解