美文网首页
使用hexo + github搭建blog

使用hexo + github搭建blog

作者: Joe_WQ | 来源:发表于2018-11-15 11:11 被阅读0次

    date: 2018-1-14
    最近使用jekyll烦了,经常出现博客编译出问题,打算试下hexo,结果很不错,所以直接换成了hexo,这里写个blog留作记录。

    1. 安装环境

    hexo是本地先编译成功后,再上传到github上,和jekyll不一样(github内部支持)。

    这里只介绍linux环境,在windows直接下载软件包安装就行。

    安装nodejs, hexo:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n7" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">sudo apt install nodejs-legacy
    sudo npm install hexo -g

    配置git方式部署

    sudo npm install hexo-deployer-git --save</pre>

    这里可以考虑使用USTC加速下载软件包:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false"># 编辑 ~/.npmrc
    registry=http://npmreg.mirrors.ustc.edu.cn/</pre>

    2. 配置环境

    在github上新建项目,xxx.github.io或者blog,其中xxx是你的用户名。

    开启hs-pages功能:在settings里有副标题:GitHub Pages,点击一下Automatic page generator即可。

    新建一个文件夹,命名和项目名相同,然后:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n16" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">sudo hexo init</pre>

    修改_config.conf,可以参考这个网站

    分类可能看不到,解决办法:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n19" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">> sudo hexo new page categories

    在source/categories/index.md里date下添加:

    type: "categories"
    comments: false</pre>

    3. 添加文章

    在source/_post目录下放置文章,命名titleName.md,

    里面的文章开头添加:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n23" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="markdown" contenteditable="false">---
    title: titleName
    date: xxxx-xx-xx
    categories: xxxx
    ---</pre>

    可能会需要配置用户信息,user.email和user.name

    最后执行:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n26" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">sudo hexo g
    sudo hexo d</pre>

    输入用户名和密码即可。


    hexo对公式的支持有点问题,需要安装插件:

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n30" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="markdown" contenteditable="false">sudo npm install hexo-math --save

    在blog文件夹中执行:

    sudo hexo math install

    在_config.yml中添加:

    mathjax: true</pre>

    在相应文章的开头添加mathjax: true

    相关文章

      网友评论

          本文标题:使用hexo + github搭建blog

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