🚀 Ultimate Guide to Zero-Cost Blog Building

🚀 零成本建站完全指南

🌟 背景故事

🌟 Background Story

在接触前端领域之前,我和许多刚入门前端的新手一样，面对纷繁复杂的技术栈选择陷入迷茫,不知道从何下手 。 Before entering the frontend field, like many beginners, I was overwhelmed by the complex tech stack choices and didn't know where to start.

最初雄心勃勃想用 Next.js 从零搭建博客，却在实战中屡屡碰壁。最终找到「模板先行，逐步精进」的破局之道： Initially ambitious about building a blog from scratch with Next.js, I repeatedly hit obstacles. Finally found the breakthrough approach: "Template first, iterate gradually":

"先有后优"原则： "Build first, optimize later" principle:

通过成熟模板快速搭建可运行版本 ➡️ 持续迭代优化 ➡️ 渐进式学习技术细节 Use mature templates to quickly build a working version ➡️ Continuous iteration and optimization ➡️ Progressive learning of technical details

本文将分享这一方法论的具体实践，手把手带您完成从建站到部署的全流程。 This article will share the practical implementation of this methodology, guiding you through the entire process from site building to deployment.

如果你在阅读过程中有任何疑问，欢迎随时联系我（可以通过网站内的邮箱），我会尽力提供帮助。 If you have any questions during reading, feel free to contact me (via the email on the website), and I'll do my best to help.

🛠️ 第一步：技术选型指南

🛠️ Step 1: Technology Selection Guide

方案对比表

Solution Comparison Table

1. VitePress 极速方案

1. VitePress Express Solution

graph TD
    A[安装Node.js] --> B[创建项目]
    B --> C[选择主题]
    C --> D[编写Markdown]
    D --> E[自动部署]
    A[Install Node.js] --> B[Create Project]
    B --> C[Select Theme]
    C --> D[Write Markdown]
    D --> E[Auto Deploy]

核心优势： Core Advantages:

• 🚀 5分钟快速启动

• 🚀 Quick start in 5 minutes

• 📖 纯Markdown写作体验（原生文件管理）

• 📖 Pure Markdown writing experience (native file management)

• 🌈 内置深色模式切换

• 🌈 Built-in dark mode toggle

• 🧱 插件系统扩展性强

• 🧱 Extensible plugin system

推荐配置： Recommended Configuration:

# 初始化项目
# Initialize project
npm init vitepress@latest
# 选择默认配置
# Select default configuration
# 启动开发服务器
# Start development server
npm run dev

学习资源： Learning Resources:

• VitePress 官方文档

• VitePress Official Docs

• 技术胖实战教程

• Technical Pang Tutorial

• 掘金配置指南

• Juejin Configuration Guide

2. Next.js 进阶方案

2. Next.js Advanced Solution

明星模板推荐： Featured Template Recommendations:

• 🔥 tailwind-nextjs-starter-blog

• 🔥 tailwind-nextjs-starter-blog

  • ✅ 选择理由：集成 Tailwind CSS + MDX。
  • ✅ Reason: Integrates Tailwind CSS + MDX.

• 🔥 NotionNext

• 🔥 NotionNext

  • 淘汰原因：不太符合个人需求，各位可以看看，如果需要这也是一个不错的成熟的模板。
  • Rejection reason: Doesn't quite meet personal needs, but it's still a good mature template to consider.

核心功能： Core Features:

• 📱 响应式设计

• 📱 Responsive design

• 🔍 SEO深度优化

• 🔍 Deep SEO optimization

• ✨ MDX富文本交互

• ✨ MDX rich text interaction

• 🏷️ 文章标签系统

• 🏷️ Article tagging system

技术栈亮点： Tech Stack Highlights:

// 文章元数据示例
// Article metadata example
export const meta = {
  title: 'Next.js优化技巧', // Next.js optimization tips
  date: '2025-01-21',
  tags: ['前端', '性能优化'], // Frontend, Performance optimization
  cover: '/covers/performance.jpg',
}

快速上手： Quick Start:

