发表于 更新于 本文字数： 2.6k 阅读时长 ≈ 2 分钟

前言

我认为，个人博客对鱼计算机学习者很重要，不仅因为搭建和管理个人博客是一项有趣的实践，同时写博客本身就是一个输出的过程：把学到的知识经过自己的整理和编排写成博客文章，同时还能记录自己当下的所感所想，一举两得。

当下，构建一个个人博客的门槛并不高——不需要一台自己的服务器，可以使用静态博客框架托管在 Github Pages 上，也不需要自己完全从零开始构建，已经有了大量成熟的博客框架和美观的主题任君选择。

本文便是我个人搭建自己的博客的步骤，仅供记录，如有疏漏，还望不吝指教。

环境

我使用 Hexo 作为博客的基本框架，NexT 作为博客的主题，并将博客托管在 Github Pages 上。

Nodejs 运行时安装与配置

可以从官方下载页获取安装途径，也可以使用包管理器：

1
2
3
4
5
$ sudo apt install nodejs npm # for debian & ubuntu

$ yay -S nodejs npm # for Archlinux

$ brew install node npm # for MacOS with homebrew

验证安装：

1
2
$ node -v
$ npm -v

能看到输出便证明安装成功了。

对于没有梯子的朋友，建议配置 npm 的镜像源：

1
2
3
4
5
# 设置腾讯云镜像源
$ npm config set registry http://mirrors.cloud.tencent.com/npm/ 

# 设置淘宝镜像源
$ npm config set registry https://registry.npmmirror.com

安装 Hexo 命令行工具

我使用 Hexo 作为博客的基本框架，因为它在保持简单的情况下能做到基本满足我的需求。

想搭建基于 Hexo 框架的个人博客，需要安装 Hexo 的命令行工具：

1
$ npm install -g hexo-cli

安装后，执行 hexo 命令，应该可以看到这样的输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: https://hexo.io/docs/

博客设置

初始化博客

新建一个空文件夹作为博客的源文件夹：

1
2
$ mkdir blog
$ cd blog

初始化 Hexo：

1
$ hexo init

注意：这个过程会使用 git 命令从 Github 拉取文件，因为种种原因，Github 在国内无法稳定访问。可以通过 Watt Toolkit 或修改 DNS 文件访问，这里按下不表。

初始化成功后，应该能看到这样的输出：

1
INFO  Start blogging with Hexo!

测试博客构建

1
2
3
4
# 生成博客页面
$ hexo generate
# 在本地部署 Hexo 博客
$ hexo server

如果看到这样的输出，就说明构建好的博客已经成功在本地部署了

在浏览器中打开这个地址就能看到你亲手搭建的博客了！

博客基本信息设置

博客文件夹中的 _config.yml 文件就是 Hexo 框架的配置文件。在文件中找到如下字段可以配置有关网站的各种信息

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

注意：

  • language 字段配置的是网站的本地化语言，对于简体中文，它的值是 zh-CN ，而不是更常见的 zh_CN 。

  • timezone 字段配置的是网站的时区。配置为 Asia/Shanghai 就是我们北京时间。

博客部署

注意：如果想要将博客部署在 Github Pages 上，首先必要的就是拥有一个 Github 账户，没有的话需要去注册一个。

新建一个以 username.github.io 命名的仓库，注意 username 应该替换为你的 Github 账户名。

比如我的 Github 账户名是 Curodenz， 那么我应该新建一个叫做 Curodenz.github.io 的 Github 仓库。

下载和使用 NexT 主题

在博客文件夹打开终端，输入以下命令来安装 NexT 主题：

1
$ npm install hexo-theme-next

也可以使用 Git 安装：

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

安装完成后，在 _config.yml 文件中设置 theme 字段：

1
theme: next

清除之前生成的文件，再次进行生成和部署：

1
2
3
$ hexo clean
$ hexo generate
$ hexo server

打开浏览器， 可以看到博客已经变成了 NexT 主题。

NexT 主题设置

接下来将进行 NexT 主题的设置，你可以直接编辑 node_modules/hexo-theme-next/_config.yml（使用 npm 安装）或 themes/next/_config.yml（使用 Git 安装）来修改设置。不过，这样直接修改的方式已经不被推荐，相对应的， NexT 的官方博客推荐在博客根目录建立 _config.next.yml 文件配置 NexT。

1
2
3
4
# 使用 npm 安装
$ cp node_modules/hexo-theme-next/_config.yml ./_config.next.yml
# 使用 Git 安装
$ cp themes/next/_config.yml ./_config.next.yml