Catalog
  1. 1. Blog
    1. 1.1. Motivation
    2. 1.2. 准备工作
      1. 1.2.1. 下载cmder
      2. 1.2.2. 安装Hexo
    3. 1.3. 基本功能的实现
      1. 1.3.1. 创建网页部署在本地
    4. 1.4. 部署到github
      1. 1.4.1. 设置github
      2. 1.4.2. 安装deployer插件
    5. 1.5. Next主题的配置
      1. 1.5.1. Next主题的安装
      2. 1.5.2. 配置个人信息
      3. 1.5.3. 添加评论系统
      4. 1.5.4. 添加阅读统计
    6. 1.6. 插入图片
    7. 1.7. 公式的支持
      1. 1.7.1. 原因
      2. 1.7.2. 解决方法
      3. 1.7.3. 在主题中开启mathjax开关
      4. 1.7.4. MathJax Support
用Hexo搭建个人博客

Blog

Motivation

(闲扯,无关技术)
从2016年接触github之后,就有做一个自己的博客的想法。
目前市面上的博客平台也还是有很多的,比如新浪博客、豆瓣、知乎专栏、CSDN、博客园、简书….
这些网站各有优劣,而且侧重点不同。有的偏技术,比如CSDN、博客园,有的很文艺,比如豆瓣、新浪博客,有的更加具有严谨性和学术性,比如知乎。我的要求是:

  1. 要可以记录一些自己安装软件、学习软件的教程,所以要对代码高亮支持的很好。
  2. 可以写一下自己的随笔、感悟。
  3. 可以写自己对学术问题的思考,比较浅显的思路那种,也得支持公式的输入。

想来想去还是你自己搭建一个博客吧,这些功能都可以实现,网上搜索了很多搭建个人博客的例子,有用wordpress的,有用python的(sphinx),提到的最多的就是github pages. 一步步按照注册、安装,最开始的jkelly实现,老是报错和失败,就放弃了。

去年过年回去比较闲,又开始捣鼓,生命不息、捣鼓不止。。。。尝试打算用Python,被一篇文章吸引https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/81611904

由于这种方法需要一些python的库,而且编译需要c++14,我不想再笔记本装太多东西,选择放弃。

开始尝试Hexo,还详细比较了Jkelly和Hexo的区别。真的不想再弄jkelly了,不记得耽误了多久的时间依然各种报错。。。Hexo搭建主要借助了知乎上的一篇文章:
https://zhuanlan.zhihu.com/p/26625249
这篇文章讲的很细致,实现基本的功能很快,后来为了捣鼓评论、背景图片,又花了很久。总共花了有三天,慢慢的把网站弄好了,功能也更加齐全,在这里将做的过程以及中间遇到的问题详细列下来,希望对自己、对别人都会有帮助~
(2019 03 01 今天就写到这里吧,慢慢补充)

准备工作

下载cmder

cmder是一款可以在windows系统输入linux命令的软件,我们直接在官网下载安装,
https://cmder.net/
我下载的是含有git的版本,文件较大,下载下来之后,解压放在一个不需要管理员权限的位置,然后将对应的路径添加到环境变量,就可以“win+R”里输入cmder打开了,不过这还不方便,我们希望也可以像ubuntu一样,右键之后在当前文件夹打开,此时需要管理员权限运行cmd,输入

1
Cmder.exe /REGISTER ALL

这样Cmder就配置完成了.

安装Hexo

我们使用Hexo来生成静态网页,为了安装Hexo,我们需要首先安装node.js:
https://nodejs.org/en/download/
下载安装之后,可以在命令行(Win+R然后输入CMD)用

1
2
node -v
npm -v

来查看版本,确定node.js和npm是否安装成功。接下来安装Hexo,同样在命令行里面输入

1
npm install -g hexo-cli

安装好之后,我们就可以找文件夹创建网页了。

基本功能的实现

创建网页部署在本地

有了Hexo,此时选择一个我们打算用来放网站的文件夹,命令行中输入

1
hexo init blog

