2026新手建站全流程：Vercel + Next.js一键部署技术博客并解决国内访问慢的问题

大家好，我是雷灵，一名独立前端开发者兼技术博主。2025年底我把老博客从Hexo彻底迁移到Next.js + Vercel，过程只花了半天，后面每次更新就是git push一下就完事。最让我满意的是，通过针对性优化，国内访问速度从原来的“卡成PPT”变成了秒开。今天就把这个2026年最新的新手全流程手把手写出来，绝不留坑，保证你看完就能上手。

为什么2026年还推荐Vercel + Next.js建技术博客？

我试过WordPress、Hexo、Astro，最后还是回到Next.js怀抱。原因很简单：

• 性能与SEO双在线：App Router + Server Components让首页秒开，SSG/ISR让文章页静态化，搜索引擎爱死这种结构。
• 开发体验爆炸：TypeScript + Tailwind + MDX，一口气写文章还能嵌入交互组件。
• 部署零门槛：Vercel官方亲儿子，一键导入GitHub仓库，自动构建、预览、HTTPS全包。
• 免费够用：Hobby计划每月100GB带宽，个人博客绰绰有余。
• 国内优化空间大：虽然vercel.app直连有时慢，但换个CNAME记录就能大幅提速。
  我当时就是被“git push即上线”这个特性打动，果断入坑。

  前期准备（10分钟搞定）

  1. Node.js：下载20.x或22.x LTS版本，安装后终端敲 node -v 确认。
  2. Git + GitHub：装好Git，注册/登录GitHub账号。
  3. Vercel账号：去 vercel.com 用GitHub一键登录，免费。
  4. 域名（强烈推荐）：去腾讯云或阿里云买个.com域名（一年几十块），后面加速全靠它。暂时不买也没事，先用 Vercel 分配的子域名测试。
     准备好这些，打开VS Code，准备开干。

     步骤1：创建Next.js项目

     终端执行一行命令：

     npx create-next-app@latest my-tech-blog --typescript --tailwind --eslint --app --yes
     cd my-tech-blog
     npm run dev

     浏览器打开 http://localhost:3000，看到欢迎页面就成功了。

     步骤2：把项目改造成技术博客

     2.1 安装必要依赖

     npm install gray-matter date-fns
     npm install marked  # 用于把Markdown转HTML

     2.2 创建文章目录

     在项目根目录新建 content/posts 文件夹，里面放你的第一篇文章 2026-nextjs-vercel.md：

     ---
     title: 2026用Next.js + Vercel建站的完整心得
     date: 2026-03-14
     description: 新手也能半天下线的技术博客搭建全流程
     ---
     正文内容从这里开始写，支持Markdown语法...

     2.3 写工具函数

     新建 lib/posts.ts：

     import fs from 'fs';
     import path from 'path';
     import matter from 'gray-matter';
     import { marked } from 'marked';
     const postsDirectory = path.join(process.cwd(), 'content/posts');
     export type Post = {
     slug: string;
     title: string;
     date: string;
     description: string;
     contentHtml: string;
     };
     export function getAllPosts(): Post[] {
     const fileNames = fs.readdirSync(postsDirectory);
     const allPosts = fileNames.map((fileName) => {
     const slug = fileName.replace(/\.md$/, '');
     const fullPath = path.join(postsDirectory, fileName);
     const fileContents = fs.readFileSync(fullPath, 'utf8');
     const { data, content } = matter(fileContents);
     const contentHtml = marked(content);
     return {
     slug,
     title: data.title,
     date: data.date,
     description: data.description,
     contentHtml,
     };
     });
     return allPosts.sort((a, b) => (a.date < b.date ? 1 : -1));
     }
     export function getPostBySlug(slug: string): Post | undefined {
     // 同上逻辑，单篇文章
     }

     2.4 创建页面

• app/page.tsx：首页，展示个人介绍 + 最新文章列表。
• app/blog/page.tsx：博客列表页，调用 getAllPosts() 渲染卡片。
• app/blog/[slug]/page.tsx：文章详情页，动态路由，显示完整内容。
  我还加了Tailwind做的响应式导航、暗黑模式切换、侧边栏推荐文章，整个界面干净专业。
  全局SEO：在 app/layout.tsx 用 Metadata API 设置 title、description、openGraph。

  步骤3：本地测试与美化

  npm run dev 跑起来，检查文章列表、详情页、移动端显示。
  我当时花了半小时调Tailwind，把代码块高亮和阅读体验做到舒服为止。

  步骤4：一键部署到Vercel

  1. 初始化Git仓库：

     git init
     git add .
     git commit -m "init blog"

  2. 在GitHub新建仓库，把代码push上去。
  3. 打开Vercel仪表盘 → Import Git Repository → 选择你的仓库 → Deploy。
  4. 几秒钟后就看到生产链接 https://my-tech-blog.vercel.app。
     以后每次写完文章 git push 就自动上线，爽到飞起。

     步骤5：绑定自定义域名

     在Vercel项目设置 → Domains 添加你的域名（比如 blog.leiling.dev）。
     Vercel会提示你去域名商添加记录。

     步骤6：解决国内访问慢的核心方案（亲测有效）

     这是很多新手最头疼的地方，我踩过坑也总结出最简单有效的办法：
     方案一（推荐新手，5分钟搞定）
     用国内DNS服务商（腾讯云/阿里云解析）的控制台，添加以下记录：

• 如果是子域名 blog.yourdomain.com：
  类型：CNAME
  主机记录：blog
  记录值：cname-china.vercel-dns.com
• 如果是根域名 yourdomain.com：
  类型：A
  主机记录：@
  记录值：76.223.126.88（或 76.76.21.21 / 76.76.21.98，任选一个）
  保存后等DNS生效（通常10-30分钟），Vercel会自动验证。
  我上海的朋友反馈，切换后加载时间从4-5秒降到800ms以内。
  方案二（进阶，额外加速）
  把域名NS服务器改成Cloudflare的，添加站点后：
• 添加CNAME记录指向上面Vercel的地址
• 开启橙色云Proxy（全站加速）
• SSL设置为Full (strict)
• 添加页面规则缓存静态资源
  额外性能优化（必做）：
• 所有文章用SSG：页面添加 export const revalidate = 3600;（每小时重新生成）
• 图片全部换成 next/image 并配置 loader
• 开启Vercel Analytics看真实用户速度，哪里慢优化哪里
• 文章太多时考虑把静态资源扔到阿里OSS + CDN
  我亲测这套组合拳后，百度和Google收录也更快了，国内IP访问体验接近原生。

  步骤7：SEO与后期维护

• 用Next.js Metadata生成每篇文章的title、description、keywords
• 根目录添加 sitemap.ts 自动生成站点地图
• 提交到百度站长平台和Google Search Console
• 定期git push更新内容，Vercel自动重新部署

  常见问题与避坑

• 部署失败：检查Node版本和package.json脚本
• 国内打不开：99%是DNS没用china专用记录
• 文章不显示：确认frontmatter格式正确
• 想加评论：后面再接Giscus或Twikoo，同样一键

  写在最后

  跟着上面步骤走，你现在就能拥有一个2026年最潮的技术博客：代码现代、部署自动、国内访问不卡、SEO友好。
  我就是这么一步步把自己的站做起来的，现在每天都有新朋友通过搜索引擎找到我分享的内容。
  建站只是开始，坚持输出才是关键。
  有任何问题，欢迎在评论区@我，我是雷灵，我们一起把技术博客玩出花来！
  （完）