Fork me on GitHub

Hexo博客搭建教程

开始

先说一句,这是Hexo的官方文档,永远以官方文档为主。

安装前提—环境搭建

在使用Hexo之前,有两样东西是必不可少的 ,别问为什么,先去下载,下载完了之后才能进行下面的操作。
GitBash
Node.js
接下来我来介绍下上述两个东西:
GitBash是Windows下的命令行工具。
基于msys GNU环境,有git分布式版本控制工具,也主要用于git。
GNU环境,就是说如果你喜欢linux/unix的环境,就可以选择使用git bash。
里面有你熟悉的linux工具,tar,grep,awk等,且可以安装编译环境gcc,make等。
如果你对git不是很了解,推荐你去看git教程

Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。hexo博客是简单、快速、强大的Node.js静态博客框架
如果你点击了我提供的链接,进入了下载页面,根据你的计算机的版本选择相应的版本下载。例如:我的计算机是win7 64位的,我选择以下版本下载:

博客搭建过程

好了,现在默认你已经下载并成功安装了上边的两个东西。
接下来,随便在电脑什么地方创建一个文件夹「HEXO」,像下边的图片那样

然后双击进去。进去之后,鼠标点击右键,会出现 Git Bash ,别怕,点一下,这个时候 「黑窗口」 就会出现。此时,需要你先给电脑上安装Hexo,很简单,在黑窗口下输入如下命令

1
$ npm install -g hexo-cli

安装完成之后,继续依次输入如下命令,注意顺序

1
2
$ hexo init
$ npm install

回到「HEXO」文件夹下,你会看到,多了好多东西,不要慌,继续依次输入如下命令

1
2
$ hexo g
$ hexo s

不出什么意外的话,在浏览器里输入

http://localhost:4000/
如果能打开,那么恭喜你!到这一步,你的博客搭建完成了!

但你以为这样就完了?当然不是了,这个只是在你本地,也就是你的电脑上搭建好了,如果想让别人也能看到,你需要下边的东西

GitHub的账号
关于github,如果有不熟悉的同学可以参考我上面给出的git教程

安装主题

站点文件

站点跟目录的文件应该是这个样子的

上图中的一些文件目录可能你现在会没有,但是也差不多。
简要解释下:
_config.yml:主要配置文件,刚才生成的” http://127.0.0.1:4000 “站点重要的配置信息全在这了。
db.json:一些数据存放的地方,不用数据库,用json存。
debug.log:刚才以debug模式启动的,日志信息就在这了。
node_modules:这个太复杂,不管它
package.json:关于hexo的一些说明,如版本啊、插件等元数据。
public:生成的站点,我们要访问,其实访问的html、css、js都在这里面了。
scaffolds:存放一些模版,后面再说。
source:写博客,博客的源代码就放在这个里面了。
themes:上面加阴影的是比较重要的,至于themes,下面说。
Themes
themes文件夹下存放的就是主体,打开可以看到里面有一个叫做langscape的主体。之前在”http://127.0.0.1:4000"看到的那套皮肤就是langscape的主题。
现在,我们要换主题,换成nexT主题。
参考教程:http://theme-next.iissnan.com/five-minutes-setup.html

下载nexT主题

其实就是用git克隆到本地。
克隆到哪呢?就放在与langscape同级的目录。

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

使用nexT主题

告诉hexo,给我配上nexT的皮肤:
找到站点目录下的_config.yml,将 theme的值改为next。

验证nexT主题

1
$ hexo s --debug

访问http://127.0.0.1:4000
说明
在站点跟目录下,有个配置文件叫做_config.yml;在主题目录下,也有一个配置文件叫做_config.yml。
为了方便区分,我们称前者为“站点配置文件”,后者为“主题配置文件”。
主题设置

参考http://theme-next.iissnan.com/
第三方服务

参考http://theme-next.iissnan.com/
注:略的内容参考教程中都有
最后生效Github博客

