快速搭建hexo静态博客

最开始的时候很想弄个个人博客玩,但是之前在Hostinger上注册的域名太难记了,服务器也超级慢,转战github page用CNAME绑定了个人喜欢的域名。

一直想用github page推荐的jekyll做静态博客,但是苦于mac终端总是报错,只能暂时放弃了这个想法。

其实我也是偶然知道hexo的,昨晚试着做了一下,感觉还不错,主题也很多,配置起来很方便。第一次搞,看了很多资料,趁着今天有时间分享一下。因为我用的是mac air,所以我主要讲一下mac上怎么搭hexo。


安装node.js和npm

因为hexo是基于node.js的,所以需要先装一下node。安装方法很多,这里讲两个(有一个是基于homehrew的,mac自带ruby所以可以一键搞定):

1.官网下载pkg,直接安装

node.js官网
node.js中文站
npm官网

npm不用单独装,装node.js的时候自动就装上了。

node下哪个版本影响不是很大,虽然之后我用终端运行hexo的时候有err报错说需要依赖node的版本号,但是目前也没啥大问题。

双击pkg包直接安装即可,装好了之后打开finder,按下cmd+shift+g,输入/usr/local/bin,node的快捷方式就在里面了。因为usr是隐藏文件夹,所以需要查找路径。

也可以打开终端,输入

1
$ node -v

返回版本号则说明安装成功

2.用homebrew安装node.js

打开终端,输入下列代码,回车,自动就装好了

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

也可以打开终端,输入

1
$ brew -v

返回版本号则说明安装成功

然后再终端里输入,回车搞定

1
$ brew install node

安装hexo

有了node.js就可以直接用npm安装了

1
$ npm install -g hexo

就是这么简单粗暴,恩

hexo这里给了非常详细的文档,可以参考这里


安装git,配置SSH

因为装了git还要配置SSH,这里就不说SSH了,关于SSH可以直接看github上的详细教程,很详细,具体看这里

因为前面用到了homebrew,用这种方法的话可以直接装git

1
$ sudo brew install git

或者直接在这里下载安装git即可


使用hexo搭建博客

创建博客项目

到这一步hexo已经安装好了,需要做的就是在咱喜欢的路径下新建一个hexo博客项目了。

打开终端,cd到想要建立hexo的目录,用init命令新建一个文件夹

1
2
$ cd /Users/achuan
$ hexo init hexoBlog

这样hexo会自动在指定目录下新建hexoBlog文件夹,并且把相关配置文件到生成完毕。

接着需要安装一些必要的模块,进入新建的文件夹内,用npm安装即可:

1
2
$ cd hexoBlog
$ npm install

这样基本上就安装完毕了,可以直接开始写博客,配置属于自己的主题啦!

新建日志

进入hexoBlog你会发现有一个source,里面有一个_post文件夹,有一篇默认的md文档,打开看看会发现这个是默认的配置文档。没关系,先不看。

新建日志有两种方式:

1.用终端找到指定目录如hexoBlog,用new命令可以直接生成指定名称的空文档
1
$ hexo new "newblog"

在_post里就会看到newblog.md,打开会发现有如下文件头

1
2
3
4
5
title: //日志题目
date: //日期,默认是文档创建日期,格式是 YY-MM-DD HH:MM:SS
tags: //文章标签
thumbnail: //有的主题会要求
banner: //有的主题会要求
2.第二种方式就是直接在_post目录下自己新建啦,然后加上文件头即可

建完文档就是写文档啦

关于怎么用markdown写日志网上也有很多啦,有时间再整理分享啦~

生成本地文件[^error]

[^error]:如果执行这部分命令的时候老是有一堆莫名其妙的报错信息,可以试着重新找到hexoBlog文件夹,使用$ npm install hexo --no--optional,来自huangshiyang;或者删除掉hexoBlog,重新新建项目。

继续说博客的事情。

写完博客之后先不要急着推送到github上去(我知道各位着急把本地文件push到github page上去),可以先用hexo的操作命令在本地进行预览调整。

在本地生成静态网站(public文件):

1
$ hexo generate // 快捷键是 $ hexo g

在本地服务器运行:

1
$ hexo server // 快捷键是 $ hexo s

本地链接生成了之后打开浏览器输入localhost:4000即可看到了,默认端口是4000。


部署博客

部署博客之前必须要完成git的安装和SSH密钥的配置。

同时还要在hexoBlog文件夹下地配置文件_config.yml里对部署信息进行修改。打开目录下的_config.yml文件,找到最后的部分:

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

照着格式把repository和branch填写清楚即可,然后使用deploy命令部署到github page上

1
$ hexo deploy // 快捷键是 $ hexo d

如果遇到让输入github账号密码的情况直接输入就好了。

从我的情况来看,部署到github page之后,其他的文件都被覆盖了,完全找不到了,用来域名解析的CNAME文件也不见了。只能自己手动在github新建。以及github desktop也查不到change信息……这一点不知道是怎么回事。