手把手教你用Hexo在GitHub搭建博客

转载请注明原作者,如果觉得有用,不用请我喝咖啡:D

这篇文章,写给希望使用Hexo在Github上搭建起个人博客的你,同样适合像 Lucien 一样不是程序猿的同学:D

1.前置准备

  • Node.js环境和npm
  • git环境
  • 一点点Markdown基础
  • 一点点git基础
  • 命令行工具,如Terminal、GitBash
  • github帐号,如果要将你的hexo博客免费部署到github上,类似我的博客 - 德鲁熊的博客的话。

Node.js和npm的安装,Mac下的配置可以从我博客中的这篇文章找到。

git环境是必须的,Mac下安装过Xcode默认配置有git。没有安装过,现装一个也非常简单,参考cocoachina上的这篇文章,没有亲测过。

Markdown,如果是纯文字记录,不会也没有关系,但是会的话可以让你写出格式更漂亮的日志和文档

至于git,同样也是不会也没有关系,因为在用hexo搭建博客的过程中,使用到的命令来回就那几行。我会把命令都提供出来,如果有需要修改的地方会特别标注,但是如果会的话,理解起来更容易。

2.使用Hexo

我们先来说说基本的配置和本机部署,这章节的操作做完后,你可以通过一个本机能访问的地址 http://0.0.0.0:4000/,看到自己的博客是什么模样。

2.1 npm安装Hexo

打开命令行工具,执行如下命令:

1
$ npm install -g hexo

如果这一步出错,请参考这篇文章看看能不能解决你的问题。

2.2 创建hexo文件夹

在你打算管理博客内容的地方,创建一个名为hexo的文件夹。例如我的在:

/Users/drubear/Development/hexo

你也可以直接使用命令行创建目录。

3.2 初始化

hexo目录下 打开命令行工具(或者cd到该目录下),执行:

1
hexo init

命令行会反馈给你:

You’re almost done!Don’t forget to run ‘npm install’ before you start blogging with Hexo!

那么接下来我们就在命令行中执行:

1
npm install

执行结束后,你只需要执行一个简单的命令,就可以在浏览器中看到博客啦。
hexo已经为你准备了模板,现在打开看看吧!
先执行:

1
hexo server

会看到

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

访问http://0.0.0.0:4000/,看见了吗?里面的这篇文章是Hexo为你准备的样例。

3.发布新文章

现在你已经有了一个可以在本机访问的博客,接下来试着发布一篇自己的文章。

如果刚才已经执行过hexo server,先用Ctrl+C 暂停Hexo server。

还是 在你的Hexo目录下 ,使用命令行执行:

1
hexo new "我的第一篇文章"

双引号内名字就是你文章的标题。
这行命令执行完后,Hexo会告诉你,

1
INFO  Created: ~/Development/hexo/source/_posts/我的第一篇文章.md

Hexo已经在你的hexo目录中的source/_posts/目录下为你创建了名为”我的第一篇文章”的.md文件。

.md是markdown的缩写。你可以使用文本编辑工具,如系统自带的TextEdit,或者Sublime来编辑。也可以使用专门编辑Markdown格式文本的Markdown编辑器。在Mac下推荐免费的MacDown,官方网站的下载在这里

找到『我的第一篇文章.md』,使用编辑器对它进行编辑,然后保存。

生成的.md文章头部有一些诸如title,date,tags之类的字段,是用来配置这篇文章的标题、日期和tag的。

然后执行:

1
hexo generate

或者

1
hexo g

如果出现错误,尝试先hexo clean,再hexo generate。
如果没有出现错误,那么执行hexo server,看看你的文章是不是已经出现在博客当中了?

Tips:

  • 关于more 在文章中加入一行
  • 1
    <!-- more -->

可以将文章折叠,点击more按钮才展示全文。这样比较方便浏览,不至于在文章篇幅很长时要滚动很长的距离才能看到下一篇文章。

  • 关于tags 如果想为文章配置tags,修改.md文件头部的tags字段。需要注意的是,笔者直接写tags: android,mac没有起作用。查阅资料后,正确的写法应该是:
1
2
3
tags:  
- Android
- Mac

4.个性化配置

对自己的hexo博客进行个性化配置,主要从_config.yml入手。建议先备份该文件,再进行修改的尝试。

在hexo目录下找到_config.yml文件。使用文本编辑器打开,所有的配置选项都在这里,可以查阅文档了解每个配置项的意思,如title代表你博客的名称,author是你的名字,subtitle是副标题等,这些配置项会反应在博客的界面上,不同的主题(Theme,后文会提到)中,这些字段的表现形式是不一样的。
我们主要关心三个部分:

  • 基本信息,如 title、subtitle、description、author等。基本信息的修改依照主题的不同会有不同的表现方式,按照自己选择的主题来尝试并观察变化即可。
  • 主题 theme。theme的修改见4.2章节。
  • 部署 deploy ,后文会已发布到Github为例说明。deploy章节的修改见4.3章节。

4.1 基本信息

笔者修改了title、subtitle、author为下面的内容,你可以在这个页面上看到每一个值都显示在了哪里。

1
2
3
4
5
6
7
# Site
title: Drubear的博客
subtitle: 不写代码的音乐家不是一个好科学家
description:
author: Drubear
language:
timezone:

注意:每一个值的冒号后面都有一个半角空格!

  • 未生效的写法:title:Drubear的博客
  • 能生效的写法:title:[空格]Drubear的博客

改好基本信息,我们再来看看主题该如何改动。

4.2 主题

在选择主题之前,可以参考知乎的一个文章,这里汇总了一些hexo的主题链接。

知乎 - 有哪些好看的Hexo主题

4.2.1 下载主题

