利用Hexo+Github Page从零开始搭建自己的博客(二)——开始写作

发表于 | 分类于

创建你的第一篇文章

新建文章

使用Hexo框架新建文章非常简单, 只需要在myBlog目录下执行以下命令即可

1
hexo new post '第一篇文章'

执行完成之后, 就可以在myBlog\source\_posts目录下找到"第一篇文章.md"文件.

md是markdown的缩写, 下一节会介绍什么是markdown.

markdown编辑器有很多, 我自己使用的是typora, 这里是typora的官网.

Hexo中的布局

刚刚提到的post是Hexo中布局(Layout)的一种. Hexo默认的布局有三种:post, page和draft, 分别代表了文章, 页面和草稿, 它们会被保存到不同的路径.

布局 路径
post source\\_posts
page source
draft source\\_drafts

比较常用的有文章post和草稿draft. 新建post的方法在上面也提到过了, 即

1
hexo new post '文章名'

新建草稿则是

1
hexo new draft '文章名'

如果想将草稿移动到source/_posts文件夹, 则可以使用publish命令

1
hexo publish post '文章名'

写好文章(post)之后, 需要在终端中进行生成(hexo g)和部署(). 不过在生成和部署之前, 最好使用clean命令清除缓存

1
2
hexo clean
hexo g && hexo d

分类与标签

新建的hexo文章会有一个头文件

1
2
title: xxx
date: yyyy-dd-mm

可以在下面添加categories字段来说明分类, tags字段说明标签

如

1
2
3
4
5
6
7
title: xxx
date: yyyy-dd-mm
categories:
- 分类
tags:
- 标签1
- 标签2

Markdown

Hexo中默认生成的新文章是Markdown格式的. Markdown是一种轻量级的标记语言, 相对于HTML, Latex等复杂的语法而言, Markdown的语法规则更为简单.

下面做一些简单的介绍, 详细的可以看John Gguber的博客以及其中译版.

标题

在Markdown中, 只要在文本前面加上#号, 并用空格隔开, 总共有六级标题. 例如

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

在Typora中, 输入Markdown语法之后会立刻渲染, 显示如下.

image-20200705180524567

列表

无序列表使用-或者*

1
2
3
- 项目1
- 项目2
- 项目3
  • 项目1
  • 项目2
  • 项目3

有序列表使用数字+.

1
2
3
1. 项目1
2. 项目2
3. 项目3
  1. 项目1
  2. 项目2
  3. 项目3

插入超链接

插入超链接的方式为

1
[链接名称](超链接)

例如:

1
[百度](http://www.baidu.com)

效果为: 百度

插入图片

插入图片的方式为

1
![图片名称](图片路径)

其中图片路径可以是本地的相对路径或者绝对路径, 也可以是网络上的路径. 一般在部署博客时, 会使用图床来存放图片, 然后在博客上使用网络路径引用图片. 这样做的好处是部署博客时不需要上传图片, 加快部署速度.

具体的图床配置下一小节会提到.

引用

1
> 引用内容

引用内容

可以嵌套使用引用

引用内容

引用引用内容

引用引用引用内容

禁止套娃

粗体与斜体

1
2
**粗体**
*斜体*

粗体

斜体

表格

1
2
3
4
5
| 项目1 | 项目2 | 项目3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |
| 内容7 | 内容8 | 内容9 |
项目1 项目2 项目3
内容1 内容2 内容3
内容4 内容5 内容6
内容7 内容8 内容9

代码块

行内代码块

行内代码块使用两个` 将代码包裹起来, 比如

1
对变量`i`进行自增

效果如下:

对变量i进行自增

行间代码块

行间代码块使用一对```来将代码包裹起来. 在第一个```后面可以标记上所使用的语言, 比如:

1
2
3
4
5
​```Java
public static void main(String args[]) {
	System.out.println("Hello, fucking world!");
}
​
1
2
3
4
5

```Java
public static void main(String args[]) {
    System.out.println("Hello, fucking world!");
}

分割线

连续输入三个*号就是分割线

1
2
3
4
5
***
分割线
***
分割线
***

分割线

分割线

图床配置

图床是指存储图片的服务器, 使用图床的好处是可以减轻博客服务器的负担, 加快图片打开的速度.

免费图床

可以使用路过图床等免费图床上传图片. 在网站注册完成之后, 就可以上传图片了. 上传完成之后, 直接将Markdown的链接放到自己的Markdown文件就可以了.

image-20200706152534392

Typora图片自动上传

一旦文章里面用到的图片很多时, 一张张上传到图床并手动复制到Markdown文件里面是一件很麻烦的事情. 在Windows平台上可以通过Typora搭配PicGo来实现自动上传. 也是就说, 只要把图片复制到Typora上, 就可以实现自动上传到图床了.

安装Typora和PicGo

  • Typora需要到官网下载安装, 需要0.9.86版本以上
  • PicGo在对应的PicGorelease页面下载安装, 需要2.2.2版本以上

PicGo默认支持的图床包括了SM.MS图床等, 如图所示.

image-20200706155636562

SM.MS图床和GitHub图床使用是免费的, 但是SM.MS图床稳定性较差, Github图床访问需翻墙.

略, 待补充.

绑定域名

略, 待补充.

更换主题

Hexo支持更换主题, 可以在官方的主题市场中下载自己喜欢的主题.

下面以NexT主题为例, 介绍如何安装主题.

站点配置文件和主题配置文件

在配置主题前, 要先了解什么是站点配置文件和主题配置文件.

在myBlog目录下, 也就是站点根目录下的_config.yml文件称作站点配置文件.

在myBlog\themes\主题名\目录下的的_config.yml文件称作主题配置文件

下载NexT主题

首先在此链接中下载Hexo的5.1.2版本.

然后将压缩包解压, 将解压后的文件名(hexo-theme-next-5.1.2)改为next. 并将整个文件夹复制到myBlog\themes目录下面.

image-20200706170951254

主题配置

打开站点配置文件, 找到theme字段, 将值更改为next

image-20200706171219355

NexT主题有三种Scheme:

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新
  • Gemini - 目前本网站使用的Scheme.

如果要切换Scheme的话, 需要打开主题配置文件, 找到Scheme字段, 在scheme:后面输入你喜欢的Scheme名称即可.

image-20200706173335341

设置语言

在站点配置文件中, 将language设置成你所需要的语言, 一般设置为简体中文.

1
language: zh-Hans

如果需要其他更详细的配置, 可以参照官方文档