0成本搭建专属博客

Posted on | Post modified: | In >
Words count in article: 4.3k word(s) | Reading time ≈ 16 min

本文主要讲述如何用最低的成本构建一个属于自己的博客网站。

What & Why

什么是博客

博客（英语：Blog）是一种在线日记型式的个人网站，借由张帖子章、图片或视频来记录生活、抒发情感或分享信息。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

许多博客作者专注评论特定的课题或新闻，其他则作为个人日记。一个典型的博客结合了文字、图像、其他博客或网站的超链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，也有一些博客专注艺术、摄影、视频、音乐、播客等各种主题。博客是社交媒体网络的一部分。

image.png

博客模板，图片来自网络

为什么要写博客

写博客有诸多好处，包括但不限于：

  • 提高自己的文字水平
  • 锻炼自己的思维能力
  • 及时记录知识，避免遗忘
  • 回顾自己的学习经历/心路历程
  • 看到自己的进步

为什么要搭建自己的博客网站

当然可以选择现成的博客网站，如果你能做到这些：

  • 不在乎网站随时可能关停
  • 不在乎自己的数据安全
  • 不在乎自己的博文随时可能被修改和限制
  • 不需要自由自在地设计和定制自己的博客

如果做不到的话，那么请搭建自己的博客网站。

Roadmap

自己搭建博客的方法有很多，比如自己写一套前后端，不过这样的话，不仅有较高的技术门槛，而且还费时费力。所以我们推荐使用成熟的博客框架来构建我们的博客网站。

本文将使用 Hexo 博客框架来构建博客，它的特点是简洁、快速。相对于 WordPress 等传统框架来说，Hexo 拥有更高的自由度和更酷的主题；Hexo 的另一个优点是它是一个纯静态框架，能够实现0成本部署到互联网，而 WordPress 等框架因为具备后端功能，无法通过静态文件部署，想要通过互联网访问就必须部署在自己的服务器上，需要增加一定的成本。

当然，纯静态框架也是有一些局限性的，例如实现一些动态功能就必须通过外部服务，而 WordPress 这类同时具备前后端的框架则可以独立实现动态功能。

为了让互联网能够访问我们的博客，我们需要把 Hexo 产生的静态文件发布到网上。GitHub 提供静态页面（Pages）功能，正好可以满足我们的需求，并且它是完全免费的，我们无需支付服务器和域名费用。

Hexo 博客网站也完全可以部署到自己的服务器上，它会比 WordPress 的资源占用小得多，本文的方案主要描述在 GitHub Pages 上部署 Hexo 博客网站。

Preparation

在着手搭建博客之前，需要准备以下环境&技术。

  • 一台电脑，PC/Mac 均可。
  • 不算太差的网络环境。
  • Markdown 基本语法知识，为了后面的博客写作使用。
  • 一个 GitHub 账号。

如果你还同时具备一定的前端知识，更可以自由改造属于自己的 Hexo 博客。

Let’s Start

环境部署

为了搭建我们的博客，需要在我们的个人电脑上安装必要的前置软件，包括 Git、Node.js 等。

安装和配置 Git

如果电脑上已经安装和配置过 Git 及 GitHub ，可以跳过本节。

Windows 环境下安装 Git

在 Windows 环境下，推荐直接在 Git 官网 下载安装程序并安装 Git 。

MacOS 环境下安装 Git

在 MacOS 环境下，推荐使用 Homebrew 包管理工具安装 Git ，命令参考如下：

1
$ brew install git

配置 Git

在首次安装 Git 后，需要对其进行配置，添加用户的名称与邮箱。

1
2
3
$ git config --global user.name "Your Name"

$ git config --global user.email "your@mail.address"

另外为了让我们本地安装的 Git 能够顺利提交代码到 GitHub 上，还需要生成密钥。

目前使用 GitHub 账号密码也可以提交，但是使用密钥更为安全，且 GitHub 会在未来只允许密钥提交。

1
$ ssh-keygen -t rsa -C "your@mail.address"

执行上面这个命令，会产生一对密钥，路径在上面命令的结果中可以查看，其中公钥文件是需要上传 GitHub 的，其文件名可能为 id_rsa.pub。

配置 GitHub

访问 GitHub 网站，并登录你的账号，如果没有账号可以注册一个。

依次点击右上角【头像】-【Settings】-【SSH and GPG keys】-【SSH keys】-【New SSH key】。

image.png

在 Title 中填上任意名字，并在 Key 中将上一步的公钥文件中的内容复制粘贴进去，然后点击【Add SSH key】。

此时本地安装的 Git 应该已经可以顺利提交代码到你的 GitHub 账号了。

安装 Node.js

如果电脑上已经安装和配置过 Node.js ，可以跳过本节。

Windows 环境下安装 Node.js

推荐使用 nvs 来安装 Node.js 。

首先下载并安装 nvs 。

打开 PowerShell ，执行以下命令来使用淘宝源安装LTS版本的 Node.js ：

1
2
3
4
5
6
7
> nvs remote add taobao https://npm.taobao.org/mirrors/node/

> nvs add taobao/lts

> nvs use taobao/lts