• Next.js 博客项目速成指南

• Next.js Blog Quick Start Guide

• 官方推荐学习路径：

• Official recommended learning path:

  npx create-next-app@latest
  cd your-app
  npm run dev
  

第二步：选择网站托管平台

Step 2: Choose Web Hosting Platform

目前网上有许多网站托管平台，如 Cloudflare Pages、GitHub Pages 和 Vercel 等¹，这些平台提供了免费的托管服务，适合个人开发者和小型项目使用。 There are many website hosting platforms online, such as Cloudflare Pages, GitHub Pages, and Vercel¹, which provide free hosting services suitable for individual developers and small projects.

推荐托管平台

Recommended Hosting Platforms

1. Vercel

2. Vercel

   • 特点：Vercel 是 Next.js 的官方推荐托管平台，支持一键部署和自动构建。它还提供了强大的缓存机制和全球 CDN 加速，确保网站的访问速度。

   • Features: Vercel is the officially recommended hosting platform for Next.js, supporting one-click deployment and automatic builds. It also provides powerful caching mechanisms and global CDN acceleration to ensure website access speed.

   • 步骤：

   • Steps:

     • 注册并登录 Vercel 账户。

     • Register and log in to your Vercel account.

     • 将 GitHub 仓库与 Vercel 进行关联。

     • Connect your GitHub repository with Vercel.

     • 选择要部署的分支，并配置环境变量（如需要）。

     • Select the branch to deploy and configure environment variables (if needed).

     • 完成部署后，Vercel 会自动生成一个唯一的域名供你使用。

     • After deployment, Vercel will automatically generate a unique domain for you.

   注意事项： Notes:

   • 如果你的 GitHub 主账户是使用国内邮箱（如 QQ 邮箱），可能会遇到无法正常使用 Vercel 的问题。建议将邮箱改为国际域名（如 Gmail 或 Outlook），或者尝试通过邮件申请解禁。

   • If your GitHub primary account uses a domestic email (such as QQ email), you may encounter issues using Vercel normally. It's recommended to change to an international domain (such as Gmail or Outlook), or try to apply for unblocking via email.

   • 在部署过程中，可能会遇到错误提示 error: SyntaxError: Unexpected identifier 'assert'。这是由于 Node.js 版本不兼容导致的。解决方法是在 Vercel 控制台中将 Node.js 版本改为 v20，并在项目的 package.json 中增加版本指定：

   • During deployment, you may encounter the error error: SyntaxError: Unexpected identifier 'assert'. This is caused by Node.js version incompatibility. The solution is to change the Node.js version to v20 in the Vercel console and add version specification in your project's package.json:

   "engines": {
     "node": "^20.0.0"
   }
   

3. GitHub Pages

4. GitHub Pages

   • 特点：GitHub Pages 是 GitHub 提供的一项免费托管服务，特别适合静态网站。它支持自定义域名和 HTTPS 加密，操作简单易用。

   • Features: GitHub Pages is a free hosting service provided by GitHub, especially suitable for static websites. It supports custom domains and HTTPS encryption, with simple and easy-to-use operations.

   • 步骤：

   • Steps:

     • 将项目推送到 GitHub 仓库。

     • Push the project to a GitHub repository.

     • 在仓库设置中启用 GitHub Pages 功能。

     • Enable GitHub Pages in repository settings.

     • 选择要发布的分支（通常是 main 或 gh-pages）。

     • Select the branch to publish (usually main or gh-pages).

     • 完成后，GitHub 会自动生成一个默认域名，也可以绑定自定义域名。

     • After completion, GitHub will automatically generate a default domain, and you can also bind a custom domain.

5. Cloudflare Pages

