跌跌撞撞的Hexo小记

这篇文章应该是会长期更新的吧……大概

是不是颜色调的很淡你们就看不到我

去年11月份,怀揣着即将成为CS系学生的觉悟,我决定像周围大佬们一样建立一个属于自己的博客。可气的是,我电脑上的WSL运行的是Ubuntu 16.04.6 LTS,而Ubuntu自己的apt向来不会安装最新版本(或者较新版本)的工具(当然也不排除我懒得搞镜像源的问题),在经历了配置Nginx失败、npm下载等一年之类的问题之后,我放弃了WordPress和Hexo,并在pg999w的推荐下入坑了Hugo。However,我的Hugo源文件一开始是在嫖来的t123yh的服务器上编辑的,这也带来了一系列问题比如无法本地预览、服务器重置以后必须重新配置而我又没有写文章来记录、以及本人很懒根本就没更新文章。总而言之,作为一个已经进入CS系的韭菜,我决定回到Hexo坑并让这个博客复活。在此感谢WhexyEveneko的帮助。

前排提醒:下列操作均在WSL环境下进行。必要时需sudo

0:建立博客

(先在这里放一个我参考过的链接

Hexo基于Node.js,所以nodejsnpm的安装是必需的。安装好之后执行:

1
npm install -g hexo-cli

这样你就拥有了一个Hexo。然后在你建立的博客目录下面执行:

1
hexo init

就可以在当前目录下面生成一个Hexo环境了。Hexo默认在source/_posts/下面预置了一篇Hello world的文章,要预览当前的博客,执行:

1
hexo s

然后在浏览器访问localhost:4000就好啦。

要创建新文章,执行:

1
hexo new 文章名

Hexo会在source/_posts下面生成一个文章名.md文件。打开编辑即可。

(不会写Markdown的请出门右转

那怎么部署呢?首先确保你安装了git并且有一个GitHub账号,这样我们可以借助GitHub Pages来发布自己的网站。在GitHub上创建名为用户名.github.io,这里“用户名”换成你自己的GitHub用户名。这样一来部署在上面的网页可以直接通过这个网址访问。

然后打开博客的配置文件_config.yml,找到deploy选项,然后如下填写:

1
2
3
4
deploy:
type: git
repo: 仓库完整路径(加上.git)
branch: master

现在万事俱备,只欠东风了!

下面安装Git部署插件,执行:

1
npm install hexo-deployer-git --save

安装好之后再依次执行:

1
2
hexo clean
hexo d -g

输入你的GitHub账号密码,部署完成!

1:Config, config, config

配置自己的博客,大概可以配一辈子……至少我是这么觉得的……

正所谓“博客如此多娇,引无数英雄竞折腰”(不是

反正到现在为止我还是有些一知半解,暂且先在这里随便写一点吧,反正GitHub有备份

还是打开_config.yml,在最开头的Site部分,根据喜好写上标题、作者、描述、语言等等,例如:

1
2
3
4
5
6
7
8
# Site
title: Macromogic Blog
subtitle:
description: Nothing but dump
keywords:
author: T H
language: en
timezone:

然后呢……大概90%的Hexo用户都在使用Next主题吧(没统计过,别打我),在themes/下面把主题git clone下来,如果想要像我一样要用Git管理博客源码,就把主题的.git目录干掉吧。做完之后修改_config.yml如下:

1
theme: next

至此,主题配置完成!……就怪了。

主题里面能搞的事情太多了,鉴于笔者当前水平,还是推荐链接比较稳妥(大雾

2:后排摸雷

这一部分用来记录搭博客时的一些鸡毛蒜皮的问题。

平台迁移导致的Git版本管理问题

前文也提到了,我使用过Hugo来搭建博客,也在用Git来管理博客源码。虽然现在Hugo报废了,但我并不想直接git push -f直接把Hugo的版本历史直接干掉。所幸有一个非常暴力的解决方案:

  • 在刚刚建立Hexo时,将内容全部备份到另一目录,然后该目录清空;
  • git pull把Hugo的源码拉下来,同样清空,但是保留.git目录;
  • 将备份的文件复制回来,推上去,结束。

这样如果想要回滚到Hugo就不是问题啦(当然这种事大概率是不会发生的了)

文章置顶问题

文章置顶参考了这篇文章的做法:

首先安装支持置顶的仓库,并卸载原有的:

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在文章首加上

1
top: true

即可。

光置顶没有标记感觉好像缺了点什么,那就手动加上吧!在themes/next/layout/_macro/post.swig文件中,找到<div class="post meta">标签,插入下列代码:

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=9C9C9C>Top</font>
<span class="post-meta-divider">|</span>
{% endif %}

结束啦!当然这里还有一个多置顶文章顺序的问题我没有测试,有需要的话可能会采取其它做法,到时候再追加到这里。

Categories等页面404问题

一开始看到这个问题傻眼了,结果发现解决方案贼蠢:缺啥补啥。

执行下面命令:

1
2
3
hexo new page categories
hexo new page tags
hexo new page about

然后编辑一下对应的index.md即可。

蠢兮兮。

MathJax渲染问题

对于需要在博客中写数学公式的人而言,MathJax是必需的。在themes/next/_config.yml中作如下修改:

1
2
3
4
5
6
7
math: 
enable: true
per_page: true
mathjax:
enable: true
katex:
enable: true

其中,若per_page设为false,则会对所有文章进行渲染;否则只会渲染文首添加了mathjax: true的文章。

下面出现了两个问题:

LaTeX和Markdown的语法冲突

语法冲突主要体现在\\\{\}等字符的渲染问题、下划线的解释问题(下标或者斜体)等。最后的解决方案是使用Pandoc进行渲染。当然,首先需要保证电脑上安装了pandoc,然后执行:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

这样就将渲染工具换成Pandoc了。

需要注意的是,如此操作之后,必须遵循Pandoc的规定编写Markdown。(手上有Typora还怕这个吗?)

在我的WSL上,安装好hexo-renderer-pandoc之后,会出现另一个问题:就是在渲染过程中会报如下错误:

1
pandoc exited with code 9: pandoc: Unknown extension: smart

这是因为我一开始安装的Pandoc版本为1.9.0,而Pandoc在2.0及以后取消了Smart扩展。因此需要将Pandoc升级到2.0及以上版本(论Ubuntu有多糟心……)。

长公式在移动设备上的支持

由于数学公式的渲染方式,在移动设备查看文章时难免会出现下图的情况:

一条公式捅穿天际,要多丑有多丑……然而貌似也没有非常完美的解决方案。

一种简便点的方案是,使用$$将一整块行内公式拆成若干块,这样有可能会解决公式过长导致的问题,不过方法过于玄学,请看脸酌情使用。

另一种方案是,在文章中增加<div>来定义宽度,具体见这篇文章。本博客没有采用该方法。(反正也没好看到哪去)

免密码推送/部署

既要更新博客源码,又要部署博客,敲命令好麻烦啊。不如写个脚本一键解决吧:

1
2
3
#!/bin/bash

git add -A && git commit -a && git push && hexo clean && hexo d -g

现在我需要输入两次账号密码来完成这个任务了。这样依旧很麻烦,那就继续寻找免输密码的办法吧!

有一个在Git配置中存储账号密码的方法,然而这种存储方式是明文存储,不是很安全。参考链接在这里,我的实现操作如下:

1
2
git config --global credential.helper store
git pull

这样你的账号信息就会存储在~/.git-credentials里面。现在只要不修改密码,推送时就不会再提示输入账号密码了~

然而这个办法不能解决Hexo部署的问题。这个需要修改Hexo的配置。

首先运行:

1
ssh-keygen

连续几个回车,会生成你自己的ssh公钥和密钥。然后登录GitHub,在Settings > SSH and GPG Keys下面将~/.ssh/id_rsa.pub的内容添加到SSH Keys列表中。现在在命令行下执行:

1
ssh -T git@github.com

会显示以下内容:

1
2
Hi <Username>! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

其中<Username>是你的GitHub用户名。看到上述内容说明你的SSH公钥生效了。

现在进入Hexo的_config.yml,找到deploy选项,将链接的https://github.com/替换成git@github.com:,保存。

至此,免密码部署也完成了!

以上就是目前为止搭建Hexo的心得体会。以后会再陆续添加。感谢阅读!