前言
作為程序猿字旭，相信大家都有過這樣一個想法然想，搭建屬于自己的博客網(wǎng)站莺奔，在上面寫寫技術(shù)文章，記錄生活點滴变泄，堅持下去會發(fā)現(xiàn)這是一件很有成就感的事情弊仪。最近剛好在學(xué)習(xí)這部分內(nèi)容熙卡，深入進去后發(fā)現(xiàn)里面坑很多杖刷，為了節(jié)省大家的時間励饵，少走一點彎路，我整理出了這篇文章供大家參考滑燃。
為什么選擇Hexo
之前在網(wǎng)上搜了一下目前比較流行的靜態(tài)博客框架役听，最后目標(biāo)鎖定在Jekyll和Hexo上，兩者都支持Markdown語法表窘，這點我很喜歡典予，Jekyll基于Ruby實現(xiàn)，安裝Jekyll需要搭建Ruby環(huán)境乐严，而Hexo基于NodeJs實現(xiàn)瘤袖，在Windows上安裝NodeJs開發(fā)環(huán)境比Ruby簡單，另外Hexo的主題相對來說更符合我的審美昂验，所以最終選擇了Hexo捂敌。
什么是Hexo？官網(wǎng)對它的介紹是：
Hexo 是一個快速既琴、簡潔且高效的博客框架占婉。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)甫恩，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁逆济。
準(zhǔn)備工作
安裝Node.js
下載地址：https://nodejs.org/en/download/
推薦下載LTS版本的msi文件，默認(rèn)64-bit磺箕，也可根據(jù)自己的Windows版本選擇32-bit奖慌。
保持默認(rèn)設(shè)置即可，一路Next松靡。安裝完成后打開命令行窗口简僧，輸入命令：
$ node -v
$ npm -v
結(jié)果如下圖所示，則說明安裝正確击困，可以進行下一步涎劈，如果不正確，請回頭檢查自己的安裝過程阅茶。
安裝git
下載地址：https://git-scm.com/downloads
保持默認(rèn)設(shè)置即可蛛枚，一路Next。安裝完成后打開命令行窗口脸哀，輸入：
$ git --version
結(jié)果如下圖所示蹦浦，則說明安裝正確，可以進行下一步撞蜂，如果不正確盲镶，請回頭檢查自己的安裝過程侥袜。
github配置
第一步，注冊一個github賬號溉贿，記得點擊郵箱中的驗證鏈接枫吧，注冊地址：https://github.com
第二步，生成SSH keys
什么是ssh：ssh是Secure Shell（安全外殼協(xié)議）的縮寫宇色，建立在應(yīng)用層和傳輸層基礎(chǔ)上的安全協(xié)議九杂。為了便于訪問github，要生成ssh公鑰宣蠕，這樣就不用每一次訪問github都要輸入用戶名和密碼例隆。
1.本地成功安裝git后，單擊鼠標(biāo)右鍵抢蚀，選擇Git Bash Here镀层，打開git bash。
2.輸入命令：
$ ssh-keygen -t rsa -C "xxx@xxx.com"
引號中的內(nèi)容是你在github上的注冊郵箱皿曲，之后一路回車唱逢，結(jié)果如圖所示：
3.上一步已經(jīng)成功的生成了ssh key，接下來輸入：
$ eval "ssh-agent -s"
然后輸入：
$ ssh-add ~/.ssh/id_rsa
這一步可能會報錯：Could not open a connection to your authentication agent 谷饿，這時直接輸入：
$ ssh-agent bash
再次輸入：
$ ssh-add ~/.ssh/id_rsa
結(jié)果如圖所示：
4.用cat命令查看key的內(nèi)容：
$ cat ~/.ssh/id_rsa.pub
選中內(nèi)容惶我，右鍵復(fù)制備用，如圖：
第三步博投，配置SSH keys
打開github頁面绸贡，找到setting中的ssh keys，點擊新增按鈕毅哗，輸入任意的title听怕，將剛才復(fù)制的key粘貼進去保存即可。
第四步虑绵，測試
輸入命令：
$ ssh -T git@github.com
結(jié)果如圖：
到這里為止尿瞭，準(zhǔn)備工作就全部完成了替饿。
Hexo的安裝與配置
第一步砸西，安裝Hexo
打開命令行窗口，輸入命令：
$ npm install -g hexo-cli
安裝完成后輸入：
$ hexo version
結(jié)果如下圖所示寿谴，則說明安裝正確捕发。
如果報錯：'hexo'不是內(nèi)部或外部命令疏旨，也不是可運行的程序或批處理文件 ，則需要檢查環(huán)境變量配置是否正確扎酷，如下圖所示檐涝，編輯Path變量值，在結(jié)尾處加上：C:\Program Files\nodejs\node_global;（文件hexo.cmd所在目錄）
第二步，初始化Hexo
進入任意目錄谁榜，比如F盤幅聘，然后指定一個文件夾名，這里以blog為例窃植，命令如下：
$ hexo init blog
結(jié)果如下圖所示帝蒿，F(xiàn)盤下會多出一個blog文件夾：
接下來進入blog目錄：
$ cd blog
第三步，安裝必要的依賴
$ npm install
第四步撕瞧，生成靜態(tài)文件
$ hexo generate
該命令的簡寫形式為：
$ hexo g
執(zhí)行完畢后會在blog目錄下生成一個public文件夾陵叽，里面包含了博客網(wǎng)站的所有靜態(tài)資源。
第五步丛版，啟動服務(wù)器
$ hexo server
該命令的簡寫形式為：
$ hexo s
默認(rèn)情況下，訪問地址為：http://localhost:4000/
另外也可以指定端口（比如8000）：
$ hexo s -p 8000
第六步偏序，驗證
在瀏覽器中打開上面的地址页畦，你將會看到：
到這里為止，Hexo的安裝與相關(guān)配置就全部完成了研儒。
將Hexo與Github Pages聯(lián)系起來
第一步豫缨，創(chuàng)建代碼庫
1.登錄github，點擊頁面右上角的加號端朵，選擇New repository
2.在Repository name中填寫 yourname.github.io 好芭，注意這里的yourname指的是你的github用戶名，如果你的名字是kirito冲呢，那就填 kirito.github.io 舍败，Description中可以填一些簡單的描述，不寫也沒關(guān)系敬拓，然后點擊Create repository
3.正確創(chuàng)建之后邻薯，你會看到如下界面：
第二步，編輯站點配置文件
打開blog目錄下的_config.yml文件乘凸，編輯deploy模塊厕诡，內(nèi)容如下：
deploy:
type: git
repo: git@github.com:lizhiming1995/yourname.github.io.git
branch: master
注意這里的repo地址應(yīng)該換成你第一步創(chuàng)建的代碼庫的地址。
第三步营勤，安裝一個擴展
進入blog目錄灵嫌，打開命令行窗口，輸入命令：
$ npm install hexo-deployer-git --save
安裝完成后葛作，就可以一鍵部署到github上了寿羞。
第四步，部署
$ hexo deploy
該命令的簡寫形式為：
$ hexo d
執(zhí)行結(jié)果如圖所示：
這樣你public目錄下的靜態(tài)文件就上傳到你的代碼庫中了进鸠。
第五步稠曼，激活GitHub Pages
打開代碼庫的Settings頁面，找到GitHub Pages，選擇master branch霞幅，然后點擊Save按鈕漠吻，如圖：
最后會提示你：Your site is ready to be published at http://yourname.github.io/
這就是你的博客地址了，任何人都可以訪問哦司恳。
綁定自己的域名
第一步途乃，在萬網(wǎng)、騰訊云扔傅、阿里云等提供域名注冊的域名服務(wù)商處購買一個域名耍共，這里以阿里云為例，購買地址：https://wanwang.aliyun.com/
第二步猎塞，打開控制臺试读，給域名添加DNS解析
添加兩條解析記錄，記錄類型為CNAME荠耽，主機記錄分別填@和www钩骇，記錄值填之前GitHub Pages提供的域名，注意沒有http的前綴铝量，如下圖：
添加完后別人用www和不用www都能訪問你的網(wǎng)站倘屹。
第三步，在blog目錄的source文件夾下創(chuàng)建一個CNAME文件慢叨，記住不要有文件后綴名纽匙，編輯CNAME文件，里面寫你購買的域名拍谐，例如 yourname.com 烛缔，記住不要有www，創(chuàng)建完成后每一次執(zhí)行 hexo g 都會在public文件夾下生成CNAME文件赠尾，方便后面的部署
第四步力穗，在blog目錄下打開命令行窗口，運行 hexo g 气嫁，再運行 hexo d
第五步当窗，在瀏覽器輸入你購買的域名，你會發(fā)現(xiàn)該域名已經(jīng)指向了你在github上的博客地址
注意：設(shè)置域名解析需要幾分鐘的時間寸宵，若完成以上步驟依然無法訪問崖面，請過幾分鐘再嘗試
Hexo入門
我們先來看一下blog的目錄結(jié)構(gòu)：
+ blog
+ public //靜態(tài)資源文件夾，內(nèi)容會推送到代碼庫
+ scaffolds //模板文件夾梯影，新建文章時巫员，Hexo會根據(jù)模板來建立文件
+ source //資源文件夾，Markdown和HTML文件會被解析并放到public文件夾甲棍，而其他文件會被拷貝過去
+ themes //主題文件夾简识，Hexo會根據(jù)主題來生成靜態(tài)頁面
- _config.yml //網(wǎng)站的配置信息，可以在此配置大部分的參數(shù)
- package.json //應(yīng)用程序的信息和依賴關(guān)系
方便起見，我們把網(wǎng)站的語言設(shè)置為中文七扰，編輯blog目錄下的_config.yml文件奢赂，將language這一項設(shè)置為 language: zh-CN（參考blog/themes/landscape/languages目錄），將url這一項設(shè)置為 url: http://yourname.com（你購買的域名颈走，若未購買可以用 http://yourname.github.io 代替）膳灶，其他配置項請根據(jù)自己的需要進行設(shè)置。
接下來新建一篇文章：
$ hexo new [layout] <title>
layout可選值有：draft（草稿）立由、page（頁面）轧钓、post（文章），對應(yīng)模板文件夾中的3個文件锐膜，如果沒有設(shè)置layout的話毕箍，默認(rèn)使用_config.yml中的default_layout參數(shù)（默認(rèn)值post）代替。若標(biāo)題包含空格枣耀，請使用引號括起來霉晕。
現(xiàn)在，我們來新建一篇名為test的文章捞奕，輸入以下命令：
$ hexo new test
結(jié)果在source/_posts目錄下生成了test.md文件，內(nèi)容如下：
---
title: test
date: 2018-06-23 19:14:56
tags:
---
這里給出Front-matter的概念拄轻，F(xiàn)ront-matter是文件最上方以 --- 分隔的區(qū)域颅围，用于指定文件的變量。
常見參數(shù)：title（標(biāo)題）恨搓、date（創(chuàng)建日期）院促、tags（標(biāo)簽）、categories（分類）斧抱，只有文章（post）支持標(biāo)簽和分類參數(shù)常拓，建議文章分類只寫一個，標(biāo)簽可以有多個辉浦，寫法為 tags: [tag1,tag2,tag3] 弄抬，注意每個參數(shù)的冒號后面都應(yīng)該有一個空格，這一點同樣體現(xiàn)在_config.yml文件中
編輯test.md文件宪郊，內(nèi)容如下：
---
title: test
date: 2018-06-23 19:14:56
tags: [tag1,tag2,tag3]
categories: java
---
文章正文
保存后刷新頁面掂恕，通常情況下頁面會自動更新，若修改沒有生效弛槐，則需要重新執(zhí)行以下命令：
$ hexo g
$ hexo s
這里再介紹一個命令：
$ hexo clean
它的作用是清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)懊亡。在某些情況下（尤其是更換主題后），如果你發(fā)現(xiàn)對站點的更改無論如何也不生效乎串，你可能需要運行該命令店枣。
打開網(wǎng)站首頁，你會看到剛才設(shè)置的標(biāo)簽和分類生效了：
發(fā)現(xiàn)Hello World這篇文章的內(nèi)容被折疊起來了嗎，很簡單鸯两，只需要在文章正文合適的地方加上下面這行代碼就搞定了闷旧。
<!--more-->
菜單欄只有Home和Archives？沒關(guān)系甩卓，我們可以加個頁面（page）鸠匀，這里以about為例，在blog目錄下打開命令行窗口逾柿，輸入命令：
$ hexo new page about
結(jié)果會在source目錄下生成about文件夾缀棍，里面包含一個index.md文件，文件內(nèi)容就是about頁面的內(nèi)容机错。
還沒有結(jié)束爬范，編輯blog/themes/landscape目錄下的_config.yml文件，修改menu的配置為：
menu:
首頁: /
歸檔: /archives
關(guān)于: /about
保存刷新頁面弱匪，你會看到導(dǎo)航欄里多了“關(guān)于”青瀑，點進去就是about頁面啦，目前只有一個標(biāo)題萧诫，內(nèi)容待編輯斥难，注意頁面是不支持設(shè)置標(biāo)簽和分類的，只有文章才支持帘饶。
最后哑诊，我們來總結(jié)一下發(fā)布文章的流程：
第一步，hexo new <title> 生成一篇文章及刻，這里的title指文件名镀裤，不建議使用中文
第二步，編輯文章缴饭，修改title暑劝、tags等參數(shù)，這里的title指文章標(biāo)題颗搂，可以使用中文
第三步担猛，hexo s 本地預(yù)覽效果，不滿意繼續(xù)修改
第四步峭火，hexo g 生成靜態(tài)文件
第五步毁习，hexo d 將靜態(tài)文件推送至代碼庫
第四步和第五步可以合并成一條命令，hexo d -g 卖丸，表示部署之前預(yù)先生成靜態(tài)文件纺且。修改配置與發(fā)布文章的流程相似，最后都需要執(zhí)行第三四五步稍浆。
Hexo進階
添加RSS訂閱功能
RSS是在線共享內(nèi)容的一種簡易方式载碌，也叫簡易信息聚合猜嘱，全稱Really Simple Syndication。當(dāng)網(wǎng)站內(nèi)容更新時嫁艇，可以通過訂閱RSS源在RSS閱讀器上獲取更新的信息朗伶，大多數(shù)的內(nèi)容提供網(wǎng)站都會提供RSS訂閱功能，方便用戶去獲取最新的內(nèi)容步咪。
1.安裝feed插件
Hexo有一個專門生成RSS文件的插件 hexo-generator-feed 论皆，進入blog目錄，打開命令行窗口猾漫，輸入命令：
$ npm install hexo-generator-feed --save
2.啟用插件
編輯blog目錄下的_config.yml文件点晴，添加如下內(nèi)容：
# Extensions
Plugins:
- hexo-generator-feed
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
3.生成RSS
$ hexo g
如果生成了atom.xml就表示成功了：
在瀏覽器中打開 http://localhost:4000/atom.xml ，你會看到訂閱功能已開啟：
4.部署
$ hexo d
5.使用RSS訂閱功能
這里以O(shè)ffice的Outlook郵箱為例悯周，訂閱地址假設(shè)為 http://spring2go.com/atom.xml粒督，如圖：
添加站點地圖
站點地圖是一種文件，你可以通過該文件列出你網(wǎng)站上的網(wǎng)頁禽翼，從而將你網(wǎng)站內(nèi)容的組織架構(gòu)告知Google和其他搜索引擎屠橄。Googlebot等搜索引擎網(wǎng)頁抓取工具會讀取此文件，以便更加智能地抓取你的網(wǎng)站闰挡。
1.安裝sitemap插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
2.編輯blog目錄下的_config.yml文件锐墙，添加如下內(nèi)容：
Plugins:
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
3.生成站點地圖文件
$ hexo g
如果生成了sitemap.xml和baidusitemap.xml就表示成功了：
4.部署
$ hexo d
5.確認(rèn)博客是否被收錄
在百度或者谷歌輸入下面格式的內(nèi)容，如果能搜索到就說明被收錄长酗，否則未收錄贮匕，可能需要等上一段時間。
site:xxx.com
使用模板功能
現(xiàn)在我們生成的每一篇新文章都只有title花枫、date、tags三個參數(shù)掏膏，通常情況下我們還會有categories參數(shù)和一些自定義的參數(shù)（如何使用自定義參數(shù)我們后面講）劳翰，每次都要手動加上這些參數(shù)會浪費很多時間，這時候模板的作用就出來了馒疹。
打開scaffolds文件夾佳簸，你會看到里面有draft、page颖变、post三個模板生均，對應(yīng)草稿、頁面腥刹、文章马胧，我們?nèi)粘Ｊ褂米疃嗟木褪俏恼拢赃@里以文章為例衔峰，其他兩個模板請根據(jù)自己的需要進行修改佩脊。
模板的參數(shù)是可以設(shè)置默認(rèn)值的蛙粘，我們假設(shè)categories參數(shù)的默認(rèn)值為 隨筆 ，然后自定義一個參數(shù) author 威彰，默認(rèn)值為 kirito 出牧，因為每篇文章的標(biāo)簽是不確定的，所以這里不進行設(shè)置歇盼，編輯post.md文件舔痕，內(nèi)容如下：
---
title: {{ title }}
date: {{ date }}
tags:
categories: 隨筆
author: kirito
---
讓我們用模板生成一篇新文章：
$ hexo new test2
打開blog/source/_posts目錄下的test2.md文件，可以看到以下內(nèi)容：
---
title: test2
categories: 隨筆
author: kirito
date: 2018-06-27 22:02:33
tags:
---
接下來我們只需要寫好文章豹缀，設(shè)置一下tags就可以發(fā)布了伯复。
使用自定義參數(shù)
文章參數(shù)里的title、date耿眉、categories和tags都在頁面上有所展示边翼，那我們自定義的參數(shù)該如何使用和展示呢？
通過控制臺我們可以看到鸣剪，每篇文章都是一個 class="article article-type-post" 的 article 標(biāo)簽组底，結(jié)構(gòu)如下：
<article id="post-test" class="article article-type-post" itemscope="" itemprop="blogPost">
<div class="article-meta">
<a href="/2018/06/23/test/" class="article-date">...</a>
<div class="article-category">...</div>
</div>
<div class="article-inner">
<header class="article-header">...</header>
<div class="article-entry" itemprop="articleBody">...</div>
<footer class="article-footer">...</footer>
</div>
</article>
title、date筐骇、categories和tags的值分別顯示于article-header债鸡、article-date、article-category和article-footer铛纬，要使用自定義參數(shù)厌均，我們需要修改主題的源文件，打開 blog/themes/landscape/layout/_partial 目錄下的article.ejs文件告唆，可以看到代碼中的標(biāo)簽與class名都與上面一致棺弊，接下來我們讓作者的名字顯示在分類右邊，編輯article-meta模塊的代碼：
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
<div style="letter-spacing:2px;color:#999;line-height:1em;">
<%- post.author %>
</div>
</div>
這里為了方便直接將樣式寫在了div標(biāo)簽里擒悬，更好的做法是為div添加一個class模她，將樣式寫進 landscape/source/css/_partial
目錄下的article.styl文件。當(dāng)然懂牧，自定義標(biāo)簽可以用在其他地方侈净，樣式也可以根據(jù)你的喜好來定制。
讓我們打開瀏覽器來看下效果僧凤，你會發(fā)現(xiàn)文章的自定義標(biāo)簽生效了：
值得注意的是畜侦，我們剛才修改的文件是article.ejs，這是跟主題有關(guān)的躯保，換一個主題旋膳，也許文件的路徑和名字都變了，甚至格式也不再是ejs而是swig吻氧，不過修改文件的思路都是一樣的溺忧，明確自己要修改哪一個模塊咏连，然后到主題的相關(guān)目錄下，模仿源代碼的語法進行修改鲁森，最后記住祟滴，源文件里使用Tab鍵會導(dǎo)致修改的代碼無效或者報錯，請使用空格歌溉。
Hexo主題入門
首先垄懂，你需要挑選一個自己喜歡的主題，地址：https://hexo.io/themes/
打開主題示例網(wǎng)站后痛垛，你可以在頁面底部或其他地方找到主題的git倉庫地址草慧。
然后將代碼克隆到主題文件夾（themes）下，這里以NexT主題為例：
$ cd blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
這里的blog應(yīng)該替換成你的站點根目錄匙头÷龋克隆完成后會在themes文件夾下生成一個next文件夾，里面就是主題的源代碼了蹂析。
接下來啟用next主題舔示，編輯站點配置文件（themes\next目錄下的_config.yml），修改theme字段如下：
theme: next
在切換主題之后电抚、驗證之前惕稻，我們最好使用命令來清除Hexo的緩存：
$ hexo clean
然后啟動Hexo本地站點：
$ hexo s
啟動完成后打開瀏覽器，可以看到主題配置已生效蝙叛。
那么教程到這里就結(jié)束了俺祠，快來試試搭建自己的博客吧，有什么問題可以在評論區(qū)留言~
