深色动漫科技风个人博客,单文件 index.html,无任何外部依赖,部署到 GitHub Pages 即可访问。
- 🎨 星空粒子动画背景 + 鼠标光斑 + 滚动显现动画 + 打字机效果
- 🎮 五子棋在线试玩(内嵌人机对战,AI 会攻防)
- 📺 AnimeTV 追番电视应用项目展示
- 📺 追番记录卡片(可一键修改)
- 🔗 B 站账号链接直达
你只需要一部手机,用浏览器操作即可,全程 5 分钟。
- 创建仓库:手机浏览器打开 https://github.com/new
- Repository name 填:
my-blog(或任意名字) - 选 Public(公开仓库,Pages 免费)
- 点 Create repository
- Repository name 填:
- 上传文件:进入新仓库 → 点 Add file → Upload files
- 把本文件夹里的
index.html上传到根目录 - 把
.github/workflows/pages.yml上传(注意目录结构是.github/workflows/,先手动新建这两个文件夹:点 Add file → Create new file,输入.github/workflows/pages.yml粘贴内容保存) - 点 Commit changes
- 把本文件夹里的
- 等 Actions 跑完:点仓库顶部 Actions 标签,等 1~2 分钟出现绿色 ✅
- 开启 Pages 并发布:点 Settings → Pages
- Source 选 GitHub Actions
- 保存后等 1 分钟,页面会显示你的网址:
https://<你的用户名>.github.io/my-blog/
- 上传
index.html后,进 Settings → Pages - Source 选 Deploy from a branch,Branch 选
main/root,保存 - 等 1 分钟,访问
https://<你的用户名>.github.io/my-blog/
所有内容都在 index.html 一个文件里,用手机浏览器打开后:
- 改追番记录:搜索
animeList,按格式改标题/分数/进度/状态,复制一行即可加一部番 - 改自我介绍:搜索
关于区块的文案 - 改项目介绍:搜索
AnimeTV/五子棋的说明文字 - 改 B 站链接:搜索
b23.tv,把链接换成你自己的
改完后在 GitHub 仓库里重新上传 index.html(覆盖),Actions 会自动重新部署。
├── index.html # 博客本体(所有内容/样式/脚本都在这里)
├── .github/workflows/pages.yml # GitHub Pages 自动部署配置
└── README.md # 本教程
- 仓库名
my-blog可以换成你喜欢的名字,访问网址会跟着变 - 想要自定义域名?Settings → Pages → Custom domain 里填即可