github创建仓库

在github新建一个仓库。
比如说的我github地址为http://github.com/hdyang12
那么我的仓库名称就叫做hdyang12.github.io,对应的网址就是http://hdyang12.github.io
上传博客内容到github
应该还记得,上述站点和目录的文件中有一个public的文件夹,这个文件夹就是上传文件所在的路径。
当然,public这个文件夹目前还是没有的。我们要先写一篇博客

第一篇博客

现在开始写第一篇博客。

新建源文件

源文件都存放在source目录下:
博客的.md源文件存放在站点目录下的source/_posts文件夹下。

方法1:
在source/_posts文件夹下新建.md,或者在该目录下再拷贝一份。
方法2:
在站点根目录下使用hexo new filename命令通过创建模板自动在source/_posts 文件夹下创建博客源文件,比如:

1
$ hexo new firstblog

这样在source/_posts 文件夹下firstblog.md就创建好了。
推荐拷贝一份或者使用模板创建。
接下来介绍一下博客是如何写的,如下图:

这里是头部,包括标题(title),描述(description),日期(date),标签(tags),分类(categories);日期可以不写,标签可以多个
下面的为博客主体内容,语法参考Markdown

发布博客

假设现在博客已经写好了,要发布。

那么就需要做两件事情:
1.首先告诉hexo将自己的源文件转化成对应的.html文件,并且存放在public目录下。执行命令如下(站点目录下):

1
$ hexo g

现在public文件夹就生成了,并且里面的内容也根据你写的博客内容更新了
2.将public文件夹做成git仓库并与远程库关联:
首先要将你的github和本地关联,之前的git教程中有,我就不赘述了。
将public变成git管理的仓库:
GitBash进入public路径(cd public)

1
2
$ git init
$ git add .

(注意上面那条命令中的 ‘.’ 也属于命令)

1
$ git commit -m "commit"

将本地库与远程库关联:

1
$ git remote add origin git@github.com:hdyang12/hdyang12.github.io

(这里我的github是hdyang12,你的就用自己的github name)

2.然后再将public目录下的资源push到github,执行命令如下(从站点目录下过来):

1
$ git push -u origin master

(把本地库推到远程库)

现在在浏览器中输入:
http://yourname.github.io。
注:这里的yourname是你的github的名字,比如我的是hdyang12。
成功进入你的博客

利用 shell 脚本操作指令

当我们把文章写好后,需要进行好几个指令操作,比如:hexo g 、 git add . 、 git commit -m “c” 、 git push origin master 等
我们可以通过一个shell脚本来统一完成这些指令
我是写了一个shell脚本(start.sh),指令为:

1
2
3
4
5
6
7
8
//分号确保上一条指令执行完再执行下一条
cd C:/Users/YH/github/hexo/blog;
hexo g;//将md文件转换为静态的html
cd public;
git add .;
git commit -m "c";
git push origin master;//代码push到github
git push codingorigin master;//代码push到coding

最后在Git Bash上执行:bash start.sh 即可

附:绑定自己的域名到github个人主页

在\source(与public同级)中创建一个CNAME文件(文件名叫CNAME,没有文件后缀),
文件里面的第一行写上你的域名(不用加www前缀)
比如我的是:

1
yanghuii.com

然后 $ hexo g
会自动把CNAME这个文件复制到public(不直接在public里面加CNAME是因为hexo g之后,因为resource里面没有,public里的会被删掉),然后 push到github即可。

接下来前往你的DNS服务商新建一个CNAME解析至你的github page个人主页地址(如:hdyang12.github.io)。DNSPod需要多加一个点,即hdyang12.github.io.


如果你点击保存的时候出现了下述错误,不要怕

把下面主机记录带为” @ ”的解析全给删了就行了。
等待更改生效,一般几分钟就可以使用你自定义的域名进行访问了。

「真诚赞赏,手留余香」