Hello World, My First Blog!

一、前言

在本科和研究生期间，我看过很多大佬的个人网站，每次浏览他们的博客时，总是非常佩服，并且一直想建立一个属于自己的网站，记录一些技术学习和生活中的点滴感悟。不过，由于工作和生活中的琐事总是很多，再加上自己是严重拖延症患者，迟迟没有付诸行动。直到最近，终于下定决心开始了这个项目。虽然现在已经是研二了，但正如那句话说的：“种一棵树最好的时间是十年前，其次是现在。”

在这篇文章里，主要写一下自己搭建网站的过程，以此纪念个人网站的诞生。

二、搭建流程

1. 建立 Github 仓库

在注册 GitHub 账号后，首先创建一个新的仓库，用作你本地博客仓库的部署。仓库名需要遵循特定格式：用户名.github.io，例如：
https://github.com/chengz23/chengz23.github.io

请特别注意，仓库名必须是 “用户名.github.io” 这种格式，这样才能通过访问 用户名.github.io 来查看你的网站。如果仓库名不符合这个格式，网站的访问地址将变为 用户名.github.io/仓库名。从美学和简洁性的角度来看，大家自然还是偏好前者，哈哈。
创建完成后，你就可以直接在浏览器中输入 用户名.github.io 来访问自己的网站啦。

2. 安装 Git

Git 作为一款分布式版本控制系统，在代码管理与协作开发领域应用广泛。在本教程里，我们会借助 Git 将本地的 Hexo 项目（Hexo 是用于搭建个人博客的项目，后续会详细介绍）推送至 GitHub 仓库，以实现代码的在线存储与便捷访问。

首先，Windows 用户可从 Git 官网 下载并安装 Git。 安装过程建议采用默认配置，不过有一点需要留意：在安装期间，会出现一个关于是否选择 MinTTY 终端模拟器 的选项。若你期望拥有功能更强大的终端界面，可勾选此选项；若不勾选，将使用 Windows 自带的 cmd 终端来显示 Git Bash。其余选项保持默认即可。安装完成后，Git 会自动添加到系统的环境变量中。
安装完成后，可通过以下操作检查 Git 是否安装成功：打开 cmd（命令行终端），输入如下命令：

git --version

若成功安装，命令行将显示 Git 的版本信息。
在开始使用 Git 之前，我们需要进行一些个人信息的配置，从而绑定 GitHub 账号。打开 cmd，依次输入以下命令进行配置：

git config --global user.name "chengz23"
git config --global user.email "316605928.com"

其中，user.name 是你在 GitHub 上的用户名，user.email 是你注册 GitHub 账号时使用的邮箱地址。这些配置有助于 Git 识别你的身份，确保你提交的代码能与 GitHub 账户关联起来。

3. 生成 SSH 密钥与 GitHub 账户关联

SSH（Secure Shell）是一种加密网络协议，用于在网络中安全地传输数据。在 Git 中，SSH 用于在本地和远程仓库之间建立安全连接，以便进行代码的推送和拉取。因此，我们需要生成 SSH 密钥，并将公钥添加到 GitHub 账户中。
在 cmd 中输入以下命令，生成 SSH 密钥：

ssh-keygen -t rsa -C "316605928.com"

完成后，在提示路径下找到 .ssh 文件夹中的 id_rsa.pub 公钥文件，用记事本打开拷贝。
在 GitHub 个人设置中找到 SSH，新建，输入 Key。
(如果之前和服务器连接时已经生成过 SSH 密钥，无需再次生成直接将公钥添加到 GitHub 账户中即可。)

4. 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让 JavaScript 代码在服务器端运行。在本教程中，我们将使用 Node.js 来安装 Hexo，以及在本地预览和生成博客网站。
首先，从 Node.js 官网 下载并安装 Node.js。
安装完成后，可通过以下操作检查 Node.js 是否安装成功：打开 cmd，输入如下命令：

node -v
npm -v

若成功安装，命令行将显示 Node.js 和 npm 的版本信息。

5. 安装 Hexo

Hexo 是一款基于 Node.js 开发的博客框架，以其快速、简洁和高效著称。借助 Hexo，用户能够轻松搭建个人博客网站，并且它对 Markdown 语法提供良好支持，这意味着在写作时无需进行繁琐的排版工作，极大地提升了博客创作的效率。

以下是安装 Hexo 的详细步骤：

1. 安装 Hexo 命令行工具：打开安装后的Git Bash，输入以下命令并执行，以全局安装 Hexo 命令行工具：

   npm install -g hexo-cli

