明白了，阿杰，你想要一个 完全从零搭建个人网站或博客 的保姆级教程，并且要求：免费、无需服务器、无需域名。我给你整理了详细方案和操作步骤，分阶段讲清楚，从零开始就能搭建自己的网站。
一、技术路线选择（零成本，无服务器，无域名）
- 静态网页 + GitHub Pages（推荐）
- 优势：完全免费、无需服务器、自动生成 HTTPS、无需域名。
- 技术栈：HTML + CSS + JS，可选静态博客生成器。
- 域名：可以直接使用
username.github.io。
- 纯 HTML 文件 + 本地浏览器打开
- 优势：无需注册账户、完全离线。
- 缺点：不能联网访问，只能自己或拷贝给朋友看。
- 低门槛博客生成器
- Obsidian Publish、Notion + Flect 或 Hugo / Jekyll
- 可以免费生成个人博客，但通常还是需要 GitHub 账号托管。
综合考虑，GitHub Pages + 免费模板是最适合“保姆级教程”的方式。
二、准备工作
- 注册 GitHub 账号：https://github.com
- 安装 Git（可选，本地同步和上传文件用）：https://git-scm.com
- 准备文本编辑器：
- VS Code（推荐）
- 或 Notepad++ 等
三、获取免费个人网站模板
你可以直接下载一些开源模板：
- HTML5 UP（免费响应式模板）
https://html5up.net/ - Start Bootstrap（免费 Bootstrap 模板）
https://startbootstrap.com/templates - Jekyll Themes（静态博客模板，GitHub Pages 支持）
https://jekyllthemes.io/free
下载后，解压到本地文件夹。
四、从零搭建步骤（保姆级）
步骤 1：创建 GitHub 仓库
- 登录 GitHub → 点击 New repository
- 仓库名称填写：
username.github.io（替换username为你的 GitHub 用户名）这是 GitHub Pages 默认域名规则。 - 初始化仓库：勾选 Add a README file。
步骤 2：上传模板文件
- 打开刚下载的模板文件夹，确认里面有
index.html文件。 - 两种方式上传：
- 方法 A（推荐）：直接在 GitHub 网站上传
- 仓库 → 点击 Add file → Upload files → 选择所有文件 → Commit
- 方法 B（高级）：本地 Git 上传
git clone https://github.com/username/username.github.io.git cd username.github.io cp -r path_to_template/* . git add . git commit -m "Add template" git push origin main
- 方法 A（推荐）：直接在 GitHub 网站上传
步骤 3：开启 GitHub Pages
- 仓库 → Settings → Pages
- Branch 选择：
main（或者master），Folder 选择/root→ Save - 页面生成后，会显示访问地址，例如：
https://username.github.io
步骤 4：修改模板内容
- 打开模板文件夹的
index.html、about.html等文件 - 使用 VS Code 编辑：
- 修改网站标题
<title> - 替换个人信息、头像、联系方式
- 修改博客文章内容
- 修改网站标题
静态模板一般是 HTML + CSS + JS，直接修改文本即可。
步骤 5：添加博客文章（可选）
- 如果模板支持 markdown
- 新建
.md文件，保存到posts或_posts文件夹
- 新建
- 直接 HTML
- 新建
.html文件 → 更新导航栏链接
- 新建
步骤 6：上线访问
- 提交修改到 GitHub → 自动部署
- 访问你的免费域名：
https://username.github.io - 完成你的个人博客网站搭建。
五、额外进阶技巧
- 自定义域名
- 如果未来想要
www.mysite.com，可以在 GitHub Pages 设置 CNAME，免费 DNS 服务如 Cloudflare。
- 如果未来想要
- SEO 优化
- 修改
<meta name="description" content="你的博客介绍"> - 修改
<title>和<h1>标签
- 修改
- 增加评论系统
- 使用 Gitalk 或 Utterances，直接连接 GitHub Issues 评论
- 添加动态功能
- 使用 JS 插件，例如图片轮播、动画效果
- 自动化部署
- 可以用 GitHub Actions，实现 Markdown → HTML 自动生成博客文章
六、总结
优点：
- 完全免费，无需服务器、域名
- 保姆级流程，几步即可上线
- 模板丰富，支持响应式设计
- 可扩展为博客、个人主页、作品集
适合人群：
- 学生、开发者、创作者
- 个人作品集或博客
- 希望快速上线、零成本尝试网页制作的人
发表回复