Mac本地配置hexo + Atom Markdown，连接Gi

本篇主要内容如下：

• 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。