Venus 的博客

Venus 的博客

彼方,始有荣光在。

从零搭建 Hexo + Github 博客

posted on 2019-01-23 09:33:01 | under 未分类 |

前言

之前有一篇用 $\text{Wordpress}$ 搭建博客的文章,这里给出一种更为方便的搭建方法,只要用 $\text{Github}$ 。

笔者是在 $\text{Windows}$ 的环境下搭建的,其他系统可能不适用。

本文同步发表于笔者的博客:从零搭建 Hexo + Github 博客


感谢 @Happynewyear 的帮忙捉虫,以及 @Sinner 提供的部分程序地址。


优缺点分析

优点

安装简单方便,不需要自己找域名、设置 $\text{DNS}$ ,自带 $\text{Markdown}$ ,在简单的设置之后即可支持 $\LaTeX$ 。同时官网有诸多主题可供挑选。

缺点

搭建在 $\text{Github}$ 的服务器上,访问速度较慢,无法自定义域名,想要对博客进行自定义更改需要使用 $\text{JavaScript}$ ,博客上传比较麻烦。

前置条件

程序

在开始之前,推荐大家提前下载一下之后要用到的程序,如下:

账号

我们只需要一个 $\text{Github}$ 的账号即可。


开始搭建

1. 配置 $\text{Github}$ 的 $\text{SHH}$

首先进入 $\text{Git}$ 程序的源文件夹,打开 git-bash.exe

输入这样一行命令:

ssh-keygen -t rsa -C "Github 注册的邮箱地址"

按下回车,按四次,直到出现一个奇怪的图时,则完成。图可能会不同,属于正常现象。

此时就不用管了,我们进入 $\text{Github}$ ,登录自己的账号,点击右上角头像 $\rightarrow$ $\text{Settings}$ ,

然后点击左侧的 $\text{SSH and GPG keys}$

点击右上方的 $\text{New SSH key}$

此时会让你填两个东西,一个是 $\text{Title}$ ,一个是 $\text{Key}$ ,前者我们随便填一个,后者的话,我们进入 C:\Users\你的用户名\.ssh,用记事本打开一个叫做 id_rsa.pub 的文件,把里面的东西复制到 $\text{Key}$ 里面去即可。

2. 本地运行 $\text{Hexo}$

首先进入 $\text{Hexo}$ 的官网,此时我们会在正中间看见一行代码,这个就是 $\text{Hexo}$ 的安装代码了。

在安装之前,我们要准备一个东西:存储本地博客的文件夹,这个大家按自己的习惯和情况创建一个文件夹就行,比如我创建的文件夹是 E:/blog,这个 blog 文件夹就是存储所有博客要用的文件夹了。

为避免出现不必要的 $\text{Bug}$ ,推荐使用英文的文件夹名字。

在安装时,各位应该按照自己的路径来设置,千万不要完全照搬这里给出的做法。

我们打开 cmdwin+R 键打开运行,输入 cmd),先输入盘,比如我这里是 E:,然后输入 cd blog,然后打入给出的那行命令:npm install hexo-cli -g,等到进度条满,你能够再次输入命令时就完成了。

先别急着关 cmd,之后我们还会用到。

此时我们就要开始创建本地博客了。在 $\text{Hexo}$ 官网首页的下方,有一行代码,hexo init blog,这行代码就是我们创建博客的关键了。此时,如果你没有关掉 cmd,那么它应该是保持着 cd 到你创建的文件夹的状态,如果关掉的话,要重新 E: cd blog 一下。输入官网上的这行代码:hexo init 你的博客名,这个博客名随便起,因为它不会影响你网站上的任何因素,只是会影响之后创建的文件夹的名字。

输入代码,开始创建博客,又需要一些时间。当然,有一些写着 WARN 的指令行出现,也不用紧张,是正常现象。

等待安装完成,需要一些时间。

安装好之后,我们就可以看见之前的 blog 文件夹中,出现了一个名字为你刚刚输入的名字文件夹。

