hexo+github pages 搭建 blog及防坑指南

Posted on | Comments: | Views:

在超哥的安利下，开始使用hexo+githubpages搭建自己的博客。对于前端同学来说，基于Node.js的hexo可谓是非常友好的选择。

前两天超哥很开心的敲下hexo d，过了两天整理文件时一不小心手贱删掉了项目，写了4年的博客全都没有啦，只能一个个copy出来，简直是喜闻乐见（超哥不要打我，逃～）

基本操作大家都可以在hexo详尽的文档中找到，但是一些文档之外的最佳实践，在此记录下。

基本搭建操作

以下是搭建hexo博客基本操作，只是mark一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# 安装hexo命令行工具
nmp i hexo-cli -g

# 在此目录搭建博客，在github创建此项目
cd EvaLotus.github.io
# 新搭建的blog需要这一行
hexo init
# 安装依赖
npm install

# 启动服务，一个基本的博客就已经搭建好了
hexo s

# 选择喜欢的主题，如next，实在是太容易撞衫了，但是确实是极简主义的爱
# 将主题clone至themes目录下
# 每次换电脑重新clone项目都需要执行这一步哦
git clone https://github.com/theme-next/hexo-theme-next themes/next

# 在外层_confif.yml中改theme为next

# 删除generate的文件，切换主题时最好执行下，可以不用自己删掉public文件
hexo clean****

# 生成public目录，可以在本地调试时使用
hexo g

# 如果只是直接部署
hexo d

# 新建一篇博客
hexo new 'HelloWorld'

# 豆瓣相关
hexo douban -b  #生成读书页面
hexo douban -m  #生成电影页面
hexo douban -g  #生成游戏页面

很容易就搭建好了自己的博客，下面是一些常见问题的解决。

FAQ

1.怎么能将github.io的域名改成自己申请的域名？

首先你需要在万网或其他平台上买个域名，一般50元/年。购买完成后需要在购买域名的管理后台进行CNAME解析，目的是将gitubpages的地址比如https://github.com/EvaLotus/EvaLotus.github.io指向你购买的域名evacoder.com。
然后直接在github的project settings里，设置custom domain，这样就会自动在你的项目中增加一个CNAME文件，里面会记录你自己的域名。

2.如何hexo d自动更新部署博客

需要安装插件npm i hexo-deployer-git --save，在_config.yml中配置

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

配置完成之后，每次hexo d都会自动将编译好的文件提交到master分支上，并部署完成。

还需要在配置_config.yml时一定要注意此类文件对缩进要求很严格，在sublime中编辑会有适当的颜色提醒你是否缩进正确。

3.每次hexo d之后我的CNAME都没了怎么办？

小伙伴们应该都发现了，hexo d之后并没有push source目录，只是push生成后的public中的文件，所以我们要注意，CNAME，README，Favicon.ico都应该放在source目录下，这样hexo d之后会直接copy到public的根目录下

4.换电脑了或者像超哥那样误删了源文件怎么办？

很多小伙伴应该都有同时在公司和在家修改博客的需求，一换电脑就懵逼，github上新clone下来的只有编译后的文件。

或者很久不写博客，整理文件时一不小心把源文件删掉了。

其实我们可以使用分支来管理我们的博客，简言之，master上存放生成的静态文件，hexo存放源文件。

操作之前我们要分清职责，既然hexo上只存放源文件，那么我们要配置合理的.gitignore

1
2
3
4
5
6
7
8
9
10
11
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
.deploy*/
# public和themes文件在hexo分支上都应该不应该被提交，因为是我们自己写的
# 但是themes中的_confif.yml我们需要copy一份在source目录下备用，以免换电脑之后丢失
# 合理的管理分支和文件，不要给自己埋坑
public/
themes/

操作上并不需要切换分支，按下面的步骤配置之后，每次操作都在hexo分支上修改，不用再管master分支了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 切出hexo分支
git checkout -b hexo

# 以后都在此分支上修改，虽然hexo d可以帮你将生成的静态文件自动push到master
git checkout master
hexo d

# 但是每次修改之后一定要记得自己把hexo分支上的源文件的修改push一下！！
git push origin/hexo

# Easy!
# 这样换电脑之后直接很快就可以获取到博客源文件了
git clone git@github.com:EvaLotus/EvaLotus.github.io.git
git checkout hexo
npm install
# 因为theme文件在gitignore下，所以每次还需要重新clone下，不然会遇到no layout的错误。
# 把source中的_confif.theme.yml copy回来
git clone https://github.com/theme-next/hexo-theme-next themes/next

我的博客可能不是最好看的，但是一定是目录结构最清爽的！

5.怎么维护博客呢？
我之前都是在gitbook上做学习笔记，语言很随意，排版很混乱，这样并不利于知识的沉淀，不仅仅要自己理解，更要能陈述的让其他人一看就明白，像阮一峰老师那样，由浅入深，把复杂的只是说清楚。

现在把gitbook的笔记都整理成博客之后，也不敢把gitbook的笔记删掉，一旦遇到维护两份差不多的文档时，我们就要警惕，他们一定会差别越来越大，最后有一份会被放弃，要不然就是要花更多的时间来整理。

既然写blog可以让我们知识沉淀更深，那么就写在博客上吧。

但是直接在sublime中写markdown并不能所见即所得，我想到的办法是在gitbook中直接打开博客的source目录，这样既能所见即所得，又保持了唯一性，之后会把gitbook上零碎的知识整理成每个人都能看懂的文章。

6.分享愉快的写博客体验
在hexo s状态下我们修改了markdown之后，只需要刷新页面就可以看到变化了。如何实现自动刷新可以使用webpack的loader，但是暂时不想实现本地的chrome+sublime插件livereload也可以实现这个功能。
hexo使用的是gulp，gulp也有gulp-livereload可以使用，感兴趣的小伙伴可以改下试试。

其他问题可以直接去看hexo的文档，已经灰常良心了！

搭建博客很简单，有很多漂亮的主题可供大家选择，但是博客的壳子并没有那么重要，最重要的是保持每天记录的习惯，分享高质量的内容。

如果遇到其他问题可以给我留言，一起来搭建自己的博客吧。

Eva wechat
关注Eva的意如小馆，更方便的与我交流