本篇主要內(nèi)容如下：

• hexo
• Atom markdown環(huán)境配置和使用
• 本地配置hexo環(huán)境
• 選擇并配置hexo theme
• about、tags和categories的使用
• hexo配置git deploy

提示：一切都在更新，胡亂看本篇這種配置文章不如看官網(wǎng)。中途遇到的一些小問題不太記得了。

hexo

原理：

• input：source目錄下的markdown文件；theme;
• output：public目錄下的html文件；

版本：

• hexo: 3.2.2
• hexo-cli: 1.0.2

Atom markdown環(huán)境配置和使用

本來我使用Macdown這個app寫markdown的，但是這個app不能進行文件夾管理，不方便我這種整天寫一堆草稿的人，所以轉(zhuǎn)移到atom。atom需要幾個插件完成markdown環(huán)境配置，一切盡在cmd+,。

• markdown-preview-plus: 比自帶的markdown-preview添加了實時preview功能，其實仍然很難看，不如Macdown。
• markdown-Writer: 配合hexo、jekyll等管理markdown的drafts和posts很方便。
• markdown-scroll-sync: 源碼和preview同步滾動，滾得不是很好，可以不用。

整套環(huán)境用起來還可以，但是不設快捷鍵的話，新建file什么的還是不夠方便。

markdown-writer

settings下可以對擴展名、draft文件夾、post文件夾、生成engine等進行定制化。這里配合hexo把它們分別修改為.md、source/_drafts、source/_posts/和hexo。注意posts如果設置了year等子文件夾，則注意不要和hexo的config文件里的permalink: :year/:month/:title/沖突。
主要有如下功能：

• Add draft
• Add post
• Publish draft
• Insert Link
• Insert Image
• Manage tags & categories，配合定制化的hexo-generator-atom-markdown-writer-meta生成的tags.json等文件，但是這個2年沒更新了，新的hexo不能用了。

問題解決

運行時出現(xiàn)如下問題。

The contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. Please, stop using shadowRoot and access the editor contents directly instead.

• deprecated calls --> markdown-scroll-sync
• deprecated selectors --> markdown-preview-plus

markdown-preview-plus已經(jīng)有了fix方案。

本地配置hexo環(huán)境

跟隨官網(wǎng)步驟。
首先安裝node.js和hexo。

npm install hexo-cli -g

到想要創(chuàng)建site的文件夾下，執(zhí)行以下命令。

hexo init site
cd site
npm install
hexo g
hexo s

之后便可以在localhost:4000下看到blog了。遇見問題，一般是端口占用或者沒有運行npm install。按需求和錯誤提示安裝插件，安裝時要位于site文件夾下，會安裝到當前目錄的node_modules里。按照個人情況修改_config.yml，不知道怎么改可以找別人的傳了完整hexo文件夾的site對照著改。

選擇并配置hexo theme

選了Ahonne的even，因為簡明、清晰、中英文支持。最方便的套用模板的方法其實是把Ahonne的blog整個下載下來再照著改，而且他目前把整個hexo文件夾都放在GitHub上了，真是好人。這個模板里，需要到themes/even/_config.yml修改的地方如下：

• since字段，決定了footer里的since 2015-2017的起始年份
• email的圖標鏈接的mail信息，也可以注釋掉social，則不顯示圖標
• 根據(jù)自己的需要反注釋menu里的tags、categories、about。

有時候不知道某個顯示項讀取的是什么字段，可以到themes/even/layout/_partial里找，比如footer的設置在footer.swig。想自己寫主題的話，可以去看看從零開始制作 Hexo 主題（用別人的主題，就要為別人安利）。

about、tags和categories的使用

我的source文件夾下的文件夾列表如下：

• _drafts，草稿
• _posts，要發(fā)布的文章
• about，自我介紹，一個index.md
• categories，分類頁，一個index.md
• tags，標簽頁，一個index.md

在寫posts的時候設置tags和categories，生成時會自動生成相應頁面。具體格式見鏈接。

hexo配置git deploy

npm install hexo-deployer-git --save
在_config.yml里：

deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io.git
  branch: master

運行hexo d。