14 篇博文 含有标签「前端」

如果你刚拿到一台新电脑，或者刚重装完系统，打开终端敲下 npm -v，得到的多半是这一句：

'npm' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这不是你命令打错了，也不是电脑坏了 —— Windows 出厂时不带 Node.js、npm 和 Git，得自己装。

这篇文章从「为什么」讲到「装完怎么验证」，全程不需要任何前置知识。

这个站就是 Docusaurus + Cloudflare Pages。部署这件事本身不难，难的是上线之后那些没人告诉你、但一定会遇到的细节：缓存策略、响应头、404、双语 sitemap、构建产物里的本地路径，以及 Cloudflare 边缘的一些「优化」会和框架打架。

这篇文章把整条链路完整写一遍，最后附一份可以直接对着检查的上线清单。

← 左右滑动查看完整示意图 →

构建发生在 Cloudflare 的机器上，本地既不需要服务器，也不需要上传 build/。

文章攒到 17 篇之后，Docusaurus 默认的两处分页就显出不足了：

• 列表页只有一个「较旧的博文」链接，看不出总共有几页、自己在第几页
• 文章底部的上下篇只有标题，没有日期，也不知道在整站时间线里的位置

现象：手机上从首页点进「写在开始」，再打开汉堡菜单，只有文档目录，博客和在线工具都不见了。

一开始以为是自己的改动弄坏了导航，查完源码才发现：这是 Docusaurus 的设计。

加一排安全徽章这件事，最大的分歧是：用第三方发的「认证签章」，还是自己做？

我最后选了后者，理由不是好看，而是可验证。

新工具上线前跑移动端检查，九个页面里八个都是 0 溢出，只有数据包生成器在 320px 下横向多出 80px。

这种问题最烦的地方是：你在桌面浏览器里根本看不见它。

做像素画工具时，最先想的是「加个马赛克滤镜不就完了」。

试过就知道不行：马赛克只是把像素块放大，颜色还是原来那几万种，看起来像低分辨率的照片，不像像素画。真正的像素画有两个约束 —— 格子的数量，和颜色的数量。

设计工具导出的 SVG 通常有两种体积：你看到的那张图，和文件里真实存在的东西。

一张 800 字节的图标，能把 500 多字节花在没人要的元数据上。但清理时必须清楚哪些是垃圾、哪些是命脉。

二维码工具看起来最简单：输入文字，画出黑白格子。真做起来，选库和中文编码各有一个坑。

「页脚不太好看，桌面端不对称，移动端靠左还有点单调。」收到这个反馈时，我先截图量了一遍，发现「不好看」背后其实是五个可以量化的问题。

移动端适配最怕「看起来没问题」。我一开始靠肉眼和截图判断，结果漏了好几个只有真机宽度才暴露的问题。后来改成用无头浏览器量数据，才发现截图本身也会骗人。

工具上线后收到一句反馈：压缩完对结果不满意，想换个质量再来一次，发现按钮是灰的，只能刷新页面重来。

第一反应是「用户操作不对」，第二反应是「不对，这是我的问题」。