怎么创建网站免费建立个人网站保姆级建站教程

域名服务器搞不懂？别慌，这正是我写这篇保姆级建站教程的原因。很多人卡在第一步，以为必须花钱买域名、租服务器才能开始，其实完全没必要。作为干了十年网站建设的老兵，我太清楚初学者的难处了：不是代码写不好，而是环境太复杂，配置太繁琐，导致还没开始写第一行代码就放弃了。

今天这篇怎么创建网站免费建立个人网站的实操案例，不整虚的。我们直接模拟一个真实场景：一位后端初学者小李，想给自己的博客项目找个家，但预算为零，技术栈刚入门。我将还原他从零到上线的全过程，涵盖技术选型、代码实现、部署细节，甚至包括那些坑爹的报错排查。跟着做，哪怕你连 Linux 命令都没敲过，也能把网站跑起来。

项目背景与需求：从“零预算”到“能访问”

小李的需求很典型：做一个个人技术博客，展示他的 Java 学习笔记和项目源码。核心诉求只有三个：完全免费、支持 Markdown 写作、响应式适配手机。

这里有个巨大的认知误区需要澄清：免费不等于简陋，也不等于没有专业度。很多新手觉得免费托管只能放个 HTML 文件，其实不然。现在的云服务商为了抢占开发者市场，提供了极其慷慨的免费额度。关键在于，你得知道哪些资源是“真免费”，哪些是“试用版”。

核心痛点拆解：

  1. 域名问题：买域名要钱，不买能不能访问？能。我们可以使用云服务商提供的二级域名（如 yourname.vercel.app），虽然不够个性化，但对于个人站完全够用，且支持 HTTPS。
  2. 服务器问题：传统 VPS 每月几十上百块，对个人项目是浪费。我们需要的是“静态托管”或“无服务器（Serverless）”架构，这种架构按量计费，免费额度足以支撑个人站的所有流量。
  3. 技术门槛：小李只会基本的 Java，前端只会点 HTML。所以技术选型必须简单，不能让他陷入复杂的后端配置中。

合格标准设定： 在这个案例中，我们定义“成功上线”的标准如下：

  • 网站在浏览器中正常加载，无 404 错误。
  • 在手机端浏览布局正常，无横向滚动条。
  • 加载速度在 4G 网络下首屏加载时间小于 2 秒。
  • 支持通过 Markdown 格式发布文章。
  • 拥有独立的二级域名，且支持 HTTPS 加密。

这些标准看似简单，但对于初学者来说，每一个都对应着具体的技术实现难点。比如“无 404 错误”，就涉及到静态资源路径的配置；“加载速度”则与代码压缩、图片优化有关。我们接下来的技术选型，就是为了解决这些问题，同时保持零成本。

技术选型：为什么选 Hexo + Vercel 组合？

在怎么创建网站免费建立个人网站的过程中，工具链的选择决定了后续的维护成本。我见过太多人为了“高大上”选了 WordPress 加自建服务器，结果光维护数据库和安全补丁就焦头烂额。对于个人站，“静态生成 + 云端托管” 是性价比最高的组合。

前端框架选型：Hexo 为什么不选 WordPress？因为它是动态的，需要数据库和 PHP 环境，部署复杂。为什么不选 Vue/React SPA？因为 SEO 不友好，首屏渲染慢。 Hexo 是一个基于 Node.js 的静态博客生成器。它的优势在于：

  • 极简：一条命令 hexo new 就能生成一篇新文章。
  • SEO 友好：生成的是纯 HTML/CSS/JS 文件，搜索引擎爬虫可以直接抓取内容。
  • 主题丰富：GitHub 上有成千上万的主题，直接 git clone 下来就能用，不用自己写 CSS。

后端/托管选型：Vercel 为什么不选 GitHub Pages？因为 GitHub Pages 对自定义域名支持较弱，且 CI/CD 流程相对原始。 Vercel 是目前前端部署体验最好的平台之一，对于怎么创建网站免费建立个人网站这个场景，它有几个杀手级特性：

  • 免费额度极大：个人项目每月 100GB 带宽，足够个人博客用十年。
  • 全球 CDN：自动加速，不用你自己配 Nginx。
  • 自动 HTTPS：生成域名自动签发 SSL 证书，不用你去申请 Let's Encrypt，也不用处理证书过期问题。
  • 零配置部署：连接 GitHub 仓库后，每次 git push，Vercel 自动构建并部署，全程无需人工干预。

