Hexo介紹

Hexo是一個快速、簡潔且高效的博客框架，具體可以見Hexo官網(wǎng)，它在github上的star數(shù)現(xiàn)在已經(jīng)到34.7k，Hexo主要有以下特點：

1. 超快速度：Node.js所帶來的超快生成速度，可以讓上百個頁面在幾秒內(nèi)完成渲染。

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

3. 一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。

4. 插件或可擴展性：強大的 API 帶來無限的可能，與數(shù)種模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）輕易集成。

安裝環(huán)境

安裝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

新建一個文件夾

我這里創(chuàng)建一個名為Blogs的文件夾，并進入該文件夾內(nèi)：

初始化Hexo

// 初始化hexo
hexo init

初始化成功如下：

Hexo初始化成功.png

這時候Blogs下的目錄結(jié)構(gòu)如下：

Blogs目錄下結(jié)構(gòu).png

本地啟動Hexo

// 啟動Hexo
hexo s

hexo_s.png

瀏覽器打開博客網(wǎng)站

hexo_local.png

創(chuàng)建博客文章

創(chuàng)建博客

// 創(chuàng)建一篇博客
hexo n "我的第一篇博客文章"

文章在Blogs目錄下的結(jié)構(gòu)如下：

hexo_new_post.png

清理項目緩存

新增博客文章或者修改博客文章內(nèi)容，需要執(zhí)行此命令:

// 清理之前生成的網(wǎng)站
hexo clean

重新生成博客

// 重新生成博客
hexo g

再次啟動項目

// 再次啟動博客網(wǎng)站
hexo s

瀏覽器頁面展示如下：

hexo_first_post.png

修改網(wǎng)站主題

Hexo框架默認的是landscape主題，Hexo上有三百多種主題，大家可以上Hexo官網(wǎng)選擇自己喜歡的主題，我這里以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

重新生成項目

這時候再執(zhí)行我們Hexo三連：

// 清理項目緩存
hexo clean

// 重新生成項目
hexo g

// 本地啟動項目
hexo s

Tips：重新生成項目和本地啟動項目可以合并：hexo g & hexo s
再次打開項目，效果圖如下：

0509_03.png

哈哈哈哈，驚不驚喜，意不意外，這是個什么鬼東西？？？
別慌，發(fā)現(xiàn)問題 - 找到問題 - 分析問題 - 解決問題：
原因其實也很簡單，我們沒有安裝pug和stylus的渲染器，執(zhí)行如下命令：

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

安裝完成后，重新生成項目：

0509_04.png

到這里，我們的主題修改就完成了，后期我們可以根據(jù)自己的需要去修改butterfly的配置文件，讓我們的博客網(wǎng)站更加個性化。
下一篇文章我將說說如何修改主題讓我們的博客網(wǎng)站更具個性化。

關(guān)于Hexo搭建博客到這里就講得差不多了，下面我們就想怎么把博客部署到Github上。

部署博客到Github

首先，你得要有一個自己的Github賬號吧，我相信99.99%的開發(fā)者都是有Github賬號的，如果你是那0.01%，請前往Github自行注冊。

創(chuàng)建倉庫

在Github里創(chuàng)建一個存放博客項目的倉庫，操作如下：

0509_05.png

0509_06.png

這里有兩個注意點：

1. 倉庫的名稱必須與你Github賬號名相同
2. 倉庫必須以gitHub.io結(jié)尾

比如你Github賬號名叫：zhangsan，那你新建的這個倉庫名就叫：zhangsan.github.io
創(chuàng)建之后，我們就有了一個存放博客項目倉庫：

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為你剛創(chuàng)建的Github項目的地址，如果你是使用的vim打開的_config.yml，記得修改了要:wq保存退出

重新生成項目

清理項目緩存：

hexo clean

重新生成博客：

hexo g

部署到云端（Github）:

hexo d

注意：這里每次使用hexo d部署到Github為了安全都要求輸入賬號密碼，如果你不希望每次都輸入賬號密碼，可以跟博主一樣設(shè)置Github的SSH Keys，以后每次發(fā)布到Github就不需要輸入賬號密碼了。

訪問云端博客主頁

訪問地址：https://博客倉庫名.github.io
比如我的博客地址：https://happycodersunny.github.io

0509_12.png

最后

基本上到這里，屬于我們自己的博客就搭建完成啦，撒花??????～，整個搭建流程如果不出錯半個小時之內(nèi)其實是可以搞定的，但是這路哪里那么好走呢，每個人去搭建的過程中或多或少都會遇到一些問題，我自己在搭建的過程中也碰到了一些問題，我會抽空把遇到的問題詳細整理出來，希望能夠幫助大家如果要搭建博客的時候少踩點坑。

嘻嘻嘻，都看到這里了，不要吝嗇你的小星星嘛，為博主點個贊吶～

更多關(guān)于Hexo框架和butterfly主題配置可以移步Sunny的個人技術(shù)博客。