从零开始使用 Hexo 搭建博客

前言

使用 GitHub Pages 服务搭建博客的好处有:

  1. 全是静态文件,访问速度快;
  2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
  3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于 GitHub 的;
  4. 数据绝对安全,基于 GitHub 的版本管理,想恢复到哪个历史版本都行;
  5. 博客内容可以轻松打包、转移、发布到其它平台;
  6. 等等;

准备工作

在开始一切之前,你必须已经:

本文所使用的环境:

  • Windows7
  • node.js@6.9.4 —— git命令行输入node -v
  • git@2.8.1.windows.1 —— git命令行输入git version
  • hexo@3.3.1 —— git命令行输入hexo -vhexo version

搭建github博客

创建仓库

新建一个名为你的用户名.github.io的仓库,比如说,如果你的 GitHub 用户名是 test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了,是不是很方便?

由此可见,每一个 GitHub 账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方:

  1. 注册的邮箱一定要验证,否则不会成功;
  2. 仓库名字必须是:username.github.io,其中username是你的用户名;

创建成功后,以后你的博客所有代码都是放在这个仓库里啦。

配置 SSH key(配置过的请跳过)

这一步骤在 Hexo 搭建独立博客全纪录(一)使用 Gi t和 Github 4.1和4.2中也已讲过,如果在前面已经配置过 SSH key,则可以跳过此步骤。

为什么要配置这个呢?因为你提交代码肯定要拥有你的 GitHub 权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用 ssh key 来解决本地和服务器的连接问题。

创建SSH Key

查看是否已经有 ssh 密钥:
打开用户主目录”C:\Users\Administrator.hp-PC”,
看看有没有 .ssh 目录。

  • 如果有,再看看这个目录下有没有 id_rsa 和 id_rsa.pub 这两个文件。如果有,可以直接跳至下一小节“Github中添加 SSH Key”
  • 如果已经有 ssh 密钥,想要重新生成 ssh 密钥,需要清理原有ssh密钥:
  • 1
    2
    3
    $ mkdir key_backup
    $ cp id_rsa* key_backup
    $ rm id_rsa*
  • 如果没有,打开命令行,输入命令ssh-keygen -t rsa –C “youremail@example.com”。此处的邮箱地址,你可以输入自己的邮箱地址。在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

由于我本地此前运行过一次,所以本地有,如下所示:

".ssh"

id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。由于之前使用 GitHub 客户端,因此还有github_rsa和github_rsa.pub两个文件。known_hosts 文件如果没有暂时不管。

验证是否连接成功,连接成功显示Hi baoyuzhang! You've successfully authenticated, but GitHub does not provide shell access.。如下:

"验证是否连接成功"

Github中添加SSH Key

登录github,点击个人头像打开”settings”,再打开”SSH and GPG keys”页面,然后点击”New SSH Key”,填上任意 title,在”Key”文本框里黏贴 id_rsa.pub 文件的内容,点击 Add Key,你就应该可以看到已经添加的 key。如下:
"Github中添加SSH Key"

使用hexo博客框架

Hexo官方使用文档:https://hexo.io/zh-cn/docs/

本文使用的命令和官方文档不太一样,但意思相同,达到的效果也相同。初学者建议跟着本文一步一不做。

hexo简介

a.hexo是什么

Hexo是一个简单、快速、强大的基于 Github Pages 的博客框架,支持 Markdown 格式,有众多优秀插件和主题。

GitHub: https://github.com/hexojs/hexo

Hexo中文官网: https://hexo.io/zh-cn/

b.hexo原理

由于 github pages 存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,假如每次写完一篇文章都要手动更新博文目录和相关链接信息,相信谁都会疯掉,所以 hexo 所做的就是将这些md文件都放在本地,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到 GitHub。

安装

a.注意事项

安装之前先来说几个注意事项:

  1. 很多命令既可以用 Windows 的 cmd 来完成,也可以使用 git bash 来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用 git bash 来执行;
  2. hexo 不同版本差别比较大,网上很多文章的配置信息都是基于2.x的,所以注意不要被误导;
  3. hexo 有2种 _config.yml 文件,一个是根目录下的全局的 _config.yml,一个是各个 theme 下的_config.yml。为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

b.安装Hexo

在 git bash 输入以下命令:

1
$ npm install -g hexo

初始化

a.初始化

在电脑的某个地方新建一个名为 Hexo 的文件夹(名字可以随便取),比如我的是 E:\web\github\test\hexo,由于这个文件夹将来就作为你存放博客代码的地方,所以最好不要随便放。

Hexo 会自动下载一些文件到这个目录,包括 node_modules,目录结构如下图:

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

b.生成静态文件

执行以上命令之后,Hexo 就会在 public 文件夹生成相关 HTML 文件,这些文件将来都是要提交到 GitHub 上 你的用户名.github.io 的仓库上去的:

c.本地预览

hexo s 是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,Ctrl+C 停止本地预览。

若浏览器一直在转圈但是就是加载不出来,或执行hexo s命令出现以下提示:

这一般情况下是因为 4000 端口占用的缘故,因为 4000 这个端口太常见了,解决端口冲突问题请参考这篇文章:

http://blog.liuxianan.com/windows-port-bind.html

第一次初始化的时候 hexo 已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子:

更改主题

既然默认主题很丑,那我们别的不做,首先来替换一个好看点的主题。

