配置个人博客

发表于 更新于 分类于 ， Valine：

为什么选择 Hexo + GitHub pages

当下，构建一个个人博客的学习成本大大降低了。首先是可以通过静态网站生成工具将 Markdown 格式的文档生成为 Html, 并且还有很多主题模板可以选择。常见的静态网站生成工具有 Hexo, Jekyll, Hugo, 相对而言，似乎使用 Hexo 的人最多，因此应该相关文档支持是最多的。但是 Jekyll 似乎与 GitHub 关系比较密切，支持将源码推送到 GitHub 上让 GitHub 生成静态网页（参考：Jekyll 与 Hexo 的比较）而Hexo 则只能本地生成静态网站后，再部署到 GitHub 上，源码不会上传。我最终选择了使用 Hexo。除了生成方便，GitHub 还良心的提供了 GitHub Pages 作为免费的个人主页，不用像过去那样自己买服务器，自己注册域名配置解析。所以真心方便了很多，真是懒人、穷人福音 :)

前序准备工作

配置 GitHub Pages

GitHub 是一个代码托管网站（应该是全球最大的），正如它的名字所示，他是 git 的 ‘Hub’（计算机领域有集线器的意思, e.g. USB hub），即它是基于版本工具 git 来使用的。因此，首先需要在本地安装配置 git，配置本地的代码管理工具。

git 安装完成后，再注册一个 GitHub 账号（如果没有的话），然后在你的 GitHub 账户中配置 SSH key，配置方法可以参考 link。这一步的主要通过 SSH 构建本地计算机与 GitHub 之间的安全、方便的连接，为后续从本地上载博客代码准备。

最后，我们要在 GitHub 中新建一个代码仓库来存放我们的网站，该仓库的需要为 (你的 GitHub 名).GitHub.io。仓库新建完成后，进入该项目的 Settings, 向下拉到 GitHub Pages，可以选择一个主题，然后在浏览器输入 (你的 GitHub 名).GitHub.io 体验一下。

配置 Hexo

安装 Node.js

Hexo 是基于 JavaScript 框架 Node.js 制作的，因此，需要首先在本地安装 Node.js，可以直接从官网下载安装包安装。

安装 Hexo

安装完成后，转到你计划放置自己博客文件的文件夹，在文件夹下右键 Git Bash Here, 打开 git 的命令行窗口。然后在该命令行窗口中输入 npm i hexo-cli -g 安装 Hexo，这里的 npm 是 node.js 默认的包管理工具，也就是通过 node.js 安装的 Hexo。最后，可以通过 hexo -v 检查时候安装成功。

初始化网站

接上一步，输入命令 hexo init, 然后 npm install, 来初始化博客文件。文件夹下将生成下列几个重要的文件/文件夹（参考）：

  • _config.yml
    • 网站的配置信息。
  • package.json
    • 安装的渲染器（renderer）的信息。例如 Markdown 的渲染器。
  • Source folder
    • 资源文件存放处，Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件（例如图片）会被拷贝过去。
  • themes folder
    • Hexo 根据该文件夹中的主题生成静态页面。

完成初始化后，我们使用 hexo g 命令让 Hexo 生成静态网页，然后 hexo s 打开本地服务器，再输入 http://localhost:4000/ 可以在本地预览查看网页。

从本地到服务器端部署

本地配置完成后，就需要将完成的本地网站部署到服务器上（这里是 GitHub 中你的博客对应的仓库）, Hexo 提供了一键式的网站部署工具（参考），具体步骤如下。
首先安装 hexo-deployer-git：npm install hexo-deployer-git, 然后修改博客文件夹中的配置文件 _config.yml的 deploy 部分如下：

1
2
3
4
5
deploy:
  type: git
  repo: <你的 网站域名> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch-要提交到的分支]
  message: [message-commit 的信息]

一切配置妥当后，在博客文件夹下使用 hexo d 命令就可以将博客部署到 GitHub 上了。

主题配置

主题选择与下载

主题可以从 Hexo 官网提供的一个分享平台进行选择 (link) ,经过一些比较，我选择了一个支持较好，使用者较多的主题 NexT。

切换到博客文件夹下，直接使用 npm install hexo-theme-next进行安装。安装完成后，在 node_modules 文件夹下会增加一个 hexo-theme-next 文件夹（我的理解是 next 相当于 Hexo 中的一个组件）。再修改博客的配置文件 _config.yml 中 theme 为 theme: next 即可完成主题更换。后来，为了更方便的配置主题，（NexT 推荐添加独立于主题文件夹的单独的文件来修改主题，参看）,但我为了简单，直接将 NexT 主题文件夹复制到了 theme 文件夹中，后续个性化配置时就直接修改 NexT 文件夹中的 _config.yml 配置文件。

最后，我们在配置站点的配置文件_config.yml（名字和主题的配置文件一样，但是在站点根目录下）, 主要做如下几点修改：

  1. 将其中的 theme 修改为 theme: next；
  2. 修改 #Site 部分，包括 title, subtitle,author,language;

主题的个性化配置

完成主题初步配置后，需要根据自己需要做一些简单的定制，因为自己不太懂前端，所以基本就是做了些最简单的修改，列写如下。

更换图标

通过 图标生成网站 将自己喜欢的图片生成一组不同大小的、用于不同平台的图片。完成后下载至 next/source/images 文件夹。修改 NexT 配置文件中的 favicon 字段，将其中的图片链接修改为自己的图片。

添加头像

将自己的头像文件编辑成 220*220 大小，放置在根目录下 images 文件夹中。然后编辑 NexT 配置文件中的 avatar 字段，值设置成头像的链接地址。（参考）

添加“分类”、“标签”

在主页Title 的下方添加一些 Menu 项，方便分类。我主要添加了3项，标签，分类和归档三项，在 NexT 配置文件的 Menu 字段下，去除对应项的注释。（参考）

归档就是根据时间线列出文章，不需要再额外操作。标签、分类则需要我们在站点根目录下执行 hexo new page categories 和 hexo new page categories命令， 执行完成后在站点 source 文件夹中会增加两个文件夹，分别是 categories 和 tags文件夹。然后，我们分别向两个文件夹中的 index.md 文件中分别添加 type: "categories" 和 type: "tags" 字段。

最后，我们还需要在我们的博客文档的头部添加 tags 和 categories 字段，例子如下：

1
2
3
4
5
6
---
title: 配置个人博客
date: 2020-10-17 
tags: 前端
categories: 学习
---

主页文章只显示摘要

NexT 主题默认在主页按时间流顺序显示所有文档，显得过于冗长，因此希望仅在主页显示文章的首部分。方法是在博客 Markdown 文档中使用 <!--more--> 进行手动截断，效果是在主页上仅显示 <!--more--> 前面的部分。（参考）

其他问题

Q1: 使用 Hexo d 将本地内容部署到 GitHub Pages 上后，看不到变化。

A1: 需要强制刷新浏览器缓存，shift + F5 进行查看。