0%

MacOS用HEXO+GIT搭建博客

随着最近新学的东西越来越多出现看到一些东西总是有“诶,我之前是不是在哪里学过”的人生怀疑,所以是时候来搞一个blog了,记录一下日常学的东西之外顺带可能发点旅游照片什么的,原本以为这就是几行命令的事情,然而到最后没想到自己沉迷在了选主题和配置上了,前前后后搞了快一天才最后终于push到github上。本篇博客用于记录在自己电脑上配置HEXO环境的过程,方便以后可能时不时可能会发生的系统崩溃后的重装系统后来翻阅。如果需要Github端的配置过程请从参考文献中自行寻找。

安装环境

  • MacOS X 10.15

安装流程

1. 安装node.js

  1. node.js download page下载对应安装包
  2. 运行安装包

2. 安装Hexo

  1. 在需要存放博客项目的位置创建博客文件夹
  2. 打开终端,cd到刚创建好的文件夹中
  3. 运行npm i hexo-cli -g
  4. 安装完成后输入hexo -v确认hexo是否安装成功
  5. 运行hexo init&&npm install初始化

3. 配置Hexo

1. 连接github

  • 此处假设已经创建好了github仓库并且创建好了SSH,创建方法参考参考文献1

  • 打开博客根目录下_config.yml, 修改deploy配置:

    1
    2
    3
    4
    deploy:
    type: git
    repository: 自己仓库的地址
    branch: master

2. 为每篇博客创建自己的资源文件夹

由于我倾向于每一篇博客都有自己的资源文件以方便管理,所以要修改配置在生成每篇博客的markdown文件时同时生成与其同名的资源文件夹

  1. 修改config.yml文件

    1
    post_asset_folder: true
  2. 输入命令hexo new post "test"后会在/source/_post文件夹中找到test.md以及一个名为test的文件夹,这个文件夹可以用于保存博客的图片等静态资源

3. 让博客正常显示图片

在默认配置下在本地markdown文件的图片是无法正常显示在网页上的,需要安装一个包来进行本地图片路径到网页路径的转换,当然Hexo图片插入提供了多种解决方案,这里只列出我倾向的一种

  1. 安装插件

    1
    npm install https://github.com/CodeFalling/hexo-asset-image --save
  2. 保证图片放在/source/_post目录下与markdown同名的文件夹下,在markdown中插入:

    1
    ![图片描述](markdown文件名/图片名)

图片此时部署后可以正常显示

4. 让Next主题博客正常显示数学公式

本博客使用的是next主题,需要进行一些配置才能让网站正常解析Latex数学公式,详细原因参考Hexo 的 Next 主题中渲染 MathJax 数学公式

  1. 更换Hexo的 markdown渲染引擎

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  2. 修改可能会产生语义冲突的符号

    修改node_modules/kramed/lib/rules/inline.js 第11行为:

    1
    escape: /^\\([`*\[\]()#$+\-.!_>])/,

    修改此文件第20行为:

    1
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  3. 重新启动hexo

    1
    hexo clean && hexo g
  4. 在next主题中打开MathJax

    进入/themes/next找到_config.yml修改math下的enable为true,并且同时修改mathjax为true:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    math:
    enable: true

    # Default (true) will load mathjax / katex script on demand.
    # That is it only render those page which has `mathjax: true` in Front-matter.
    # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
    per_page: true

    # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
    mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false
  5. 在需要渲染数学公式的markdown的header中打开mathjax:

    1
    2
    3
    4
    5
    6
    ---
    title: xxxx
    date: xxxxx
    tags:
    mathjax: true
    --

参考文献

  1. 超详细Hexo+Github博客搭建小白教程
  2. Hexo图片插入
  3. Hexo 的 Next 主题中渲染 MathJax 数学公式