6. **Cloudflare Pages`

   • 特点：Cloudflare Pages 是 Cloudflare 提供的静态网站托管服务，支持自动构建和全球 CDN 加速。它还提供了免费的 SSL 证书和 DDoS 防护。

   • Features: Cloudflare Pages is a static website hosting service provided by Cloudflare, supporting automatic builds and global CDN acceleration. It also provides free SSL certificates and DDoS protection.

   • 步骤：

   • Steps:

     • 注册并登录 Cloudflare 账户。

     • Register and log in to your Cloudflare account.

     • 将 GitHub 仓库与 Cloudflare Pages 进行关联。

     • Connect your GitHub repository with Cloudflare Pages.

     • 选择要部署的分支，并配置环境变量（如需要）。

     • Select the branch to deploy and configure environment variables (if needed).

     • 完成部署后，Cloudflare 会自动生成一个唯一的域名供你使用。

     • After deployment, Cloudflare will automatically generate a unique domain for you.

备案要求对比

Filing Requirements Comparison

免费额度对比

Free Tier Comparison

平台对比矩阵

Platform Comparison Matrix

第三步：部署步骤详解

Step 3: Deployment Steps Explained

主要部署流程可以参照: Refer to main deployment process:

• 如何在国内访问vercel部署应用

• How to access Vercel deployed apps in China

• NotionNext部署教程

• NotionNext Deployment Tutorial

以下大致介绍以下各平台部署流程。 Below is a brief introduction to the deployment process for each platform.

1. Vercel 部署流程

1. Vercel Deployment Process

Vercel 的自动化流程极大简化了部署复杂度，以下是具体操作步骤： Vercel's automation greatly simplifies deployment complexity. Here are the specific steps:

1. 关联代码仓库

2. Connect Code Repository

   • 登录 Vercel 后，点击 Add New Project，选择你的 GitHub/GitLab 仓库。

   • After logging into Vercel, click Add New Project and select your GitHub/GitLab repository.

   • 授权 Vercel 访问仓库权限，建议仅勾选需要部署的仓库以保障账户安全。

   • Authorize Vercel to access repository permissions, it's recommended to only check the repositories that need deployment for account security.

3. 配置构建参数

4. Configure Build Parameters

   • 在项目设置中，选择框架为 Next.js（若使用其他框架需手动指定）。

   • In project settings, select the framework as Next.js (manual specification required for other frameworks).

   • 构建命令默认为 npm run build，输出目录为 out（Next.js 生成静态文件的默认路径）。

   • Build command defaults to npm run build, output directory is out (default path for Next.js generated static files).

   • 若模板需要环境变量（如 API 密钥），在此处添加键值对。

   • If the template requires environment variables (such as API keys), add key-value pairs here.

5. 处理常见问题

6. Handle Common Issues

   • Node.js 版本冲突：在 package.json 中添加引擎限制：

   • Node.js version conflict: Add engine restrictions in package.json:

     "engines": {
       "node": "^20.0.0"
     }
     

   • 部署失败提示权限问题：检查仓库是否为私有模式，Vercel 免费版仅支持公开仓库部署。

   • Deployment fails with permission error: Check if the repository is in private mode, Vercel free tier only supports public repository deployment.

7. 域名绑定（可选）

8. Domain Binding (Optional)

   • 进入项目设置中的 Domains，输入已购买的域名并按提示配置 DNS 解析（需将域名 CNAME 指向 cname.vercel-dns.com）。
   • Go to Domains in project settings, enter your purchased domain and configure DNS resolution as prompted (need to point domain CNAME to cname.vercel-dns.com).

2. GitHub Pages 部署流程

2. GitHub Pages Deployment Process

适合纯静态站点（如 VitePress 生成的页面），步骤如下： Suitable for pure static sites (such as VitePress generated pages), steps as follows:

1. 生成静态文件

2. Generate Static Files

   在项目根目录运行构建命令（以 VitePress 为例）： Run the build command in the project root directory (using VitePress as example):

   npm run build
   

   生成的静态文件默认位于 .vitepress/dist 目录。 The generated static files are located in the .vitepress/dist directory by default.

3. 推送至 GitHub 仓库

4. Push to GitHub Repository

   将构建后的文件推送到新分支（如 gh-pages）： Push the built files to a new branch (such as gh-pages):

   git subtree push --prefix .vitepress/dist origin gh-pages
   

5. 启用 Pages 服务

6. Enable Pages Service

   • 进入仓库的 Settings → Pages，选择 gh-pages 分支和 / (root) 目录。

   • Go to the repository's Settings → Pages, select the gh-pages branch and / (root) directory.

   • 保存后等待约 1 分钟，访问生成的 https://<用户名>.github.io/<仓库名>/ 即可查看网站。

   • After saving, wait about 1 minute, then visit the generated https://<username>.github.io/<repo>/ to view the website.

7. 自定义域名（可选）

8. Custom Domain (Optional)

   在 Pages 设置页输入域名，并在域名服务商处添加 CNAME 记录指向 <用户名>.github.io。 Enter the domain in Pages settings, and add a CNAME record pointing to <username>.github.io at your domain registrar.

3. Cloudflare Pages 部署流程

3. Cloudflare Pages Deployment Process

适合需要全球加速的站点，支持自动构建： Suitable for sites needing global acceleration, supports automatic builds:

1. 关联代码仓库

2. Connect Code Repository

   • 登录 Cloudflare 控制台，进入 Pages → Create Application。

   • Log in to Cloudflare console, go to Pages → Create Application.

   • 选择 GitHub/GitLab 仓库并授权访问。

   • Select GitHub/GitLab repository and authorize access.

3. 配置构建命令

4. Configure Build Command

   • 框架预设选择 Next.js，构建命令填写 npm run build，输出目录填写 out。

   • Select Next.js for framework preset, fill in npm run build for build command, and out for output directory.

   • 若需覆盖默认缓存策略，可在 Environment Variables 中添加 NODE_VERSION=20.

   • To override default cache policies, add NODE_VERSION=20 in Environment Variables.

5. 部署与回滚

6. Deployment and Rollback

   • 每次代码推送至关联分支会自动触发部署，历史版本可在 Deployments 中查看和回滚。

   • Each code push to the linked branch automatically triggers deployment, historical versions can be viewed and rolled back in Deployments.

   • 通过 Preview 功能可测试分支修改效果，确认无误后合并至主分支。

   • Use the Preview feature to test branch changes, merge to main branch after confirmation.

第四步：优化与定制建议

Step 4: Optimization and Customization Recommendations

1. SEO 优化

1. SEO Optimization

• 基础配置

• Basic Configuration

  在页面头部添加 meta 标签（以 Next.js 为例）： Add meta tags to page header (using Next.js as example):

  <title>你的博客标题</title>
  <meta name="description" content="网站描述，控制在 150 字符内" />
  <meta property="og:image" content="/og-image.png" />
  

• 提交搜索引擎

• Submit to Search Engines

  登录 Google Search Console 和 Bing Webmaster Tools，提交网站 sitemap.xml（通常位于 /sitemap.xml）。 Log in to Google Search Console and Bing Webmaster Tools, submit website sitemap.xml (usually located at /sitemap.xml).

2. 访问统计

2. Analytics

• Google Analytics

• Google Analytics

  在 _app.js 中集成跟踪代码（Next.js 示例）： Integrate tracking code in _app.js (Next.js example):

  import { GoogleAnalytics } from '@next/third-parties/google'
  export default function App({ Component, pageProps }) {
    return (
      <>
        <Component {...pageProps} />
        <GoogleAnalytics gaId="G-XXXXXX" />
      </>
    )
  }
  

• 本地化替代方案

• Localized Alternative

  可使用 umami 自建统计服务，避免依赖第三方平台。 Can use umami to self-host analytics service, avoiding third-party platform dependencies.

3. 性能调优

3. Performance Tuning

• 图片压缩

• Image Compression

  使用 next/image 组件自动优化图片，或通过以下工具手动压缩图片： Use next/image component to automatically optimize images, or manually compress images using the following tools:

  • Squoosh：支持手动调整压缩率，可预览效果

  • Squoosh: Supports manual compression rate adjustment with preview

  • TinyPNG：智能压缩 PNG/JPG 文件，API 支持批量处理（免费版每月 500 张）

  • TinyPNG: Intelligent PNG/JPG compression, API supports batch processing (500 images/month on free tier)

• 代码瘦身

• Code Optimization

  运行 npm run analyze 生成构建体积报告（需安装 @next/bundle-analyzer），移除未使用的依赖。 Run npm run analyze to generate build volume report (requires installing @next/bundle-analyzer), remove unused dependencies.

• 使用 CDN

• Use CDN

  配置 Cloudflare 或其他 CDN 服务，加速静态资源加载。 Configure Cloudflare or other CDN services to accelerate static resource loading.

• 懒加载图片

• Lazy Load Images

  使用 next/image 组件的 loading="lazy" 属性，实现图片懒加载。 Use the loading="lazy" property of the next/image component to implement lazy image loading.

❓ 高频问题解答

❓ Frequently Asked Questions

Q：自定义域名绑定后无法访问，提示 DNS 解析错误怎么办？ Q: What should I do if custom domain binding fails with DNS resolution error?

A： A:

1. 检查域名服务商处的 DNS 配置是否指向托管平台（如 Vercel 需设置 CNAME 到 cname.vercel-dns.com）。

2. Check if the DNS configuration at your domain registrar points to the hosting platform (e.g., Vercel requires CNAME set to cname.vercel-dns.com).

3. 若使用 Cloudflare，需关闭代理状态（灰色云朵图标），等待 5 分钟后再测试。

4. If using Cloudflare, need to turn off proxy status (gray cloud icon), wait 5 minutes before testing.

5. 通过 DNS Checker 工具验证全球 DNS 解析是否生效。

6. Use DNS Checker tool to verify if global DNS resolution is effective.

Q：如何实现文章加密功能？ Q: How to implement article encryption?

**A：**可使用 Next.js API 路由编写鉴权逻辑，或采用现成方案如 next-auth。 A: Can use Next.js API routes to write authentication logic, or use existing solutions like next-auth.

Q：部署时遇到 error: SyntaxError: Unexpected identifier 'assert' 怎么办？ Q: What to do when encountering error: SyntaxError: Unexpected identifier 'assert' during deployment?

**A：**这是由于 Node.js 版本不兼容导致的。解决方法是在 Vercel 控制台中将 Node.js 版本改为 v20，并在项目的 package.json 中增加版本指定： A: This is caused by Node.js version incompatibility. The solution is to change the Node.js version to v20 in the Vercel console and add version specification in your project's package.json:

"engines": {
  "node": "^20.0.0"
}

Q：使用大陆服务器必须备案吗？ Q: Is filing required for mainland China servers?

• ✅ 是！任何绑定大陆IP的域名都需要ICP备案

• ✅ Yes! Any domain bound to mainland China IP requires ICP filing

• ✅ 香港/海外服务器无需备案

• ✅ Hong Kong/overseas servers do not require filing

• ✅ vercel，cloud flare page等无需备案

• ✅ Vercel, Cloudflare Pages, etc. do not require filing

额度超限处理

Quota Exceeded Handling

当触发免费额度限制时： When free quota limits are triggered:

• Vercel：暂停部署直到下月重置

• Vercel: Pause deployment until next month reset

• Cloudflare：自动降级为低速访问

• Cloudflare: Automatically downgrade to low-speed access

• 优化建议：

• Optimization recommendations:

  # 清理构建缓存
  # Clear build cache
  rm -rf .next/cache
  # 启用增量静态生成（ISR）
  # Enable Incremental Static Regeneration (ISR)
  export NEXT_TELEMETRY_DISABLED=1
  

通过以上步骤，你可以在零成本的前提下快速搭建一个功能完备的技术博客。随着对框架理解的深入，可逐步尝试自定义主题、添加评论系统等进阶功能。如果在实践中遇到具体问题，欢迎通过页脚的联系方式与我交流实战经验。 Through the above steps, you can quickly build a fully functional technical blog at zero cost. As your understanding of the framework deepens, you can gradually try advanced features like custom themes and comment systems. If you encounter specific issues in practice, feel free to contact me through the footer to share practical experience.