建站教程

🚀 建站基础流程

常见建站框架: Hexo、Jekyll、Hugo、VuePress、Docusaurus、WordPress、Ghost、VitePress。

总结流程: 购买域名 → 服务器(可选) → 部署代码 → 绑定域名 → 设置 DNS → 设置解析

可以选择现有框架(根据美观,难易,加载时间,技术取向)

国内选择: 可以选择备案或套用 Cloudflare

域名服务商

国内: 万网
国外: NameSilo、NameCheap、spaceship、Cloudflare

部署平台

免费服务: Vercel、GitHub Pages、Netlify、Cloudflare Pages
推荐: Netlify 和 Cloudflare 提供很多免费服务

ps:netlify 和 cloudflare 大善人有很多免费服务

📚 主流建站框架对比

框架名称	技术栈	特点	适用场景
VitePress	Vue3 + Vite	轻量快速，配置简单	技术文档、个人博客
Docusaurus	React + MDX	功能丰富，社区活跃	大型文档项目
Next.js	React + Node.js	全栈框架，SSR/SSG支持	企业级应用、博客
Hexo	Node.js + EJS	主题丰富，生态成熟	个人博客
Hugo	Go	构建速度快，资源占用少	静态网站、博客
Jekyll	Ruby	GitHub Pages 默认支持	简单的项目文档
Astro	多框架支持	内容优先，性能优秀	内容网站、博客
Astro + Pure	Astro + 主题	极简设计，专注内容	个人博客、作品集

🎯 框架选择建议

按用途选择

个人博客:
- 需要丰富主题：Hexo
- 注重性能：Hugo
- 想要游戏化体验：Next.js + Gamer主题 :https://github.com/CelestialRipple/Gamer
- 极简风格：Astro + Astro Theme Pure
项目文档:
- 小型项目：VitePress
- 大型项目：Docusaurus
- GitHub 项目：Jekyll

按技术栈选择

熟悉 Vue：选择 VitePress
熟悉 React：选择 Docusaurus 或 Next.js
不想写前端代码：选择 Hexo/Hugo
需要全栈功能：选择 Next.js
内容优先：选择 Astro
极简设计：选择 Astro + Astro Theme Pure

🔧 建站工具推荐

📝 博客框架

Astro: withastro/astro - 内容优先的现代框架，性能优秀，支持多框架组件。
Blogdown: rstudio/blogdown - 基于 R Markdown 和 Hugo，适合数据科学博客。
Docusaurus: facebook/docusaurus - 基于 React，专为文档网站设计，功能丰富。
Gatsby: gatsbyjs/gatsby - 基于 React，功能强大，插件生态丰富，适合构建高性能网站。
Ghost: TryGhost/Ghost - 专业的发布平台，注重写作体验和内容创作。
Gridea: getgridea/gridea - 一个静态博客写作客户端，简单易用。
Halo: halo-dev/halo - 一款现代化的开源博客/CMS 系统，功能强大。
Hexo: hexojs/hexo - 快速、简洁且高效的博客框架，拥有丰富的主题和插件。
Hugo: gohugoio/hugo - Go 语言编写的静态网站生成器，以极快的构建速度著称。
Jekyll: jekyll/jekyll - Ruby 开发的静态网站生成器，GitHub Pages 默认支持。
Pelican: getpelican/pelican - Python 编写的静态网站生成器，支持 Markdown 和 reStructuredText。
Saber: saberland/saber - 基于 Vue.js 的静态网站生成器，可扩展性强。
Typecho: typecho/typecho - 轻量、高效的 PHP 博客程序。
VuePress: vuejs/vuepress - Vue 驱动的静态网站生成器，注重文档和技术写作。
WordPress: WordPress/WordPress - 功能最强大的 CMS 系统，拥有庞大的主题和插件生态。
Wowchemy: wowchemy/wowchemy-hugo-modules - 基于 Hugo 的网站构建器，专为学术和技术网站设计。
Vanblog: mereith/van-blog - 一款简洁、美观的个人博客系统。

🎨 主题推荐

Butterfly: jerryc127/hexo-theme-butterfly - 现代化、可定制、响应式，支持暗色模式，适合 Hexo
Sakurairo: mirai-mamori/Sakurairo - WordPress 主题，具有 AI 辅助阅读功能

💬 评论系统

Twikoo: twikoojs/twikoo - 轻量评论系统，支持 Vercel/CF/自建，支持 Markdown 与邮件通知
Waline: walinejs/waline - 轻量级评论系统，支持 Supabase 后端，支持 Markdown 与邮件通知

📊 数据统计

51LA: 51.LA - 免费流量统计，实时监控，PV/UV/地域/设备等维度
Supabase: supabase/supabase - 开源后端，支持评论、用户认证、数据分析
Waline + Supabase: 轻量级评论系统 + 开源后端，支持访问量统计、用户管理、数据持久化

🎯 图标与字体

图标库: Iconify - 统一图标框架，支持 100+ 图标集
字体: Google Fonts - 免费网页字体，支持中文
图标: Feather Icons - 简洁优雅的图标集
SVG 图标: Heroicons - 精美的 SVG 图标库

