在github上免费搭建hexo博客

Posted on Edited on In

1 简介

阅读本文需要你已掌握如下知识

  1. git
  2. markdown

现在写blog的人越来越少，但是在程序员这个群体中，还是很愿意分享自己的经验，也是对自己知识的一个积累。但是通过网站记录博客，定制化功能有限，不够灵活，也不希望给自己带来流量。而自己搭建一个博客平台的成本又比较大，这时可以考虑使用静态博客框架，同时兼顾了便捷性与功能性。hexo是其中的佼佼者，官方的定义如下

A fast, simple & powerful blog framework

hexo是一款静态博客生成框架，拥有多套主题，可以通过github发布自己的博客，满足了程序员的geek特质。

2 使用

https://hexo.io

2.1 安装hexo

通过npm安装hexo，需要sudo权限。

强烈推荐使用cnpm替换npm，提高下载速度。

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo命令行工具

1
sudo cnpm install hexo-cli -g

初始化blog

1
sudo hexo init your_blog_dir

安装node_modules依赖

1
cd your_blog_dir & sudo cnpm install

启动本地服务

1
hexo server

浏览器中访问 http://localhost:4000/ 可以看到博客已经运行成功

2.2 第一篇博客

先看一下hexo初始化的文件目录

  1. _config.yml 用于配置
  2. scaffolds 脚手架目录，设置新建博客的内容模板
  3. source > _posts 用于保存博客文章
  4. themes 主题

通过命令行可以新建博客

1
hexo new '180407 hexo'

可以在 source > _posts 目录下看到生成了一个 180407-hexo.md 文件

也可以指定脚手架，设置新博文的模板

1
hexo new post '180407 post hexo'

刷新 http://localhost:4000/ 即可看到博文已经出现在浏览器中。

2.3 更换主题

hexo的架构设计合理，方便三方提供样式模版。这里推荐两款使用过的主题，更多主题可以看 https://hexo.io/themes/ 根据自己喜好选择。

  1. next 目前正在使用的一款博客主题，外表美观、功能强大
  2. hexo-theme-Wikitten 仿Wikitten样式，可以用于搭建自己的wiki库

最简单的使用方式为，在themes目录下clone项目源码

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

将_config.yml文件中的 theme: landscape 修改为 theme: next， 重启服务后访问http://localhost:4000/ 发现样式已经改变

2.4 发布到github

可以通过GitHub发布你的blog，好处是免费、便捷。

首先需要新建一个Github repository，并且在setting中设置Custom domain，这就是你的blog地址。

安装官方脚手架工具

1
cnpm install hexo-deployer-git --save

在hexo的_config.yml文件中设置deploy属性，主要有type(发布类型)、repo(仓库地址)以及branch(分支)

1
2
3
4
deploy:
  type: git
  repo: https://github.com/wangyuheng/wangyuheng.github.io.git
  branch: master

通过命令行执行 

1
hexo deploy

就会生成静态文件(html、css、JavaScript)，并且上传到github中。此时，可以通过Custom domain访问你的博客页面。如: http://wangyuheng.github.com/

注：本文认为你已经掌握了git技能，如果发布时候，有可能是因为权限问题，需要添加ssh-key或者指定git账号密码。

2.5 发布到私有空间

使用GitHub托管博客，有几个缺陷：

  1. 访问速度慢，容易被墙
  2. SEO不友好，搜索引擎不可见
  3. 流量不属于自己

此时可以先生成静态文件，再将静态文件发布到自己的web服务器。

1
hexo generate

可以看到public目录就是生成的静态文件目录。

3. 插件

除了常规的功能内容外，hexo提供了强大的扩展功能。这里会记录一些插件，更多的乐趣还需要自己去探索。

3.1 添加搜索功能

这里的搜索是指本地搜索，实现方式是自己编写一个search.html页面，并实现一个搜索脚本。。 脚手架会帮我们实现这一步，并且部分主题集成了搜索功能，以next为例：

先安装脚手架工具

1
npm install hexo-generator-searchdb --save

在主题的_config.xml文件中启动本地搜索配置

1
2
local_search:
  enable: true

希望自己实现搜索功能的可以看一下
public/search.xml 和 public/js/script.js两个文件。

4. 进阶

一些略显高级的功能及优化

4.1 替换jquery

默认主题的jquery是通过Google CDN获取的，导致经常不可用，可以替换为国内的CND

搜索jquery目录，如默认主题jquery文件所在位置为themes/landscape/layout/_partial/after-footer.ejs

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

替换为

1
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>