简介

目的

本教程主要介绍在 Windows 系统下如何配置 WSL，并在其中配置 Node.js 环境，使用 Hexo 框架搭建简单的个人博客，最后使用 Markdown 进行博客文章的编写并部署到 GitHub Pages 上。

概念理清

WSL

WSL 让 Windows 用户无需虚拟机或双系统，就能直接在 Windows 中运行原生的 Linux 命令行工具和应用程序。

Node.js

Node.js 是 JavaScript 的服务端运行环境，让 JavaScript 跳出浏览器束缚，在服务器上构建高效、可扩展的应用程序。

npm

npm 就像是 Node.js 的仓库管理员，负责维护数以百万计的 JavaScript 库和工具包，使得开发者能够方便地查找、安装并管理这些工具。

Markdown

Markdown 是一种简洁的文字格式化语法，将纯文本转化为结构清晰、易于阅读的网页内容。

GitHub Pages

GitHub Pages 允许用户将自己的项目文档或个人网站公开展示出来，免费托管静态网站。

Hexo

Hexo 是快速搭建个人博客或网站的现成框架，它能够高效地将 Markdown 写作的内容转换成静态网页，并轻松部署到 GitHub Pages 或其他服务器上。

⚙️ 环境配置与框架安装

安装 WSL 子系统

1
wsl --install

安装 Git

1
2
sudo apt update && sudo apt upgrade -y
sudo apt install git -y

安装 Git

1
brew install git

安装 Node.js (使用 nvm)

1
2
3
4
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 20
node -v
npm -v

安装 Node.js (使用 nvm)

1
2
3
4
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 20
node -v
npm -v

安装 Node.js (使用 Homebrew)

1
2
3
4
5
6
7
brew install nvm
mkdir ~/.nvm
export NVM_DIR="$HOME/.nvm"
source $(brew --prefix nvm)/nvm.sh
nvm install node
node -v
npm -v

安装完成后，可以通过 nvm ls 查看已安装的 Node.js 版本，使用 nvm use <version> 切换版本。

如遇到 nvm: command not found，请参考官方文档配置环境变量：

1
2
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

使用 npm 安装 Hexo CLI

1
npm install -g hexo-cli

Hexo CLI 安装后，使用 hexo -v 可查看版本信息。

Hexo 本地站点初始化

1
2
3
4
5
6
mkdir myblog
cd myblog
hexo init
hexo clean
hexo g
hexo s

初始化后，本地会生成以下目录结构：

1
2
3
4
_config.yml
scaffolds/
source/
themes/

详细目录说明请参考官方文档。

本地访问

浏览器访问 http://localhost:4000 即可查看默认博客界面。

🚀 博客的远程部署

仓库创建

在 GitHub 上创建 <span style="color:#f00">用户名.github.io</span> 的仓库。

安装部署插件

1
npm install hexo-deployer-git --save

配置 _config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: main

如需使用自定义域名，新建 CNAME 文件并填入你的域名；可在 GitHub Pages 设置中开启 HTTPS 强制。

首次部署

1
hexo d

后续更新

1
hexo g && hexo d

✨ 总结

在本基础篇教程中，我们成功地在 Windows 系统上通过 WSL 安装了 Node.js 和 Hexo，完成了博客初始化、目录结构解析，以及部署至 GitHub Pages 的全过程。下一篇将深入介绍主题定制和插件配置。