使用vercel容器 0成本低代码构建一个博客网站

https://hexo.io/zh-cn/

安装 NodeJS

Hexo 布置

# Windows终端以管理员身份需要执行以下
set-ExecutionPolicy RemoteSigned

安装 hexo

npm install -g hexo-cli
hexo init <folder>
cd <folder>
npm install

安装主题

例子

npm install hexo-theme-inside

配置主题

1. 配置 project/_config.yml

   theme: inside

2. 新建 _config.inside.yml

3. 将 project/node_modules/hexo-theme-inside中的 _config.yml下的内容复制至 _config.inside.yml中

启动项目

hexo s

http://localhost:4000/

新建页面

hexo new page "page_name"

新建文章

hexo new "blog_title"

Twikoo插件

• 一个简洁、安全、免费的静态网站评论系统

Vercel 挂载twikoo

1. 申请 MongoDB 账号

   https://www.mongodb.com/cloud/atlas/register

2. 创建免费 MongoDB 数据库，区域推荐选择 AWS / N. Virginia (us-east-1)

3. 在 Clusters 页面点击 CONNECT，按步骤设置允许所有 IP 地址的连接，创建数据库用户，并记录数据库连接字符串，请将连接字符串中的 <password> 修改为数据库密码

4. 申请 Vercel 账号（可使用github注册登录）

   https://vercel.com/signup

5. 点击以下Deploy按钮将 Twikoo 一键部署到 Vercel

   https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fimaegoo%2Ftwikoo%2Ftree%2Fmain%2Fsrc%2Fserver%2Fvercel-min

6. 进入 Settings - Environment Variables，添加环境变量 MONGODB_URI，值为第 3 步的数据库连接字符串

7. 进入 Deployments , 然后在任意一项后面点击更多（三个点） , 然后点击Redeploy , 最后点击下面的Redeploy

8. 进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示

9. Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id

GitHub

1. 安装

   https://git-scm.com/download

2. 配置 github ssh

   ssh-keygen -t rsa -C "your_email@example.com"
   # github注册使用的电子邮箱，一路回车

3. 将 C:\Users\、\.ssh下的 id_rsa.pub中的内容复制到 github 中的SSH密钥中

Cloudflare 挂载

推荐使用

1. 上传项目至github仓库，不需要上传“npm包”

git init
git add .
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/uaincc/uain.git
git push -u origin main

2. 创建Cloudflare Pages

   https://dash.cloudflare.com/62acc9b94059c5badc3a2d2481bf90b1/workers-and-pages/create/pages

3. 连接到Git

4. 构建命令

npm install hexo && npx hexo clean && npx hexo generate

5. 输出目录 Public

6. 环境变量

NODE_VERSION 20.17.0

NPM_VERSION 10.8.2

7. 等待完成即可

Vercel 挂载

将编译后的Public文件上传至github，然后使用vercel挂载，不推荐此例

1. 配置 project/_config.yml

   deploy:
     type: 'git'
     repo: https://github.com/<user>/<user>.git

2. 上传hexo至github

   npm install hexo-deployer-git --save
   git config --global user.email "you@example.com"
   git config --global user.name "Your Name"
   git config --global core.autocrlf false
   hexo clean
   hexo g
   hexo d

1. Add New Project 新建项目

2. Import导入hexo所在的仓库

Qexo

一个美观、强大的在线 静态博客 管理器 (oplog.cn)