美文网首页已收录(2017-8-15)
Mac本地配置hexo + Atom Markdown,连接Gi

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

作者: 丁不想被任何狗咬 | 来源:发表于2017-01-11 23:48 被阅读1141次

    本篇主要内容如下:

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

    相关文章

      网友评论

        本文标题:Mac本地配置hexo + Atom Markdown,连接Gi

        本文链接:https://www.haomeiwen.com/subject/vkqdbttx.html