本篇主要內容如下:
- hexo
- Atom markdown環境配置和使用
- 本地配置hexo環境
- 選擇并配置hexo theme
- about、tags和categories的使用
- hexo配置git deploy
提示:一切都在更新,胡亂看本篇這種配置文章不如看官網。中途遇到的一些小問題不太記得了。
hexo
原理:
- input:source目錄下的markdown文件;theme;
- output:public目錄下的html文件;
版本:
- hexo: 3.2.2
- hexo-cli: 1.0.2
Atom markdown環境配置和使用
本來我使用Macdown這個app寫markdown的,但是這個app不能進行文件夾管理,不方便我這種整天寫一堆草稿的人,所以轉移到atom。atom需要幾個插件完成markdown環境配置,一切盡在cmd+,。
- markdown-preview-plus: 比自帶的markdown-preview添加了實時preview功能,其實仍然很難看,不如Macdown。
- markdown-Writer: 配合hexo、jekyll等管理markdown的drafts和posts很方便。
- markdown-scroll-sync: 源碼和preview同步滾動,滾得不是很好,可以不用。
整套環境用起來還可以,但是不設快捷鍵的話,新建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不能用了。
問題解決
運行時出現如下問題。
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已經有了fix方案。
本地配置hexo環境
跟隨官網步驟。
首先安裝node.js和hexo。
npm install hexo-cli -g
到想要創建site的文件夾下,執行以下命令。
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,則不顯示圖標
- 根據自己的需要反注釋menu里的tags、categories、about。
有時候不知道某個顯示項讀取的是什么字段,可以到themes/even/layout/_partial里找,比如footer的設置在footer.swig。想自己寫主題的話,可以去看看從零開始制作 Hexo 主題(用別人的主題,就要為別人安利)。
about、tags和categories的使用
我的source文件夾下的文件夾列表如下:
- _drafts,草稿
- _posts,要發布的文章
- 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。