一部手机能不能完成个人网站从设计到上线的全部工作？我利用几次坐车和午休的时间，在没有电脑的情况下搭好了一个可访问的个人主页。这里说的建站不是套用现成模板，而是自己写 HTML、CSS 和少量 JavaScript，再推送到静态托管平台。整个过程比想象中顺利，但前提是选对工具，并接受手机输入效率不如实体键盘的现实。
一、手机建站前的工具准备
开始之前，我先梳理了手机建站需要解决的三个问题：代码在哪里写、版本如何管理、最终部署到哪里。手机屏幕小，触控键盘输入代码容易出错，因此在线代码编辑器比本地终端更适合作为主力环境。我选择用浏览器打开 CodeSandbox 或 StackBlitz，它们提供文件树、语法高亮和实时预览，登录 GitHub 账号后可以直接创建仓库。如果只是写一个静态页面，也可以使用 GitHub 网页端直接新建文件，但网页端的编辑体验较弱，适合小修改。
版本管理方面，手机上有 Working Copy、GitTouch 等 Git 客户端，可以克隆远程仓库、提交修改并推送到 GitHub。对于网页端操作更频繁的用户，GitHub 手机网页版也能完成大部分基础操作。部署平台我最终选了 Vercel，它和 GitHub 仓库绑定后，每次推送都会自动触发构建。国内访问时如果速度不理想，也可以考虑 Gitee Pages 或云厂商的对象存储静态托管。
还有两个小工具值得提前准备：一个是支持全键盘符号的输入法，比如在 iOS 上开启英文全键盘，减少切换符号的时间；另一个是移动端调试脚本 Eruda，它可以模拟桌面开发者工具，在手机上查看控制台、网络请求和元素样式。这些工具组合起来，基本可以替代电脑上的开发环境。
二、用手机编写页面并完成调试
正式动手时，我先在 CodeSandbox 中创建了一个纯静态项目，目录结构只有 index.html、style.css 和 script.js。手机端写代码的关键是减少重复输入，能复制的片段尽量复用。比如 HTML 的 viewport 声明、CSS 的 reset 规则，都可以作为固定模板保存到剪贴板或输入法的快捷短语中。
页面结构上，我采用移动优先的写法。先在 <head> 中写入 <meta name="viewport" content="width=device-width, initial-scale=1.0">，让页面宽度跟随设备宽度。接着用一个简单的 header 加 article 布局来验证显示效果。下面是我最初版本的 HTML：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>你好，我是小明</h1>
<p>用手机记录技术与生活</p>
</header>
<main class="container">
<article>
<h2>第一篇手机写下的文章</h2>
<p>这个页面完全在手机浏览器中完成。</p>
</article>
</main>
<script src="script.js"></script>
</body>
</html>
写完 HTML 后，我开始调整样式。手机上预览很方便，因为浏览器本身就是移动端环境，但同时也容易忽略桌面端的表现。我用媒体查询设置了 768px 的断点，让页面在平板和桌面浏览器上居中显示。样式代码大致如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.7;
background: #f9fafb;
color: #1f2937;
}
.container {
width: 100%;
padding: 16px;
}
.site-header {
background: #111827;
color: #ffffff;
padding: 32px 16px;
}
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
调试阶段，我遇到的一个典型问题是点击事件在触屏上响应迟缓。如果给按钮绑定了 click 事件，部分旧机型会有约 300 毫秒的延迟。解决方法是使用 touch 事件或直接引入 FastClick 这类库。对于当前这个纯展示页面，交互较少，暂未做特殊处理。但为了查看控制台输出，我在测试环境中临时加载了 Eruda。
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/eruda';
script.onload = function () {
eruda.init();
};
document.body.appendChild(script);
})();
这个脚本不需要固定在生产环境，只在测试阶段手动引入即可。通过 Eruda 的控制台，我可以快速定位样式是否生效、资源是否加载失败。触屏键盘虽然不如机械键盘高效，但配合编辑器自带的自动补全和错误提示，编写小型项目已经完全够用。
三、部署上线与域名绑定
页面在本地预览没有问题后，我把项目推送到 GitHub 仓库。手机上使用 Working Copy 克隆仓库，导入在 CodeSandbox 中导出的文件，或者直接在网页端将文件复制进去。提交信息尽量写清楚，例如“初始化个人主页”或“调整移动端样式”，这样后续回滚时更容易定位。
推送完成后，我登录 Vercel 网页，选择对应的 GitHub 仓库进行导入。Vercel 会自动识别静态项目，不需要额外配置构建命令。点击部署后等待十几秒，就能获得一个以 vercel.app 结尾的临时域名。这个地址在手机上可以直接打开测试。若使用 Gitee Pages，则需要在仓库设置中开启 Pages 服务，并指定部署分支和目录。
为了让网站看起来更正式，我绑定了一个自己的域名。域名注册可以在手机浏览器中完成，很多注册商都有移动端页面。在 DNS 后台添加一条 CNAME 记录指向平台提供的域名，再回到部署平台填写自定义域名并等待 HTTPS 证书签发。生效时间从几分钟到几小时不等，取决于 DNS 缓存。绑定完成后，浏览器地址栏会出现锁形图标，说明 SSL 证书已经生效。
后续维护同样可以在手机上完成。新的文章可以直接在 GitHub 网页端编辑 Markdown 或 HTML 文件，提交后自动触发构建。如果只是修改样式，也可以用 CodeSandbox 打开仓库，改完后直接提交到主分支。对于访问统计，可以接入 Umami 或百度统计，通过手机查看每日访问量。整个过程不需要回到电脑前，碎片时间被有效利用了起来。
四、手机建站的几个避坑建议
回顾这次手机建站经历，有几个容易踩到的坑值得记录。第一是文件路径问题。手机输入法有时会把斜杠和反斜杠混用，而 URL 和 Git 路径只认正斜杠。例如在 HTML 中引用 CSS 时，必须写成 href="style.css"，不能写成 href="style\css"。在手机上编辑时要特别留意自动纠错是否把符号改错了。
第二是图片资源。手机拍摄的照片体积往往很大，直接上传会拖慢首屏加载。建议先用压缩工具把图片处理到 200KB 以内，再上传到图床或放入仓库。第三是代码编辑器的自动格式化。有些在线编辑器会在移动端自动缩进，导致 HTML 结构混乱。提交前最好用预览模式完整点一遍所有页面，确认没有标签闭合错误。
此外，如果使用云函数或后端接口，手机端的调试难度会明显上升。对于个人站点，优先选择静态生成方案，把动态内容交给第三方服务，能大幅降低手机端维护成本。等网站内容多起来后，可以再考虑引入 Hugo、Hexo 这类静态博客框架，配合 GitHub Actions 自动构建。但在初期，手写几个页面完全足够，也能更清晰地理解网站运行原理。