返回技术分享

静态网站上线清单

这是一份最小可行发布流程:先把页面做出来,放进 Git 仓库,推到 GitHub,再用 GitHub Pages 和自定义域名获得公网访问地址。

目标

用最少的工程复杂度,让个人网站可以被真实访问。这个阶段不急着引入框架、构建工具或后台服务,先把内容入口立起来。

文件准备

  • index.html 作为首页。
  • styles.css 统一管理视觉样式。
  • tech/words/ 分别承载两个内容模块。
  • assets/ 放图片等静态资源。
  • .nojekyll 让 GitHub Pages 按普通静态站点处理文件。

从卡片到详情页

内容变多之后,首页和模块页不适合堆完整正文。更清楚的做法是:首页放精选入口,模块页放文章索引,详情页沉淀完整笔记。

  • 首页技术卡片直接链接到 tech/static-site-launch/tech/github-cli-network/ 等详情页。
  • 首页言语条目链接到 words/sentence-weight/words/reading-aftertaste/words/communication-details/
  • 技术分享页和言语分享页都只保留可点击卡片,正文放到各自的 index.html 详情页中。
  • 详情页统一使用 ../../styles.css,并提供“返回技术分享”或“返回言语分享”的入口。
tech/
  index.html
  static-site-launch/index.html
  github-cli-network/index.html

words/
  index.html
  sentence-weight/index.html
  reading-aftertaste/index.html

首次发布命令

git status
git add .
git commit -m "Initial personal sharing site"
gh repo create 个人仓库名 --public --source=. --remote=origin --push

仓库创建并推送成功后,再启用 Pages,从 main 分支根目录发布。

gh api --method POST "repos/你的用户名/个人仓库名/pages" -F "source[branch]=main" -F "source[path]=/"

绑定自定义域名

默认的 GitHub Pages 地址跑通后,再把购买好的 个人的url 绑定到站点。这个过程分为仓库声明、GitHub Pages 设置、域名解析和验证四步。为了避免在公开笔记中暴露真实域名,本文统一用 个人的url 代替。

  • 在仓库根目录添加 CNAME 文件,内容只写 个人的url
  • 在 GitHub 仓库的 Settings -> Pages -> Custom domain 中填写 个人的url 并保存。
  • 在域名服务商的“解析设置”里添加根域名的 A 记录,主机记录是 @,分别指向 GitHub Pages 的四个 IP。
  • www 添加一条 CNAME 记录,记录值写 个人的url,不要加 https:// 或仓库路径。
  • 按 GitHub 的提示添加 TXT 验证记录,用来证明域名所有权。
  • DNS 生效后,确认 http://个人的url/https://个人的url/ 都能访问;证书正常后再开启 Enforce HTTPS
CNAME
个人的url

A     @     185.199.108.153
A     @     185.199.109.153
A     @     185.199.110.153
A     @     185.199.111.153
CNAME www   个人的url

TXT   _github-pages-challenge-你的用户名   个人的验证码

验证

发布完成后,需要确认主页、子页面和图片资源都能返回 200 OK

curl.exe -I https://个人的url/
curl.exe -I https://个人的url/tech/
curl.exe -I https://个人的url/words/
curl.exe -I https://个人的url/tech/static-site-launch/
curl.exe -I https://个人的url/words/sentence-weight/
curl.exe -I http://个人的url/
curl.exe -I https://个人的url/

以后更新

后续不需要重新创建仓库,只要提交并推送改动,GitHub Pages 会自动重新部署。

git status
git add .
git commit -m "Update site content"
git push