🖼️ 图片优化

压缩工具: TinyPNG - 在线图片压缩，保持质量
格式转换: Convertio - 支持多种图片格式转换
CDN
懒加载

🔍 SEO 工具

关键词分析: Google Trends - 搜索趋势分析
网站分析: Google Search Console - 免费 SEO 分析工具
结构化数据: Schema.org - 结构化数据标记指南
Meta 标签生成: Meta Tags - 社交媒体预览标签生成器

🚀 性能优化

图片优化: Sharp - Node.js 图片处理库
压缩: Gzip - 文件压缩算法
缓存: Workbox - PWA 缓存策略
CDN

🔧 工具选择建议

博客框架: 简单快速选 Hexo；全栈与高度定制选 Next.js；极致性能选 Hugo；内容优先选 Astro；极简设计选 Astro + Pure
主题: 美观选 Butterfly/Fluid/NexT；功能型 Sakura；极简 Paper/Minimal；现代极简选 Astro Theme Pure
评论: 轻量 Twikoo/Waline；GitHub 生态 Gitalk/Giscus；自建 Commento/Remark42；全功能选 Waline + Supabase
统计: 免费 51LA/百度统计/友盟+；自建 Matomo/Umami；通用 GA；开源后端选 Supabase + Waline
图标: 统一管理选 Iconify；简洁风格选 Feather；精美设计选 Heroicons
图片: 压缩用 TinyPNG；托管用 ImgBB；处理用 Sharp
SEO: 基础分析用 Search Console；关键词用 Trends；结构化数据用 Schema.org
部署: 简单快速选 Netlify；功能丰富选 Vercel；免费稳定选 GitHub Pages；CDN 加速选 Cloudflare Pages

📖 博客搭建参考资料

优秀博客与项目示例

Sakurairo - 一款具有 AI 辅助阅读功能的 WordPress 主题
Auriel's Blog - 详细搭建步骤与主题定制
Ken Xu's Blog - 从零开始与完整部署流程
Nolebase - 知识库/文档型站点示例
Gamer - Next.js 游戏风主题个人站，支持 i18n、暗黑模式、WS 实时状态等
fuwari - 基于 Astro 构建的静态博客模板
Astro Theme Pure - 极简设计的 Astro 主题，专注内容展示，支持暗色模式

常用框架/资料速查

✍️ 写作平台（可选,有的访问范围受限）

juejin: https://juejin.cn/
博客园: https://www.cnblogs.com/
WordPress（托管版或自建）：https://zh-cn.wordpress.com
Medium：https://medium.com
Blogger：https://www.blogger.com
Telegraph：https://telegra.ph
Matters：https://matters.news
Steemit：https://steemit.com

📧 Cloudflare 邮件路由配置

前置要求

已拥有域名
完成域名托管到 Cloudflare（如果在 CF 购买域名可跳过此步骤）

配置步骤

bash

# 1. 添加域名
  访问CF控制台 → 点击「添加站点」→ 输入域名 → 选择免费计划

# 2. 修改DNS服务器（非CF购买域名需操作）
  在域名注册商处修改NS记录：

# 3. 创建邮件路由
  a. 进入域名控制台 → 侧边栏「电子邮件」→「路由规则」
  b. 点击「创建路由规则」
  c. 填写规则信息：
    - 名称：自定义子域名
    - 匹配：匹配所有邮件
    - 目标：选择「转发」→ 输入目标邮箱地址
    - 保存规则

# 4. 验证配置（等待DNS生效约5-30分钟）
  发送测试邮件
  ▸ 预期结果：邮件将转发至绑定邮箱

建站教程 ​

🚀 建站基础流程 ​

域名服务商 ​

部署平台 ​

📚 主流建站框架对比 ​

🎯 框架选择建议 ​

按用途选择 ​

按技术栈选择 ​

🔧 建站工具推荐 ​

📝 博客框架 ​

🎨 主题推荐 ​

💬 评论系统 ​

📊 数据统计 ​

🎯 图标与字体 ​

🖼️ 图片优化 ​

🔍 SEO 工具 ​

🚀 性能优化 ​

🔧 工具选择建议 ​

📖 博客搭建参考资料 ​

优秀博客与项目示例 ​

常用框架/资料速查 ​

✍️ 写作平台（可选,有的访问范围受限） ​

📧 Cloudflare 邮件路由配置 ​

前置要求 ​

配置步骤 ​

建站教程

🚀 建站基础流程

域名服务商

部署平台

📚 主流建站框架对比

🎯 框架选择建议

按用途选择

按技术栈选择

🔧 建站工具推荐

📝 博客框架

🎨 主题推荐

💬 评论系统

📊 数据统计

🎯 图标与字体

🖼️ 图片优化

🔍 SEO 工具

🚀 性能优化

🔧 工具选择建议

📖 博客搭建参考资料

优秀博客与项目示例

常用框架/资料速查

✍️ 写作平台（可选,有的访问范围受限）

📧 Cloudflare 邮件路由配置

前置要求

配置步骤