hexo從零開始到搭建完整

原文地址：→看過來

交流群

有相關問題的可進群提問

1. Hexo交流群1：111868326（已滿）
2. Hexo交流群2：834751420（已滿）
3. Hexo交流群3：891467567（其他的前端問題也可以交流）

前言

其實平時自己寫的文章並不多，偶爾看到一些東西會做點筆記，但是每次寫的東西都會到處放 ，不好找，所以才想着自己搭建一個人博客網站，現在大家用hexo比較多，也比較方便，並且能使用的主題也很多，所以小花就用她啦~

本篇為從零開始的基礎篇，其他SEO、評論系統、統計等請看Hexo博客添加SEO-評論系統-閱讀統計-站長統計，本篇所包含的內容如下：

1. 安裝Git Bash
2. 安裝NodeJs
3. 安裝hexo
4. 生成SSH並添加到github
5. 部署項目
6. 上傳到github
7. 綁定個人域名
8. 修改及配置主題
9. 添加RSS
10. 添加評論
11. 寫文章部分

耍起來

由於小花的電腦在搭建博客之前就有了各種環境，但是對於沒有任何基礎的人來講，我覺得還是從源頭開始講會好一點，就像教別人做菜，總得把所有的用料及步驟說清楚對吧？（大佬們可以自動忽略啊啊啊啊~）

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. 搭橋到github

• 沒賬號的創建賬號，有賬號的看下面。

  1. 創建一個repo，名稱為yourname.github.io, 其中yourname是你的github名稱，按照這個規則創建才有用哦，如下：

  
  

  2. 回到gitbash中，配置github賬戶信息（YourName和YourEail都替換成你自己的）：

  
  

  3. 創建SSH
     在gitbash中輸入：ssh-keygen -t rsa -C "[e-mail]，生成ssh。然后按下圖的方式找到id_rsa.pub文件的內容。

  

  4. 將上面獲取的ssh放到github中：

  
  
  添加一個 New SSH key ，title隨便取，key就填剛剛那一段。

  5. 在gitbash中驗證是否添加成功：ssh -T [e-mail]

  6. 完成下一步你就成功啦！

5. 一步之遙

• 用編輯器打開你的blog項目，修改_config.yml文件的一些配置(冒號之后都是有一個半角空格的)：

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

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

hexo clean
hexo generate
hexo server

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

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

• 接着你就可以遇見天使的微笑了~

6. 上傳到github

• 先安裝一波：npm install hexo-deployer-git --save（這樣才能將你寫好的文章部署到github服務器上並讓別人瀏覽到）
• 執行命令(建議每次都按照如下步驟部署)：

hexo clean
hexo generate
hexo deploy

注意deploy的過程中要輸入你的username及passward。如下：

• 在瀏覽器中輸入http://yourgithubname.github.io就可以看到你的個人博客啦，是不是很興奮！
• 感覺gitbash中東西太多的時候輸入clear命令清空。

7. 綁定個人域名

• 不想綁定的自行忽略
• 第一步購買域名：隨便在哪個網站買一個就好了，小花是在阿里雲購買的visugar.com, DNS也是順道在那買的。
• 第二步添加CNAME：在項目的source文件夾下新建一個名為CNAME的文件，在里面添加你購買的域名，比如我添加的是visugar.com，只能添加一個哦。
• 到DNS中添加一條記錄：
  
  其中ip地址為你的github的地址，可在cmd中ping一下就能看到(ping yourname.github.io)：
  
• 接着再次部署一下，用你購買的域名打開，就可以看到你的博客啦~

8. 修改及配置主題

• 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>
  <% } %>
  

9. 添加RSS

• 先安裝rss相關插件：npm i hexo-generator-feed
• 在你的項目的_config.yml配置文件下找到Extensions添加如下內容：

  # 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
  

• 進入到你的主題的配置文件下，找到你的放rss的位置，添加/atom.xml即可。
• 重新部署再打開就能看到效果啦~

10. 添加評論

20170812更新：
雲更貼已在2017年8月1日停止服務，具體評論系統文章統計站長統計及百度SEO谷歌SEO什么的可參考Hexo博客添加SEO-評論系統-閱讀統計-站長統計

此段已失效。

• 先選一個你要使用的第三方評論系統，最好找個靠譜點的（我使用的是網易雲跟帖）。
• 在主題的配置文件下找到comment，添加一行，例如我添加的是yungentie: 此處自由發揮
• 注冊完評論系統后獲取相應的代碼，然后在主題的layout下找到comment新建一個ejs模板文件，名稱自定義。

• 找到你的article.ejs模板文件，加上<%- partial('comment/你剛剛取得名字') %>保存。
• 重新部署，OK啦

11. 寫文章部分

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

小結一波

• 在哪里跌倒，就在哪里趴下，休息一會兒你會發現新大陸的哦~
• 本文針對的是從來沒用hexo搭建過個人博客的小伙伴，不過文中獲取會有一些小錯誤，歡迎大佬們指正，小花不勝感激！
• 感覺我好啰嗦啊，可是沒辦法，我就是這么愛打字丫
• 小花的博客

---

招搖撞騙（可自行忽略）

小花求賞→愛的辣條