使用Hexo构建博客+多设备使用Hexo

朱大佬在这篇上古博文的基础上写了一个更加详细的hexo搭建教程,并且使用了github pages和持续集成,可以参考一下。

我在19年8月对博客进行了一次大升级,并且添加了评论和阅读数显示,可以参考这篇文章

又是一篇拖了很久的文章,放在todo list里面实在难受,还是把它写了吧。

从最早使用第三方提供的博客服务,到自己在DO/阿里云上折腾WordPress,再到现在干脆全都交给GitHub托管,我似乎经历了传说中写博客的三个阶段。不过我这人又拖延症比较严重,很多时候感觉有好多东西可以写,值得写,偏就是没空写,懒得写。等到想写的时候,又往往是忙里偷闲写,耽误了正事,当时的那些新鲜的感悟又所剩无几,写出来的东西不禁乏然无味。但是想想能写下东西来当然是好的,回过头去看那些我很久之前从时光手里抢下来的碎片,总是会感慨一声年轻真好,妈的智障。

这篇文章主要记录了在GitHub Pages上使用Hexo构建博客的最简单的过程。Hexo有一个麻烦之处是它的源文件存在本地,如果你有多台生产力机器,你你可能需要把你的blog文件夹复制来复制去,或者用Google Drive同步一下,这样才能在多个设备上用hexo写你的博客。我尝试了一下在github上开两个分支的方法,效果拔群,不足支持是要commit+push完了之后还要再hexo d一次。如果使用持续集成的话就可以省掉第三步了,但是开分支的方法胜在简单,而且不依赖于第三方服务。

0x00 准备工作

系统需要安装Node.js与Git,同时你需要有一个GitHub账号。

这里不再赘述,可以参考以下链接:

Node.js安装配置

Git下载

GitHub Pages官方入门指南

以下所涉及到的内容在Win 10(PowerShell)和Ubuntu(基于ChromeOS与Chroot)下测试通过。

update 4/7/2018: 在Mac OS上也测试通过,前几天笔记本坏了,我在Macbook Air上也部署了一下博客。

0x01 安装与使用Hexo

首先进入一个目录,我们将在这里安装hexo与建立博客。Linux下你可能需要在命令之前加上sudo以获得管理员权限。

1
2
3
4
5
6
$ npm install hexo-cli -g
$ hexo init blog # 建立博客,并建立blog目录
$ cd blog
$ npm install
$ hexo g # 生成博客
$ hexo s # 启动hexo server,访问http://localhost:4000/即可在本地预览你的博客

常用命令

1
2
3
4
5
6
$ hexo generate # 同hexo g, 生成静态文件
$ hexo server # 同hexo s, 启动server在本地预览博客
$ hexo deploy # 同hexo d, 部署博客到GitHub等平台

$ hexo new "test" # 新建一个叫test的文章
$ hexo new page "about" # 新建一个叫about的页面

现在可以打开http://localhost:4000/查看博客

0x02 部署到GitHub

基本思想是,我们使用hexo g生成了博客的静态页面,然后通过hexo d将页面提交到GitHub上,剩下的就交给GitHub Pages去帮我们渲染和显示了。

首先在GitHub上建立一个仓库。如果你想要用your_user_name.github.io直接访问你的博客的话,你的仓库名就叫your_user_name.github.io。或者你想通过your_user_name.github.io/blog访问(如果你有自己的域名是可以用blog.xxx.com访问的,这里暂且不说),就建一个叫blog的repo,在setting中找到GitHub Pages,Source改为”gh-pages branch”。

然后你需要安装一个扩展(这是个坑)

1
$ npm install hexo-deployer-git --save

其次修改配置文件_config.xml保存后执行hexo d即可。

需要注意的是第三行repo后面,tangbao是Github用户名,blog.git中的blog是你repo的名字

第四行分支branch设置为gh-pages,而不是master

1
2
3
4
deploy:
type: git
repo: [email protected]:tangbao/blog.git
branch: gh-pages

现在你可以通过your_user_name.github.io或者your_user_name.github.io/blog来访问你的博客了。

0x03 使用GitHub管理你的Hexo源文件

现在在0x02中你建立的repo切换到master分支,将整个repo打包下载下来,找到其中的.git文件夹(是一个隐藏文件夹),复制粘贴到你的blog文件夹下,再在blog文件夹下使用以下命令:

1
2
3
$ git add --all
$ git commit -m "add hexo source files"
$ git push

这样,你的整个博客就被完全存储在github了。在其他电脑上写博客的时候,git clone下整个仓库,然后你需要确保电脑上安装了Node.js和hexo(还有上面deploy的扩展,觉得不行的话你可以把安装流程再走一遍emmm),写完之后再git commit + git push + hexo g + hexo d就可以了.

0x04 坑

  • 如果你使用了自定义主题,你可能是从github上直接git clone了一个主题下来。记得删除整个主题下的.git文件夹,不然上传到github的时候会出问题。

  • 如果上传到GitHub的时候出现这样的错误,请参考GitHub帮助添加你的public key到GitHub。

    1
    2
    3
    4
    Permission denied (publickey).
    fatal: Could not read from remote repository.
    Please make sure you have the correct access rights
    and the repository exists.
  • 我略去了很多自定义hexo和主题的过程(因为其实我不记得了,都是翻着文档改的),需要自定义的话请参考各种文档。

0x05 参考资料

0%