用 GitCode Pages 部署一个待办清单小工具

一、背景

平时有一些零散待办，想随手记又不依赖后端和数据库。于是打算做一个纯前端待办清单：页面 + 浏览器本地存储（localStorage）就能跑，写完直接通过 GitCode Pages 公开访问。下面按"开发 → 部署"的实际步骤记录。

二、开发待办清单小工具

整个工具是一个单文件 index.html，包含页面结构、样式和交互逻辑三部分。

2.1 页面结构

一个标题、一个输入框加"添加"按钮、一个任务列表、一行统计。结构很轻：

<div class="wrap">
  <h1>☁️ 云便签</h1>
  <div class="sub">纯前端待办清单 · 数据存在本地浏览器（localStorage）</div>
  <div class="input-row">
    <input type="text" id="task" placeholder="今天要做什么？" />
    <button class="add" onclick="addTask()">添加</button>
  </div>
  <ul id="list"></ul>
  <div class="stat" id="stat"></div>
</div>

2.2 样式

用 CSS 变量统一管理配色，卡片化列表，移动端也能正常显示：

:root { --bg:#f5f7fa; --card:#fff; --primary:#2f6fed; --danger:#e5484d; }
* { box-sizing:border-box; }
.wrap { max-width:480px; margin:40px auto; padding:0 16px; }
input[type=text] { flex:1; padding:12px 14px; border:1px solid #dfe3e8; border-radius:10px; }
.add { background:var(--primary); color:#fff; border:none; border-radius:10px; padding:12px 18px; }
li { background:var(--card); border-radius:10px; padding:12px 14px; margin-bottom:10px; display:flex; gap:10px; }

2.3 交互逻辑（localStorage 增删改）

核心是用 localStorage 持久化任务数组，所有操作都 save() 后重渲染：

const KEY = 'gitcode_todo_list';
let tasks = JSON.parse(localStorage.getItem(KEY) || '[]');

function save() { localStorage.setItem(KEY, JSON.stringify(tasks)); render(); }

function addTask() {
  const text = document.getElementById('task').value.trim();
  if (!text) return;
  tasks.push({ id: Date.now(), text, done: false });
  document.getElementById('task').value = '';
  save();
}

function toggle(id) {
  const t = tasks.find(t => t.id === id);
  if (t) { t.done = !t.done; save(); }
}

function del(id) { tasks = tasks.filter(t => t.id !== id); save(); }

render() 负责把数组画成列表，并统计"共 N 项，未完成 M 项"。完整代码见文末 03-index.html，本地双击打开即可先验证。

三、部署到 GitCode Pages

3.1 推送到仓库（git 命令）

在 GitCode 网页新建一个公开仓库（如 todo-pages），本地用 git 推上去：

cd /path/to/todo-pages
git init
git add index.html
git commit -m "first commit: 云便签待办清单"
git remote add origin git@gitcode.net:username/todo-pages.git
git push -u origin master   # 分支名以你仓库实际默认分支为准

3.2 开启 Pages

进入该仓库：

1. 从项目菜单栏点击 Pages（或【项目设置】→【Apps】→ Pages）；
2. Pages 模板选 html；
3. 部署分支选刚才 git push 的分支（如 master）；
4. html 路径填 /（index.html 在仓库根目录）；
5. 点击保存更改，系统自动构建发布。

3.3 访问

等 1~2 分钟，平台分配地址形如 https://gitcode.host/username/todo-pages，浏览器直接打开就能使用待办清单。

四、小结

这个小工具从开发到上线，全程没有后端、没有数据库、没有付费服务：用 localStorage 解决数据存储，用 GitCode Pages 解决托管与域名，git push 一次就完成部署。适合把这类轻量纯前端想法快速做成可访问的网页。