Hexo介紹

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

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

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的文件夾嗤放，并進入該文件夾內：

初始化Hexo

// 初始化hexo
hexo init

初始化成功如下：

Hexo初始化成功.png

這時候Blogs下的目錄結構如下：

Blogs目錄下結構.png

本地啟動Hexo

// 啟動Hexo
hexo s

hexo_s.png

瀏覽器打開博客網站

hexo_local.png

創(chuàng)建博客文章

創(chuàng)建博客

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

文章在Blogs目錄下的結構如下：

hexo_new_post.png

清理項目緩存

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

// 清理之前生成的網站
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

重新生成項目

這時候再執(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

到這里因块，我們的主題修改就完成了橘原，后期我們可以根據自己的需要去修改butterfly的配置文件，讓我們的博客網站更加個性化涡上。
下一篇文章我將說說如何修改主題讓我們的博客網站更具個性化趾断。

關于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結尾

比如你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為了安全都要求輸入賬號密碼忌堂，如果你不希望每次都輸入賬號密碼，可以跟博主一樣設置Github的SSH Keys酗洒，以后每次發(fā)布到Github就不需要輸入賬號密碼了士修。

訪問云端博客主頁

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

0509_12.png

最后

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

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

更多關于Hexo框架和butterfly主題配置可以移步Sunny的個人技術博客。