> nvs link taobao/lts

MacOS 环境下安装 Node.js

推荐使用 Homebrew 来安装 Node.js 。

1
$ brew install node

安装和配置 Hexo

安装 Hexo

在命令行工具中，执行以下命令来安装 Hexo ：

1
$ npm install -g hexo-cli

初始化 Hexo 项目

打开命令行工具并进入想要作为博客目录的父目录中，执行以下命令，初始化 Hexo 项目目录。

1
2
3
4
5
$ npx hexo init <folder_name>

$ cd <folder_name>

$ npm install

对 Hexo 项目进行基本配置

Hexo 项目目录下的_config.yml文件是 Hexo 的站点配置文件，一些常规配置项都在此文件中进行配置。

编辑该文件，我们来进行一些基础配置。

修改站点名称

修改站点配置文件的title配置项，例如修改为：

1
title: Just Another Blog

此时网站名称将修改为Just Another Blog。

修改作者名称

修改站点配置文件的author配置项，例如修改为：

1
author: Yuki Izumi

此时网站作者将修改为Yuki Izumi。

启动本地 Hexo Server

执行以下命令可以启动本地服务。

1
2
3
4
5
$ hexo clean

$ hexo g

$ hexo s

默认的本地访问地址是http://localhost:4000。

image.png

上面是最初始的博客页面，里面会有一篇自带的 Hello World 博文。

编写博文

创建新的博文文件

在 Hexo 项目目录中，执行以下命令可以创建一篇新的博文文件。

1
$ hexo new [layout] <title>

其中，layout代表新建的文件的布局名称，默认为post，即博文；也可以选择draft，即草稿，草稿默认不会显示在 Hexo 页面中，在执行过hexo publish命令后会将草稿发布为博文。title为博文的标题。例如：

1
$ hexo new post "My First Blog Post"

这个命令会在 Hexo 项目目录的source/_post/路径下新建一个My First Blog Post.md文件，这个文件即为博文文件。

编辑 Front-matter

新的博文文件创建成功后，我们使用文本编辑器打开它，会发现里面并不是空的。

image.png

被---前后包裹的这段信息，叫做Front-matter，可以理解为这篇 Hexo 博文的元数据，如上图所示，新创建的博文文件的Front-matter中，已经包含了文章标题、发布时间和一个空的标签这三个字段。

我们可以自由地编辑Front-matter，使其满足我们的需求。根据官方文档，预定义的Front-matter字段如下图所示。

image.png

例如我们在Front-matter中加上标签和分类信息。

1
2
3
4
5
6
---
title: My First Blog Post
date: 2022-04-12 16:12:30
tags: Casual
category: Articles
---

编写正文

在默认情况下，我们可以使用Markdown语法来编写我们的博文正文。正文直接在Front-matter下方编写即可。

image.png

将 Hexo 项目部署到 GitHub Pages

安装 hexo-deployer-git 插件

在 Hexo 项目目录中，执行以下命令来安装必要的插件。

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

创建 GitHub Repo

在 GitHub 首页登录你的账号，然后点击右上方的+，再点击New repository。

在Repository name中输入<你的GitHub用户名>.github.io，其他保持不变即可，再点击Create repository即可完成 Repo 的创建。

image.png

编辑 Hexo 站点配置

打开 Hexo 项目的站点配置文件，并修改url配置项。

1
url: https://<你的GitHub用户名>.github.io

然后再编辑deploy配置项及其子项。

1
2
3
deploy:
  type: git
  repo: https://github.com/<你的GitHub用户名>/<你的GitHub用户名>.github.io

部署项目

在 Hexo 项目目录中，执行以下命令来将项目部署到 GitHub Pages。

1
2
3
$ hexo clean

$ hexo deploy

后续有新的博文更新或者是配置变更，都通过重复本步骤来部署到 GitHub Pages 中。

启用 GitHub Pages 服务

在 GitHub 上打开<你的GitHub用户名>.github.io项目，点击Settings，再点击Pages，选择master分支后点击Save。

image.png

启用配置后，可能需要稍等一段时间（半小时左右），GitHub 才会刷新CDN缓存。

访问页面

访问https://<你的GitHub用户名>.github.io/即可在公网上查看我们的博客页面。

image.png

Hexo 页面介绍

以下主要描述在默认配置下的 Hexo 页面。

Hexo 页面的左上方是导航菜单栏，默认情况下配置了Home和Archives两个菜单，分别导航至主页面和所有博文页面。

image.png

Hexo 页面的右上方是RSS订阅按钮及搜索按钮。

image.png

Hexo 页面主体部分是倒叙排列的博文，以及右侧的分类、标签等页面导航。

image.png

以上即为默认配置下的 Hexo 页面，已经实现了一个简单的博客网站的基本功能。

Advanced Configurations

虽然默认配置的 Hexo 已经实现了最基本的功能，但是看起来还是不够 cool ，所以我们还需要做进一步配置来丰富和完善我们的博客站点。

使用 NexT 主题

