写在前面

  • why not wordpress
    最开始搭建博客使用的是wordpress,原因很简单,wordpress拥有十分强大的插件系统,插件基本可以满足所有的需求,但尝试了一段时间之后还是果断放弃了。就是因为markdown,wordpress虽然可以安装使用markdown的插件,但是兼容性很差,很多时候会识别出乱码,而且加载之后会拖慢整个网站的访问速度,所以放弃了。

  • why github
    原因很简单,一个字:牛逼!这个真是谁用谁知道。

  • why hexo
    其实最开始的目的很简单,因为发现网上使用github+hexo搭建博客的人很多,自然教程也好找。后来偶然的在知乎的一个链接上看到才知道是因为hexo的作者无法忍受jeykll和octopress的提交速度,因此决定自己造了一个叫Hexo的轮子。关于名字的来源,大概是因为octopress取自8进制,而Hexo表示16进制。

网上关于github+hexo搭建博客的教程很多,但大多使用的windows系统,Mac的教程很少,而且有的换了环境也弄不成,因此我也来造个轮子。


安装nodejs

这一步很简单,直接安装nodejs就可以了

本地git与github的连接

  • 首先需要掌握一些git基础入门命令

  • 官网注册账号,建立username.github.io的仓库名称

  • 安装Github Desktop,登录账号,系统自动将本地与远程建立连接,这一步与网上的教程不太一样,当然也可以参阅其他人教程。

部署hexo

  • 创建一个管理博客的目录blog
1
2
mkdir blog
cd blog
  • 安装
1
2
3
4
5
sudo npm install -g hexo
hexo init
sudo npm install
sudo npm install hexo-server
sudo npm install --save hexo-deployer-git
  • 修改配置文件
1
vim ./_config.yml

修改方法如下

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: github: https://github.com/lilibei/lilibei.github.io.git
  • 初始化
1
2
3
hexo init blog
hexo g
hexo s

若成功则为上图显示

发布文章

1
2
cd blog
hexo new 'new blog'

new blog.md文件生成于/blog/source/_posts文件夹下
文章编辑完毕后

1
2
3
hexo clean
hexo g
hexo d

访问https://username.github.io正常显示则创建成功

更改主题

可以同过查看hexo主题排名进行选择,以next主题为例:

1
git clone git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完毕后按照如下进行修改

1
2
3
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save
vim ./_config.yml
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant #此处用于更改主题

下载后的主题存放于theme文件夹下

购买域名

如何购买域名参见wordpress建站粗谈

绑定个人域名

1
2
cd blog/source
vim CNAME

添加购买到的域名

1
lilibei.net
1
2
3
hexo clean
hexo g
hexo d

登录狗爹DNS管理页面,按照如下修改,添加
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

DNSpod注册账号,按如下界面修改

蓝色下划线内容再修改狗爹的DNS管理页面后会自动生成,不用管
记录类型为A的红线需要更改记录值的IP地址(为github的IP地址)
www只需更改为你自己的页面地址

图片地址

1
2
cd blog/source
mkdir image

将图片存放于image下,然后引用即可
引用地址为http://lilibei.github.io/image/picture

当然也可使用图床,这个网上相关的教程也很多,可自行搜索

博客被百度和google同时收录

参考Hexo系列:(四)Hexo博客提交百度和Google收录,这里面写的很详细,照着做就好

Hexo博客部署到GitHub和Coding

参看Hexo系列:(三)Hexo博客部署到GitHub和Coding

其它

  • 修改标签为云标签
1
vim themes/maupassant/layout/_widget/tag.pug
1
tagcloud({min_font: 15, max_font: 15, amount: 100, orderby: 'count'})

=>>>>>>>>注意上下两段代码的区别

1
tagcloud({min_font: 15, max_font: 25, amount: 100, orderby: 'count'})
  • 添加404公益页面
1
2
cd /Users/lilibei/Desktop/blog/themes/maupassant/source
vim 404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="your web site"
homePageName="回到我的主页">
</script>
</body>
</html>
#homePageUrl="your web site"处填写你的地址就OK了