我们 cd 到这个文件夹下,对我来说就是 cd vocaloid,然后就可以安装依赖了,输入 npm install,开始安装。

这个很快就可以完成。

接着我们就可以本地运行了,我们接着在 cmd 中输入 hexo s -p 端口,这个端口不知道有什么限制,推荐输入 5555 或者 4000,很快就可以完成。

此时我们就可以进入 localhost:端口,就可以看到你的 $\text{Hexo}$ 博客啦。

此时如果你在 cmd 中按下 Ctrl+C,再确认终止批处理操作,就可以停止使用这个端口了。

3. 发布至 $\text{Github}$

在上传之前,我们需要做一些配置。首先用 $\text{Sublime}$ 打开文件夹:

打开 _config.yml,准备修改。

进入 $\text{Github}$ ,先新建一个项目,点击右上角的 $+$ 号,选择 New repository,描述自己填,名字使用 你的 Github 用户名.github.io

(因为我这里是一个号重复建,所以我就不用我的用户名演示了。)

(一定要用 你的 Github 用户名.github.io 作为项目名字,二次强调)

为了防止接下来的教程出现一些问题,各位最好把“是否有 README” 这一个选项选上,不然就会和我这里给出的情况不同。

此时就进入了项目的页面,我们点击右侧绿色的 Clone or download 按钮,将它给出的链接复制下来。

回到 $\text{Sublime}$ ,拉到最下面,在 type 后面输入 git所有冒号后面都有空格,不能不加,切记)。

type 这一行下面,加入 repo: ,然后后面填上刚刚复制的地址,往上拉,找到 url:,在 url: 后面输入:http://你的 Github 用户名.github.io

上方有一个 author,这个可以改一下,改成你自己即可。

此时基础配置就差不多完成了,我们回到 cmd,先退出刚才的本地端口,然后安装一个 $\text{Git}$ 插件。

输入 npm install hexo-deployer-git --save ,即可等待其安装了。

此时回到 $\text{Sublime}$ ,在刚刚的 repo 下面再加一行:branch: master,保存。

完成后,我们就可以尝试运行这个博客了。我们在 cmd 中分别输入两行代码,一行是 hexo g,代表本地文件生成,另一行是 hexo d,代表上传。

等待一些时间,即可完成。

此时会让你配置你的 $\text{Github}$ 账号,需要分别输入两行代码(因为我之前配置过了,所以不用再次配置),如下(这两行代码在 cmd 中都有给出):

git config --global user.email "你的邮箱"

git config --global user.name "你的用户名"

引号不要省略掉。配置好后,再次输入 hexo d,此时会弹出一个窗口,让你登录你的 $\text{Github}$ ,大概长这样:

登录就行了。等到上传完成,即可直接访问你的博客了,地址就是你刚才在 $\text{Sublime}$ 中,url: 后面的那个地址。

此时就完成了博客的搭建,但是我们的博客是不支持 $\LaTeX$ 的,所以我们还需要配置。

4. $404$ 的解决方案

我们可能会遇到这样的情况:

这种情况必然是非常令人恼火的,但解决方法非常简单,我们进入刚才创建的项目的页面,点击 $Settings$ ,往下拉,找到一个 Custom domain,输入我们之前在 url: 后面输入的那个域名,即 <用户名>.github.io,然后点击 $\text{Save}$ ,应该就可以访问了。

5. 主题

不同的主题可以在 $\text{Hexo}$ 的 主题 中安装,只需要在 cmdcd 到你的博客文件夹(对我来说是 E:\blog\vocaloid),然后在主题的 $\text{Github}$ 中找到安装的代码,如果没有大家可以自行修改别的代码,将地址和文件夹改一下就行了。

(UPD: 改了可能不能正常使用,建议不要改)

之后我们可以打开 _config.yml,将下面的 theme: 后面的名字改成安装的文件夹的名字,比如 theme: next

6. 博客的标题

打开 _config.yml,可以看到上方有一个 title:,把后面的修改掉就行了。


