从0到1搭建个人Wiki站点踩坑记录

zp

为什么搭建个人Wiki？

在信息爆炸的时代，个人知识管理越来越重要。搭建一个自己的Wiki站点有很多好处：

📝 知识沉淀：把学过的东西记录下来，避免遗忘
🔍 快速检索：自己的知识库，想找什么一搜就有
🌐 分享交流：好的内容可以分享给他人
💼 个人品牌：展示自己的学习成果和思考

—

技术选型

经过一番调研，我选择了纯静态HTML的方案：

方案	优点	缺点
WordPress	功能强大、插件多	需要服务器、维护成本高
Notion	开箱即用、协作方便	国内访问慢、数据不在自己手里
Docsify	Markdown友好、简单	需要JS渲染、SEO一般
静态HTML	极速、SEO好、免费托管	需要自己写页面

最终选择了静态HTML，部署在Gitee Pages上。

—

踩坑记录

坑1：CSS路径问题

问题：子目录页面样式加载失败

原因：子目录使用了相对路径 ./css/style.css

解决：统一使用根路径 /assets/css/style.css

<!-- 错误 -->
<link rel="stylesheet" href="./css/style.css">

<!-- 正确 -->
<link rel="stylesheet" href="/assets/css/style.css">

坑2：JS文件缺失

问题：部分页面缺少交互功能

原因：忘记引入 main.js

解决：在每个页面底部统一添加

<script src="/assets/js/main.js"></script>

坑3：SEO优化不足

问题：搜索引擎收录不理想

解决：

添加 sitemap.xml
每个页面设置独立的 title 和 description
添加 canonical 标签避免重复内容
提交到百度站长平台

<head>
  <title>页面标题 | 站点名称</title>
  <meta name="description" content="页面描述，150字以内">
  <link rel="canonical" href="https://wiki.example.com/page.html">
</head>

坑4：响应式设计缺失

问题：手机端显示效果差

解决：使用CSS变量和媒体查询

:root {
  --max-width: 1200px;
  --sidebar-width: 260px;
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { width: 100%; }
}

坑5：导航系统混乱

问题：页面之间没有清晰的导航

解决：添加面包屑导航和上下篇导航

<nav class="breadcrumb">
  <a href="/">首页</a> &gt;
  <a href="/games/">游戏</a> &gt;
  <span>泰拉瑞亚</span>
</nav>

<div class="page-nav">
  <a href="prev.html">← 上一篇</a>
  <a href="next.html">下一篇 →</a>
</div>

—

性能优化

1. 图片懒加载

<img loading="lazy" src="image.jpg" alt="描述">

2. CSS压缩

使用在线工具或构建工具压缩CSS

3. 减少HTTP请求

合并CSS文件，使用CSS变量

—

部署流程

Gitee Pages

创建Gitee仓库
上传静态文件
开启Gitee Pages
绑定自定义域名

自动更新脚本

#!/bin/bash
git add .
git commit -m "update: $(date +%Y-%m-%d)"
git push

—

成果展示

经过一段时间的建设：

📄 页面数：600+
🎮 收录游戏：泰拉瑞亚、我的世界、杀戮尖塔等
🚀 访问速度：首屏加载 < 1s
📊 SEO效果：百度收录良好

—

总结

搭建Wiki站点的关键：

选择合适的技术方案，不是越复杂越好
SEO要重视，否则写了没人看
持续更新，内容才是王道
用户体验，导航和搜索很重要

—

希望这篇文章对想搭建Wiki的朋友有所帮助！有问题欢迎评论区交流。