古诗网页制作教程：从零搭建防黑加固实战
去年年底，我接了个挺有意思的活儿，给一家传统文化培训机构做官网。需求很简单，展示《诗经》、唐诗宋词，界面要古风雅致。项目本身不大，三天就能搞定。但就在上线前夜，服务器突然报警，首页被替换成了满屏的博彩广告，后台密码也被改了。客户急得跳脚，问我：网站被黑挂马不知道怎么办？
那一刻我才意识到，很多站长，包括很多做了十年网站的同行，对“安全”的理解还停留在装个杀毒软件层面。其实，对于这种纯展示型的古诗网页，最大的风险往往不是高并发，而是那些不起眼的静态资源漏洞和配置疏忽。
今天，我不讲虚的，就通过这个真实的“古诗网页制作教程”案例，带你从零搭建一个既美观又“皮实”的古风网站。重点不在于怎么把字弄成竖排，而在于如何让你的网站在黑客眼里“没肉吃”。
项目背景与需求：别只盯着美观，安全才是命门
先说说这个项目的具体背景。客户是一家主打青少年国学教育的机构，目标用户是家长和中小学生。他们的核心诉求有两点：一是视觉效果必须“古风”，要有水墨、书法字体、淡雅的色彩；二是内容更新频率不高，但要求绝对稳定，不能出现任何违规信息，尤其是被挂马，否则会影响品牌声誉，甚至被搜索引擎降权。
在需求调研阶段，我特意问了一句：“你们之前有没有被黑过？”对方愣了一下，说：“好像上次首页乱码过，后来重装系统就好了。”这就是典型的“病入膏肓而不自知”。很多小网站被黑后，直接重装系统或重建站点，这等于扔掉了所有的SEO权重和数据，治标不治本。
这个案例给我敲响了警钟：在古诗网页制作教程中，如果只谈HTML标签和CSS动画，那是教人“化妆”；如果加上安全防护，才是教人“练内功”。
在这个项目中，我们面临的挑战主要有三个：
- 静态资源安全：古诗网站通常包含大量图片（水墨画、书法字）和字体文件（如楷体、行楷）。这些静态资源如果被恶意篡改或路径遍历，极易成为攻击入口。
- XSS攻击防范：虽然古诗内容相对固定，但如果后续加入用户评论或动态加载诗词功能，跨站脚本攻击（XSS）的风险就会陡增。
- HTTPS与备案合规：国内网站必须ICP备案，且必须启用SSL证书。但在实际部署中，很多新手会因为配置不当导致混合内容警告，进而影响用户体验和SEO排名。
所以，我的目标很明确：用一个前端为主、后端极轻的方案，从零搭建一个结构清晰、易于维护且具备基础防御能力的古诗展示站。
技术选型：轻量级是王道，拒绝过度设计
对于这种内容展示型的网站，技术选型的核心原则是：简单、快速、易维护。
很多初学者喜欢一上来就搞React、Vue全家桶，再配个Node.js后端，数据库用MySQL。对于一个只展示几百首古诗的网站来说，这纯属“杀鸡用牛刀”。不仅开发周期长，而且引入了更多的依赖库，每一个依赖库都是潜在的安全漏洞。
在这个案例中，我选择了以下技术栈：
| 组件 | 选型 | 理由 |
|---|---|---|
| 前端框架 | 原生 HTML5 + CSS3 + ES6 | 古诗页面结构固定，无需复杂交互，原生开发性能最优，无依赖风险。 |
| 字体方案 | Web Font + 本地备份 | 使用 @font-face 加载书法字体，同时准备 fallback 字体，确保加载速度和兼容性。 |
| 构建工具 | Vite | 虽然不用框架，但 Vite 的 HMR（热模块替换）和打包优化功能能极大提升开发效率。 |
| 后端服务 | Nginx + Python (Flask) | 仅用于处理少量的动态请求（如统计访问量、简单的留言），避免使用重型 Java/.NET 框架。 |
| 数据库 | SQLite | 单机部署，无需维护 MySQL 服务，文件即数据库，备份简单，攻击面极小。 |
| 部署环境 | 云服务器 (轻量应用服务器) | 成本低，启动快，适合小型网站。 |
这里要特别强调一点：不要为了技术而技术。在古诗网页制作教程的实操中，你会发现，越是简单的技术栈，越容易排查安全问题。比如，如果你用了一套复杂的CMS系统，被黑后你都不知道是哪个插件出了问题；但如果你用原生HTML+Nginx，日志里每一行请求都清清楚楚。
此外，关于字体加载，我参考了 MDN Web Docs 中关于 @font-face 的文档，特别注意了 font-display 属性的设置。对于古诗网站，文字是灵魂，如果字体加载慢导致文字闪烁（FOUT），用户体验会大打折扣。设置 font-display: swap 可以让浏览器先显示系统默认字体，字体加载完成后再替换，保证首屏加载速度。
核心实现：代码里的安全细节
接下来，进入干货部分。在从零搭建的过程中，有哪些代码细节是决定网站安全性的关键？
1. 静态资源的路径安全与权限控制
很多网站被黑，是因为上传目录权限给大了，或者静态资源路径存在目录遍历漏洞。
在 Nginx 配置中，我做了严格的限制：
server {listen 443 ssl;server_name yourdomain.com;# 静态资源目录location /static/ {root /var/www/poetry;# 禁止列出目录autoindex off;# 设置缓存策略，减少服务器压力expires 30d;add_header Cache-Control "public";}# 字体文件单独处理，限制MIME类型location /fonts/ {root /var/www/poetry;types {application/vnd.ms-fontobject eot;font/ttf ttf;font/woff woff;font/woff2 woff2;}# 关键：禁止执行任何脚本deny all;allow 127.0.0.1; # 仅允许本地或代理访问，视具体架构而定}
}
注意上面的 deny all; 和 allow 设置。对于纯静态的字体和图片文件，服务器根本不需要执行权限。通过 Nginx 直接处理静态文件，完全不经过后端代码，从源头上杜绝了代码注入的可能。
2. 前端 XSS 防御：看似无用，实则救命
虽然古诗内容固定，但我们在页面底部加了一个“诗词鉴赏留言”功能（非实名，仅昵称）。这就引入了用户输入。
很多前端新手喜欢用 innerHTML 直接插入数据：
// 危险写法！
const comment = document.getElementById('comment').value;
const commentList = document.getElementById('list');
const li = document.createElement('li');
li.innerHTML = comment; // 如果用户输入 <script>alert(1)</script>，直接执行
commentList.appendChild(li);
正确的做法是使用 textContent，或者手动转义 HTML 实体：
// 安全写法
const comment = document.getElementById('comment').value;
const commentList = document.getElementById('list');
const li = document.createElement('li');// 方法一：使用 textContent (推荐，浏览器自动转义)
li.textContent = comment;// 方法二：手动转义 (适用于需要插入部分HTML标签的场景)
function escapeHTML(str) {return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
}
li.innerHTML = `<span class="user">${escapeHTML(username)}:</span> ${escapeHTML(comment)}`;commentList.appendChild(li);
在古诗网页制作教程的实操中，我习惯给所有用户输入的地方加上这个 escapeHTML 函数。这不仅是防黑，更是防“键盘侠”恶意刷屏。
3. CSS 中的安全陷阱：url() 的相对路径
还有一个容易被忽略的点：CSS 中的 url()。
如果你这样写：
body {background-image: url('../images/bg.jpg');
}
在某些特定的服务器配置或代理环境下，相对路径解析可能会出现异常，导致请求指向意外的路径。更严重的是，如果 CSS 文件被攻击者篡改，他们可以注入恶意的 @import 或 url() 指向外部攻击服务器，实现数据泄露或挂马。
我的做法是：
- 所有资源路径使用绝对路径（相对于域名根目录），如
/images/bg.jpg。 - 在 Nginx 中配置
strict_slashes，防止路径遍历。 - 定期扫描 CSS 文件，确保没有异常的
@import语句。
上线与优化：HTTPS、备案与SEO的协同
代码写完了，怎么上线？这一步往往藏着最大的坑。
1. ICP备案与SSL证书
国内服务器，ICP备案是硬性门槛。在备案期间，网站是不能访问的。所以，建议在开发阶段就同步提交备案申请，利用开发时间去处理备案流程。
SSL证书方面，我推荐 Let's Encrypt 的免费证书，或者云服务商提供的免费 DV 证书。但在配置时，一定要开启 HSTS (HTTP Strict Transport Security) 头：
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
这条指令告诉浏览器：今后一年内，只允许通过 HTTPS 访问本站。即使有人试图诱导用户输入 HTTP，浏览器也会自动重定向到 HTTPS。这对于防止中间人攻击（MITM）至关重要。
2. SEO 优化：古诗网站的特殊性
古诗网站的 SEO 难点在于：内容重复度高。网上到处都有《静夜思》、《春晓》，搜索引擎怎么区分你的网站？
我的策略是：
- 结构化数据 (Schema.org)：在 HTML 头部加入
Poem类型的结构化数据，明确标注作者、朝代、出处。<script type="application/ld+json"> {"@context": "http://schema.org","@type": "Poem","name": "静夜思","author": {"@type": "Person","name": "李白"},"dateCreated": "700","genre": "Five-character Quatrain" } </script> - 原创赏析：每首诗下面，附上机构老师的原创赏析，而不是复制百度百科的内容。这部分内容才是搜索引擎愿意收录的“独特价值”。
- 长尾关键词布局：除了“静夜思”，还要布局“李白静夜思赏析”、“唐代五言绝句大全”等长尾词。
3. 性能优化：Lighthouse 跑分
上线后，我用 Lighthouse 跑了分。古诗网站虽然轻，但图片很多。
- 图片压缩：所有水墨画图片使用 WebP 格式，比 JPG 小 30%-50%。
- 懒加载：使用
loading="lazy"属性，首屏只加载可视区域内的图片。 - 字体子集化：书法字体文件很大（几MB），通过
pyftsubset工具只保留常用汉字，将字体文件压缩到几百KB。
经验总结：安全不是功能，是底线
回顾这个古诗网页制作教程案例，我想分享几点经验：
- 最小化原则：网站能少用的技术就少用。原生 HTML/CSS/JS 是最安全的，因为它没有依赖库的供应链风险。
- 日志是侦探：被黑后，不要只盯着现象。去翻 Nginx 的
access.log和error.log。在这个案例中，我后来发现，攻击者是通过一个未授权的 Python 调试接口（werkzeug debugger）进入的。生产环境必须关闭所有调试功能！ - 定期扫描：使用
nikto或sqlmap等工具定期扫描自己的网站。自己扫自己，才能知道哪里有漏洞。 - 备份自动化：每天凌晨自动备份数据库和代码到异地存储。被黑后，快速恢复是止损的唯一办法。
网站建设不只是把页面做漂亮，更是一个系统工程。从从零搭建的那一刻起，安全意识就必须贯穿始终。不要等到网站被挂马、被降权了，才想起去补安全课。
在这个案例中，我们通过精简技术栈、严格配置服务器、前端代码规范化，成功构建了一个既符合古风美学，又具备较高安全性的网站。上线三个月以来，零安全事件，SEO 排名稳步上升，客户非常满意。
最后，留个问题给大家讨论：
你的网站用的什么技术栈？评论区聊聊
