Blocks

极简、高颜值、现代化的学习管理网站。学习不是按时间管理，而是按 Block 管理。 一个 Block = 50 分钟学习 + 10 分钟休息。

Block60

极简学习管理：按 Block（50 分钟学习 + 10 分钟休息）管理专注，而不是按小时。

• 单文件纯前端：index.html
• 本地优先：LocalStorage
• 可选云同步：GitHub 私有 Gist（适合一个人多设备）
• 可部署到 GitHub Pages

---

一、上传到 GitHub 并开启 Pages（推荐：网页上传，不用命令行）

不需要会 git，也不用在 Arena 里敲命令。用浏览器就能完成。

1. 先下载这 3 个文件到电脑

从当前工作区下载到你的电脑（手机也可以，但电脑更方便）：

• index.html（网站本体，必须）
• README.md（可选）
• .gitignore（可选）

2. 在 GitHub 网页创建仓库

1. 打开并登录 GitHub： https://github.com/new
2. Repository name 填：block60（随便起也行）
3. 选 Public（个人免费 Pages 一般要公开仓库）
4. 可以勾选 Add a README（无所谓）
5. 点绿色按钮 Create repository

3. 网页上传文件（最重要）

创建成功后进入仓库页面：

1. 点 Add file → Upload files
   （有的界面是 uploading an existing file）
2. 把电脑里的 index.html（以及可选的 README.md）拖进去
   或点 choose your files 选中它们
3. 下面 Commit 说明随便写，例如：Add Block60
4. 点 Commit changes 绿色按钮

上传成功后，仓库根目录应能看到 index.html。

4. 开启 GitHub Pages

1. 打开仓库顶部 Settings（设置）
2. 左侧点 Pages
3. Build and deployment → Source 选：Deploy from a branch
4. Branch 选：main（或 master），文件夹选 / (root)
5. 点 Save
6. 等 1～2 分钟，刷新 Pages 页面，会出现访问地址，类似：

https://你的用户名.github.io/block60/

把「你的用户名」换成你的 GitHub 账号名；仓库名不是 block60 就换成你的仓库名。

（可选）电脑终端推送方式

只有你本机已经装了 Git、并且会用终端时才需要。把 你的用户名 换成真实用户名：

git init
git add index.html README.md .gitignore
git commit -m "Add Block60"
git branch -M main
git remote add origin https://github.com/你的用户名/block60.git
git push -u origin main

在 Arena 网页里通常不用这一步，直接用上面的「网页上传」即可。

---

二、跨设备数据同步（私有 Gist）

GitHub Pages 只能托管静态网页，不能当数据库。
Block60 用 GitHub 私有 Gist 做你的私人云端存档：

• 数据文件：block60-data.json
• Gist 设为 private
• 每台设备填入 同一个 Token + 同一个 Gist ID

1. 创建 Token（只需一次）

推荐 Fine-grained token：

1. 打开 Fine-grained tokens
2. Generate new token
3. Token name：block60-sync
4. Expiration：按需选择（例如 90 days / No expiration）
5. Repository access：可选 Public Repositories (read-only) 或 None
   （Gist 权限不依赖具体仓库）
6. Account permissions → Gists → Read and write
7. 生成后复制 Token（只显示一次）

也可以用 classic token，勾选 gist 权限。

安全提醒：Token 相当于密码。不要发给别人，不要提交到仓库。

2. 第一台设备连接

1. 打开你的 GitHub Pages 网站
2. 点右上角 云图标（同步设置）
3. 粘贴 Token
4. Gist ID 留空
5. 点 连接并创建同步
6. 成功后会自动创建私有 Gist，并填入 Gist ID
   （请复制保存 Gist ID，给其他设备用）

3. 其他设备连接

1. 打开同一个网站
2. 同步设置里填：
   • 同一个 Token
   • 同一个 Gist ID
3. 点 连接并创建同步
4. 数据会自动拉取

4. 同步行为

时机	行为
本地修改后约 1.2 秒	自动推送云端
打开网站	自动拉取
切回浏览器标签	自动拉取
每 45 秒	自动拉取（计时中不打断）
手动	「立即拉取 / 立即推送」

合并策略（尽量适合单人多设备）：

• 整体文档：较新的 updatedAt 优先
• history（每日完成数）：按天取较大值
• 成就：取并集

---

三、日常使用

1. Add Block 添加学习块
2. Start 开始 50 分钟专注
3. 结束后自动进入 10 分钟休息
4. 休息结束可 Next Block
5. 底部查看 Stats / Heatmap / Badges

数据默认存在浏览器 LocalStorage；开启同步后会同时写入私有 Gist。

---

四、常见问题

Pages 打开是 404

• 确认 Pages Source 是 main + / (root)
• 确认仓库根目录有 index.html
• 等 1–2 分钟再刷新

同步失败 / 401

• Token 是否过期
• Token 是否有 Gists: Read and write
• 是否复制完整（前后不要空格）

同步失败 / 404

• Gist ID 是否正确
• Token 是否属于创建该 Gist 的同一个 GitHub 账号

两台设备同时改，数据会丢吗？

单人使用一般没问题。若两台几乎同时大幅编辑同一天的 Block 列表，以较新时间戳那一侧为准；历史完成数会尽量按天合并取 max。

能公开分享网站但隐藏数据吗？

可以：

• 网站仓库可以 Public（方便 Pages）
• 同步 Gist 保持 Private
• 不要把 Token / Gist 内容发到公开处

其他人打开你的网站只会看到空的本地数据，拿不到你的 Gist 数据（除非他们也有你的 Token）。

---

五、本地预览

# 任意静态服务器均可，例如：
python3 -m http.server 8080
# 浏览器打开 http://localhost:8080

或直接双击打开 index.html（同步功能需要联网访问 api.github.com）。

---

License

MIT — 随便用，专注学习。