使用 WebIDE 搭建 Hexo 個人博客

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

現在起，不需要折騰 Hexo 環境，不需要解決不同平台上的各種衝突，直接在 Coding WebIDE 即可開始揮筆！

Hexo 的『寫作』和『部署』是分開的，前者對應原來的本地電腦工作區，後者對應靜態 Pages 倉庫。

建站

首先，我們需要新開一個項目作為 Hexo 寫作的『工作區』，裡面存放的是 Hexo 的源文件，包括插件依賴、文章 md 文件、網站配置等，推薦建立私有項目進行 git 版本管理，以防文件丟失。

項目創建完成後，進入代碼頁，點擊右上角的『WebIDE』按鈕進入環境。

在右側單擊『運行環境』喚出面板，選擇使用最下方的『ide-tty-hexo』。

點擊左下角的『終端』，接下來就進入敲命令時間。

首先新建一個文件夾並進行初始化，工作區中的所有文件將存放在這個文件夾裡面，文件夾名 <folder> 可自定義：

$ hexo init <folder> n

接下來進入該文件夾（本文後面所有命令都在該文件夾目錄中執行），並進行依賴安裝：

$ cd <folder>n$ npm install n

安裝完成後，該文件夾的目錄結構如下：

寫作

在工作文件夾中執行這條命令來新建一篇文章，<title>即為文章的標題。

$ hexo new <title> n

終端會返回一條信息，告訴你文章源文件存放在哪裡：

打開該 md 文件，開始你的寫作吧！

Markdown 語法可參考這篇 幫助文檔。

生成

寫完 md 源文件後，我們需要 Hexo 幫忙生成靜態文件，以便能在瀏覽器中看到渲染後最終的效果。

$ hexo generate n

或者其簡寫形式：

$ hexo g n

終端執行命令後效果如下：

目錄中會多出一個 public 文件夾，剛才生成的文件都放在其中。

部署

在部署開始前，我們還需要安裝依賴以及修改配置。

$ npm install hexo-deployer-git --save n

輸入以下兩條命令來配置 git 環境變數，告訴 git 是誰在使用，將『you@example.com』和『Your Name』替換成你自己的郵箱和名字：

$ git config --global user.email "you@example.com"n$ git config --global user.name "Your Name" n

如圖所示：

在文章開頭已經說過，Hexo 的『寫作』和『部署』是分開的，所以我們需要另外新建一個項目作為源文件編譯後的『存儲區』。

記錄下這個『存儲區』項目的 SSH 地址：

接下來在目錄中找到 _config.yml ，配置好部署參數，在其最下方找到 deploy: 欄位，在 type: 後面填入 git，冒號後面記得加個空格，在 repo: 後面填入剛才記錄下來的『存儲區』項目的 SSH 地址，在 branch: 後面填入 master，記得，以上所有冒號後面都要跟一個空格才能生效。

如圖所示：

還需要在 _config.yml 中配置 #URL 參數。在 url: 後面填入你的用戶名.coding.me/『存儲區』項目名字，root:後面填入『存儲區』項目名字。

比如我的用戶名是 chenjuntong，我的『存儲區』項目名字是 Hexo-Blog，則在這裡的 url: 填入 chenjuntong.coding.me/Hexo-Blog，root: 填入 /Hexo-Blog/， 注意，以上所有冒號後面都要跟一個空格才能生效。

如圖所示：

最後一步，執行部署命令，即可部署到我們指定的『存儲區』里。

$ hexo deploy n

或者其簡寫形式：

$ hexo d n

執行效果如下：

開啟靜態 Pages 服務

打開『存儲區』項目頁面，會發現之前在『工作區』生成的靜態文件已經部署進來了：

點開Pages 服務設置頁，在靜態 Pages中，選擇master 分支為部署來源，點擊保存。

恭喜！成功部署後，點擊運行網址，你的個人博客了上線啦！

更多博客設置請參考 Hexo 官網。