简介

人玩博客有三个阶段,一是在平台写,但是写着写着就会发现限制太多。比如前些年,你写个关于goagent的文章就会审核不过.博客流量来了,你想挂个广告之类的也不行。本人是受实名制的影响,在写博客上有顾忌。第二个阶段是自己购买域名和vps自己搭建后台,使用wordpress之类的博客系统,然后自己折腾点赞、评论等功能。一开始玩着挺刺激,但是维护麻烦。比如换个ip,你就要迁移整个系统,比较麻烦。再者vps也是要钱的。因此就有了第三个阶段,使用基于github提供的pages静态网页功能,既可以免费,二来迁移方便。你完全可以把整个系统备份到git上,又保证了写作的自由性,不用维护。本文介绍Mac上搭建基于github的hexo博客过程。

准备

github虽然没有明确对免费用户的空间限制,但是有说超过1G将会收到邮件通知,所以如果有担心的话最好单独注册个github用来放博客。

一.安装Node.js

官网下载v6.9.4 LTS版本,安装即可.我们用它来生成静态网页.

如果本地有梯子,可以设置代理否则npm安装的时候可能会半天不动弹:

npm config set proxy=http://127.0.0.1:1087
npm config set https-proxy=http://127.0.0.1:1087

二.安装hexo

输入以下命令安装(有问题的话用第二个):

sudo npm install -g hexo-cli
sudo npm install --unsafe-perm --verbose -g hexo

hexo官网
新建一个目录/Users/yanzi/work/hexo,然后进到hexo目录下执行hexo init,完成后可以看到hexo目录下有以下内容:

然后在执行npm install,然后看到内容如下:

多了个db.json文件。
执行hexo g生成public静态资源,再执行hexo s(hexo server的缩写)启动本地服务端,然后浏览器输入:http://localhost:4000,即可看到效果:

三.关联github

在github上新建个仓库,名为yourname.github.io,yourname是github的用户名,这个规则不能变.然后新建一对ssh的key,将公钥添加到github,请参考https://help.github.com/articles/connecting-to-github-with-ssh/,添加SSH keys之后,就可以使用git为后缀的仓库地址,本地push的时候无需输入用户名和密码.

注意:考虑到大家不止一个github,此处如果不这样处理,使用https的仓库地址,再接下来部署时往往会出现不让输入github用户名和密码的问题!

编辑本地hexo目录下的_config.yml文件,搜索deploy关键字,然后添加如下三行:

deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git
  branch: master

注意:每个关键字的后面都有个空格.

这样就关联好了github,接下来需要在hexo目录下做两件事:

  1. hexo g(hexo generate的缩写)生成md文件的静态页面.md文件在hexo/source/_posts目录下。如果新写的md文件,复制到此即可. 生成的静态文件在public目录下,我们将其push到github就ok了。
  2. hexo d(hexo depoly的缩写)将public文件夹东西推到仓库上,此时浏览器输入https://yourname.github.io就能看到自己博客啦!

还有个命令hexo clean作用是清除缓存db.jsonpublic文件夹.

四.关联域名

考虑到后缀me的域名阿里万网最便宜,我就整了个,第一年才24元,在控制台---域名---解析添加两条规则:

截图里的记录值都是yourname.github.io.上述两条解析保证你的域名带不带www都能正常解析.
然后在hexo/themes/landscape/source目录下新建CNAME文件,内容为yourhost.me,即自己域名.
注意:这个CNAME文件必不可少,每次运行generate的时候会把这个路径下的东西copy到public下.
之后运行:

hexo clean
hexo g
hexo d

将东西部署到github上,输入域名就可以看到博客了。

五.使用next主题

默认的主题不太好看,我们使用点赞最高的next主题
在博客根目录下执行:

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

然后执行cp themes/landscape/source/CNAME themes/next/source先把CNAME文件拷贝过来。然后在博客根目录下的_config.yml下的theme的名称landscape修改为next即可。
然后执行:

hexo clean
hexo g
hexo s

就可以看到next的效果了!

六.hexo多电脑同步

很多时候人要在两台电脑上操作hexo随时发表文章,我们将整个hexo目录作为一个私有git仓库,push到http://git.oschina.net.这里没有采用不同branch的管理方式,而是将其作为一个完全独立的私有仓库,托管到码云上.

在hexo目录下执行git init,然后
注意:因为theme目录下的next也是一个git仓库,而根目录下的git仓库是管不了子仓库的。后边需要对这个next theme作大量定制,因此用submodule的方式管理不合适。我们直接把next下的.git文件夹删除即可,这样就可以被外边的git仓库管理了
然后进行一次git add .,然后git commit -m "add:first commit".之后push到你在oschina上建的仓库.

这样在另外一台电脑第一次操作时,先把hexo整个仓库git clone下来,然后在hexo目录下执行npm install hexo --save,再执行一次npm install.然后

hexo clean
hexo g
hexo s

在本地测试下。每次在不同电脑上发表博文时,先git pull一次,然后再写文章。

七.线路优化

因为github服务器在国外,博客放上边访问的话有时速度较慢,大家都懂得。幸好,https://coding.net也提供了Pages服务,每个人也是1G空间。所以可以通过线路解析,国内访问coding国外访问github.我们需要三步操作:

1.coding上建仓库

首先,注册个https://coding.net,用户名假设为username,然后新建个仓库(可以是私有哦),名为username,即建立个跟用户名同名的仓库.然后跟github一样,把本地的ssh公钥添加进去。然后点击项目,在代码--Pages 服务,在部署来源里选中master 分支,如下图:

这样在博客推上去之后,可以通过http://username.coding.me/username访问博客。在下面可以看到自定义域名,假设域名为myhost.me,这里你需要绑定两个域名:myhost.mewww.myhost.me.如此,coding上的设置就一切ok了!
注意:域名设置一定不能少,只在域名提供商如万网上设置解析是不起作用的!!!

2.hexo本地设置

修改本地博客根目录下的_config.yml,找到deploy字段,设置如下:

deploy:
  type: git
  repository:
      github: git@github.com:username/username.github.io.git
      coding: git@git.coding.net:username/username.git
  branch: master

注意:一定不要设置错了!!!
在博客根目录下的source路径下新建文件:touch Staticfile #名字必须是Staticfile
然后hexo g,再hexo d就可以把博客放到coding和github了!

3.域名提供商设置

如下图所示,给github的线路设为海外,给coding的设为默认,添加两条记录就ok了。coding添加的时候,地址写成username.coding.me,如下图所示:

后续

后面关于next主题的定制,及评论分享等下回再谈.

参考

  1. http://www.jianshu.com/p/13e64c9e2295
  2. next theme安装指南
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