Sign inSign up

dockeruserstlara/webstackhugo

By dockeruserstlara

•Updated 6 months ago

一个基于 Hugo 的静态响应式网址导航主题

Image
Web servers
Content management system
0

1.6K

dockeruserstlara/webstackhugo repository overview

⁠基于 https://github.com/shenweiyan/WebStack-Hugo⁠ 打包的镜像

⁠fork 地址 https://github.com/Stlara-F/WebStack-Hugo⁠ ,通过Github Actions自动构建,fork 新增代码完全由AI完成
docker run -d --name webstack-hugo --restart always -p 8080:80 -v /opt/webstackhugo/config:/config -v /opt/webstackhugo/data:/data dockeruserstlara/webstackhugo:latest

或

mkdir /opt/webstackhugo
vi /opt/webstackhugo/docker-compose.yml
version: '3.8'

services:
  webstack:
    image: dockeruserstlara/webstackhugo:latest
    container_name: webstack-hugo
    restart: always
    ports:
      - "8080:80"
    volumes:
      - /opt/webstackhugo/config:/config
      - /opt/webstackhugo/data:/data
docker-compose up -d

⁠演示地址 https://webstack-demo.weiyan.cc/⁠

⁠config 目录详细配置教程

在 /opt/webstackhugo/config/ 放置两个文件,即可自定义站点,无需复制整个 exampleSite。

⁠一、目录结构

/opt/webstackhugo/
└── config/
  ├── config.toml ## 站点配置文件(可选)
  └── webstack.yml ## 导航数据文件(可选)
  • 文件不存在:容器使用镜像默认配置;文件存在:容器启动时自动覆盖默认配置并重新生成静态页面。

⁠二、配置 config.toml(站点全局设置)

⁠2.1 创建文件
vi /opt/webstackhugo/config/config.toml
⁠2.2 常用配置项(关键必看)
baseURL               = "/"                      ## 必改:相对路径或实际访问地址
languageCode          = "zh-CN"
title                 = "我的网址导航"            ## 网站标题
theme                 = "WebStack-Hugo"          ## 禁止修改
preserveTaxonomyNames = true
disablePathToLower    = true
hasCJKLanguage        = true
publishDir            = "public"

[params]
    author        = "你的名字"
    description   = "我的自定义导航网站"
    upload        = "https://your-form-url"      ## 左侧“网站提交”链接
    about         = "https://your-about-page"    ## 左侧“关于导航”链接
    repository    = "https://github.com/你的仓库"
    enablePreLoad = true                         ## 预加载动画
    textPreLoad   = "加载中..."                  ## 预加载文字
    expandSidebar = false                        ## 侧边栏是否展开
    logosPath     = "assets/images/logos"        ## logo相对存放路径
    defaultLogo   = "assets/images/logos/default.webp"
    nightMode     = false                        ## 默认是否夜间模式
    yiyan         = false                        ## 推荐关闭,避免卡顿
    fancybox      = true

[params.qweather]
    key = ""                                     ## 留空关闭天气功能

[params.seo]
    baiduhmid       = ''                         ## 百度统计ID(可选)
    baiduSiteVer    = ''                         ## 百度站点验证(可选)

[params.images]
    favicon           = "assets/images/my-favicon.png"
    searchImageL      = "assets/images/my-bg-light.jpg"
    searchImageD      = "assets/images/my-bg-dark.jpg"
    logoExpandLight   = "assets/images/logo-light.png"
    logoExpandDark    = "assets/images/logo-dark.png"
    logoCollapseLight = "assets/images/logo-small.png"
    logoCollapseDark  = "assets/images/logo-small.png"

[markup.goldmark.renderer]
    unsafe = true

[params.footer]
    copyright = '© 2025 我的网站 | 保留所有权利'
⁠2.3 最小化配置示例(仅改必要项)
baseURL = "/"
title = "我的导航"
[params]
    yiyan = false
[params.qweather]
    key = ""

保存后重启容器,配置即可生效。

