hexo博客进阶

部署Hexo到Gitlab

  • Hexo + GtHub:起初想要把这个博客放到Github上,但是由于Github不让百度爬取。
  • Hexo + Coding.net:后来又尝试了 coding.net,在使用coding.net的过程中遇到了一些坑。
    • 普通会员不能自定义域名 -> 申请成为白银会员(使用腾讯云授权)
    • 微信等方式登录腾讯云后,授权失败(不知原因) -> 使用腾讯云直接登录 -> 授权成功,成为白银会员,可以自定义域名
    • 首次打开会显示5s的coding.net广告,后跳转到博客,据说这样的话无法被百度收录 -> 充值199/年 成为黄金会员(我没有充)

Hexo + Gitlab

  1. 在原来的博客根目录中新建一个.gitlab-ci.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    before_script:
    - apt-get update -qq && apt-get install -y -qq pandoc
    image: node:9.8.0
    pages:
    cache:
    paths:
    - node_modules/
    script:
    - npm install hexo-cli -g
    - npm install
    - hexo deploy
    artifacts:
    paths:
    - public
    only:
    - master

这里需要注意,image: node:9.8.0 node的版本 不是2.2.0,9.8.0这个版本是我当前安装的版本,其他的版本我没有试过。

  1. 在博客的根目录的配置文件_config.yml中,把deploy下推送到github的相关内容删掉。这是因为在gitlab的自动部署过程中会执行推送github的操作,为了不用配置用户名和密码相关配置,建议删除。

  2. 在gitlab中新建仓库,过程省略。

  3. 把博客内容push到上一步新建的仓库中,过程省略。

  4. 查看gitlab中项目的CI/CD -> Piplines,这时候应该处于Padding状态,等几分钟,状态变成了Success。

  5. 查看Setting -> Pages可以看到gitlab给我们分配的链接,访问链接可以看到我们的博客。

部署到gitlab成功 🎉🎉🎉

自定义域名

Setting -> Pages页面中可以通过NewDomain来自定义域名
pages
如果你的域名不支持HTTPS请不要勾选Force domain with SSL...点击New domain可以添加指定域名,添加域名后会看到如下页面:
domain
上图中绿色的verified是因为我已经验证完成了,如果没有验证完成应该是黄色的。验证过程为分别在云服务商处添加CNAME和TXT域名解析,因为我使用的是阿里云服务器,下面贴出来阿里云上的解析结果:
DNS
其中TXT解析的内容就是Verifycation status的内容。
CNAME和TXT解析设置完成后需要等几分钟才会生效,生效后可以在本地电脑的终端中查看结果,正确的结果如下:
dns-result

自定义域名成功 🎉🎉🎉

最终效果

success

hexo中插入数学公式

原生hexo并不支持数学公式,需要安装插件mathJaxmathJax是一款运行于浏览器中的开源数学符号渲染引擎,使用 mathJax 可以方便的在浏览器中嵌入数学公式。mathJax 使用网络字体产生高质量的排版,因此可适应各种分辨率,它的显示是基于文本的而非图片,因此显示效果更好。这些公式可以被搜索引擎使用,因此公式里的符号一样可以被搜索引擎检索到。

安装与配置

  1. $ npm install hexo-math --save
    在站点配置文件 _config.yml 中添加:
    1
    2
    3
    4
    5
    6
    math:
    engine: 'mathjax' # or 'katex'
    mathjax:
    # src: custom_mathjax_source
    config:
    # MathJax config

在 next 主题配置文件中 themes/next-theme/_config.yml 中将 mathJax 设为 true:

1
2
3
4
5
# MathJax Support
mathjax:
enable: true
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MM

使用

公式插入格式

1
2
$数学公式$ 行内 不独占一行
$$数学公式$$ 行间 独占一行

例如

1
$f(x)=ax+b$

显示效果为:f(x)=ax+b
如果是行间则使用:

1
$$f(x)=ax+b$$

