网站搭建置顶
本站是怎么搭起来的：零依赖、可离线、一个文件加一篇文章
记录这个博客的技术选型与目录结构：不装 Node、不跑构建，双击 index.html 就能看，加文章只需编辑一个 JS 数组。
标签 · 前端
共 33 个标签，「前端」下 21 篇
Linux 39部署 30DNS 22命令行 22前端 21性能 20运维速查 16脚本 16域名 15排错 13Nginx 11安全加固 10Git 7监控 7HTTP 6备份 6Cloudflare 5HTTPS 3缓存 3SSH 3自动化 3Shell 3本站 2Docker 2CI/CD 2续费 1DNSSEC 1备案 1容器 1数据库 1GitHub Pages 1CDN 1Debian 1
网站搭建
图片与字体自托管：少一次外部请求，少一个故障点
为什么不该随便引 CDN 上的字体和库，如何自托管字体与图标，图片格式怎么选、怎么压缩，以及 preload 的正确用法。
网站搭建
站点收录：让搜索引擎知道你存在
sitemap 提交到各站长平台、主动推送接口、验证站点所有权、robots.txt 常见写法，以及收录慢时该查什么。
效率工具
笔记系统：怎么让记下来的东西找得到
为什么笔记会「记了等于没记」、目录结构与命名规范、双链与标签怎么取舍、回顾机制，以及本站的做法。
网站搭建
站点统计方案：自建统计还是用现成的
Google Analytics、Cloudflare Web Analytics、Plausible/Umami 自建、以及 Nginx 日志分析的对比，附选择建议与隐私注意。
网站搭建
自定义错误页：把 404 变成一个有用的页面
Nginx 配置自定义 404/50x、静态站 SPA 的回退处理、错误页该包含什么内容，以及 error_page 的几个易错点。
网站搭建
静态站生成器对比：Hugo、Jekyll、Astro、11ty
四个主流生成器的特点与适用场景、构建速度、模板语法、生态与部署便利度，以及什么时候干脆不用生成器。
网站搭建
Core Web Vitals 实测：三个指标怎么优化
LCP、INP、CLS 各自的含义与常见成因、针对性优化手段、测量方法，以及真实用户数据怎么看。
网站搭建
WebSocket 基础：什么时候该用它，怎么配
与 HTTP 轮询的对比、握手过程、Nginx 反代配置的关键两行、心跳与重连机制，以及不适合用 WebSocket 的场景。
网站搭建
PWA 入门：manifest 与 Service Worker 能带来什么
PWA 的三个要素、manifest 的写法、Service Worker 缓存策略选择、更新机制，以及个人站点值不值得做。
网站搭建
CORS 跨域详解：报错看不懂就先看这篇
同源策略是什么、简单请求与预检请求的区别、服务端该返回哪些头、带 Cookie 的特殊处理，以及常见报错的对应解法。
网站搭建
Chrome DevTools 调试技巧：我常用的十几个功能
Elements/Console/Network/Sources 各面板的实用功能、断点与条件断点、设备模拟、性能录制与 Lighthouse。
网站搭建
SVG 图标方案：不引图标库也能有成套图标
内联 SVG symbol 雪碧图的做法、currentColor 跟随文字颜色、尺寸控制与无障碍处理，以及和图标字体的对比。
网站搭建
无障碍基础：让更多人能正常使用你的站点
键盘可达性、焦点样式、对比度、语义标签与 aria 的正确用法，以及用 Lighthouse 和键盘自查的方法。
网站搭建
代码高亮实现：不用 highlight.js 也能着色
逐字符扫描的状态机思路、各语言的关键字表、注释与字符串优先处理，以及深浅色配色的切换方式。
网站搭建
从零写一个 Markdown 解析器：够用就好
分块的思路、行内与块级分开处理、代码块优先保护、表格与列表的实现，以及为什么先转义再解析。
网站搭建
手写 hash 路由：100 行实现前端页面切换
hash 路由的原理、路由表解析、与标题锚点的冲突处理、平滑滚动，以及它相对 History API 路由的取舍。
网站搭建
图片格式选型：WebP、AVIF 与兼容回退
各格式的特点与压缩率对比、picture 元素做兼容回退、转换命令与批量脚本、响应式 srcset，以及懒加载要点。
网站搭建
CSS 变量与主题切换：本站的深浅色是怎么做的
自定义属性用法、用 data-theme 切换整套配色、跟随系统偏好、localStorage 记忆，以及闪烁问题的解决。
网站搭建
Flex 与 Grid 布局：什么时候用哪个
一句话区分两者的适用场景，Flex 的主轴与收缩规则、Grid 的常用写法与 auto-fill 技巧，以及三个高频布局的现成代码。
网站搭建
语义化 HTML 与 SEO 基础：标签选对，一半工作就完成了
常用语义标签的正确用法、标题层级为什么不能跳、meta 标签该写哪些、结构化数据的作用，附一份页面模板。