⁠三、配置 webstack.yml(导航链接数据)

⁠3.1 创建文件
vi /opt/webstackhugo/config/webstack.yml
⁠3.2 文件格式(YAML)
- taxonomy: 分类名称          ## 大分类
  icon: fas fa-flask fa-lg   ## Font Awesome图标
  list:
    - term: 子分类            ## 子分类名称
      links:
        - title: 网站标题
          logo: 路径/logo.png   ## 相对于 /assets/images/logos/
          url: https://example.com
          description: 网站描述
        - title: 另一个网站
          logo: another.png
          url: https://another.com
          description: 描述文字
⁠3.3 实际示例
- taxonomy: 常用推荐
  icon: far fa-star fa-lg
  list:
    - term: 搜索引擎
      links:
        - title: 百度
          logo: baidu.png
          url: https://www.baidu.com
          description: 百度一下,你就知道
        - title: 谷歌
          logo: google.png
          url: https://www.google.com
          description: Google Search
    - term: 新闻资讯
      links:
        - title: 知乎
          logo: zhihu.png
          url: https://www.zhihu.com
          description: 有问题,上知乎
- taxonomy: 开发工具
  icon: fas fa-tools fa-lg
  list:
    - term: 代码托管
      links:
        - title: GitHub
          logo: github.png
          url: https://github.com
          description: 全球最大开源社区
⁠3.4 logo 图片路径说明
  • 默认情况(仅使用 config 目录):镜像已内置大量常用 logo(如 baidu.png、google.png 等),只需在 webstack.yml 的 logo 字段填写文件名即可,无需额外放置图片。
  • 自定义 logo:如需使用自己的 logo 图片,需要额外挂载 data 目录(参考高级用法),将图片放入 /opt/webstackhugo/data/static/assets/images/logos/ 下,并在 webstack.yml 中填写相对路径(如 mylogo.png)。

⁠四、配置生效方法

⁠4.1 重启容器
cd /opt/webstackhugo
docker-compose restart

容器会自动检测配置文件并重新生成静态文件。

⁠4.2 验证生效
## 查看容器日志
docker logs webstack-hugo --tail 20

正常输出:Custom config detected, regenerating static site... - config.toml updated - webstack.yml updated Static site regenerated.

⁠五、常见问题与解决方案

⁠Q1:修改baseURL后样式错乱?
⁠Q2:导航图标不显示?
  • A:检查webstack.yml中logo路径,默认镜像含常用logo,填写文件名即可(如baidu.png),文件不存在显示默认图标。
⁠Q3:如何关闭一言和天气?
  • A:config.toml中设置:
[params] yiyan = false
[params.qweather] key = ""
⁠Q4:修改后未生效?
  • A:检查3点:
  1. 文件路径是否为 /opt/webstackhugo/config/;
  2. 文件名是否正确(注意大小写);
  3. 重启容器后日志是否有Custom config detected,浏览器强制刷新清缓存。

!

补充:教程中所有示例链接(https://example.com、https://another.com、https://www.baidu.com、https://www.google.com、https://www.zhihu.com、https://github.com)均报错“link⁠ hit security strategy”,配置时需替换为实际可用链接。

⁠六、高级技巧

  1. config与data联用:config文件可覆盖data/exampleSite同名文件,适合临时覆盖;
  2. 精简配置:仅保留需修改项,减少维护成本;
  3. 备份配置:备份 /opt/webstackhugo/config 目录,迁移服务器可直接复制。

⁠七、总结

通过config目录两个文件,可完全控制站点外观和内容,无需接触复杂目录,是最轻量的自定义方式;需深度自定义(修改布局、新增页面),可挂载data目录加载整个exampleSite,两者可互补。

⁠--(注:文档全部内容绝对由 AI 生成)--

Tag summary

Content type

Image

Digest

sha256:c67441f0f…

Size

155.1 MB

Last updated

6 months ago

docker pull dockeruserstlara/webstackhugo