如何在coding上用HEXO搭建個人部落格

一.準備工具

1.Git

• Windows：下載下傳并安裝 git.
• Mac：使用 Homebrew, MacPorts ：brew install git;或下載下傳 安裝程式 安裝。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

  • Mac 使用者

    您在編譯時可能會遇到問題，請先到 App Store 安裝 Xcode，Xcode 完成後，啟動并進入 Preferences -> Download -> Command Line Tools -> Install 安裝指令行工具。

  • Windows 使用者

    由于衆所周知的原因，從上面的連結下載下傳git for windows最好挂上一個代理，否則下載下傳速度十分緩慢。也可以參考這個頁面，收錄了存儲于百度雲的下載下傳位址。

2.Node.js

安裝 Node.js 的最佳方式是使用 nvm。

• cURL:

  $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

• Wget:

  $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

• 安裝完成後，重新開機終端并執行下列指令即可安裝 Node.js。

$ nvm install stable
           

• 或者您也可以下載下傳安裝程式 來安裝

  • Windows 使用者

    對于windows使用者來說，建議使用安裝程式進行安裝。安裝時，請勾選Add to PATH選項。

    另外，您也可以使用Git Bash，這是git for windows自帶的一組程式，提供了Linux風格的shell，在該環境下，您可以直接用上面提到的指令來安裝Node.js。打開它的方法很簡單，在任意位置單擊右鍵，選擇“Git Bash Here”即可。由于Hexo的很多操作都涉及到指令行，您可以考慮始終使用 Git Bash來進行操作。

3.Coding

Coding可以說，就是國産的Github，但是，有一個功能使它似乎超越了GitHub，那就是 Web IDE。

Coding WebIDE 是 Coding 自主研發的線上內建開發環境 (IDE)。使用者可以通過 WebIDE 建立項目的工作空間, 進行線上開發, 調試等操作。同時 WebIDE 內建了 Git 代碼版本控制, 使用者可以選擇 Coding、GitHub、BitBucket、Gi[email protected] 等任意的代碼倉庫。 WebIDE 還提供了分享開發環境的功能, 使用者可以儲存目前的開發環境, 分享給團隊的其他成員。

摘抄自 Coding WebIDE官網

二.步驟

1. 建立項目

   你需要在 Coding 上面建立一個項目，項目名稱一定要是* 使用者名.coding.me*,因為hexo隻能弄在根目錄上，這樣它内置的檔案引用目錄才能都正确。

   填寫項目名稱、描述、設定屬性、初始化檔案，最後點選“建立項目”

   

2. 接着，我們傳送到Coding WebIDE，單擊“+ 建立工作空間”。

   

3. 随後，單擊“同步倉庫”，等待同步倉庫完成。

   

   • webIDE是部分收費的，但是不用着急，官方提供了一些方式免費獲得其網站虛拟币——碼币，且Coding在注冊後會送給使用者一些碼币，足以讓IDE跑起來啦

     

4. 言歸正傳，我們建立IDE。配置不變，直接滑鼠拉到最底下，單擊“建立”，這時候，空間建立完畢，點開建立完成的工作空間。

   

5. Hexo是基于Nodejs的，是以我們将右側“運作環境”切換為Nodejs。

   

   單擊“使用”後，再單擊确定。下面，我們單擊左下方“終端”來打開終端
6. 進入正式安裝步驟，首先，我們在終端中輸入

   sudo npm install -g hexo-cli

   安裝程序，就會全自動完成。安裝結果如下圖，安裝就成功了

   

7. 接着，我們建立一個檔案夾用于存放文章與設定。

   mkdir hexo

8. 然後，使用init指令初始化部落格。

   cd hexo

   sudo hexo init

9. 初始化程序需要安裝一些輔助插件，是以比安裝的時候慢，需要耐心等待…等待初始化程序完成後，安裝程序就正式完成啦~
10. 我們首先先解鎖一下配置檔案（将所有檔案提權至777）

    sudo chmod -R 777 *

11. 接着，我們可以暫時關閉終端，編輯一下部落格的設定,依次打開檔案樹中的目錄：項目名->hexo->_config.yml 這時，我們就可以在編輯視窗中編輯屬性：

    title為标題，subtitle小标題【可不填】，author作者，language語言【可不填】，timezone時區【可不填】。

    我做了如下修改:

    # Site title: SUMMER subtitle: summer`s blog description: welcome to my blog author: summer language: timezone:

    修改完成之後别忘了儲存。CTRL+S儲存
12. 接着我們可以使用以下指令來開啟本地伺服器：

    hexo server

13. 然後，我們就可以通過單擊右上角的通路連結，将端口設定為4000來通路網站。

    

14. 測試成功了，那麼我們先在終端中按Ctrl+C退出，然後按下通路連結中的垃圾桶來銷毀端口。那麼大家剛才也看到了，IDE中的通路連結是測試用途，而且有時間限制，一看就非常不嚴謹，是以，我們要學會把部落格Push到托管平台中。那麼首先，我們要安裝Hexo Git插件才可以将靜态頁推送到托管平台上。

    sudo npm install hexo-deployer-git --save

15. 安裝完成之後，我們配置一下_config.yml檔案。修改一下最下面的deploy：

    deploy:
    type: git  
    repo: [倉庫位址]
    branch: master
    message: blog update
               

    注：倉庫位址可以在您的項目首頁找到。

    

    我填入了repo：

    deploy:
    
    #我們是使用 git 來部署的。
    
    type: git
    
    # git倉庫的位址。
    
    repo: https://summerwait:[email protected].coding.net/summerwait/summerwait.coding.me.git
    
    # 分支名稱。
    
    branch: master
    message: blog update
               

16. 随後，我們就可以将部落格推送到代碼托管平台了，在終端中使用這個指令：

    sudo hexo deploy

    和往常的推送操作一樣，終端會要求使用者輸入使用者名與密碼。

    

    推送成功

17. 下面，我們開啟靜态頁服務（Pages）。

    隻需要單擊頁面上的“Pages服務”，設定部署來源為master分支，然後單擊“儲存”，就可以通路啦！ 現在去通路試試吧。這裡是我的位址，歡迎來訪~

參考資料：

1.Hexo文檔

2.使用Coding.net來搭建基于Hexo的免費部落格（一）