选好主题之后,以我使用的litten的yilia为例:
在hexo目录下,使用命令行工具,输入

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

clone后面跟着的是主题的git repo地址,而themes/yilia则表示要将该主题克隆到hexo/themes/yilia目录中。
地址根据主题页面公布的git repo地址变化,而themes/[主题名称] 也有主题名字决定。
通常主题的首页会告诉你如何使用,找到长得相似的那一行命令操作即可。

PS 1:地址可能有两种形式,一种是https打头,git结尾,如

https://github.com/litten/hexo-theme-yilia.git

还有一种是git@github.com打头,git结尾,如

git@github.com:litten/hexo-theme-yilia.git

具体看主题页面上的地址,通常在download ZIP的左边

PS 2:进入themes目录 直接输入

git clone https://github.com/litten/hexo-theme-yilia.git

也可以,区别是不用在地址后面指定目录。

如果你使用的不是yillia,将clone后面的地址,替换为你想要使用的那个地址即可。例如,如果你想使用modernist,那么就输入:

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

4.2.2 配置主题(非必须)

以笔者配置的yilia主题为例,当我们需要对主题中的友情链接、个人主页地址做一些配置时,进入tnemes/yilia,找到主题目录下的_config.yml文件。
每个主题的配置文件有所不同,具体可参阅主题的主页上的信息。

4.2.3 使用主题

回到上一章节中的_config.yml文件,修改其theme字段为

1
2
## Themes: http://hexo.io/themes/
theme: yilia

同样的,别忘了冒号后面需要多一个半角空格。

OK,主题配置完毕。依次执行如下命令:

1
2
3
hexo clean
hexo generate
hexo server

如果没有报错的话,访问http://0.0.0.0:4000/,你配置的主题已经生效啦!
如果有出现报错,通常是因为你的_config.yml改动时出现了问题,除了检查冒号后面是否已经跟上一个半角空格,还可以将备份替换回来排查一下。

到此为止,你已经成功的在你自己的电脑上部署了拥有主题和内容的个人博客,遗憾的是这个作品只能被你个人访问到。如果能把它部署在GitHub上使这个博客可以被公开访问呢?接下来我们就讲讲如何将Hexo部署到GitHub Pages。

4.3 部署配置

我们已经完成了Hexo个性化配置中的基本信息和主题配置,还剩一项部署 - deploy。笔者理解为,当对 _config.yml 文件中的 deploy 进行了配置,那么通过

hexo deploy

命令,就可以将你的Hexo提交到GitHub Pages上,从而刷新你的GitHub Pages页面。

换句话说,如果执行了new、clean、generate,只是在你的电脑上生成了最新的博客,如果不执行deploy,新添加的内容是不会被推送到GitHub Pages上的。

既然我们已经决定将Hexo部署到GitHub,那么我们还是先看看需要在GitHub上做哪些前置准备。

如果你已经准备好,可以直接跳到5.2章节。

5.连接到GitHub

5.1 前置准备

如果你还没有GitHub账号,在这里或者这里申请一个。

如果你拥有了账号,还没有GitHub Pages地址,在页面右上角你的头像旁边点击 + 号按钮,选择repository。或者直接点击这里(https://github.com/new)。

Repository name 栏中,输入

[你的用户名].github.io

注意,你的用户名必须与你实际的用户名一字不差!

这个用户名可以在 Repository name 栏左边那个 Owner 中找到,保持一致 即可。

比如我的GitHub用户名是drubear,那么我的Owner中会显示drubear,而我应该在 Repository name 中填写:

drubear.github.io

Description可填简要介绍,也可以不填。

然后选Public。

去掉 Initialize this repository with a README 前的钩。

然后点击 Create repository

成功后,就可以通过 http://[你的用户名].github.io 访问你的页面了。

也许它现在还空无一物,接下来我们就把Hexo的内容放进去。

5.2 配置Deploy

当你拥有了个人的GitHub Pages后,再回到Hexo的_config.yml文件,找到Deployment章节。
将type改为git,repository改为你的GitHub Pages地址。这个地址应该长这样:

git@github.com:[你的GitHub用户名]/[你的GitHub用户名].github.io.git

branch用来指向分支,如果没有特定的分支配置,可以使用默认的master。

最终Deployment部分看起来应该是下面这个样子:

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:drubear/drubear.github.io.git
branch: master

通过前面1、2、3、4章节的步骤,我们已经准备好了要发布的博客。执行命令:

hexo deploy

如果没有报错,你可以访问自己的GitHub Pages页面查看你所建立的博客了。

比如我的博客,地址应该为:

http://drubear.github.io/

将[drubear]替换为你的用户名即可。

恭喜!你已经使用Hexo完成了个人博客的搭建并将它发布在GitHub Pages可供公开访问啦!

6.日常维护

当部署成功后,我们日常只需要:

  1. 新建文章(new)
  2. 找到生成的.md然后编辑并保存
  3. 生成博客(generate)
  4. 部署(deploy)

就可以完成新文章的发布。

日常使用命令整理如下:

1
2
3
4
5
6
7
8
9
10
11
hexo new "文章标题名称" //新建文章

hexo clean //清理(非必须),在遇到问题时可尝试先clean再generate

hexo generate //将文章生成为博客的一部分
hexo g //同上,generate的简写

hexo server //本地预览(非必须)

hexo deploy //推送到GitHub
hexo d //同上,deploy的简写

7.笔者遇到的问题

1.Deployer not found: git

出现这个错误,先确认deploy的type已经改成了git。
然后在hexo目录下运行:

npm install hexo-deployer-git –save

之后再执行

hexo generate
hexo deploy

即可。

2.genrnate 报错

检查_config.yml配置中,键值对冒号后面是否已经预留了一个半角空格。