如何从无到有搭建属于你的hexo博客

文如标题,如何利用从无到有搭建属于你的hexo博客,完全面向小白的喂饭式指南。

其实这类入门指南网上一搜一大把,这就是我一开始没有边装边记录的原因(可能就跟别的文章完全一致了),现在用了一段hexo以后顺带整合一些技巧,这篇Blog最重要的原因还是给网络部的小伙伴们备课吧。

一边备课一边水Blog,计划通hhhh。

2021.03亲测有效,环境是VMware+win10(ver. 20H2),因为物理机上已经装过了,所以用虚拟机重新走一遍流程。

安利一下自己的hexo博客:r3ver5e4fuuuuun | c10udlnk_Log

顺便,如果有用hexo搭建博客的小伙伴想生成自己博客的年度报告,指路:c10udlnk/hexo-T1meM4chine: 为你的hexo博客生成年度数据报告!,目前还只是一个雏形,没灵感不太想往后搞(咕咕咕),等下次心血来潮的时候再把TO DO给填了吧。以及,测试样本太少估计会有一大堆bug(。

本文参考链接:

P.S. 本文算是整合型教程,某些内容会跟参考链接一模一样(不过图片是自截图)。

P.S.S 本文只讲步骤不讲原理,原理请看课程ppt。

前期准备

环境搭建

可以在powershell中先用以下命令检验是否安装相应环境

1
2
3
$ git --version
$ node --version
$ npm --version

git

打开Git官网 -> Downloads -> Windows,稍等片刻后会开始下载。

文件下载完成后,双击打开下载的Git-2.30.1-64-bit.exe

然后一路next,到这一步的时候改一下选项,从vim改到notepad(记事本):

然后一路Next下去就好,等待安装完成。

然后在powershell中输入git --version会看到:

1
2
$ git --version
git version 2.30.1.windows.1

只要能看到版本号即为安装成功。

Node.js

打开Node.js官网->下载

同样是双击node-v14.16.0-x64.msi文件后一路next,到这里打个勾。

然后等待安装完成。

然后在powershell中输入node --versionnpm --version会看到:

1
2
3
4
$ node --version
v14.16.0
$ npm --version
6.14.11

只要能看到版本号即为安装成功。

GitHub相关

注册GitHub

不会吧不会吧居然还有人没有GitHub账号吗(误

真的没有的话可以按照这个GitHub从注册到使用 - evilsnake - 博客园来注册,走到建库之前那步就好。

创建Github Pages仓库

这里因为@c10udlnk的账号下已经有这样的仓库了,故以下用小号@Glowstone-jojo进行演示。

(算法号已经沦落为小号了

点右上角的“+” -> New repository来新建仓库。

连接GitHub

在桌面右键 -> Git Bash Here

然后在小黑框里输入:

1
2
$ git config --global user.name "用户名"
$ git config --global user.email "邮箱"

(这里的用户名和邮箱不一定是你注册Github的用户名和邮箱,随意起就好)。

输入以下语句查看设置是否成功:

1
2
$ git config user.name
$ git config user.email

输入以下语句生成SSH key:

1
$ ssh-keygen -t rsa -C "邮箱"

然后连敲三次回车(全部设置默认)

会出现这样的文字:

打开蓝色框框起来的路径

用记事本打开id_rsa.pub,并复制里面的内容

在Github中转入Settings界面,SSH and GPG keys -> New SSH key

按如下填写

然后点Add SSH key,稍等片刻就能看到。

说明添加成功。

在Git Bash中输入以下语句来验证:

1
$ ssh -T git@github.com

并在交互时打上yes,会看到

即为连接成功。

安装hexo

创建一个文件夹以存放你的博客数据,名字随意,在这里用shift+右键,点击“在此处打开PowerShell”。

输入以下语句来在全局下安装hexo。

1
$ npm install -g hexo-cli

先输入

1
$ Set-ExecutionPolicy -Scope CurrentUser

在交互中分别输入remotesignedy来更改执行策略,不然无法执行脚本文件。

然后输入以下语句对此文件夹进行hexo的初始化

1
2
$ hexo init
$ npm install

然后依次使用以下语句进行测试

1
2
$ hexo g
$ hexo s

在浏览器中打开http://localhost:4000即可看到:

部署到GitHub Pages

输入

1
$ npm install hexo-deployer-git --save

来安装hexo-deployer-git。

然后修改_config.yml末尾的Deployment部分

改为

1
2
3
4
deploy:
type: git
repository: git@github.com:GitHub用户名/GitHub用户名.github.io.git
branch: main

例如我的改为:

P.S. 这里的main是我们的默认分支名。

然后在powershell中输入

1
$ hexo d

最后浏览器访问https://用户名.github.io即可看到博客页面。

安装一款markdown编辑器

这里我推荐Typora,点击Download,选择平台版本(一般是Windows 64位)即可下载。

别问,问就是这是我见过最好的md编辑器了

双击typora-setup-x64.exe开始安装,也是一路next就好。

开始使用

新建文章

输入以下语句新建文章

1
$ hexo new "文章url"

注意,这里双引号内是文章的url,建议用简洁直观+容易解析+一般url(如使用英文和-连字符)的字符串,不然如果里面用到了&之类的保留字(?)就会引起某些奇怪的bug(比如某度sitemap抓不到)。

e.g. 这篇文章的url在蓝色框处,红色框处为文章标题,将在下一part提到。

比如我输入hexo new "testBlog",就会在这里看到testBlog.md

双击打开即可编辑。

在编辑完成后,使用

1
hexo clean ; hexo g -d

来进行博客的全局更新。

yml front

打开testBlog.md可以看到:

其中蓝框处就是我这里所说的yml front(yaml格式)。

1
2
3
title: testBlog #上一part提到的文章标题
date: 2021-03-13 12:32:25 #日期
tags: #使用tag标记文章,用“ - tag”来标注

我们可以通过把title处的testBlog改成任意文章标题,就像上一part中的红框处。

需要注意的是,yaml中语法结构为key: value,冒号后面一定要加一个空格!不然该行yaml无效!

使用<!-- more -->来手动分隔摘要和内容,例如:

那么最后生成的结果为:

Markdown和LaTeX

蓝色框下面的就是文章内容。

.md文件是通过Markdown语法来写文章的,用起来十分方便,网上有很多这样的教程,比如->Markdown 教程 | 菜鸟教程

常用的大概是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
_斜体_

**加粗**

[url标题](www.xxxx.com)

![图片](图片地址)

`单行代码`

```python
多行代码
​```

$公式,比如x_i^2+y_i=\frac{\partial X}{\partial u}$

各级标题:
# 一级标题
## 二级标题
### 三级标题
...

优雅地在博客中插入图片

1
![图片](图片地址)

尽管Markdown可以这么加入图片,但图片地址只能填图链地址,万一图床平台挂了又得补就十分麻烦。

联想到博客中的页面实际上也是存在一个仓库中,那么我们可以通过用本地的相对地址来添加图片的方法,这里感谢Hexo博客写作与图片处理的经验 - Cocowool - 博客园提供的思路,踩坑无数以后看到这篇真的完美解决问题TvT。

修改hexo配置文件_config.yml,让hexo在new的时候自动生成一个跟url相同的文件夹:

1
post_asset_folder: true

可以看到新new的文章就有了这个文件夹:

然后在Typora的偏好设置 -> 图像里调整,把插入图片时的选项设置为“复制到指定路径”,默认就是跟文件名同名的文件夹中,刚好适配asset folder。

并且保证这里前三个勾都打上了。

然后在powershell中用以下语句安装插件hexo-image-link

1
$ npm install hexo-image-link --save

配置完成,开始测试。

在测试文章中粘贴图片进行测试:

成果:

进阶设置

关于进阶设置,这里不再赘述,直接指路前人的教程。

总之祝大家能愉快地使用自己搭建的博客来记录啦~ 0v0

文章作者: c10udlnk
文章链接: https://c10udlnk.top/p/blogsFor-Enjoying-hexo/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 c10udlnk_Log