Github Pages + Hexo + Vercel 个人博客搭建（一）基础部署

本地创建环境

本人环境：

windows 10

安装 node.js

建议使用 nvm （node version manager（node版本管理工具））安装 node.js，

下载地址：https://github.com/coreybutler/nvm-windows/releases

安装

（1）双击解压后的文件nvm-setup.exe； （2）选择 nvm 安装路径（填坑警告：路径不能有空格！！！） （3）选择 node.js 路径； （4）确认安装； （5）检测：打开 cmd，输入nvm，显示当前 nvm 版本以及 nvm 命令，成功！

使用 nvm

# 1.nvm list 命令 - 显示版本列表
nvm list // 显示已安装的版本（同 nvm list installed）
nvm list installed // 显示已安装的版本
nvm list available // 显示所有可以下载的版本

# 2.nvm install 命令 - 安装指定版本nodejs
nvm install 16.15.1// 安装16.15.1版本node
nvm install latest // 安装最新版本node

# 3.nvm use 命令 - 使用指定版本node
nvm use 16.15.1 // 使用16.15.1版本node

# 4.nvm uninstall 命令 - 卸载指定版本 node
nvm uninstall 16.15.1 // 卸载16.15.1版本node

填坑警告：nvm install 的时候，出现无权安装，需 以管理员身份运行 cmd。！！！

本人目前安装 node.js 版本为16.15.1.

设置nodejs prefix（全局）和cache（缓存）路径（非必须操作）

在nodejs 安装目录下新建两个文件夹，用于存放全局包和缓存，如下： 我的 node.js 安装目录：E:\Program\nvm

npm config set prefix "E:\Program\nvm\node_global" 
npm config set cache "E:\Program\nvm\node_cache"

安装 Hexo

命令行输入以下命令安装 Hexo：

npm install -g hexo-cli

输入以下命令验证是否安装成功：

hexo -v

本地部署

选择一个准备放置博客网站的目录，然后使用以下命令来初始化一个项目：

hexo init LFD-byte.github.io
cd LFD-byte.github.io
npm install

该命令将会在当前目录下，生成一个名为 LFD-byte.github.io 的新目录，当然，你可以把这个名字换成任何你想要的名字，并将 hexo 的初始化文件写入其中。

新建完成后，LFD-byte.github.io 文件夹的目录如下：

.
├── _config.yml 
├── package.json 
├── node_modules 
├── scaffolds 
├── source 
| ├── _drafts 
| └── _posts 
└── themes

_config.yml 是配置文件，里面有很多可以配置的数据，这里暂时不多介绍，后面的文章里会进行详细说明。

package.json 是应用程序信息，通常不需要关心。

node_modules 用来存放 node 相关的模块，通常不需要关心。

scaffolds 里面是模版文件，也就是每次新建文章时，都会根据模版文件来创建对应的 md 文件，这一点也会在后续的文章里进行详细介绍。

source 是资源文件夹，用来存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。

theme 是主题文件夹，每个主题的配置都会有些不一样，需要根据具体主题情况来定，后续介绍主题的文章里会有说明。

在 breeze-blog 目录下使用以下命令来运行我们的博客：

hexo server

在默认情况下，服务会使用 4000 端口，如果已经被占用，也可以添加 -p 参数来换用其它端口：

hexo server -p 8080

打开 http://localhost:4000 即可访问我们生成的网站了。

Hexo

这样，我们的博客就搭建起来了。

部署到 Github Pages

在你的 Github 账号创建一个新的仓库，仓库命名规范为 账号名.github.io，公开仓库。

create repository

在 Git bash 或 CMD 中 LFD-byte.github.io博客目录下执行以下命令连接到 Github：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:xxx/xxx.git
git push -u origin main

在 LFD-byte.github.io 仓库下 Settings 中开启 Github Pages：

open github pages

然后我们修改一下本地的 hexo 的配置文件(_config.yml)，我的在 LFD-byte.github.io 根目录下，找到对应的地方进行修改，指定我们的仓库信息，并修改 deploy 信息。

deploy:
	type: git
	repo: git@github.com:xxx/blogxxx
	branch: main

把这里的 repo 地址修改为你的仓库地址即可。

安装 hexo-deployer-git：

cd LFD-byte.github.io
npm install hexo-deployer-git --save

进行部署

hexo clean && hexo generate
hexo deploy

运行完成后，我们的博客文件就顺利部署到 github pages 上了，现在我们打开下面网址来查看我们的博客效果：

https://用户名.github.io

之后每次我们添加或修改完本地文件后，使用：

hexo clean && hexo g -d

即可重新生成项目文件。

部署到 Vercel

注册 Vercel 账号，建议谷歌邮箱注册。

vercel

使用 GitHub 账户登录 Vercel，授予 Vercel repo 的 read 权限。

导入 GitHub 账户中的网站 repo，比如此处的 LFD-byte.github.io。

Project import

在项目构建中，Framework Preset 选择 Other，其余不做改动。

Build

稍等片刻，部署成功，此时我们就可以直接通过部署完成后 Vercel 提供的域名访问个人网站了，点击 Visit 进行访问。

Production Deployment

Visit Blog

之后每次我们添加或修改完本地文件后，使用：

hexo clean && hexo g -d

就可以生成静态文件同步部署到 Vercel 上了。

注意

若 npm 不能下载包，可通过 nvm 更换 node.js 版本重新尝试下载。

参考

[1] 【Hexo】使用Hexo+github pages+travis ci搭建好看的个人博客（一）

[2] Windows下使用nvm安装nodejs

[3] 建站过程中的踩坑记录：自定义域名、百度收录与备案