这里我推荐使用使用量排名第一的主题 NexT。更换 NexT 主题可以参考NexT 官方使用文档,点击开始使用一步一步操作。下面做一个示范,并且下周写的优化设置的文章,也是基于 NexT 主题,可以跟着我一步一步来做。

a.下载主题

b.启用主题

打开根目录下站点配置文件 _config.yml, 找到 theme 字段,并将其值更改为 next。

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。

c.验证主题

在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存,以免出现一些莫名其妙的问题。然后重新执行hexo g来重新生成。

使用hexo s本地预览,如果你的博客变为下图的样子,则安装NexT主题成功:

上传到 GitHub

a.配置站点配置文件

打开根目录下站点配置文件 _config.yml,配置有关 deploy 的部分:

b.安装插件

此时,直接使用 hexo d 部署到 GitHub,将出现如下错误:

这是因为需要安装如下插件:

c.部署到 GitHub

其它命令不确定,hexo d部署这个命令一定要用 git bash,否则会提示 Permission denied (publickey)。

中间好长的安装过程,然后安装成功:

这时,打开 https://你的用户名.github.io/,出现下图,则表示部署到github成功:

再打开 GitHub 仓库,已经有了内容:

基本配置

我们自己的博客出现 Hello World 并不是我们想要的,那么我们来进一步配置,将它真正我们自己的博客。

打开根目录下站点配置文件 _config.yml,设置如下内容:

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。

其中,description 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。

配置完成后,重新部署,会发现如下变化:

但文章内容还不是我们自己的呀,下面来写我们自己的博客。

写博客

新建文章

执行hexo new '文章名',hexo会帮我们在..\hexo\source\_posts下生成相关md文件:

打开这个文件就可以开始写博客了,默认生成如下内容:

当然你也可以直接自己新建 md 文件,用这个命令的好处是帮我们自动生成了时间。一般完整格式如下:

1
2
3
4
5
6
7
8
9
---
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1, tag2, tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在 140 字以内,会出现在 meta description 里面
---

以下是正文

删除 hello-world.md,同时删除 public 文件夹下的 hello-world 文件夹:

将编写好的文章保存,重新生成和部署就可以啦!

新建页面

假如我新建一个名字为 about 的页面:

在source文件夹下,将生成about文件夹:

在 about 文件夹内有一个 MarkDown 文件,你可以通过修改该文件的内容来控制页面内容。如果你想建立一个自己网站的留言板,方式也一样。我网站的就是这样建立的。

当你将网站进行部署后,就可以访问该页面啦:

但注意,它是新建了一个独立页面,不是文章,所以不会出现在博文目录。

至此,博客的基本功能已经全部实现,下面的高级配置,让你更加方便快捷的写博客!

高级配置

现在,Hexo 根目录结构如下图:

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

下面介绍的几个是会经常用到的:

_config.yml

网站配置信息,也就是本文所称的站点配置文件,可以在此配置大部分的参数。基本配置在前面基本已经设置过了。

scaffolds

模版文件夹。新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指新建的markdown文件中默认填充的内容。例如,在使用hexo new 文章名时,默认生成的md文件会包含如下内容:

默认内容是哪里来的呢?就在scaffold/post.md中保存:

假如对每篇博客我都需要添加分类categories,每次都手动添加太麻烦,我希望每次默认生成都有 categories:,那么就可以在 scaffold/post.md 中添加:

保存后,每次新建一篇文章时都会包含 post.md 中的内容。

当然,你也可以在 scaffolds 文件夹下创建自己的博客模板,我创建一个名为 blog 的模板:

通过如下命令调用我创建的blog模板新建文章:

_posts 中生成 md 文件:

public

该文件夹中的内容将被最终 push 到 GitHub 仓库中。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件(如刚刚生成的 about 文件夹)会被拷贝到 public 文件夹。

为 GitHub 仓库添加 README.md

既然 source 文件夹中的内容将全部被推送到 public 文件夹,public 文件夹中的内容又将被最终 push 到 GitHub 仓库中,那么如果我们想要为 GitHub 仓库添加 README.md,只要在 source 文件夹中创建就好了:

部署到 GitHub,就有 README 了,但我们发现,README.md 已经被解析为 README.html,显示的全是 HTML 代码,并不是我们想要的文档格式的内容:

为了解决这个问题,我们回到 source 文件夹,将 README.md 重命名为 README.MDOWN,再部署到 GitHub:

source 文件夹中,.md 会被解析为 HTML,并放到 public 文件夹被 push 到 GitHub,但 .MDWN 不会被解析。

themes

主题文件夹,下载的主题都保存在此文件夹下。Hexo 会根据主题来生成静态页面。

最终效果

点击查看最终效果

搭的这个博客只是为了写这篇文章,我真正的博客在这里哟!

Hexo常用命令

常见命令

1
2
3
4
5
6
hexo new "postName" #新建文章
hexo generate #生成静态页面至 public 目录
hexo server #开启预览访问端口(默认端口 4000,'ctrl + c'关闭 server)
hexo deploy #部署到 GitHub
hexo help # 查看帮助
hexo version #查看 Hexo 的版本

缩写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令:

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

参考资料:


本文作者:baoyuzhang
原文地址:https://baoyuzhang.github.io/
声明:如需转载,请联系原作者


欢迎大家在评论区留下你的想法和感受!

欢迎大家关注知乎专栏:全栈成长之路

也欢迎大家加入学习交流QQ群:637481811

LeviDing wechat
欢迎扫描上方微信公众号,订阅博客获得实时动态!
坚持原创技术分享,您的支持将支持我更好的创作!
0%