hexo從零開始到搭建完整

1. 安裝Git Bash
2. 安裝NodeJs
3. 安裝hexo
4. 本地運行
5. 修改及配置主題
6. 寫文章部分

1. 安裝Git Bash

我一直不太喜歡在cmd中操做各類命令，因此挑了這個比較好使的Git Bash, 個人是windows環境，因此下載windows版本並安裝就能夠了。

• 下載地址
• 安裝步驟：雙擊下載好的exe文件，一路next就好啦
• 安裝好後，打開gitbash，查看版本：
  • 命令：git version (寫這篇博客的時候最新版本：2.12.2)
• 而後你就能夠在這裏發揮你的聰明才智了

2. 安裝NodeJs

Hexo是基於nodeJS環境的靜態博客，裏面的npm工具頗有用啊，因此仍是老老實實把這玩意兒裝了吧

• 下載地址(說明：LTS爲長期支持版，Current爲當前最新版)
• 安裝步驟：反正下載好msi文件後，雙擊打開安裝，也是一路next，不過在Custom Setup這一步記得選 Add to PATH ,這樣你就不用本身去配置電腦上環境變量了，裝完在按 win + r 快捷鍵調出運行，而後輸入cmd肯定，在cmd中輸入path能夠看到你的node是否配置在裏面（環境變量），沒有的話你就自由發揮吧。
• 查看版本：
  • 命令：node -v
• 又到自由發揮的時候了

3. 安裝hexo

看到這麼多安裝，千萬沒關係張，小哥哥小姐姐們必定要穩住，別怕，由於後面的東西都是在gitbash中用npm工具安裝就行了。

• 先建立一個文件夾（用來存放全部blog的東西），而後cd到該文件夾下。
• 安裝hexo命令：npm i -g hexo

• 安裝完成後，查看版本：

• 初始化命令：hexo init ，初始化完成以後打開所在的文件夾能夠看到如下文件：

• 解釋一下：
  • node_modules：是依賴包
  • public：存放的是生成的頁面
  • scaffolds：命令生成文章等的模板
  • source：用命令建立的各類文章
  • themes：主題
  • _config.yml：整個博客的配置
  • db.json：source解析所獲得的
  • package.json：項目所需模塊項目的配置信息

• 作好這些前置工做以後接下來的就是各類配配配置了。

4. 本地運行

• 回到gitbash中，進入你的blog目錄，分別執行如下命令：

hexo clean
hexo generate hexo server

注：hexo 3.0把服務器獨立成個別模塊，須要單獨安裝：npm i hexo-server。

• 打開瀏覽器輸入：http://localhost:4000

• 接着你就能夠看到你的博客啦~

5. 修改及配置主題

• hexo初始化以後默認的主題是landscape , 而後你能夠去這個地址裏面找到你想要的主題。在github中搜索你要的主題名稱，裏面都會有該主題的如何使用的介紹，按着來就行了，反正就是改改改！我選的是hueman,看起來挺不錯，至少是我喜歡的類型。

• 跟該主題相關的配置在themes/hueman/_config.yml裏面,而後根據你的須要在這配配配就好了。

• 有的東西我也不知道是啥玩意兒，你要多試多倒騰幾回，就能意會啦

• 下面是針對我所選的主題的兩小點(別的主題我沒看，可能也是相似):

  在導航欄添加點東西
  • 例如我添加了一個更新日誌的模塊。
  • 在主題的配置文件中，menu添加一欄：Board: /board。
  • 而後在source中添加一個board，即對應上面的名字。而後再建立一個index.md，裏面能夠寫你想寫的內容。
  • 在主題的hueman/langulages/zh-CN.yml中的index適當的位置加：board: '更新日誌'，位置和名字是你本身設定。
  • 從新部署，而後就OK了
  在側邊欄添加點東西
  • 回到你的主題的配置文件中，找到widgets一欄，在你要添加的位置處添加一條你自定義的名稱。例如個人叫communiation且放在了第二行。
  • 在上面所提到的zh-CN.yml文件中找到sidebar一欄，添加communiation: '你要設的名稱'。
  • 在hueman/layout/widget中添加一個communiation.ejs,填入模板

   <% if (site.posts.length) { %> <div class="widget-wrap widget-list"> <h3 class="widget-title"><%= __('sidebar.communiation') %></h3> <div class="widget"> <!--這裏添加你要寫的內容--> </div> </div> <% } %>

6. 寫文章部分

• 新建文章：hexo new '文章名'，而後你就能夠在source/_posts路徑下看到你建立的文章啦，編輯完成以後按照前面說的方式部署，在瀏覽器刷新就能看到你的文章了。
• 關於具體的文章編輯你能夠看下官網的介紹
• 至於markdown，能夠自行發揮啦~