建立一个免费的、易于维护的个人博客以用于自己或者中小组织的信息发布、生活记录等事务，是再好不过的选择。下面我会简单地讲一讲在2019年建立一个免费的个人博客所需的步骤和后期写博文时的一些技巧。

建立博客

在这里，我暂且假定读者们没有自己的托管服务器和域名，完全从一个计算机小白的角度来讲一讲怎么简单地建立一个简单的静态博客。虽然有些步骤是可以调换顺序的，但我还是推荐按照下面的步骤进行操作。

必备软件的安装

为了方便地构建我们的博客，这里使用了 hexo 来构建页面。而为了使用 hexo 则必须安装 git 和 node.js 。

在安装好 git 和 node.js 之后，打开 git bash ，输入以下命令来安装 hexo ：

1	npm install hexo-cli -g

随后，在你希望存放你的博客网站的文件的地方新建一个文件夹，（在Windows中）右键选择 git bash here ，随后在跳出来的终端中输入：

hexo init blog
cd blog
npm install
hexo server

其中 blog 只是一个文件夹的名字，你也可以取其他的名字（当然后面需要记住这个名字）。

利用 GitHub Pages 服务

GitHub 为每一位用户提供了 GitHub Pages 服务。它完全免费，而且易于使用，唯一的缺点在于 GitHub Pages 的页面在国内加载起来普遍较慢。

为了克服这个缺陷，我们也可以使用国内的代码托管厂家码云提供的码云Pages，它使用起来和 GitHub Pages 几乎没有差别。

为了使用 GitHub Pages 服务，你首先应当注册一个 GitHub 账号。注册时记得记住自己用于注册的邮箱和用户名。

注册完成后，跟随官网的引导，新建一个仓库。仓库名必须用以下格式写： *用户名*.github.io

仓库创建成功不会立即生效，可能需要过大概10-30分钟，或者更久。

配置 git

打开 git bash ，并在终端中输入以下内容：

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

注意在你的用户名和邮箱外侧加上英文的引号""。

完成后，我们开始配置ssh。

首先在 git bash 中输入以下命令检查本机中已经有的ssh密钥：

1	ls -al ~/.ssh

如果没有，则生成新的ssh key：

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

你可以选择设定一个密码，如果不想要密码的话也可以直接按三次回车来完成设置。

随后，使用下面的命令来在终端中打开刚刚生成的ssh key：

1	cat ~/.ssh/id_rsa.pub

复制这个文件的内容到剪贴板，随后打开你的GitHub 中的 Settings -> SSH and GPG keys -> New SSH key

随后黏贴进去。

接下来回到 git bash 中测试 GitHub 的公钥设置是否成功。

在 git bash 中精确地输入下列内容（git@github.com 是不能更改的！）：

1	ssh -T git@github.com

对跳出来的问题回答“yes”，随后回车。出现以下结果即为成功：

1	You've successfully authenticated, but GitHub does not provide shell access.

远程部署

接下来我们要让 hexo 学会将生成的博客文件部署到远端的服务器上。

打开你的 GitHub Pages 对应的仓库，找到“Clone or download”，随后将https或者ssh的url复制到剪贴板上。

随后打开你的hexo文件夹（如果你完全按照本博文的引导进行操作，那这个文件夹的名字应该是blog）。在这个文件夹（而非子文件夹中）中找到并打开_config.yml，随后找到deploy这个关键字（一般在文档末尾，但是不一定），把他修改成下面的样子：

deploy:
  type: git
  repo: **直接黏贴，例如https://github.com/wunsiang/wunsiang.github.io.git**
  branch: master

要注意，英文冒号后面要有一个空格，不然 hexo 无法工作。

更改完成后，在你的hexo安装目录下打开 git bash 并输入以下内容：

1	npm install hexo-deployer-git --save

在确认一切无误后，同样在 git bash 中输入

hexo g -d

就可以将本地的内容远程部署到你的 GitHub Pages 上了！

开始使用博客

那么，和技术相关的问题基本上都解决了（要是大家遇到了问题，可以以“hexo”和“GitHub Pages”为关键词到网上寻找相应的解决方案）。

接下来的问题就是如何开始写我们的博文了！

为了愉快优雅地写博客，我们还需要学会一些技能。比如如何新建一个博文，如何改变博客的外观等。

在我们用简单易学的 Markdown 写好了我们的博文后，我们使用的 hexo 可以自动将 .md 文件转换为 HTML 文件。

如何新建页面和博文

在 hexo 中，新建博文的方法非常简单。你可以用下面的命令来新建博文和页面：

1	hexo new [layout] <title>

其中的 layout 也被称为布局。Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
`post`	`source/_posts`
`page`	`source`
`draft`	`source/_drafts`

学会用 Markdown 写作

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，在 2004 由约翰·格鲁伯（英语：John Gruber）创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。用 Markdown 编写的文档后缀为 .md, .markdown。

进行markdown写作非常简单易学。下面简单介绍 Markdown 中常用的语法。如果大家需要专业的指导请参考其官方语法指导。

段落和换行

一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进。

加粗、倾斜

要加粗的文字左右分别用两个*号包起来
要倾斜的文字左右分别用一个*号包起来
要倾斜和加粗的文字左右分别用三个*号包起来
要加删除线的文字左右分别用两个~~号包起来

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

标题

markdown中标题的输入方法有两种，这里推荐类 Atx 形式。

在行首插入 1 到 6 个 # ，对应到 1 到 6 级的标题，例如：

# 这是 一级标题

