Hugo Primer 教程：从零开始搭建静态站点

俞凯润

于 2024-08-23 09:53:21 发布

阅读量376

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00861/article/details/141457505

版权

Hugo Primer 教程：从零开始搭建静态站点

hugo-primerHugo theme based on GitHub's Primer CSS项目地址:https://gitcode.com/gh_mirrors/hu/hugo-primer

项目目录结构及介绍

Hugo Primer 是一个基于 Hugo 的主题，旨在提供简洁明快的博客体验。下面概述了此项目的典型目录结构及其重要组成部分：

hugo-primer/
├── archetypes/
│   ├── default.md         # 文档模板，用于新创建的文章或页面的基本元数据
├── assets/
│   ├── css/               # 自定义CSS样式文件
│   ├── js/                # JavaScript文件，增强网站交互
│   └── scss/              # Sass源代码，编译成CSS，便于样式定制
├── config.toml            # 主配置文件，管理站点元数据和参数
├── content/               # 主要内容存放区，包括文章、页面等
│   ├── post/              # 示例文章目录
│   └── pages/             # 非博客内容，如关于页等
├── layouts/               # 模板布局文件，控制网页显示结构
│   ├── _default/          # 默认布局
│   │   ├── list.html      # 列表页布局
│   │   └── single.html    # 单篇文章或页面布局
│   └── partials/          # 可重用的页面部分，如导航栏
├── static/                # 直接复制到站点根目录的静态资源（如图片、PDF）
├── themes/                # 主题所在目录，此处即为Hugo Primer主题
│   ├── ...
├── config/_default/       # 额外的配置选项，可覆盖主配置文件设置
└── LICENSE                # 许可文件

项目的启动文件介绍

在 hugo-primer 中，并没有传统的“启动文件”概念，但可以将 config.toml 视作项目的核心启动配置点。此外，首次使用时执行的命令，如 hugo new site .（假设在项目根目录）和随后的 hugo server -D，扮演着非常重要的角色。

config.toml

baseURL = "http://example.com/"
languageCode = "en-us"
title = "我的Hugo网站"

[params]
  # 这里放置主题特定的配置，如导航条设置、SEO标签等。

它定义了网站的基础URL、语言编码、标题以及额外的参数。这些是站点运行的最基本设定。

项目的配置文件介绍

主要配置文件是 config.toml，它是Hugo站点的主要配置入口，允许开发者和用户自定义站点的行为、元数据和外观。此外，themes/hugo-primer/config.toml 中可能还包含了主题特有的一些配置选项，这些选项提供了对主题行为的进一步调整能力，例如，你可以修改导航菜单、启用或禁用某些功能等。

在 config.toml 文件中，您可以进行以下一些基本配置：