0%

使用github pages和hexo搭建个人博客

发表于 更新于 分类于

这又是一篇如何使用github pages和hexo搭建个人博客的文章，是的，网络上已经有无数这类文章，所以我不准备详细记录每一个步骤，对于网络上已经有的，我只列出参考的文章。本文着重选择建立一个个人博客最实用，最需要的配置修改，hexo的扩展性是非常出色的，完全可以定制出非常酷炫的各种效果，这类修改本文并不涉及。另外网络上的一些文章已经比较陈旧，完全参照可能会遇到一些问题，本文进行了一些补充。如果你正在准备搭建一个个人博客，本文应该可以帮助你，不需要在网络上各种文章中苦苦寻找验证。当然，主要还是要感谢网络上乐于分享的人们，正是在他们的成果之上，才能有本博客，也欢迎大家常来逛逛：http://zhongpan.tech。

使用github pages建立个人博客

github为开发者提供了基于git版本管理的代码和内容的托管服务，他同时提供了github pages功能，允许开发者建立个人网页，并提供了一系列建站模板，以及形如xxx.github.io的二级域名，其中xxx为github账号名，建立github pages的过程和建立仓库的过程类似，只是仓库名总是xxx.github.io，这样就启用github pages了。具体可参考[1]，关于git ssh key配置可参考[2]，关于如何绑定自己的域名参考[3]，其中提到主机记录@的记录值后要加一个.，经过验证其实是不需要的，我是使用的阿里云域名服务。

github pages也是有限制的，只能托管静态页面，无法运行后端服务，也就不能进行服务端渲染和路由。对于建立复杂的个人网站还是最好使用云主机，对于建立相对简单的个人博客，使用github pages还是不错的选择，对页面的管理和管理git代码类似，开发者会非常亲切。

使用hexo管理博客

前面已经提到github pages只能托管静态页面，一般的个人博客需要提供标签、分类等功能，通过手工去编辑静态页面是非常不方便的。因此就产生了hexo这样的项目，hexo是使用node.js编写的，用于将用户编写的页面转换成网站静态页面，不仅如此，它还提供了丰富的插件和主题，实现各种客服端网页功能，比如评论、分享等等。本博客使用了Hexo v3.9.0进行管理，具体安装步骤参考[1]。hexo初次使用可能会遇到如下问题：

  1. 通过git上传，除了修改站点的_config.yml的deploy属性，注意还需要安装hexo-deployer-git插件：
1
npm i hexo-deployer-git --save

  1. 每次重新上传后会删掉github pages上的CNAME、README.md文件：可参考[4]解决。

  2. 如何使用图片：可参考[5]。

    • 注意图片名中不能包含空格，否则图片无法显示

    • 注意如果使用了hexo-image-assert插件，就不要用asset_img标签，总是用markdown语法，否则图片显示不了，转换生成的html中的image路径似乎进行了两次转换，导致路径不对

      1561532800012

  3. 如何添加阅读全文：可参考[6]。

简单总结一下hexo的功能：

  1. 页面分post、page和draft三种，hexo中称为layout，post就是博客文章，位于source/_posts目录下，page是独立的页面，位于source目录下同名目录，draft是博客草稿，位于source/_drafts目录下，草稿完成后通过hexo publish命令自动发布到post中。hexo内置支持一些特殊用途页面，如标签、分类、存档，对post进行归类，如标签页面，在Front-matter中定义type属性为tags：

    1
    2
    3
    4
    5
    6
    ---
    title: tags
    date: 2019-06-21 10:15:51
    type: "tags"
    comments: false
    ---

    然后在post中使用上述type，例如:

    1
    2
    3
    4
    5
    6
    ---
    title: 使用github page和hexo搭建个人博客问题总结
    date: 2019-06-01 11:03:06
    tags:
      - hexo
    ---

  2. 页面都是使用markdown编写，执行hexo g后会转换成html，放到public目录下，最后上传到github的就是public目录下的内容。

  3. 对于上述标签、分类等页面，hexo会自动生成静态页面，其中包含相应的博客文章链接，观察一下public下的目录结构就会发现这一点。这是通过hexo-generator-tag、hexo-generator-category等插件实现的。

  4. 网站的最终呈现效果都是通过主题实现的，hexo默认的主题是landscape，还有众多的第三方主题，主题主要使用模板技术生成最终的静态页面，如swig、ejs、jade等，相应的需要安装对应的插件，如hexo-renderer-jade，ejs是默认的。

配置Hexo-NexT主题

