【Hexo】Mac OS上使用Hexo + Github搭建博客

Hexo介绍

Hexo是一个快速、简洁且高效的博客框架，具体可以见Hexo官网，它在github上的star数现在已经到34.7k，Hexo主要有以下特点：

1. 超快速度：Node.js所带来的超快生成速度，可以让上百个页面在几秒内完成渲染。

2. 支持Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

3. 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

4. 插件或可扩展性：强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。

安装环境

安装Node.js

下载地址：https://nodejs.org/en/

安装nodejs.png

安装淘宝镜像

// 使用命令安装淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Hexo

// 使用命令去安装Hexo
cnpm install -g hexo-cli 

安装成功

安装成功后，可以使用hexo -v命令查看一下hexo版本：

查看Hexo版本.png

初始化Hexo Blog

新建一个文件夹

我这里创建一个名为Blogs的文件夹，并进入该文件夹内：

初始化Hexo

// 初始化hexo
hexo init

初始化成功如下：

Hexo初始化成功.png

这时候Blogs下的目录结构如下：

Blogs目录下结构.png

本地启动Hexo

// 启动Hexo
hexo s

hexo_s.png

浏览器打开博客网站

hexo_local.png

创建博客文章

创建博客

// 创建一篇博客
hexo n "我的第一篇博客文章"

文章在Blogs目录下的结构如下：

hexo_new_post.png

清理项目缓存

新增博客文章或者修改博客文章内容，需要执行此命令:

// 清理之前生成的网站
hexo clean

重新生成博客

// 重新生成博客
hexo g

再次启动项目

// 再次启动博客网站
hexo s

浏览器页面展示如下：

hexo_first_post.png

修改网站主题

Hexo框架默认的是landscape主题，Hexo上有三百多种主题，大家可以上Hexo官网选择自己喜欢的主题，我这里以butterfly为例：

下载butterfly主题

// 下载butterfly
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

下载butterfly主题.png

我们下载的主题都存放在Blogs/themes文件夹下：

0509_01.png

修改项目配置文件

主题下载下来之后，我们需要在项目配置文件_config.yml里面修改我们的主题：

0509_02.png
把默认的landscape修改为我们下载好的主题 butterfly

重新生成项目

这时候再执行我们Hexo三连：

// 清理项目缓存
hexo clean

// 重新生成项目
hexo g

// 本地启动项目
hexo s

Tips：重新生成项目和本地启动项目可以合并：hexo g & hexo s
再次打开项目，效果图如下：

0509_03.png

哈哈哈哈，惊不惊喜，意不意外，这是个什么鬼东西？？？
别慌，发现问题 - 找到问题 - 分析问题 - 解决问题：
原因其实也很简单，我们没有安装pug和stylus的渲染器，执行如下命令：

// 在Blogs目录下 安装pug 和 stylus渲染器
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

安装完成后，重新生成项目：

0509_04.png

到这里，我们的主题修改就完成了，后期我们可以根据自己的需要去修改butterfly的配置文件，让我们的博客网站更加个性化。
下一篇文章我将说说如何修改主题让我们的博客网站更具个性化。

关于Hexo搭建博客到这里就讲得差不多了，下面我们就想怎么把博客部署到Github上。

部署博客到Github

首先，你得要有一个自己的Github账号吧，我相信99.99%的开发者都是有Github账号的，如果你是那0.01%，请前往Github自行注册。

创建仓库

在Github里创建一个存放博客项目的仓库，操作如下：

0509_05.png 0509_06.png

这里有两个注意点：

1. 仓库的名称必须与你Github账号名相同
2. 仓库必须以gitHub.io结尾

比如你Github账号名叫：zhangsan，那你新建的这个仓库名就叫：zhangsan.github.io
创建之后，我们就有了一个存放博客项目仓库：

0509_07.png

安装Hexo部署插件

进入到Blogs目录下，安装部署插件：

cnpm install --save hexo-deployer-git

0509_08.png

修改项目配置文件

好了，万事俱备，只欠修改_config.yml文件了，打开_config.yml文件，拖拽到最后，修改文件：

0509_09.png
修改为：
0509_11.png

注意：repo为你刚创建的Github项目的地址，如果你是使用的vim打开的_config.yml，记得修改了要:wq保存退出

重新生成项目

清理项目缓存：

hexo clean

重新生成博客：

hexo g

部署到云端（Github）:

hexo d

注意：这里每次使用hexo d部署到Github为了安全都要求输入账号密码，如果你不希望每次都输入账号密码，可以跟博主一样设置Github的SSH Keys，以后每次发布到Github就不需要输入账号密码了。

访问云端博客主页

访问地址：https://博客仓库名.github.io
比如我的博客地址：https://happycodersunny.github.io

0509_12.png

最后

基本上到这里，属于我们自己的博客就搭建完成啦，撒花🎉🎉🎉～，整个搭建流程如果不出错半个小时之内其实是可以搞定的，但是这路哪里那么好走呢，每个人去搭建的过程中或多或少都会遇到一些问题，我自己在搭建的过程中也碰到了一些问题，我会抽空把遇到的问题详细整理出来，希望能够帮助大家如果要搭建博客的时候少踩点坑。

嘻嘻嘻，都看到这里了，不要吝啬你的小星星嘛，为博主点个赞呐～

更多关于Hexo框架和butterfly主题配置可以移步Sunny的个人技术博客。