技术栈全景图： | 组件 | 选择 | 理由 | | :--- | :--- | :--- | | 博客引擎 | Hexo | 静态生成，SEO 好，学习曲线低 | | 主题 | NexT | 功能强大，支持移动端，文档完善 | | 代码托管 | GitHub | 免费，版本控制，社区活跃 | | 部署平台 | Vercel | 自动 HTTPS，全球加速，免费额度高 | | 域名 | Vercel 二级域名 | 免费，支持 HTTPS，无需 ICP 备案 |

特别强调：ICP 备案问题 很多国内朋友问，个人站需要备案吗？如果你的服务器在中国大陆境内，必须备案。但 Vercel 的服务器在海外，通过 Vercel 提供的二级域名访问，不需要 ICP 备案。这是免费建站的一大优势。当然，国内访问速度可能不如国内服务器快，但对于技术博客这种低频访问场景，完全可以接受。如果你后续想绑定国内域名，再考虑备案事宜，初期完全没必要折腾。

核心实现：从代码到部署的保姆级步骤

理论讲完，现在进入实操。这部分是保姆级建站教程的核心，我会把每一步命令和配置都列出来。请确保你的电脑已安装 Node.js（建议 v16+ 或 v18+）和 Git。

1. 初始化 Hexo 博客

打开终端（Mac/Linux）或命令行（Windows），执行以下命令：

# 创建项目目录
mkdir my-blog && cd my-blog# 初始化 Hexo
npx hexo init
npm install

这一步会下载 Hexo 的核心依赖。完成后，你的 my-blog 目录下会有 _config.yml、source/、themes/ 等文件。

2. 配置主题与个性化

默认主题是 landscape，比较简陋。我们换成 NexT 主题，它是 Hexo 最流行的主题之一。

# 下载主题到 themes 目录
git clone https://github.com/theme-next/theme-next themes/next# 修改 _config.yml，将 theme 改为 next

用编辑器打开根目录下的 _config.yml，找到 theme: 这一行，将 landscape 改为 next。

接着，配置博客基本信息。同样在 _config.yml 中：

title: 小李的技术笔记
subtitle: "记录 Java 学习与思考"
description: "一个后端初学者的博客"
author: 小李
language: zh-CN

关键配置：Markdown 扩展 为了支持更丰富的语法，我们需要安装一些插件。在根目录执行：

# 安装代码高亮
npm install hexo-prism-plugin --save# 安装图片压缩
npm install hexo-asset-image --save

在 _config.yml 中添加插件配置：

plugins:- hexo-prism-plugin- hexo-asset-image

3. 编写第一篇文章

在 source/_posts/ 目录下新建一个文件，比如 hello-world.md：

---
title: 你好，世界
date: 2023-10-27 10:00:00
tags:- 入门- Java
categories:- 基础
---# 我的第一篇博客这是使用 **Hexo** 创建的第一篇文章。## Java 代码示例```java
public class Hello {public static void main(String[] args) {System.out.println("Hello, Hexo!");}
}

架构图


注意，代码块中的语言标识 `java` 会让 Hexo 自动应用高亮样式。### 4. 本地预览在终端执行：```bash
hexo server

浏览器访问 http://localhost:4000，你应该能看到你的博客页面。如果显示正常，说明本地环境没问题。

5. 推送到 GitHub

将项目推送到 GitHub 仓库：

git init
git add .
git commit -m "init: hexo blog"
git remote add origin https://github.com/yourname/my-blog.git
git push -u origin main

6. 部署到 Vercel

这是最关键的一步。

  1. 登录 Vercel，用 GitHub 账号授权。
  2. 点击 “Add New” -> “Project”。
  3. 找到你的 my-blog 仓库，点击 “Import”。
  4. 框架预设：选择 “Hexo”。
  5. Build Command：hexo generate
  6. Output Directory：public
  7. 点击 “Deploy”。

等待 1-2 分钟，Vercel 会构建项目并生成一个临时域名，例如 my-blog.vercel.app。访问这个地址，如果看到你的博客，恭喜你，网站已经上线了！

高级技巧：自定义路由与 404 页面 Hexo 默认生成的 404 页面可能不够美观。在 source/ 下创建一个 404.md，内容可以是：

---
title: 404 Not Found
---
很抱歉，你访问的页面不存在。
[返回首页](/)

在 Vercel 中，Hexo 的构建输出会自动处理 404 重定向，无需额外配置。

上线与优化：性能与 SEO 的实战细节

网站跑起来只是第一步，怎么创建网站免费建立个人网站的最终目的是让人看到。这里涉及两个核心：性能优化和 SEO 配置。

1. 性能优化：让首屏加载快起来

个人站虽然流量小，但加载速度直接影响用户体验和搜索引擎排名。

图片优化： 博客中最大的瓶颈通常是图片。Hexo 默认不压缩图片。我们可以利用 hexo-asset-image 插件，或者在上传图片前使用 TinyPNG 进行手动压缩。

