跳到主要内容

Docsy主题的安装和配置教程-擦-部署报错

最后更新于:

Docsy主题的安装和配置教程

Hugo Docsy 主题 完整安装+配置教程

我给你写最简洁、能直接照做、一次成功的版本,专门适配你 1000+ MD 文档库,全程 10 分钟搞定。

一、先确认环境(必须)

你需要安装两个东西:

  1. Hugo Extended 版(普通版不行)
  2. Git
1# 检查是否是 extended 版本(看到 extended 就算成功)
2hugo version

没有的话直接去官网装:https://gohugo.io/installation/


二、一键创建 Docsy 项目(最快方法)

打开终端,直接复制运行:

 1# 1. 创建项目文件夹
 2mkdir my-docs && cd my-docs
 3
 4# 2. 初始化 Hugo 模块
 5hugo mod init github.com/你的用户名/my-docs
 6
 7# 3. 下载并启用 Docsy 主题
 8echo '[module]
 9[[module.imports]]
10path = "github.com/google/docsy"' >> hugo.toml

然后创建配置文件 hugo.toml,把下面内容直接复制进去

 1baseURL = "https://你的域名.com/"
 2languageCode = "zh-cn"
 3title = "我的文档库博客"
 4theme = "docsy"
 5
 6[markup]
 7  [markup.goldmark]
 8    [markup.goldmark.renderer]
 9      unsafe = true  # 允许在 MD 里写 HTML
10
11[params]
12  ui = "light" # 默认亮色 / dark 暗色
13  search = true # 开启全文搜索
14  navbar_menu = true
15  toc = true # 右侧自动生成目录
16  editURL = "" # 在线编辑链接(后面教你配)
17
18[module]
19[[module.imports]]
20path = "github.com/google/docsy"

三、放入你的 1000+ MD 文档

1. 创建文档目录

1mkdir -p content/zh/docs

2. 直接把你的所有 MD 文件丢进去

结构示例:

1content/zh/docs/
2├── 教程/
3│   ├── 入门.md
4│   ├── 进阶.md
5├── 工具/
6│   ├── 工具1.md
7│   ├── 工具2.md
8├── _index.md  # 必须有这个文件

3. 必须创建:content/zh/docs/_index.md

1---
2title: 文档库首页
3weight: 1
4---
5
6# 欢迎来到我的文档库
7
8这里存放了 1000+ 篇学习笔记。

四、本地运行(丝滑预览)

1hugo server --disableFastRender

打开浏览器: http://localhost:1313

✅ 1000+ 文档 秒加载 ✅ 左侧目录自动生成 ✅ 右侧大纲自动生成 ✅ 全文搜索可用 ✅ 暗黑模式可用 ✅ 编辑 MD 自动实时刷新


五、核心配置(你必须知道)

1. 左侧菜单排序(weight 越小越靠前)

在 MD 顶部写:

1---
2title: 文章标题
3weight: 10  # 排序用
4---

2. 开启 GitHub 在线编辑(超实用)

hugo.toml 里加:

1[params]
2  github_repo = "https://github.com/你的用户名/你的仓库"
3  github_subdir = "content/zh/docs"
4  edit_page = true

页面会自动出现 「编辑此页」 按钮,点一下就能在线改 MD。

3. 关闭多余功能(让速度更快)

1[params]
2  feedback = false
3  marketing = false
4  versioning = false

六、部署(免费 + 全球秒开)

直接推到 GitHub,然后用以下任意平台一键部署:

  • Cloudflare Pages(推荐)
  • Vercel
  • Netlify

构建命令:

1hugo --minify

七、你可能需要的优化(1000+ 文档专用)

1. 让目录不折叠(方便查找)

创建文件:assets/scss/_variables.scss

1$td-sidebar-nav-expand: true !default;
2$td-sidebar-nav-autocollapse: false !default;

2. 提升加载速度(必加)

hugo.toml

1[build]
2  buildStats = true
3[imaging]
4  resampleFilter = "box"
5  quality = 75

🚀 最终效果

  • 左侧:完整多级文档目录
  • 中间:MD 内容
  • 右侧:自动大纲
  • 顶部:搜索框
  • 支持暗黑模式
  • 1000+ 文章丝滑不卡顿
  • 在线编辑 + 实时更新

我可以直接给你:

  1. 完整成品项目包(解压即用)
  2. 1000 篇 MD 自动生成目录结构 的脚本
  3. 在线编辑 + 自动部署 完整配置

你需要哪个?我直接发给你!

最新文章

文档导航