就会生成一个名字为”blog”的文件夹,打开这个文件夹,我们会发现里面已经有了基本的文件,暂时不管每个文件的功能,在blog文件夹里面输入

1
hexo g

就会生成一个静态的网页,再输入

1
hexo s

就会将静态博客部署再本地了,打开浏览器,输入地址:http://localhost:4000/ 就可以查看预览网页了。此时我们可以尝试插件一篇文章

1
hexo new <文章名字>

此时查看站点文件夹source目录的_post文件夹,可以看见已经多了一个<文章名字>.md的文件,稍微编辑下,就可以浏览器看到了。

部署到github

设置github

上面的静态的网页需要部署到网络上别人才可以访问,我们选用github来托管。首先当然是注册github,注册之后,添加一个Repositories,命名为”<你的github用户名>.github.io”.注册好之后,我们就可以用来托管我们的网页了。前面我们安装的cmder已经安装了git,为了可以使用git,我们还需要初始化git,设置user.name和user.email配置信息,打开cmder,输入

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制,打开自己github的设置,新建new ssh key,名称可以随便写,再key的一栏输入刚才复制的内容保存即可。

安装deployer插件

和此时需要再安装一个插件来deploy我们的网页到github,安装软件

1
npm install hexo-deployer-git --save

安装成功之后,更改blog文件夹里面的_config.yml,里面是我们的配置信息,里面搜索关键字deploy,修改为如下所示

1
2
3
4
deploy:
type: git
repo: git@github.com:<your name>/<your name>.github.io.git
branch: master

这一步非常重要,格式不正确就会出错,比如type是git,不是github,冒号后面还有一个空格等。此时我们就可以将我们的网页发布到github了。输入

1
2
3
hexo clean #清除生成的网页文件
hexo g #生成静态网页
hexo d #发布到github

此时打开对应的网页:https://.github.io 就可以看到已经部署成功了。当然,此时网站还只是默认设置,怎么发布新文章,怎么修改主题,变成我们需要的风格呢?接下来介绍一些花里胡哨的功能的实现~

Next主题的配置

Hexo主题很多,网页上选择非常多,https://hexo.io/themes/ 查阅了很多的文章,大家比较推崇的主题是Next,主要是功能齐全,对于不会太多网页编程知识的人来说,最好了。

Next主题的安装

找一个文件夹下载主题

1
git clone https://github.com/theme-next/hexo-theme-next.git

删除掉里面.github的文件之后,复制到我们博客文件的themes文件夹内,里面已经有了一个默认的主题文件landscape.为了使用next主题,我们到站点目录的配置文件_config.yml里面,知道theme那一行,改为

1
theme: next

此时,再输入命令

1
2
hexo g 
hexo s

就可一查看我们的新的主题文件了。

配置个人信息

为了让博客具有我们的个人风格,我们需要将一些地方改成自己的信息,首先修改站点目录的配置文件

1
2
3
4
5
6
7
8
# Site
title: Knifelees3's blog #博客名字
subtitle: #副标题
description: #类似于个性签名?
keywords: #关键词
author: Zhao Hua #作者名字
language: zh-CN #语言
timezone: #时间轴

然后修改/theme/next/_config.yml文件,里面的内容就更加丰富了,不过都有注释,会点英语的应该都可以看得懂。这篇文章
https://zhuanlan.zhihu.com/p/30836436 也有非常详细的介绍,我就不再赘述。在这里我需要强调的是关于怎么更换头像的问题,貌似新版的语法不一样了,以前的写法

1
avatar: /images/avatar.gif

但是next 7.0版本却是

1
2
avatar:
url: /images/avatar.gif

在这里浪费了好久的时间….

添加评论系统

评论系统本来貌似蛮多的,不过后来都相继的死掉了,我用的是Valine,在这之前需要注册Leancould,验证邮箱和绑定手机号,然后点击创建应用>开发版,建好之后点击进入到应用中,依次点击设置>应用Key得到AppID和AppKey,这是安全域名,设置自己的网页地址即可。由于next最新版本的主题已经自己集成了Valine,只需要在主题配置文件找到Valine字段,改成下面的形式即可(输入刚才的Leancould的appid,appkey):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # i