hexo默认的主题landscape难以完全满足个人博客需求，试用了几款主题之后，最终我选择了NexT.Mist v7.1.2，它的功能非常丰富，安装配置可参考[7]，参考上述文章，本博客主要做了如下修改，修改过程中发现上述文章有些内容已经过时：

  • 修改底部标签样式：不需要修改Blog\themes\next\layout\_macro\post.swig了，修改主题配置文件_config.yml即可；

    1
    tag_icon: true

  • 启用canvas_nest动画：注意首先需要参照https://github.com/theme-next/theme-next-canvas-nest中说明安装canvas-nest库；

  • 增加分类和标签页面

  • 主页文章添加阴影效果

  • 增加字数和阅读时长统计：注意先参照https://github.com/theme-next/hexo-symbols-count-time中说明安装symbols-count-time库，然后修改站点的_config.yml(注意不是主题的)，增加：

    1
    2
    3
    4
    5
    6
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false

  • 增加访客数和访问量统计：next主题已经支持busuanzi，直接开启即可；

  • 增加评论功能

  • 增加分享功能：next已经不支持jiathis，本博客选择了needmoreshare2，直接开启即可；

  • 增加站内搜索功能

  • 在文章末尾添加“文章结束”标记：图标换了一下

  • 侧边栏社交小图标设置

  • 底部隐藏由Hexo强力驱动、主题–NexT.Mist

  • 底部用户图标换成桃心

  • 设置头像：没有设置动画效果

  • 添加版权信息：next已经支持，在creative_commons这个部分，选择合适的license即可。

  • 添加网页顶部进度加载条

另外还增加了：

  • 开启阅读进度：参照https://github.com/theme-next/theme-next-reading-progress安装theme-next-reading-progress；修改主题的_config.yml，将reading_progress的enable置为true；

    1
    2
    3
    4
    reading_progress:
      enable: true
      color: "#37c6c0"
      height: 2px

    其效果是在文章顶部增加一个进度条显示阅读进度。

  • 开启书签：参照https://github.com/theme-next/theme-next-bookmark安装theme-next-bookmark；修改主题的_config.yml，将bookmark的enable置为true；

    1
    2
    3
    4
    5
    bookmark:
      enable: true
      # If auto, save the reading position when closing the page or clicking the bookmark-icon.
      # If manual, only save it by clicking the bookmark-icon.
      save: auto

在使用hext主题时遇到一个问题：

  • post中标题级别必须连续，否则post的toc出现奇怪的错乱问题：

    例如post中第一层用h1，第二层用h3，toc就会这样：

    1561360805318

    改为第一层用h1，第二层用h2，保持连续，toc就正常了：

    1561353591521

markdown编辑工具

最后建议找一款合适的markdown编辑工具，我是使用的Typora，至此建立博客的各项准备完全就绪了，接下来就可以愉快的书写了，Typora和hexo配合使用会遇到如下问题：

  1. 图片在typora中显示问题

    前面介绍过在hexo插入图片推荐使用hexo-asset-image插件的方法，这时图片是放在post同名的目录中，而hexo的markdown中引用图片并没有加上目录名，这样在typora中就显示不了图片。解决方法参考[8]，经过我的验证，可行方法如下，其中xxxxxx为post名：

    • 在Front-matter中加入typora-copy-images-to或者在typora全局偏好设置中设置，其中xxxxxx为post名

      1
      typora-copy-images-to: xxxxxx

      或者如下图在typora设置：
      1561520434482

    • 在Front-matter中加入typora-root-url，否则markdown中会带有目录名xxxxxx，这时在typora中可以显示图片，但是hexo中不能

      1
      typora-root-url: xxxxxx

    • 进行上述修改后，在typora中复制粘贴或插入本地图片后，typora会自动放到xxxxxx目录下，并生成markdown如下：

      1
      ![name](/name.png)

      这里还是有一点问题，就是路径前面有一个/，在typora中显示是正常的，但是在hexo中无法显示图片，需要删除/。

  2. hexo转换后的显示效果并非和typora一样，目前碰到的一个问题是对Reference-style links转换后，引用的链接列表并没有显示，而在typora中是显示的。所以后来只有换成了Footnotes。typora中对引用的链接列表显示效果如下；

    1561354318677

支持emoji表情

hexo默认的markdown渲染器是不支持emoji的，可以使用emoji相关插件或者更换markdown转换器，我是选择的更换markdown转换器，具体可参考[9]。除了emoji，我还用到了它的Footnote功能，所以我还安装了 footnote插件，如需其他插件，同样需要先安装：

1
2
3
4
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save
npm install markdown-it-footnote --save

另外其配置文件，我将permalink置为false了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    #- markdown-it-sup
    #- markdown-it-sub
    #- markdown-it-abbr
    - markdown-it-emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: false
    permalinkClass: header-anchor
    permalinkSymbol:

参考文章

  1. 绝配：hexo+next主题及我走过的坑 ↩ ↩

  2. git ssh key配置 ↩

  3. 绑定域名到 GitHub Pages ↩

  4. 避免read.me，CNAME文件的覆盖，手动改github page的域名 ↩

  5. Hexo中添加本地图片 ↩

  6. Hexo-设置阅读全文 ↩

  7. Hexo-NexT配置超炫网页效果 ↩

  8. hexo与typora结合 ↩

  9. Hexo NexT 开启 emoji ↩

-------------本文结束感谢您的阅读-------------