显示效果为:
$$f(x)=ax+b$$

语法格式

上标与下标

使用 ^ 表示上标,使用 _ 表示下标,如果上下标的内容多于一个字符,可以使用大括号括起来:

1
$$f(x) = a_1x^n + a_2x^{n-1} + a_3x^{n-2}$$

显示效果为:
$$f(x) = a_1x^n + a_2x^{n-1} + a_3x^{n-2}$$
如果左右两边都有上下标可以使用 \sideset 语法:

1
$$\sideset{^n_k}{^x_y}a$$

显示效果为:
$$\sideset{^n_k}{^x_y}a$$

括号

在 markdown 语法中,\, $, {, }, _都是有特殊含义的,所以需要加\转义。小括号与方括号可以使用原始的() [] 大括号需要转义\也可以使用\lbrace和 \rbrace

1
2
\{x*y\}
\lbrace x*y \rbrace

显示效果为:{x*y}
原始符号不会随着公式大小自动缩放,需要使用 \left 和 \right 来实现自动缩放:

1
$$\left \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \right \rbrace$$

效果:$$\left \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \right \rbrace$$
不使用\left 和 \right的效果:

1
$$ \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9}  \rbrace$$

$$ \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \rbrace$$

分数与开方

可以使用\frac 或者 \over 实现分数的显示:

1
2
$\frac xy$
$ x+3 \over y+5 $

分别显示为:$\frac xy$和$ x+3 \over y+5 $
开方使用\sqrt:

1
2
$ \sqrt{x^5} $
$ \sqrt[3]{\frac xy} $

分别显示为:$ \sqrt{x^5} $和$ \sqrt[3]{\frac xy} $

求和与积分

求和使用\sum,可加上下标,积分使用\int可加上下限,双重积分用\iint:

1
2
3
$ \sum_{i=0}^n $
$ \int_1^\infty $
$ \iint_1^\infty $

分别显示为:$ \sum_{i=0}^n $和$ \int_1^\infty $以及$ \iint_1^\infty $

极限

极限使用\lim:

1
$ \lim_{x \to 0} $

显示为:$ \lim_{x \to 0} $

表格和矩阵

表格样式lcr表示居中,|加入一条竖线,\hline表示行间横线,列之间用&分隔,行之间用\分隔

1
2
3
4
5
6
7
$$\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 1.97 & 5 & 12 \\\\
2 & -11 & 19 & -80 \\\\
3 & 70 & 209 & 1+i \\\\
\end{array}$$

显示效果为:
$$\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 1.97 & 5 & 12 \\
2 & -11 & 19 & -80 \\
3 & 70 & 209 & 1+i \\
\end{array}$$
表格的插入也可以使用以下方式:

1
2
3
4
5
名称|说明
---|---|---
temperature| 室内温度
set temperature| 设定温度
height| 室内高度

显示效果为:
名称|说明
—|—|—
temperature| 室内温度
set temperature| 设定温度
height| 室内高度
矩阵显示和表格很相似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$$\left[
\begin{matrix}
V_A \\\\
V_B \\\\
V_C \\\\
\end{matrix}
\right] =
\left[
\begin{matrix}
1 & 0 & L \\\\
-cosψ & sinψ & L \\\\
-cosψ & -sinψ & L
\end{matrix}
\right]
\left[
\begin{matrix}
V_x \\\\
V_y \\\\
W \\\\
\end{matrix}
\right] $$

显示效果为:
$$\left[
\begin{matrix}
V_A \\
V_B \\
V_C \\
\end{matrix}
\right] =
\left[
\begin{matrix}
1 & 0 & L \\
-cosψ & sinψ & L \\
-cosψ & -sinψ & L
\end{matrix}
\right]
\left[
\begin{matrix}
V_x \\
V_y \\
W \\
\end{matrix}
\right] $$

参考资料

gitlab官方youtube视频
Steven Shi的博客

👍👍👍