实用工具之hexo

image-20210621151156147

一、Hexo介绍

1、官网

Hexo

2、安装

(1)Node.js(Windows)

  1. 官网下载对应版本

  2. 安装选择全部默认(也可以自己设定安装位置)

  3. 安装完,键盘上Win+R打开命令行,输入以下命令出现版本号即安装成功

    node -v
    npm -v
    

(2)Git(Windows)

  1. 官网下载对应版本

  2. 安装选择全部默认(也可以自己设定安装位置)

  3. 最后一步也可以选择Use Git from the Windows Command Prompt,这样就可以命令行打开git

  4. 安装完,命令行输入以下命令出现版本号即安装成功

    git --version
    

(3)Hexo(Windows)

  1. 【安装到C盘】在Windows上选定一个目录作为博客目录,在该目录下右键点击Git Bash Here,接下来使用git控制台进行Hexo的安装

    npm i hexo-cli -g
    hexo -v  # 验证安装是否成功
    
  2. 【安装到指定目录】在npm安装目录右键点击Git Bash Here,然后输入

    npm install --prefix . hexo-cli -g
    

二、GitHub

1、官网

GitHub

2、注册

官网跟着指引注册就OK

3、创建博客仓库

(1)如图操作

图1

图2

(2)注意事项

  1. 第二张图中的第一步yourname一定要跟Owner的名字一样,且一定要加.github.io后缀(至于为什么,我也不得而知)

4、给仓库选择主题

(1)如图操作

图3

图4

三、写博客并发布到GitHub

1、本地网站配置

(1)命令如下(在博客目录下)

hexo init  # 初始化该目录
npm install  # 安装必备的组件
hexo g  # 生成静态网页
hexo s  # 打开本地服务器并复制地址到chrome打开
ctrl c  # 关闭本地服务器

(2)chrome打开本地网站地址

  1. http://localhost:4000/

2、 写新文章

(1)命令如下(在博客目录下)

npm i hexo-deployer-git  # 安装拓展
hexo new post "new md file"  # 新建一篇文章
# 修改./source/_posts下的md文件
hexo g
hexo s
ctrl c

3、连接GitHub

(1)如何配置连接

  1. 详情请见另一篇文章:

(2)修改配置

  1. 命令(在博客目录下)

    vi _config.yml
    a  # 修改
    # 如下图修改最后几行
    Esc  # 退出修改
    :wq!  # 保存
    
  2. 如图

图5

  1. 注意:修改图中标红的地方就OK,换成你自己的name

(3)配置全局git name and email

git config --global user.name "your github name"
git config --global user.email "your github private email"

注意:your github private email怎么配置请看

(4)发布到GitHub

hexo d

(5)同时拥有gitlab and github账号时

  1. 发布完后,将全局git name and email改为gitlab账号

    git config --global user.name "your gitlab name"
    git config --global user.email "your gitlab private email"
    
  2. 进入.deploy_git配置局部账号即github账号

    cd .deploy_git  # 根目录下进入.deploy_git
    # 配置
    git config --local user.name "your github name"
    git config --local user.email "your github private email"
    
  3. 这样配置后,hexo d就是用github账号push,对gitlab push就是用gitlab账号

4、新的文章

(1)添加新md

  1. 在./source/_posts下添加新的md文件

  2. 使用命令push

    hexo g
    hexo d
    

(2)插入图片

  1. 安装插件

    npm install https://github.com/CodeFalling/hexo-asset-image --save
    
  1. 修改_config_yml配置

    post_asset_folder: true  # 将false改为true
    
  2. ./source/_posts中新建一个md文件时,同时创建一个与md文件同名的文件夹,该文件夹用来存放该md文件所需图片

  3. 接着在md文件中以![](/md文件名/1.png)的格式插入图片
  4. 详细教程请见ETRD博客

(3)插入markdown

  1. Hexo的标签插件

  2. 引用站内文章

    {% post_path filename %}
    {% post_link filename [title] [escape] %}
    {% post_link hexo-3-8-released %} # 链接使用文章的标题
    
  3. 在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

    例如,在文章中使用 时,只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake,都没有影响。

    默认链接文字是文章的标题,你也可以自定义要显示的文本。此时不应该使用 Markdown 语法 []()

    默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项,禁止对特殊字符进行转义。

  4. 参考链接

5、更换主题

(1)设置文章头-一劳永逸

  • 修改/scaffolds/post.md代码如下:
---
title: {{ title }}
date: {{ date }}
author: Myhaa
img:
top: false
cover: false
coverImg:
password:
toc: true
mathjax: false
summary: 
categories: 
tags:
  - 
---

(2)修改subtitle

图:修改subtitle

注意:第一步修改应该是在bg-cover-content.ejs

(3)修改dream

图:修改dream

6、让HEXO搭建的博客支持Latex

参考

安装插件

安装 hexo-math 插件,该插件(plugin)可支持使用 MathJaxKaTeX 来实现 LaTeX 排版系统,进而在网页上渲染出数学表达式(本文以 MathJax 为例)。

## 打开终端,进入 hexo 博客所在文件夹
$ cd ~/blog

## 安装 hexo ; --save 参数会让 npm 在安装 hexo-math 之后自动将它写入 package.json 文件里,以便之后多电脑同步时使用
$ npm install hexo-math --save

将 Hexo 默认的 markdown 渲染引擎 hexo-renderer-marked 更换为 hexo-renderer-kramed ,引擎是在默认的渲染引擎的基础上修改了一些 bug 而已。此处不更换也没问题,本文以更换为例。

## 卸载默认 markdown 渲染引擎 hexo-renderer-marked;若不卸载,会和新的引擎发生冲突(conflict)
$ npm uninstall hexo-renderer-marked --save

## 安装新引擎 hexo-renderer-kramed 
$ npm install hexo-renderer-kramed --save

修改 kramed 配置,解决语义冲突

由于 LaTeX 与 Markdown 语法存在冲突(例如在 markdown 中,斜体可以用 * 或者 _ 表示,而 LaTeX 也会用到 _ ),所以我们要对 kramed 默认的语法规则进行修改,否则之后会出现很多奇怪的排版样式。

打开 ~/blog/node_modules\kramed\lib\rules\inline.js 文件(Hexo 博客所在文件夹的根目录下的 node_modules 文件夹),把第 11 行的 escape 变量的值修改为:

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

同时把第 20 行的 em 变量修改为:

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

设置 _config.yml 开启 MathJax 渲染引擎(==重要==)

~/blog/_config.yml 文件(注意,是 Hexo 博客文件夹根目录中的 /_config.yml 而不是主题目录下的 /themes/next/_config.yml)中增加 MathJax 的支持,并手动设置下面的 src(这一步很重要,使用默认的 src 会导致数学表达式渲染显示失败。这里的关键是 src 中的 ?config=TeX-MML-AM_CHTML 这个字段)

...
...

# MathJax
math:
  engine: 'mathjax'
  mathjax:
    src: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML   

...
...

文章作者: Myhaa
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Myhaa !
评论
  目录