Hexo 博客框架除了默认的 Landscape 主题外，有着丰富的主题供我们选择，这里以最为流行的 NexT 主题为例来介绍如何安装和使用主题。另外，请注意在 Advanced Configurations 章节的所有后续内容，均基于已使用 NexT 主题。

安装 NexT 主题

在 Hexo 目录中执行以下命令来安装 NexT 主题。

1
$ npm install hexo-theme-next

启用 NexT 主题

打开 Hexo 项目的站点配置文件，并修改theme配置项。

1
theme: next

此时重新启动本地 Hexo 服务器，我们发现页面风格跟之前完全不同了。

image.png

创建主题配置文件

在 Hexo 项目根目录，创建一个名为_config.<theme_name>.yml的空文件。

例如我们是 NexT 主题，那么就创建_config.next.yml文件。

然后我们将 Hexo 项目根目录下的node_modules/hexo-theme-next/_config.yml文件中的全部内容拷贝到_config.next.yml文件中。

后续我们将_config.next.yml文件称为主题配置文件，以区别站点配置文件。

更改 NexT 主题显示方案

NexT 主题拥有4种显示方案，分别是Muse、Mist、Pisces和Gemini，默认配置为Muse。

如果要修改显示方案，打开主题配置文件，修改scheme配置项即可，例如修改为Pisces方案。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

重新启动本地服务器查看，我们发现页面又换了一种风格。

image.png

NexT 主题支持设置自定义 Logo （该功能在Mist方案下不适用，适用于其他方案），默认是没有 Logo 的。

如果要设置自定义 Logo，打开主题配置文件，修改custom_logo配置项即可，该项支持 URL 绝对路径（例如你的图床）或相对路径（可以存放在本地）。

例如我们从网上找一张图片，并上传到图床中，然后将其地址配置到配置项中。

1
2
# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: https://yourpicture.net/yourpicture.png

重新启动本地服务器查看，我们发现我们设置的 Logo 已经显示在页面中了。

image.png

设置文章授权信息

点击我们的博文，页面是这个样子的。

image.png

默认并没有展示任何授权信息。如果想要设置授权信息，需要修改主题配置文件中creative_commons下的配置项。例如如下配置会在文章页面展示知识共享署名-非商业性使用-相同方式共享（BY-NC-SA）授权信息。

1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: big
  sidebar: false
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language:

重新启动本地服务器查看，我们发现页面上会展示文章的授权信息了。

image.png

启用社交链接

如果想在博客中展示我们的社交链接，需要修改主题配置文件中social下的配置项，将里面各项配置项的值修改为自己的社交帐号主页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo
  Google: https://plus.google.com/yourname || fab fa-google
  Twitter: https://twitter.com/yourname || fab fa-twitter
  FB Page: https://www.facebook.com/yourname || fab fa-facebook
  StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://instagram.com/yourname || fab fa-instagram
  Skype: skype:yourname?call|chat || fab fa-skype

重新启动本地服务器查看，我们发现页面上会展示社交媒体链接了（由于CDN的原因，部分图标加载失败了，囧）。

image.png

设置二次元看板娘

如果想在博客中展示二次元看板娘，Hexo 已经为我们提供了便捷的方式。

安装 hexo-helper-live2d 模块

在 Hexo 项目目录中，执行以下命令安装hexo-helper-live2d模块。

1
$ npm install --save hexo-helper-live2d

安装 Live2D 模型

首先可以在这个网站中找到需要的 Live2D 模型，记下其名字，例如shizuku。然后在 Hexo 项目目录中，执行以下命令安装模型，将<model_name>替换成刚刚记下的模型名称即可。

1
$ npm install live2d-widget-model-<model_name>

配置 Live2D 模型

在站点配置文件或主题配置文件中，新增如下配置，注意同样将<model_name>替换成刚刚记下的模型名称即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-<model_name>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

Live2D 效果展示

重新启动本地服务器查看，我们发现博客右下角出现了一只萌萌的看板娘。

image.png

More Things

上面已经介绍了 Hexo 的基本使用和一些进阶配置，但 Hexo 的能力显然远远不止于此。如果想进一步完善自己的 Hexo 博客，可以参考 Hexo 官方文档和 NexT 官方文档，此外在 GitHub 上也有非常丰富的第三方 Hexo 扩展程序。

此处提供一些进一步优化的思路，但不做具体实现。

  • 使用随机短路径作为博文永久链接；
  • 为博客添加关于页面；
  • 在每篇博文后面添加支付宝/微信赞赏二维码；
  • 在每篇博文后面添加版权声明；
  • 使用 GitHub 实现在线编辑博文；
  • 在博客首页不展示博文全部内容，仅展示摘要；
  • 修改博客站点的字体；
  • 修改代码块渲染样式并添加代码复制功能；
  • 为博文添加留言板系统；
  • 在博文页面添加回到开头按钮和已读进度条；
  • 为博客站点添加 Google Analytics 或百度统计工具；
  • 为博客添加本地搜索功能；
  • ……

Hexo 框架的全部代码都可以自由编辑，所以完全可以打造出属于自己独一无二的博客网站。

References

博客 - Wikipedia

Hexo - Documentation

NexT - Documentation

Buy a cup of coffee for the author.