Hexo是一個快速、簡潔且高效的博客框架，特別適合于部署靜態(tài)的博客網(wǎng)站，更多介紹請移步官方文檔竿秆。本文主要記錄下筆者在Mac上實(shí)際的部署流程，包含期間遇到的坑與一些基本用法的介紹稿壁。
環(huán)境配置
安裝Hexo前需要先安裝Git和Node.js
1. Git
在Mac上安裝Git最方便的方式是使用Homebrew幽钢，它是Mac上的一種包管理工具，能方便地安裝和卸載軟件傅是。
$ brew install git
安裝結(jié)束后在命令行輸入git后運(yùn)行匪燕，如果屏幕上出現(xiàn)git命令的使用幫助，說明安裝成功喧笔。
在后文中可以看到帽驯，筆者借助github的網(wǎng)站作為個人博客網(wǎng)站的代理服務(wù)器。在進(jìn)行博客網(wǎng)站部署時书闸，會頻繁涉及到本地與github網(wǎng)站的通信尼变，為了免去每次通信時都要輸入用戶名和密碼的煩惱，我們可以將本地的一組ssh-key傳到github網(wǎng)站上浆劲，作為通信的憑據(jù)享甸。
SSH是一種網(wǎng)絡(luò)協(xié)議，全稱Secure Shell梳侨，主要用于計(jì)算機(jī)之間的加密傳輸。以下介紹相應(yīng)配置日丹。
首先檢查本地是否已存在ssh-keys
$ ls -a ~/.ssh/
以上命令列出當(dāng)前用戶主目錄下的.ssh目錄中的所有文件走哺，如果存在id_rsa和id_rsa.pub則跳過下一步，否則需要手動生成一組ssh-key
執(zhí)行以下命令生成一組公/私鑰哲虾，其中your_email@example.com需要替換成你自己的郵箱地址丙躏。
$ ssh-keygen -t rsa -C "your_email@example.com"
生成的文件默認(rèn)會放在之前提到的.ssh目錄中，我們需要獲得公鑰的值束凑，在命令行輸入
$ cat ~/.ssh/id_rsa.pub
該命令將公鑰文件中的值晒旅，也就是一個很長的字符串輸出到命令行中，復(fù)制該值備用汪诉。
接著登錄github網(wǎng)站废恋，單擊右上角的頭像谈秫，依次點(diǎn)擊Settings -> SSH and GPG keys -> New SSH key 之后，會出現(xiàn)個文本框鱼鼓，在Title那一欄填寫一些用于標(biāo)識當(dāng)前機(jī)器的信息拟烫，然后將前面復(fù)制的公鑰值粘貼到Key那一欄，點(diǎn)擊Add SSH key迄本，即完成了添加操作硕淑，今后可以使用ssh地址直接從你的github倉庫clone項(xiàng)目到本地，也可以將本地的修改直接push到github上嘉赎，非常方便置媳。
2. Node.js
Node是javascript的一種運(yùn)行時環(huán)境，也是近年來非常流行的一門技術(shù)公条。安裝Node.js的最佳方式是使用nvm拇囊。在命令行輸入
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
這條命令通過curl下載install.sh腳本，并執(zhí)行腳本赃份。待執(zhí)行完成后寂拆，它會把nvm命令的執(zhí)行路徑放到~/.bashrc文件里，我們可以用cat命令來查看一下
$ cat ~/.bashrc
export NVM_DIR="/Users/gao-yimei/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
確認(rèn)存在以上配置后抓韩，通過執(zhí)行source命令來使得環(huán)境變量生效
$ source ~/.bashrc
至此我們就把nvm安裝好了纠永，可以通過以下命令查看nvm版本號
$ nvm --version
0.29.0
如果能正確打印出版本信息就證明nvm已經(jīng)安裝成功。接著通過執(zhí)行以下命令來安裝Node.js
$ nvm install stable
如果安裝期間遇到權(quán)限問題谒拴，可以改用sudo的方式重新運(yùn)行尝江。
安裝完成后，在命令行鍵入
$ node -v
v7.1.0
如果能夠正確打印出版本信息英上，則說明安裝成功炭序。
安裝Hexo
完成準(zhǔn)備工作后，可以正式開始安裝Hexo苍日。在命令行輸入
$ sudo npm install -g hexo-cli
npm是Node.js自帶的一個包管理工具惭聂，用于安裝和卸載Node模塊。上面的命令將Hexo這個模塊以全局的方式安裝到我們的電腦中相恃，是Hexo官方推薦的方式辜纲。但筆者在運(yùn)行這條命令時，出現(xiàn)了如下的錯誤
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/hexo-cli'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/hexo-cli']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/hexo-cli',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/hexo-cli',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53',
npm ERR! 'FSReqWrap.oncomplete (fs.js:82:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
明明是以sudo方式運(yùn)行的啊拦耐，為什么會出現(xiàn)權(quán)限錯誤呢耕腾？筆者一頭霧水，最后還是在某度上找到了一個解決方案杀糯。執(zhí)行以下代碼
$ sudo npm install --unsafe-perm --verbose -g hexo
大意就是忽略一些安全方面的警告扫俺，強(qiáng)制安裝。最終成功安裝上了固翰。
使用Hexo
基本用法
Hexo默認(rèn)已經(jīng)配置好了基本的選項(xiàng)狼纬，通過以下幾步簡單的操作就可以獲得一個示例的博客網(wǎng)站羹呵。
終端切換到一個你準(zhǔn)備用來搭建博客的目錄，然后執(zhí)行命令
$ hexo init myblog
其中myblog將會作為博客網(wǎng)站的本地主目錄畸颅，該命令對文件夾進(jìn)行了初始化担巩，生成了一些建設(shè)網(wǎng)站所必須的材料。切換到myblog文件夾下没炒，執(zhí)行以下命令
$ npm install
前面提到過涛癌，npm install是用來安裝Node.js模塊的，當(dāng)這個命令不帶參數(shù)時送火，它將會讀取當(dāng)前目錄(也就是myblog目錄)下的package.json文件拳话，并按照里面的描述來安裝，所有的模塊都會存在當(dāng)前目錄下一個名為node_modules的文件夾下种吸。
等待安裝完成后弃衍，仍在當(dāng)前目錄下，執(zhí)行以下命令坚俗，開啟Hexo服務(wù)器
$ hexo start
若一切正常镜盯，則命令行會打印出如下的提示信息
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
該信息表示Hexo服務(wù)器已經(jīng)在本地的4000端口運(yùn)行了。打開任意瀏覽器猖败，在地址欄輸入localhost:4000后回車速缆，即可看到默認(rèn)的歡迎頁面。
修改配置
默認(rèn)頁面上信息都是關(guān)于Hexo的恩闻，我們要將其改為自己的信息艺糜。在myblog目錄下，使用ls命令查看該目錄下的所有文件
$ ls
_config.yml node_modules package.json scaffolds themes db.json package-lock.json public source yarn.lock
其中_config.yml保存了與網(wǎng)站相關(guān)的基本配置幢尚。使用vim打開破停，可以看到如下信息
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 你的博客名稱
subtitle:
description: 你的博客介紹或者座右銘
author: 你的昵稱
language: zh-Hans
timezone:
...
最開始的部分就是關(guān)于網(wǎng)站的標(biāo)題、作者和簡介等信息尉剩，這里可以根據(jù)個人的情況填寫真慢，其中language那一欄填寫zh-Hans表示網(wǎng)站采用簡體中文。填寫時注意各個字段的冒號后必須要空一格再填具體內(nèi)容理茎，填寫完畢后保存即可。
接著我們來看一下Hexo中一項(xiàng)很實(shí)用也很強(qiáng)大的工具功蜓，那就是主題。大家之所以喜歡寫個人博客宠蚂，一個很重要的原因就是它的自由性式撼，我們可以往博客上添加任何個人喜歡的元素，也可以根據(jù)自己的喜好來定制網(wǎng)站的背景求厕、樣式著隆、配色等扰楼。Hexo為我們修改網(wǎng)站的風(fēng)格提供了一種非常便捷的方法，只需要簡單的幾步美浦，就可以將我們的網(wǎng)站修改成一種指定的風(fēng)格弦赖，我們還可以自己定制喜歡的模板。下面以Hexo官網(wǎng)上提供的NexT主題為例浦辨，介紹下如何為我們的博客更換不同的主題蹬竖。
在myblog目錄下執(zhí)行以下命令
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
Hexo中的主題實(shí)際上都是由不同的網(wǎng)友貢獻(xiàn)的，以上命令將該主題所對應(yīng)的github上的項(xiàng)目克隆到myblog目錄的themes目錄下流酬。
接著打開myblog目錄下的_config.yml文件币厕，找到theme配置項(xiàng)，將對應(yīng)的值改成next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
保存后退出芽腾。仍在myblog目錄下旦装，依次執(zhí)行以下指令
$ hexo clean
$ hexo generate
兩條命令分別是清除緩存文件以及重新生成靜態(tài)文件。重新啟動Hexo服務(wù)摊滔，即可看到next主題風(fēng)格的博客頁面阴绢。
更多設(shè)置
添加個人頭像
有了主題之后，我們可以在網(wǎng)站中設(shè)置側(cè)邊欄個人頭像艰躺。在myblog目錄下呻袭，打開themes/next/_config.yml文件，找到avatar配置項(xiàng)描滔，將值設(shè)為頭像的地址棒妨。該地址可以是一個完整的圖片鏈接，也可以是一個站點(diǎn)內(nèi)的相對路徑含长。如果使用前者券腔，為了保證圖片鏈接的有效性，可以先將圖片上傳到github上再使用對應(yīng)鏈接拘泞，而對于后者纷纫，則需要先將圖片放到themes/next/source/images目錄下，再使用相對路徑引用陪腌。以下配置是一個采用相對路徑的示例
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/coolboy.jpg
添加標(biāo)簽
Hexo默認(rèn)只開啟了兩個標(biāo)簽：首頁和歸檔辱魁，我們可以添加一些常用的其他標(biāo)簽，比如標(biāo)簽诗鸭、分類和關(guān)于染簇。先打開/themes/next/_config.yml文件，找到menu配置項(xiàng)强岸，如下所示
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# Enable/Disable menu icons.
menu_icons:
enable: true
home: home
about: user
categories: th
tags: tags
archives: archive
可以看到默認(rèn)情況下只有home和archives前面沒有#號锻弓，其他項(xiàng)都沒注釋掉了，因此我們要先把準(zhǔn)備開啟的標(biāo)簽前的#號給去掉蝌箍，并且在下方menu_icons配置相應(yīng)的值青灼，這里配置的icon也就是網(wǎng)頁上展現(xiàn)的對應(yīng)的圖標(biāo)暴心，實(shí)際上是由Font Awesomo網(wǎng)站提供的，涵蓋了眾多常用的網(wǎng)站圖標(biāo)杂拨。配好之后保存退出专普。
然后我們來創(chuàng)建需要的頁面。首先是about頁面弹沽，在myblog目錄下運(yùn)行命令
$ hexo new page "about"
這條命令會在source目錄下新建一個名為about的文件夾檀夹，并生成一個index.md文件，使用任意的markdown編輯器打開后編輯贷币，可以寫上個人的介紹以及一些自己想說的話击胜，完成后保存退出，這樣一來about頁面就做好了役纹。
接下來是categories頁面偶摔，同理，先在命令行運(yùn)行
$ hexo new page categories
然后編輯剛剛創(chuàng)建的index.md文檔促脉，將頁面類型設(shè)置為categories即可辰斋，Hexo會自動將帶有不同類別標(biāo)簽的文章進(jìn)行分類歸檔展示
---
title: Categories
date: 2017-10-27 17:27:06
type: "categories"
comments: false
---
這里還有個comments字段被設(shè)置為false，這是因?yàn)?strong>Hexo的博客可以外接一些第三方的評論系統(tǒng)瘸味，默認(rèn)在所有頁面都會顯示宫仗，而我們一般只希望評論顯示在文章主頁面的下方，因此此處將評論給關(guān)閉旁仿。
最后是tags頁面藕夫，同理先在命令行創(chuàng)建頁面，然后編輯頁面枯冈，將頁面的類型設(shè)置為tags即可毅贮，Hexo的主題系統(tǒng)會自動地在這個頁面中顯示標(biāo)簽云
$ hexo new page "tags"
添加Read More按鈕
默認(rèn)情況下我們的文章會在主頁以全部展開的形式呈現(xiàn)，但我們通常希望在主頁上每篇文章只顯示一部分尘奏，這樣既顯得簡潔滩褥，又可能讓讀者看到更多的文章，便于讀者的判斷炫加。想要做到這一點(diǎn)很簡單瑰煎，只要在文章對應(yīng)的markdown文檔中，按照下圖所示插入一句特殊的代碼到我們想要進(jìn)行截?cái)嗟娜我馕恢眉纯?/p>
More info: [Server](https://hexo.io/docs/server.html)
<!--more-->
### Generate static files
這樣首頁上的文章只會顯示之前的部分俗孝，然后會有一個閱讀全文的按鈕酒甸，點(diǎn)擊之后再進(jìn)入文章的主頁面，看起來非常舒服赋铝，也很合理插勤。
經(jīng)過上面的這些設(shè)置后，我們就能得到一個看起來不錯的博客網(wǎng)站了，可以運(yùn)行Hexo服務(wù)饮六，在瀏覽器上實(shí)時查看我們的網(wǎng)站，現(xiàn)在的情況就像這樣
通過github發(fā)布
現(xiàn)在我們已在把網(wǎng)站在本地搭起來了苛蒲，為了讓別人能通過互聯(lián)網(wǎng)訪問我們的網(wǎng)站卤橄，還需要將其發(fā)布到網(wǎng)絡(luò)上，這里我們以發(fā)布到github上為例臂外。
首先窟扑，我們要在github上新建一個Repository，名稱固定為
yourNickName.github.io
其中yourNickName指的是你的github賬戶昵稱漏健，注意必須按照這個規(guī)則來命名嚎货。然后我們編輯myblog/_config.yml文件，在文件的最后幾行找到deploy設(shè)置項(xiàng)蔫浆，按照下面的方式進(jìn)行修改
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:coolBoyGym/coolboygym.github.io.git
branch: master
其中的repository字段需改成你自己的giuhub項(xiàng)目對應(yīng)的地址殖属。
修改完成后，在blog目錄下依次運(yùn)行以下命令
$ hexo generate
$ hexo deploy
Hexo會先在本地生成靜態(tài)的網(wǎng)頁文件瓦盛，然后將所有文件推送到github上對應(yīng)的項(xiàng)目中洗显。一切正常的話，我們就可以通過下面的網(wǎng)址訪問個人博客原环，應(yīng)該能看到和本地一樣的效果
https://yourNickName.github.io
到此挠唆，我們就算是真的搭建好一個簡單的博客網(wǎng)站了，趕快請你的小伙伴們來看看吧~
新建文章
當(dāng)我們想要寫一篇新博客時嘱吗，先執(zhí)行以下命令
$ hexo new "My-New-Post"
其中My-New-Post是你想新建的博文的名字玄组，這條指令會在myblog/source/_posts文件夾下新建一個名為My-New-Post.md的文件，我們可以使用任意的markdown編輯器來打開它進(jìn)行編寫谒麦，完成之后俄讹，我們可以先在本地查看下效果，確認(rèn)無誤后弄匕，同樣通過之前的兩條命令來將這篇新的博文發(fā)布到github上
$ hexo generate
$ hexo deploy
關(guān)于markdown編輯器颅悉，筆者使用的是Cmd Markdown，界面比較簡潔迁匠，可預(yù)覽剩瓶，功能也較全，值得推薦~
以上就是本文的全部內(nèi)容城丧，涉及到了Hexo的一些基本操作延曙，當(dāng)然它的強(qiáng)大還遠(yuǎn)不止于此，通過集成各種第三方的服務(wù)亡哄，可以讓我們的網(wǎng)站變得更加有趣枝缔，這個就有待讀者們自己探究了，有什么好玩的第三方工具歡迎告訴我。