## 这是 二级标题

###### 这是 三级标题

列表

Markdown 支持有序列表和无序列表。

无序列表使用星号*、加号+或是减号-作为列表标记：

1
2
3

*   Red
*   Green
*   Blue

有序列表则使用数字接着一个英文句点：

1
2
3

1.  Bird
2.  McHale
3.  Parish

引用

Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。如果你还熟悉在 email 信件中的引言部分，你就知道怎么在 Markdown 文件中建立一个区块引用，那会看起来像是你自己先断好行，然后在每行的最前面加上 > ，Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

 This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

超链接

Markdown 支持两种形式的链接语法：行内式和参考式两种形式。

不管是哪一种，链接文字都是用 [方括号] 来标记。

要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

1
2
3

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

插入图片

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式：行内式和参考式。

行内式的图片语法看起来像是：

1
2
3

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

如果你希望插入自己的照片而非在线的照片，你应该使用图床。图床允许你上传自己的照片并获得该图片的直链。

推荐的图床为路过图床。请注意上传到图床上的图片有一定的大小限制，一般在 5 MB 左右。

路过图床允许你在上传完图片之后直接复制markdown代码，非常节省时间。并且该图床有 cdn 加速，加载速度比较快。

学会使用一些 hexo 组件

hexo 除了支持标准的 Markdown 语法，也为了更好地生成网页，支持在 Markdown 中加入一些非标准的语法，来达到更好的效果。

博文的“扉页”

在 hexo 的 .md 文件开头，有以---分割的一块区域，叫做“Front-Matter”，这个区域用于记载博文的标题、写作日期和分类等信息。形如下面的形式：

---
title: Hello World
date: 2019/7/23 14:16:44
categories: 
- Maintaince
---

在 Front-Matter 中预先定义好的参数有以下这些：

参数	描述	默认值
layout	布局
title	标题
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址
keywords	仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。例如：

categories:
- Homework
tags:
- Chemistry
- Synthesis

引用

Hexo 中定义了更好用更高等的引用块。通式是这样的：

1
2
3

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

例如，当你引用网络上的文章：

1
2
3

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

代码块

同样的，Hexo 也定义了更高级的代码块：

1
2
3

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

例如：

{% codeblock 希尔排序 lang:c https://www.runoob.com/cprogramming/c-sort-algorithm.html C 排序算法 %}
void shell_sort(int arr[], int len) {
    int gap, i, j;
    int temp;
    for (gap = len >> 1; gap > 0; gap = gap >> 1)
        for (i = gap; i < len; i++) {
            temp = arr[i];
            for (j = i - gap; j >= 0 && arr[j] > temp; j -= gap)
                arr[j + gap] = arr[j];
            arr[j + gap] = temp;
        }
}
{% endcodeblock %}

希尔排序C 排序算法

void shell_sort(int arr[], int len) {
    int gap, i, j;
    int temp;
    for (gap = len >> 1; gap > 0; gap = gap >> 1)
        for (i = gap; i < len; i++) {
            temp = arr[i];
            for (j = i - gap; j >= 0 && arr[j] > temp; j -= gap)
                arr[j + gap] = arr[j];
            arr[j + gap] = temp;
        }
}

如何美化你的博客

为了美化你的博客，你可能想更换一下主题，在文章里插入一些图片和视频等多媒体。接下来我们来看看如何做到这些。

更换主题

Hexo 有非常多现成的主题，可以让你不费吹灰之力就将自己的博客变得非常漂亮。我们该如何获取主题呢？

接下来我们以更换为NexT为例子，教大家如何切换主题。

首先我们需要安装主题。

第一种方式，是找到你的站点文件夹，并在该位置呼出 git bash ，随后输入：

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

第二种方式是前往 NexT 主题的发布页面，随后下载最新的稳定版，并解压到你的站点文件夹的themes子文件夹中，最后将解压后的文件夹名称（hexo-theme-next-5.1.4）更改为 next。

随后我们找到站点配置文件_config.yml，找到theme字段，并将其更改为：

1	theme: next

即可成功启用 NexT 主题。我们也可以对主题进行更进一步的自定义化，此处不详述，可参见NexT入门指南。

插入多媒体

为了让我们的博客更可读，我们还需要学会在博客中插入图片和视频的方法。

插入图片的方法和使用图床的技巧之前已经讲过了，此处不再赘述。

在博客中比较优雅地插入视频需要使用 HTML 中的 iframe 控件。

下面以插入一个 bilibili 视频为例。

在网页端进入视频的播放页后，大家可以在分享选项中找到相应的嵌入代码：

1	<iframe src="//player.bilibili.com/player.html?aid=63514495&cid=110293782&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

但是你会发现直接使用上面的代码生成的网页在移动端的体验很差。把上面那段代码中的 src="..."中间的地址复制下来，黏贴到下面的代码中覆盖 src="..." 中间的内容，就可以得到体验较好的视频嵌入体验。

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="//player.bilibili.com/player.html?aid=63511105&cid=110287165&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"> </iframe></div>

分享文件

如果大家想分享文件，当然也可以采用国内的各种网盘。但是使用国内的网盘需要你的读者们注册相应的账号，而且也有非常严重的限速问题。这个时候我们就可以使用 hostr.co 等文件床，来让读者们能直接从你博客中的链接下载文件。你可以在它的官网注册账号，虽然免费账号只能上传最大 20 MB 的文件，但是对于常规文件的分享也是非常够用了。

LaTeX, Gaussian, ORCA and More...

如何优雅地建立个人博客