原文地址：→看過來

交流群

有相關問題的可進群提問

  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名稱，按照這個規則建立才有用哦，如下：



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



    1. 建立SSH

      在gitbash中輸入：ssh-keygen -t rsa -C "[email protected]，生成ssh。然後按下圖的方式找到id_rsa.pub檔案的內容。

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





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

    1. 在gitbash中驗證是否新增成功：ssh -T [email protected]

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

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搭建過個人部落格的小夥伴，不過文中獲取會有一些小錯誤，歡迎大佬們指正，小花不勝感激！
  • 感覺我好囉嗦啊，可是沒辦法，我就是這麼愛打字丫
  • 小花的部落格

招搖撞騙（可自行忽略）

小花求賞→愛的辣條