Hello My World

谨以此文纪念该个人网站的诞生。

本站基于 Hexo + GitHub 搭建，采用 Fluid 主题。

这篇文章记录了博客的搭建历程，以及 Hexo 的使用指南。

想法

早在大学入学时，夏老师就告知了个人博客的重要性。

期间也看过许多漂亮的个人网站，也看到很多大神的技术博客，偶尔会心动一下。

于是乎，咕到了大二快结束时，打开了这个新世界的大门。

搭建历程

1. 安装 Node.js

官网：nodejs.org

安装后在 cmd 命令行输入 node -v 即可查看版本。

2. 注册 GitHub

注册后，创建仓库：https://github.com/hewei2001/hewei2001.github.io

此时在浏览器中已经可以访问域名：https://hewei2001.github.io

注意，仓库名必须取 <username>.github.io，如果仓库取了其他名字，最后访问的域名会是：https://用户名.github.io/仓库名/

3. 下载 Git

官网：gitforwindows.org

安装时按照默认配置即可，其中有个 MinTTY 终端模拟器的选项会默认选上，如果不选则会使用 Windows 自带的终端 cmd 显示 Git Bash。

安装后在 cmd 命令行输入 git 即可调出功能目录。

此后就在 cmd 中配置 Git 个人基本信息（绑定 GitHub）：

$ git config --global user.name "hewei2001"
$ git config --global user.email "[email protected]"

配置完才后续才可以正常提交远程仓库（详见博客 Git 分类下其他文章）。

4. 配置 GitHub SSH

该步骤旨在建立当前主机与 GitHub 的安全连接，以后提交/拉取仓库才不需要重复输入密码。如果你这台主机已经建立过 SSH 连接，那么可以跳过这一步。

打开 Git Bash 输入命令：

$ ssh-keygen -t rsa -C "[email protected]" # 获取 SSH Key

完成后，在提示路径下找到 .ssh 文件夹中的 id_rsa.pub 公钥文件，用记事本打开拷贝。

在 GitHub 个人设置中找到 SSH，新建，输入 Key。

配置后可以用如下命令测试是否成功：

$ ssh -T [email protected]
# 运行结果出现类似如下即表示成功
# Hi hewei2001! You've successfully authenticated, but GitHub does not provide shell access.

5. 安装 Hexo

官网：hexo.io，有中文官网。

在电脑中新建 Blog 文件夹，如 D:\Blog。

在 cmd 命令行打开 D 盘，用 cd Blog命令进入 Blog 子目录。或者在文件夹路径栏直接输入 cmd。

输入 Hexo 官网上的全局安装命令：

$ npm install hexo-cli -g

输入初始化部署命令：

$ hexo init hewei2001

即可在 Blog 目录下新建博客文件夹 hewei2001。用 cd hewei2001命令进入博客子目录。

输入安装 Node.js 包管理器命令，安装所有的依赖：

$ npm install

输入生成本地预览命令：

$ hexo s

默认会生成 localhost:4000 端口的网址，在浏览器中可以访问。

6. 安装编辑器

主要用于编写文档和修改配置，这里选择 VsCode 即可，打开路径 hewei2001/source/_posts/hello-world.md，随便修改内容后保存。

在 hewei2001 目录中运行 Git Bash。

依次输入清理缓存、生成博客文件（静态页面）、生成本地预览命令：

$ hexo cl # 表示 clean
$ hexo g  # 表示 generate
$ hexo s  # 表示 server

在浏览器中访问即可查看更改。之后按下 Ctrl + C 即可退出预览进程。

7. 将 Hexo 发布至 GitHub

打开路径 hewei2001/_config.yml，更改基础参数。

• #Site 部分的站点描述自行修改
• #URL 部分，将链接改为 https://hewei2001.github.io
• #Deployment 部分
• type 改为 git
• repo 改为 https://github.com/hewei2001/hewei2001.github.io.git
• branch 改为 main（旧版本默认分支叫 master）

进入 Hexo 官网，复制 hexo-deployer-git 的安装命令，在 Git Bash 中安装。

$ npm install hexo-deployer-git --save

依次输入清理缓存、生成博客文件（静态页面）、提交远程仓库命令：

$ hexo cl
$ hexo g
$ hexo d  # 表示 deploy，安装了上面的 hexo-deployer-git 才可用

初次使用该操作可能会弹出一个 GitHub 登录界面，用于当前主机的身份验证。

在浏览器中访问 https://hewei2001.github.io 即可查看站点。

Hexo 使用

以下介绍其他常用的 Hexo 操作命令，需要在博客文件夹下打开 Git Bash 使用。

新建文章

$ hexo n "文章名" # 代表 new

文章名不需要文件后缀，会自动生成 Markdown 文件，且带有预先定义的参数（在 Front-matter 中），如标题、日期、标签等。

以下是一些常用的参数及默认设置：

参数	描述	默认值
title	标题，最好用引号括起来	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
categories	分类（不适用于分页）	无
tags	标签（不适用于分页）	无
excerpt	摘要，优先于 <!-- more -->	无
index_img	文章封面图，用 /img/ 相对路径	无
math	公式转换，关闭时加速加载	true
sticky	文章置顶，数值越大越靠前	无

注意 Hexo 采用的是 GitHub Favored Markdown，书写规范与标准 Markdown 有微小区别，可以查阅 GitHub 上的说明。

布局管理

在上面新建文章时，我们还可以制定布局：

$ hexo n [layout] "文章名" 

其中，layout 可替换为 post（文章，默认）、draft（草稿）、page（页面）。默认值可以在配置文件中修改 default_layout 来改动。不同布局的文件会存储在不同位置。

对于 page 布局，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件，页面布局顾名思义就是用来 DIY 我们博客页面的，不会被渲染。

对于 draft 布局，在建立时会被保存到 source/drafts 文件夹中，但不会显示在页面上，如果我们不想某一篇文章显示在页面上，也可以把它移动到该文件夹中。

此外，还有关于 draft 的一些操作：

$ hexo s --draft  # 在服务器预览时加入草稿文件
$ hexo publish [layout] "文章名"  # 将草稿发布为 post 或 page

修改默认布局

上述布局管理中的三种布局，还对应这三种模板，这些模板可以在 hewei2001/scaffolds 路径下找到，我们可以提前修改 post 模板，这样每次新建文章时就不需要自己添加 Front-matter 了。

以下是我修改后的 Front-matter 布局：

title: {{ title }}
excerpt: ''
index_img: /img/home/
math: false
date: {{ date }}
updated:
category_bar: ["分类"]
categories:
tags:
sticky: 

分类和标签

在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

首先要创建「分类」和「标签」本身所在的页面，打开博客文件夹，执行 hexo new page xxx 命令。Fluid 主题不需要，已经自带「分类」、「标签」和「归档」页面了，故这里不展开介绍。

此后就可以 post 布局的文章指定分类和标签了，也需要在对应文章的 Front-matter 中设置。Hexo 不鼓励给一篇文章指定多个同级分类，因此需要规划好。下面是指定方法：

categories:
 - 技术经验
 - 博客  # 「博客」会作为「技术经验」的子类
tags:
 - Hexo
 - Git  # 「Hexo」与「Git」是同级标签

当然，Hexo 还提供了一种类 WordPress 的分类方式，用于指定多个同级分类：

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]  # 文章会同时出现在三个类别中