添加阅读统计

还是使用前面注册的leancloud,插件新的应用,在应用里面新建Class,命名为”Counter”(必须命名为Counter,Next主题才可以识别),然后和前面的一样,在配置文件搜索Leancloud,加入appid,appkey,如下

1
2
3
4
5
6
7
8
9
leancloud_visitors:
enable: true
app_id: your appid
app_key: your appkey
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true
betterPerformance: false

至此我们的网页就设置好了,一些其他的设置都可以参考这篇博文
https://zhuanlan.zhihu.com/p/30836436

插入图片

Markdown插入图片,可以通过将图片一起上传到github,这样图片多了,每次发布都会比较慢,所以插入在线的图片最好,图床很多人推荐七牛云,我没有选择这种方式,而是创建了一个新的Repositories,专门用来存放图片,图片的图床地址可以通过在github下载图片得到。需要注意的是,自己的非常注意图片的命名分类,不然以后多了就会难以找到自己想要的图片了。

以后有新的问题和心得也会在这篇文章里面持续更新。

(2019 12 21 图床补充)

这几日发现网络上免费的图床不是特别的多,常见的七牛云需要服务器备案,其他的一些sm.ms之类,没有尝试过,不清楚会不会突然被封。自己的博客是基于github的,要是github没了,自己的网站也就得换地方了。github的好处是容量没有限制,单个文件夹是1G一下,单个文件100M以下,对于我来说,完全足够了。

咋网络搜索了一圈以后,发现用github做图床的不止我一个,通过学习教程, 知道还可以配合相关的工具,如picgo,实现非常方便的图片上传,我的配置如下图
配置界面

详细的配置说用,可以参见教程

公式的支持

(20200226)
以前没有写过太多公式不太注意,原来hexo默认的makrdown支持有很多问题,会把一些公式的符号给编译成html的标签,比如“_”会变成”<em>“之类的。网络上搜索之后发现,还是很容易的。

在Hexo中渲染MathJax数学公式

原因

Hexo默认使用”hexo-renderer-marked”引擎渲染网页,该引擎会把一些特殊的markdown符号转换为相应的html标签,比如在markdown语法中,下划线’_’代表斜体,会被渲染引擎处理为<em>标签。

因为类Latex格式书写的数学公式下划线 ‘_’ 表示下标,有特殊的含义,如果被强制转换为<em>标签,那么MathJax引擎在渲染数学公式的时候就会出错。例如,$x_i$在开始被渲染的时候,处理为,这样MathJax引擎就认为该公式有语法错误,因为不会渲染。

类似的语义冲突的符号还包括’*’, ‘{‘, ‘}’, ‘\’等。

解决方法

更换Hexo的markdown渲染引擎,hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug,两者比较接近,也比较轻量级。

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

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。

然后,跟换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改:

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

这一步是在原基础上取消了对\,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

1
2
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

重新启动hexo(先clean再generate),问题完美解决。哦,如果不幸还没解决的话,看看是不是还需要在使用的主题中配置mathjax开关。

在主题中开启mathjax开关

如何使用了主题了,别忘了在主题(Theme)中开启mathjax开关,下面以next主题为例,介绍下如何打开mathjax开关。

进入到主题目录,找到_config.yml配置问题,把mathjax默认的false修改为true,具体如下:

MathJax Support

1
2
3
mathjax:
enable: true
per_page: true

别着急,这样还不够,还需要在文章的Front-matter里打开mathjax开关,如下:

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
---

不要嫌麻烦,之所以要在文章头里设置开关,是因为考虑只有在用到公式的页面才加载 Mathjax,这样不需要渲染数学公式的页面的访问速度就不会受到影响了。

Author: Knifelee
Link: https://knifelees3.github.io/2019/03/01/C_%E6%95%99%E7%A8%8B_%E7%94%A8Hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
  • 支付寶

Comment