基于Hexo与Vercel搭建个人博客

Posted at 2025-12-22 技术  Hexo 博客 

最近修改了自己在平台上的名字，修改博客网站时也遇到了一些问题，于是打算从头开始记录基于Hexo和Vercel搭建个人博客的过程。

一、配置本地环境

Hexo 基于 Node.js 环境，并使用 Git 进行版本控制。在开始前，请确保你的电脑已安装这两个工具。

Node.js：前往 Node.js官网 下载并安装 LTS (长期支持) 版本。
Git：前往 Git官网 下载并安装。
安装后，打开终端（或 Git Bash）运行以下命令，检查是否安装成功。如果能显示版本号，则说明环境已就绪。

node -v
npm -v
git --version

之后全局安装 Hexo 命令行工具，这是后续所有 hexo 命令的基础。

npm install -g hexo-cli

二、 在github上创建空仓库

此仓库用于存放你的博客源文件，并作为 Vercel 读取和部署的来源。

登录你的 GitHub 账户，创建 New repository。
填写仓库信息：

• Repository name: 可以任意取名。
• Public / Private: 仓库设为 Public 或 Private 均可，Vercel 都能正常部署。
• 非常重要： 不要勾选任何 “Initialize this repository with” 下的选项（如 README, .gitignore）。我们需要一个完全空的仓库。
  创建后，复制仓库的 SSH 地址，下一步会用到。
  
  

三、本地初始化Hexo & 推送至github

首先在电脑里选择一个你准备存放博客配置文件与博文的目录，之后在目录中打开gitbash进行hexo的初始化。注意打开gitbash的时候最好启用管理员模式，这样之后安装依赖会更顺利。
之后在gitbash中运行指令hexo init [your-repo-name]，[your-repo-name]写一个你想在本地识别的名字。

这里在本地的_Blogs目录下用管理员身份打开gitbash，并且运行了hexo init leospiro。hexo自动从仓库里拉下了博客的基本结构并且安装了依赖（如果不用管理员身份打开容易在安装依赖一步失败，那时虽然会提示你要进入创建的目录里手动npm install但因为权限问题大概率也会失败）

之后可以运行hexo s在本地预览原始博客界面。

之后准备将本地代码推送到 GitHub 创建的空仓库里。
留在你项目文件夹里，运行下面的指令，初始化Git仓库与重命名本地分支（可选）。

git init
git branch -M main

顺手添加 .gitignore 文件，避免push到仓库的代码太大与错传：

echo "node_modules/" > .gitignore
echo "public/" >> .gitignore
echo ".deploy_git/" >> .gitignore
echo "db.json" >> .gitignore

也可以手动在文件夹里创建一个名为 .gitignore 的文件，把下面这几行复制进去：

node_modules/
public/
.deploy_git/
db.json

之后将所有文件添加到 Git，并进行第一次提交：

git add .
git commit -m "feat: Initial commit with Hexo setup"

关联远程 GitHub 仓库：这里SSH 版本的地址可以在你刚才创建的空仓库里找到。

git remote add origin [your-repo-SSH]

推送代码到 GitHub：

git push -u origin main

执行后刷新仓库，会看到上传的代码。
这一部分到这里就结束了。

推送之后，你可能会在你的github上第一次commit的comment旁边看到一个×，看到这样的报错提示[Some checks were not successful]：

考虑到我们后面要把博客部署到Vercel上，这里可以不考虑这个报错。
这个报错是因为github检测到这是一个网页仓库之后，启动内置程序编译失败导致的。但如果你打算直接用github部署你的博客了，就必须解决这个报错。解决方法这里暂时不多给出，有需要可以提出。

四、关联Vercel

首先去到Vercel官网，在Sign Up（注册）中用Github继续。

登录成功后，你会进入 Vercel 的仪表盘（Dashboard），点击 Add New… -> Project。
Vercel 会自动列出你的 GitHub 仓库。找到你那个博客仓库（比如叫 yourname.github.io 或者 my-blog），然后点击它右侧的 Import 按钮。
如果找不到仓库 可能是因为你没有给 Vercel 足够的权限。点击页面上方的 “Adjust GitHub App Permissions” 链接，在新页面里把你的博客仓库授权给 Vercel 即可。

点击 Import 后，会进入一个配置页面。Vercel 已经帮我们填写了大部分栏目。

1. Framework Preset (框架预设):
   • Vercel 会自动检测你的项目，这里应该会自动显示 Hexo。如果它没认出来，就从下拉列表里手动选择 Hexo。
2. Build and Output Settings (构建和输出设置):
   展开这个选项，检查里面的命令是否正确。
   • Build Command (构建命令): 应该会自动填上 hexo generate。如果不是，手动改一下。一般默认是npm run buid or hexo generate。
   • Output Directory (输出目录): 应该会自动填上 public。这是 Hexo 生成静态文件的默认文件夹。
     
3. Environment Variables (环境变量):
   • 对于一个基础的 Hexo 博客，这里不需要填写任何东西，直接留空。
4. 点击 Deploy (部署)

过程很简单，完成这些之后博客就顺利部署到互联网上了，你应该也能从Vercel上看到网页预览。你可以通过[project name].vercel.app访问博客。
部署完后可以直接点Add Domain去添加域名。

五、添加域名

可以在阿里云上购买一个域名，像.top这类顶级域名首年只用14块。建议按年买，到期再续费，我之前就有一个域名买了较久时间，但是现在弃用了。

在Vercel的Settings下的Domain中点Add Domain，然后输入你的域名。默认设置不用动，保存之后大概会出现DNS解析失败，但 Vercel 会给你配置建议，告诉你需要添加哪种类型的 DNS 记录。后面我们进行DNS解析。

进入阿里云的域名控制台，进入到域名解析页面，点添加记录，然后把Vercel中给出的[Type]内容填到[记录类型]，[Name]对应到[主机记录]，[Value]对应到[记录值]。写好这些之后回到Vercel，新添加的域名都亮起了勾，等一会儿就可以用你的域名访问博客了。

六、写作

之后你就可以在本地写作，并把你的文章推送到你的博客上。

1. 在本地 source/[文章目录]文件夹下写新的 .md 文章。
2. 写完后，在终端执行三连：

git add .
git commit -m "docs: Add new post about X" 
git push

3. git push 之后，Vercel 会自动检测到更新，并重新部署你的网站。
   
   
   
   
   做博客先拿Hexo部署水一篇www

2025.12.25