转载请注明原作者,如果觉得有用,不用请我喝咖啡: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
打开命令行工具,执行如下命令:
$ npm install -g hexo
如果这一步出错,请参考这篇文章看看能不能解决你的问题。
2.2 创建hexo文件夹
在你打算管理博客内容的地方,创建一个名为hexo的文件夹。例如我的在:
/Users/drubear/Development/hexo
你也可以直接使用命令行创建目录。
3.2 初始化
在 hexo目录下 打开命令行工具(或者cd到该目录下),执行:
hexo init
命令行会反馈给你:
You're almost done!Don't forget to run 'npm install' before you start blogging with Hexo!
那么接下来我们就在命令行中执行:
npm install
执行结束后,你只需要执行一个简单的命令,就可以在浏览器中看到博客啦。
hexo已经为你准备了模板,现在打开看看吧!
先执行:
hexo server
会看到
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目录下 ,使用命令行执行:
hexo new "我的第一篇文章"
双引号内名字就是你文章的标题。
这行命令执行完后,Hexo会告诉你,
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的。
然后执行:
hexo generate
或者
hexo g
如果出现错误,尝试先hexo clean,再hexo generate。
如果没有出现错误,那么执行hexo server,看看你的文章是不是已经出现在博客当中了?
Tips:
- 关于more 在文章中加入一行
可以将文章折叠,点击more按钮才展示全文。这样比较方便浏览,不至于在文章篇幅很长时要滚动很长的距离才能看到下一篇文章。
- 关于tags 如果想为文章配置tags,修改.md文件头部的tags字段。需要注意的是,笔者直接写tags: android,mac没有起作用。查阅资料后,正确的写法应该是:
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为下面的内容,你可以在这个页面上看到每一个值都显示在了哪里。
# 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
还有一种是[email protected]打头,git结尾,如
[email protected]: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字段为
## Themes: http://hexo.io/themes/
theme: yilia
同样的,别忘了冒号后面需要多一个半角空格。
OK,主题配置完毕。依次执行如下命令:
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地址。这个地址应该长这样:
[email protected]:[你的GitHub用户名]/[你的GitHub用户名].github.io.git
branch用来指向分支,如果没有特定的分支配置,可以使用默认的master。
最终Deployment部分看起来应该是下面这个样子:
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: [email protected]:drubear/drubear.github.io.git
branch: master
通过前面1、2、3、4章节的步骤,我们已经准备好了要发布的博客。执行命令:
hexo deploy
如果没有报错,你可以访问自己的GitHub Pages页面查看你所建立的博客了。
比如我的博客,地址应该为:
http://drubear.github.io/
将[drubear]替换为你的用户名即可。
恭喜!你已经使用Hexo完成了个人博客的搭建并将它发布在GitHub Pages可供公开访问啦!
6.日常维护
当部署成功后,我们日常只需要:
- 新建文章(new)
- 找到生成的.md然后编辑并保存
- 生成博客(generate)
- 部署(deploy)
就可以完成新文章的发布。
日常使用命令整理如下:
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配置中,键值对冒号后面是否已经预留了一个半角空格。