0022 - 个人博客全栈知识地图：从代码到域名的完整技能树

前言

花了 3 天搭建博客，发现需要掌握的知识远比想象的多。这篇笔记汇总了从代码到域名所需的全部技能，作为学习路线图。

一、内容层：写作与排版

1.1 Markdown 语法

# 标题
## 二级标题

**粗体** *斜体* `代码`

[链接](https://example.com)
![图片](image.png)

- 列表项
- 列表项

1. 有序列表
2. 有序列表

> 引用

```代码块```

掌握程度：必须熟练

1.2 YAML Front Matter

每篇文章头部的元数据：

---
title: "文章标题"
date: 2026-03-09T15:00:00+08:00
draft: false
tags: ["标签1", "标签2"]
categories: ["分类"]
---

关键字段：

• title - 文章标题
• date - 发布时间（ISO 8601 格式）
• draft - 草稿状态
• tags - 标签
• categories - 分类

二、构建层：静态网站生成

2.1 Hugo 核心概念

2.2 Hugo 常用命令

# 创建新文章
hugo new content/posts/0022-new-post.md

# 本地预览
hugo server -D

# 构建（开发）
hugo

# 构建（生产，压缩）
hugo --minify

2.3 配置文件 hugo.toml

baseURL = 'https://wubajie.github.io/'
languageCode = 'zh-cn'
title = 'wuqq 的 Blog'
theme = 'PaperMod'

[params]
  description = "博客描述"
  author = "wuqq"

[params.homeInfoParams]
  Title = "分享与反思 📝"
  Content = "记录技术学习与思考"

关键配置项：

• baseURL - 网站基础 URL
• theme - 使用的主题
• params - 自定义参数

三、版本控制层：Git

3.1 Git 核心概念

工作区 (Working Directory)
    ↓ git add
暂存区 (Staging Area)
    ↓ git commit
本地仓库 (Local Repository)
    ↓ git push
远程仓库 (Remote Repository)

3.2 常用命令

# 查看状态
git status

# 添加文件
git add filename
git add -A  # 添加所有

# 提交
git commit -m "提交信息"

# 推送到远程
git push origin main

# 拉取更新
git pull origin main

# 查看历史
git log --oneline -10

3.3 GitHub 工作流

# 1. 修改文件
# 2. 添加到暂存区
git add -A

# 3. 提交到本地仓库
git commit -m "描述这次修改"

# 4. 推送到 GitHub
git push origin main

四、托管层：GitHub Pages

4.1 什么是 GitHub Pages

• 免费静态网站托管
• 直接从 GitHub 仓库部署
• 支持自定义域名
• 自动 HTTPS

4.2 部署原理

本地代码
    ↓ git push
GitHub 仓库
    ↓ GitHub Actions 自动构建
GitHub Pages 服务器
    ↓ 访问
用户浏览器

4.3 关键文件

五、域名层：DNS 与解析

5.1 域名体系结构

根域名 (.)
    ↓
顶级域名 (.com, .cn, .top)
    ↓
二级域名 (wuqq547.top)
    ↓
子域名 (www.wuqq547.top, blog.wuqq547.top)

5.2 DNS 记录类型

5.3 DNS 解析流程

用户输入 wuqq547.top
    ↓
浏览器查询本地 DNS 缓存
    ↓
查询路由器 DNS
    ↓
查询 ISP DNS
    ↓
查询根域名服务器
    ↓
查询 .top 顶级域名服务器
    ↓
查询阿里云 DNS (dns15.hichina.com)
    ↓
返回 IP 地址 185.199.108.153
    ↓
浏览器访问该 IP

5.4 关键概念：NS 服务器

NS (Name Server) 告诉全世界"这个域名的解析找谁"。

域名注册商 (阿里云)
    ↓ 设置 NS
DNS 服务提供商 (阿里云 DNS)
    ↓ 添加解析记录
具体 IP 地址

常见错误：NS 指向 A 服务商，却在 B 服务商添加解析记录。

六、网络层：HTTP 与 HTTPS

6.1 HTTP 请求过程

1. DNS 解析 → 获取 IP
2. TCP 连接 → 三次握手
3. TLS 握手 → HTTPS 加密
4. 发送 HTTP 请求
5. 服务器返回响应
6. 渲染页面

6.2 HTTPS 原理

浏览器 ←→ 服务器
    ↓
服务器提供证书（公钥）
    ↓
浏览器验证证书（CA 机构）
    ↓
生成对称密钥，用公钥加密发送
    ↓
服务器用私钥解密，获得对称密钥
    ↓
后续通信使用对称加密

6.3 证书类型

GitHub Pages 自动提供免费的 DV 证书。

七、完整部署流程图

┌─────────────────────────────────────────────────────────────┐
│                     1. 内容创作层                            │
│  写 Markdown 文章 → 添加 Front Matter → 本地预览              │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│                     2. 构建层                                │
│  hugo --minify → 生成 public/ 目录                           │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│                     3. 版本控制层                            │
│  git add -A → git commit -m "xxx" → git push origin main     │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│                     4. 托管层                                │
│  GitHub 接收代码 → GitHub Actions 构建 → 部署到 Pages        │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│                     5. 域名层（可选）                        │
│  购买域名 → 配置 NS → 添加 DNS 记录 → 配置 CNAME             │
└─────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────┐
│                     6. 用户访问                              │
│  输入域名 → DNS 解析 → CDN → 获取网页 → 浏览器渲染           │
└─────────────────────────────────────────────────────────────┘

八、技能树总结

8.1 必学技能（核心路径）

Markdown 写作 ✓
    ↓
Hugo 基础使用 ✓
    ↓
Git 基本操作 ✓
    ↓
GitHub 工作流 ✓
    ↓
GitHub Pages 部署 ✓

你已经掌握了！

8.2 进阶技能（自定义域名）

域名购买与实名认证
    ↓
DNS 原理理解
    ↓
NS 服务器配置
    ↓
DNS 记录类型（A/CNAME）
    ↓
HTTPS/SSL 证书

这是你想学的！

8.3 高级技能（可选）

CDN 配置（Cloudflare）
    ↓
服务器运维（VPS）
    ↓
Docker 容器化
    ↓
CI/CD 自动化
    ↓
性能优化

未来可以学！

九、学习资源推荐

9.1 官方文档

9.2 在线工具

9.3 推荐书籍

• 《图解 HTTP》- 上野宣
• 《鸟哥的 Linux 私房菜》- 基础运维
• 《Pro Git》- 版本控制深入

十、常见问题速查

Q1: 文章改了为什么不生效？

检查清单：

• 保存文件
• draft: false
• 重新构建 hugo --minify
• 提交推送 git push
• 等待 GitHub Actions 完成
• 清除浏览器缓存

Q2: 域名配置了为什么不生效？

检查清单：

• NS 服务器指向正确
• DNS 记录添加正确
• 等待 DNS 传播（10分钟-48小时）
• GitHub Pages 设置中填了域名
• CNAME 文件存在且内容正确

Q3: 如何排查问题？

# 检查 DNS
ping wuqq547.top
dig wuqq547.top +short

# 检查 HTTP
curl -I https://wubajie.github.io/

# 检查 Git 状态
git status
git log --oneline -5

十一、下一步建议

短期（1-2 周）

1. 巩固基础

   • 熟练 Markdown 写作
   • 掌握 Git 工作流
   • 理解 Hugo 目录结构

2. 完成域名配置

   • 理解 DNS 原理
   • 成功配置自定义域名
   • 学会排查 DNS 问题

中期（1-3 个月）

1. 美化博客

   • 学习 Hugo 模板语法
   • 自定义主题样式
   • 添加评论系统

2. SEO 优化

   • 理解搜索引擎原理
   • 配置 sitemap.xml
   • 提交到 Google/Bing

长期（3-6 个月）

1. 进阶技术

   • 学习 Cloudflare CDN
   • 了解服务器运维
   • 尝试 VPS 部署

2. 内容创作

   • 建立写作习惯
   • 积累技术文章
   • 形成个人品牌

结语

搭建博客看似简单，实则涉及：

• 写作（Markdown）
• 构建（Hugo）
• 版本控制（Git）
• 托管（GitHub Pages）
• 网络（DNS/HTTP）

3 天能搭建起来已经很棒了！ 域名配置确实复杂，但这是成为全栈工程师的第一步。

记住：

• 不懂就问，查文档，搜错误信息
• 每次解决一个问题，就进步一点
• 积累多了，自然就通了

你的博客地址：https://wubajie.github.io/

继续加油！🚀