代码压缩： 在 _config.yml 中启用压缩：

compress:css: truejs: truehtml: true

懒加载： NexT 主题默认支持图片懒加载，确保在 themes/next/_config.yml 中开启：

lazyload:enable: true

CDN 加速： Vercel 自带全球 CDN，无需额外配置。但你可以在 _config.yml 中配置字体和图标的 CDN 源，避免引用 Google Fonts 导致国内加载缓慢：

cdn:enable: truefonts:- https://cdn.jsdelivr.net/npm/@fontsource/roboto

2. SEO 配置：让搜索引擎找到你

很多新手忽略了 SEO，导致网站上线几个月百度/谷歌都搜不到。

生成 sitemap： 安装插件：

npm install hexo-generator-sitemap --save

在 _config.yml 中启用：

sitemap:path: sitemap.xmlsiteurl: https://my-blog.vercel.app

每次 hexo generate 后，会在 public 目录生成 sitemap.xml。Vercel 会自动将其发布到 https://my-blog.vercel.app/sitemap.xml。

提交 sitemap： 这是关键一步。访问 百度搜索资源平台，注册并验证你的域名（通过文件验证或 DNS 验证）。在“普通收录”中，提交你的 sitemap.xml 地址。虽然个人站权重低，但坚持提交，几个月后可能会有收录。

Meta 标签： 确保每篇文章都有唯一的 title 和 description。Hexo 会自动从 Markdown 的 Front-matter 中提取这些信息。在写作时，务必认真填写 description，因为这是搜索引擎结果页面中显示的摘要。

robots.txt： 在 source/ 下创建 robots.txt：

User-agent: *
Allow: /
Sitemap: https://my-blog.vercel.app/sitemap.xml

3. 安全与运维

免费托管平台通常负责底层安全（如 DDoS 防护、SSL 证书更新），你几乎不需要操心。但要注意：

  • 不要暴露敏感信息：不要在 GitHub 仓库中上传包含密码、API Key 的配置文件。使用 .gitignore 忽略敏感文件。
  • 定期备份：虽然 GitHub 是你的代码备份，但建议定期将 source/_posts/ 目录打包下载到本地，以防 GitHub 账户丢失。

经验总结：避坑指南与后续建议

经过这个保姆级建站教程的实操，小李的网站成功上线，且完全免费。但在这个过程中，我也发现了许多初学者容易踩的坑。

坑 1：Node.js 版本不兼容 Hexo 对新版本的 Node.js 支持良好，但某些旧主题可能与 v18+ 不兼容。如果遇到报错，先检查主题文档，看是否支持当前 Node 版本。必要时使用 nvm 切换 Node 版本。

坑 2：GitHub 推送失败 国内网络环境有时导致 git push 缓慢或失败。建议使用 SSH 协议而非 HTTPS，或者配置 Git 代理。

坑 3：忘记更新 sitemap 每次发布新文章后，Vercel 会自动重新构建，sitemap 也会更新。但如果你手动修改了 _config.yml 中的 siteurl，务必重新提交 sitemap 到搜索引擎。

坑 4：过度优化 不要一开始就纠结于自定义域名、CDN 加速、数据库集成等高级功能。先把博客跑起来，写出内容，再逐步优化。内容才是博客的核心，技术只是载体。

后续建议：

  1. 绑定自定义域名：当博客有一定粉丝后，可以考虑购买一个 .com 或 .cn 域名（每年几十元），在 Vercel 中绑定。这会显著提升专业度。
  2. 添加评论系统：Hexo 默认不支持评论。可以集成 Giscus（基于 GitHub Discussions，免费、隐私好）或 Waline（轻量级，支持国内访问）。
  3. 数据分析：接入 Umami 或 Plausible（轻量级、隐私友好的分析工具），了解读者来源和阅读时长。
  4. 持续学习：随着技术深入，你可以尝试将博客迁移到 Next.js + MDX，获得更好的交互体验，但初期 Hexo 是最稳妥的选择。

建站不是目的，表达才是。希望这篇怎么创建网站免费建立个人网站的案例，能帮你跨过技术门槛，把精力集中在内容创作上。

在实操过程中，你可能还会遇到其他问题，比如“如何添加侧边栏目录”、“如何配置暗色模式”、“如何集成 RSS 订阅”等。这些问题我在文中没有全部展开，但原理都是类似的：查阅官方文档，修改配置文件，重新部署。

还有什么建站疑问？评论区留言挨个回。 无论是报错截图还是配置困惑，我都会尽力解答。毕竟，在怎么创建网站免费建立个人网站这条路上，我们都是从报错中走出来的。