$\LaTeX$ 设置

我们此时搭建的博客只能使用 $\text{Markdown}$ ,同时因为一些语句的冲突无法使用 $\LaTeX$ ,所以我们需要解决这些冲突,同时安装一个能够使用及渲染 $\LaTeX$ 的语言包。

下面的操作都默认 cd 到了博客文件夹。

1. 修改引擎

首先我们要将原本的渲染引擎替换成能够支持 $\LaTeX$ 的渲染引擎。原版的引擎是 $\text{Marked}$ ,我们将它卸载 ,然后安装一个 $\text{Kramed}$ 引擎。

cd 到博客文件夹后,输入以下代码:

npm uninstall hexo-renderer-marked --save

npm install hexo-renderer-kramed --save

2. 更改配置

用 $\text{Sublime}$ 打开 /node_modules/hexo-renderer-kramed/lib/renderer.js

将
function formatText(text) {
    // Fit kramed's rule:  $$ + \1 + $$ 
    return text.replace(/`\ $(.*?)\$ `/g, ' $$$$$ 1 $$$$ ');
}
改为
function formatText(text) {
    return text;
}

3. 修改数学包

我们要将原来的数学包修改成 $\text{Kramed}$ 适用的数学包,分别输入

npm uninstall hexo-math --save

npm install hexo-renderer-mathjax --save

等待其卸载、安装即可。

4. 更新配置文件

打开 /node_modules/hexo-renderer-mathjax/mathjax.html,将最下面的代码注释掉(即在开始的 < 后面加上 !--,然后在上面加上一行:<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script> 即可。

5. 更改规则

为了解决冲突,我们还需要更改转义规则。首先打开 \node_modules\kramed\lib\rules\inline.js,将 escapeem 这两行注释掉,分别修改为:

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

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

至此,我们完成了 $\LaTeX$ 的前置准备,最后只需要启用即可。

6. 启用

进入进入 博客\_config.yml,加上一行 mathjax: true 即可。如果不行的话,就在每篇博客最前面的信息处加上一行 mathjax: true 即可。


如何上传博客

我们进入 博客名\source\_posts,这里就是放博客的地方。如果要写博客,最好使用一些 $\text{Markdown}$ + $\LaTeX$ 编辑器,比如 $\text{Typora}$ ,在本地写好后,在放博客的地方新建一个文档,文档的名字就决定了你的标识符,也就是这个东西:

文档的后缀名应该是 .md,我们可以创建一个 .txt 文件,然后改后缀就行。用 $\text{Sublime}$ 或者别的编辑器打开后,我们在最上面加上这样一段:

---
title: 你的文章的标题
date: 发布时间
tag: 标签
---

然后再下面直接把博客复制上去就行。

此时我们就写好了一篇博客,但是我们还需要上传,我们打开 cmdcd 到你的博客的位置,然后分别输入三行代码:

hexo clean

hexo g

hexo d

等待一段时间后再回到博客,就可以成功了。

效果见:Here

文章过长?

我们会发现,上传博客后往往会在首页将整篇文章的内容都显示出来,这显然是非常占用空间的,此时我们可以在博客的文档中加入一行代码:<!--more-->,然后重新上传,此时在这行代码后面的内容都不会显示出来了,而是改为了一个“ $\text{Read More}$ ”按键,非常方便。


博客背景

进入 \themes\landscape\source\css\images,有一张叫做 banner.jpg/png 的图(不同主题的位置及名字都可能不同),我们将它替换,文件名和后缀名最好都一样,然后按照上面传博客的方法,hexo cleanhexo ghexo d,等一会儿就上传完成了。


注意:基本上所有修改完成后都要打一遍 hexo cleanhexo ghexo d,忘记打就会导致修改在网站上无法生效。


小结

这里只是给出了一些最基础的内容,各位想要更深的研究可以在网上找一些教程,也可以套用现有的主题,难度应该不会很大(当然,如果涉及 $\text{JS}$ 那也不简单了【笑】)。

参考资料:1 2 3