2. 检查安装是否成功：安装完成后，为确认 Hexo 是否正确安装，再次打开 cmd，输入如下命令：

   hexo -v

   若安装成功，命令行界面将显示出 Hexo 的版本信息。
3. 创建并初始化 Hexo 项目：
   • 在电脑的任意位置，新建一个名为 MyBlog 的文件夹，用于存放 Hexo 项目。
   • 在Git Bash，使用 cd *:/**/MyBlog 命令（需将 *:/** 替换为实际的路径）进入该文件夹。
   • 在文件夹目录下，输入以下命令，初始化 Hexo 项目：

     hexo init blog

     执行该命令后，会在 MyBlog 文件夹下生成一个名为 blog 的 Hexo 项目。
4. 进入项目目录并安装依赖：
   • 使用 cd blog 命令进入刚刚生成的 blog 项目文件夹，此时可以查看项目的目录结构。
   • 在项目目录下，输入以下命令，安装 Hexo 运行所需的依赖项：

     npm install

5. 生成本地预览：依赖安装完成后，输入以下命令，启动本地服务器，预览 Hexo 博客：

   hexo server 或 hexo s

   在浏览器中输入 http://localhost:4000，即可查看 Hexo 博客的本地预览效果。之后按下 Ctrl + C 即可终止预览。
   通过以上步骤，你就可以成功安装并初步运行 Hexo 博客项目了。

6. 编写博客文档

在 Hexo 项目中，博客文档以 Markdown 文件的形式存在，用户可以通过编辑 Markdown 文件来撰写博客内容。在 Hexo 项目的 source/_posts 目录下，存放着所有的博客文档，每篇博客对应一个 Markdown 文件。
在 source/_posts 目录下，新建一个名为 Hello-World.md 的 Markdown 文件（正常来说Hello-World.md是已存在的），输入任意内容后保存。
在 blog 项目目录下，依次输入以下命令，生成静态页面：

hexo clean 或 hexo c // 清除缓存
hexo generate 或 hexo g // 生成静态页面
hexo server 或 hexo s // 启动本地服务器

在浏览器中输入 http://localhost:4000，即可查看博客更改后的最新内容。之后按下 Ctrl + C 即可终止预览。

7. 配置与部署 Hexo 博客到 GitHub Pages

配置 _config.yml 文件

在 Hexo 项目的根目录下，找到并打开 _config.yml 文件。此文件是 Hexo 项目的重要配置文件，下面将对其中的部分关键配置项进行修改。

# Site 部分：你可以根据自己的需求自定义博客的名称、描述、关键词等信息
# URL 部分：请将链接替换为你自己的 GitHub Pages 地址，示例：https://chengz23.github.io
# Deployment 部分：配置部署相关信息
type: git
# 请将此地址替换为你自己的仓库 git 地址，示例：git@github.com:chengz23/chengz23.github.io.git
repo: git@github.com:chengz23/chengz23.github.io.git
# 分支名称，旧版本默认是 master，现在一般使用 main
branch: main

安装 git 插件

在当前博客所在的目录，也就是 *:/**/MyBlog 目录下（注意将 *:/** 替换为实际的路径），执行以下命令来安装用于部署的 git 插件：

npm install hexo-deployer-git --save

部署到 GitHub Pages

在 blog 项目目录下，按顺序输入以下命令，即可将博客部署到 GitHub Pages：

# 清除缓存，此命令可选择使用 hexo clean 或者 hexo c
hexo clean 或 hexo c
# 生成静态页面，可使用 hexo generate 或者 hexo g
hexo generate 或 hexo g
# 部署到 GitHub Pages，可使用 hexo deploy 或者 hexo d
hexo deploy 或 hexo d

注意之后每次更新博客内容后，不需要执行 hexo clean, Hexo 会自动处理新文章与修改内容，在你运行 hexo generate 或者 hexo g 时，它会生成新的静态文件。如果在生成或者部署博客时碰到问题，像页面未更新、样式错乱等，很可能是缓存文件引发的。这时你可以运行 hexo clean 来清除缓存，然后重新生成静态文件。在更新博客主题之后，执行 hexo clean 可以避免旧主题文件残留，确保新主题正常显示。

查看博客网站

当部署完成后，打开浏览器，在地址栏输入你之前配置的 GitHub Pages 地址（例如 https://chengz23.github.io ，需替换为你自己的域名），就可以看到你的博客网站了。