本篇為從零開始的基礎(chǔ)篇兼贸，其他SEO、評論系統(tǒng)寞奸、統(tǒng)計(jì)等請看Hexo博客添加SEO-評論系統(tǒng)-閱讀統(tǒng)計(jì)-站長統(tǒng)計(jì)，本篇所包含的內(nèi)容如下：
- 安裝Git Bash
- 安裝NodeJs
- 安裝hexo
- 生成SSH并添加到github
- 部署項(xiàng)目
- 上傳到github
- 綁定個(gè)人域名
- 修改及配置主題
- 添加RSS
- 添加評論
- 寫文章部分
耍起來
由于小花的電腦在搭建博客之前就有了各種環(huán)境在跳，但是對于沒有任何基礎(chǔ)的人來講枪萄，我覺得還是從源頭開始講會好一點(diǎn)，就像教別人做菜猫妙，總得把所有的用料及步驟說清楚對吧瓷翻？（大佬們可以自動忽略啊啊啊啊~）
1. 安裝Git Bash
我一直不太喜歡在cmd中操作各種命令，所以挑了這個(gè)比較好使的Git Bash, 我的是windows環(huán)境，所以下載windows版本并安裝就可以了齐帚。
安裝步驟：雙擊下載好的exe文件妒牙，一路next就好啦
-
安裝好后，打開gitbash对妄，查看版本：
- 命令：
git version(寫這篇博客的時(shí)候最新版本：2.12.2)git version
- 命令：
然后你就可以在這里發(fā)揮你的聰明才智了
2. 安裝NodeJs
Hexo是基于nodeJS環(huán)境的靜態(tài)博客湘今，里面的npm工具很有用啊，所以還是老老實(shí)實(shí)把這玩意兒裝了吧
下載地址(說明：LTS為長期支持版摩瞎，Current為當(dāng)前最新版)
安裝步驟：反正下載好msi文件后，雙擊打開安裝旗们，也是一路next，不過在Custom Setup這一步記得選
Add to PATH,這樣你就不用自己去配置電腦上環(huán)境變量了上渴，裝完在按win + r快捷鍵調(diào)出運(yùn)行，然后輸入cmd確定喜颁，在cmd中輸入path可以看到你的node是否配置在里面（環(huán)境變量）驰贷，沒有的話你就自由發(fā)揮吧。-
查看版本：
- 命令：
node -vnode-version
- 命令：
又到自由發(fā)揮的時(shí)候了
3. 安裝hexo
看到這么多安裝洛巢，千萬不要緊張，小哥哥小姐姐們一定要穩(wěn)住稿茉，別怕，因?yàn)楹竺娴臇|西都是在gitbash中用npm工具安裝就好了漓库。
先創(chuàng)建一個(gè)文件夾（用來存放所有blog的東西）恃慧，然后
cd到該文件夾下。安裝hexo命令：npm i -g hexo
-
安裝完成后渺蒿，查看版本：
npm-v -
初始化命令：
hexo init痢士，初始化完成之后打開所在的文件夾可以看到以下文件：myblog -
解釋一下：
- node_modules：是依賴包
- public：存放的是生成的頁面
- scaffolds：命令生成文章等的模板
- source：用命令創(chuàng)建的各種文章
- themes：主題
- _config.yml：整個(gè)博客的配置
- db.json：source解析所得到的
- package.json：項(xiàng)目所需模塊項(xiàng)目的配置信息
做好這些前置工作之后接下來的就是各種配配配置了茂装。
4. 搭橋到github
-
沒賬號的創(chuàng)建賬號，有賬號的看下面少态。
- 創(chuàng)建一個(gè)repo，名稱為
yourname.github.io, 其中yourname是你的github名稱彼妻，按照這個(gè)規(guī)則創(chuàng)建才有用哦豆茫，如下：
new-repocreate-repo- 回到gitbash中屋摇，配置github賬戶信息（YourName和YourEail都替換成你自己的）：
usernameemail- 創(chuàng)建SSH
在gitbash中輸入：ssh-keygen -t rsa -C "youremail@example.com，生成ssh炮温。然后按下圖的方式找到id_rsa.pub文件的內(nèi)容。
ssh-key- 將上面獲取的ssh放到github中：
settingsssh-key添加一個(gè)
New SSH key忘分，title隨便取，key就填剛剛那一段妒峦。在gitbash中驗(yàn)證是否添加成功：
ssh -T git@github.com完成下一步你就成功啦！
- 創(chuàng)建一個(gè)repo，名稱為
5. 一步之遙
- 用編輯器打開你的blog項(xiàng)目肯骇，修改
_config.yml文件的一些配置(冒號之后都是有一個(gè)半角空格的)：
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
-
回到gitbash中祖很，進(jìn)入你的blog目錄笛丙，分別執(zhí)行以下命令：
hexo clean hexo generate hexo server注：hexo 3.0把服務(wù)器獨(dú)立成個(gè)別模塊假颇，需要單獨(dú)安裝：
npm i hexo-server。 打開瀏覽器輸入：
http://localhost:4000接著你就可以遇見天使的微笑了~
6. 上傳到github
先安裝一波：
npm install hexo-deployer-git --save（這樣才能將你寫好的文章部署到github服務(wù)器上并讓別人瀏覽到）-
執(zhí)行命令(建議每次都按照如下步驟部署)：
hexo clean hexo generate hexo deploy注意deploy的過程中要輸入你的username及passward笨鸡。如下：
- 在瀏覽器中輸入
http://yourgithubname.github.io就可以看到你的個(gè)人博客啦，是不是很興奮哥桥！ - 感覺gitbash中東西太多的時(shí)候輸入
clear命令清空。
7. 綁定個(gè)人域名
不想綁定的自行忽略
第一步購買域名：隨便在哪個(gè)網(wǎng)站買一個(gè)就好了激涤，小花是在阿里云購買的visugar.com, DNS也是順道在那買的。
第二步添加CNAME：在項(xiàng)目的source文件夾下新建一個(gè)名為CNAME的文件倦踢，在里面添加你購買的域名，比如我添加的是
visugar.com硼一，只能添加一個(gè)哦。-
到DNS中添加一條記錄：
dns-note其中ip地址為你的github的地址，可在cmd中ping一下就能看到(
ping yourname.github.io)：
[圖片上傳失敗...(image-3c4cc9-1517641588754)] 接著再次部署一下，用你購買的域名打開哼蛆，就可以看到你的博客啦~
8. 修改及配置主題
- hexo初始化之后默認(rèn)的主題是
landscape, 然后你可以去這個(gè)地址里面找到你想要的主題。在github中搜索你要的主題名稱腮介，里面都會有該主題的如何使用的介紹屏歹，按著來就好了赠叼，反正就是改改改男娄！我選的是hueman,看起來挺不錯(cuò)十艾，至少是我喜歡的類型腾节。
- 跟該主題相關(guān)的配置在
themes/hueman/_config.yml里面,然后根據(jù)你的需要在這配配配就行了。
有的東西我也不知道是啥玩意兒案腺，你要多試多倒騰幾次，就能意會啦
-
下面是針對我所選的主題的兩小點(diǎn)(別的主題我沒看劈榨，可能也是類似):
在導(dǎo)航欄添加點(diǎn)東西
例如我添加了一個(gè)更新日志的模塊。
在主題的配置文件中同辣，menu添加一欄：
Board: /board。然后在source中添加一個(gè)board邑闺，即對應(yīng)上面的名字。然后再創(chuàng)建一個(gè)index.md陡舅，里面可以寫你想寫的內(nèi)容。
在主題的
hueman/langulages/zh-CN.yml中的index適當(dāng)?shù)奈恢眉樱?code>board: '更新日志'灾炭，位置和名字是你自己設(shè)定。重新部署蜈出，然后就OK了在側(cè)邊欄添加點(diǎn)東西
回到你的主題的配置文件中，找到
widgets一欄铡原，在你要添加的位置處添加一條你自定義的名稱。例如我的叫communiation且放在了第二行燕刻。在上面所提到的
zh-CN.yml文件中找到sidebar一欄，添加communiation: '你要設(shè)的名稱'卵洗。-
在
hueman/layout/widget中添加一個(gè)communiation.ejs,填入模板<% if (site.posts.length) { %> <div class="widget-wrap widget-list"> <h3 class="widget-title"><%= __('sidebar.communiation') %></h3> <div class="widget"> <!--這里添加你要寫的內(nèi)容--> </div> </div> <% } %>
9. 添加RSS
先安裝rss相關(guān)插件：
npm i hexo-generator-feed-
在你的項(xiàng)目的
_config.yml配置文件下找到Extensions添加如下內(nèi)容：# Extensions #插件和主題 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ #RSS訂閱 plugin: - hexo-generator-feed #Feed Atom feed: type: atom path: atom.xml limit: 20 進(jìn)入到你的主題的配置文件下，找到你的放rss的位置过蹂，添加
/atom.xml即可。重新部署再打開就能看到效果啦~
10. 添加評論
20170812更新：
云更貼已在2017年8月1日停止服務(wù)酷勺，具體評論系統(tǒng)文章統(tǒng)計(jì)站長統(tǒng)計(jì)及百度SEO谷歌SEO什么的可參考Hexo博客添加SEO-評論系統(tǒng)-閱讀統(tǒng)計(jì)-站長統(tǒng)計(jì)
此段已失效。
- 先選一個(gè)你要使用的第三方評論系統(tǒng)勋功，最好找個(gè)靠譜點(diǎn)的（我使用的是網(wǎng)易云跟帖）。
- 在主題的配置文件下找到comment狂鞋，添加一行，例如我添加的是
yungentie: 此處自由發(fā)揮 - 注冊完評論系統(tǒng)后獲取相應(yīng)的代碼骚揍，然后在主題的layout下找到comment新建一個(gè)ejs模板文件啰挪，名稱自定義信不。
- 找到你的article.ejs模板文件亡呵，加上
<%- partial('comment/你剛剛?cè)〉妹?) %>保存。 - 重新部署锰什，OK啦
11. 寫文章部分
- 新建文章：
hexo new '文章名'，然后你就可以在source/_posts路徑下看到你創(chuàng)建的文章啦汁胆，編輯完成之后按照前面說的方式部署，在瀏覽器刷新就能看到你的文章了嫩码。 - 關(guān)于具體的文章編輯你可以看下官網(wǎng)的介紹
- 至于markdown，可以自行發(fā)揮啦~
