EN

Hugo

Referenční dovednost pro Hugo: instalace, CLI příkazy, konfigurace, struktura obsahu, tvorba šablon, nasazení a optimalizace výkonu.

Co tato dovednost pokrývá

Hugo je rychlý a flexibilní generátor statických stránek napsaný v Go. Tato stránka pokrývá instalaci, vytvoření a spuštění webu, CLI příkazy pro každodenní práci, konfiguraci, strukturu obsahu, tvorbu a úpravu šablon, nasazení a optimalizaci výkonu.

Kdy ji použít

  • Instalace Hugo nebo vytvoření zcela nového webu
  • Spuštění lokálního vývojového serveru, včetně draftů, vlastního portu nebo alternativní konfigurace
  • Vytváření a organizace obsahu (příspěvky, stránky, page bundles)
  • Úprava config.toml — menu, výstupní formáty, taxonomie, zpracování obrázků
  • Správa Hugo modulů nebo theme submodulů
  • Úprava layoutů šablony, SCSS nebo CSS custom properties
  • Nasazení na GitHub Pages, Netlify nebo AWS S3 + CloudFront
  • Ladění výkonu buildu nebo diagnostika pomalých/nefunkčních buildů
  • Řešení problémů s šablonou, která se nenačítá, nebo obsahem, který se nezobrazuje

Rychlý start

Instalace

macOS:

brew install hugo

Windows:

winget install Hugo.Hugo.Extended

Linux:

sudo apt install hugo  # Ubuntu/Debian
sudo dnf install hugo  # Fedora

Vytvoření nového webu

# Create new site
hugo new site my-website
cd my-website

# Initialize Git repository
git init

# Add a theme (Ananke example)
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# Configure theme in config
echo "theme = 'ananke'" >> config.toml

# Create your first post
hugo new posts/my-first-post.md

# Start development server
hugo server -D

Příklady pro konkrétní projekty:

hugo new site ceramics-site
hugo new site blog-site
hugo new site portfolio-site

Přehled CLI příkazů

Vývojový server

# Start development server
hugo server

# Start server with drafts included
hugo server -D

# Start server on specific port
hugo server --port 8080

# Start server with live reload disabled
hugo server --disableLiveReload

# Start server with specific config
hugo server --config config-dev.toml

# Start server with verbose output
hugo server -v

Příkazy pro obsah

Vytvoření nového obsahu:

# Create new post
hugo new posts/my-new-post.md

# Create new page
hugo new about.md

# Create content with specific type
hugo new --kind post posts/tech-article.md

Výpis obsahu:

# List all content
hugo list all

# List drafts
hugo list drafts

# List pages by kind
hugo list pages

Build příkazy

# Build site to public directory
hugo

# Build with drafts
hugo -D

# Build to specific directory
hugo -d dist

# Build with minification
hugo --minify

# Build with garbage collection
hugo --gc

# Clean public directory before build
hugo --cleanDestinationDir

Pokročilé volby buildu

Buildy pro konkrétní prostředí:

# Build for production
hugo --environment production

# Build with specific config
hugo --config config-prod.toml,config.toml

Diagnostika výkonu:

# Build with template metrics
hugo --templateMetrics --templateMetricsHints

# Build with step analysis
hugo --stepAnalysis

Správa modulů

# Initialize modules
hugo mod init github.com/user/my-site

# Get specific module version
hugo mod get github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2@v2.211.0

# Update all modules
hugo mod tidy

# Clean module cache
hugo mod clean

Správa šablon

# List available themes
hugo list themes

# Update theme submodule
git submodule update --remote themes/theme-name

# Update Hugo module theme
hugo mod get -u github.com/user/theme

Konfigurace

Základní konfigurace (config.toml)

baseURL = "https://example.com"
languageCode = "en-us"
title = "My Hugo Site"
theme = "ananke"

[params]
  description = "A fast and flexible static site generator"
  author = "Hugo Authors"

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 2

Pokročilá konfigurace

Vícenásobné výstupní formáty:

[outputs]
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML"]
  section = ["HTML", "RSS"]
  taxonomy = ["HTML", "RSS"]
  taxonomyTerm = ["HTML"]

Zpracování obrázků:

[imaging]
  quality = 75
  resampleFilter = "Lanczos"
  anchor = "Center"

Taxonomie:

[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"

Obsah a front matter

Front matter

Příklad v YAML:

---
title: "My First Post"
date: 2023-12-01T10:00:00Z
draft: false
tags: ["hugo", "static-site"]
categories: ["blog"]
author: "John Doe"
---

# Post Content Here

Příklad v TOML:

+++
title = "My First Post"
date = 2023-12-01T10:00:00Z
draft = false
tags = ["hugo", "static-site"]
categories = ["blog"]
author = "John Doe"
+++

# Post Content Here

Organizace obsahu

Struktura adresářů:

content/
├── _index.md          # Homepage content
├── about.md           # About page
├── posts/
│   ├── _index.md      # Posts listing page
│   ├── post1.md       # Individual post
│   └── post2.md
└── projects/
    ├── _index.md      # Projects listing
    └── project1.md

Page bundles

Leaf bundle:

content/posts/my-post/
├── index.md
├── image1.jpg
└── image2.png

Branch bundle:

content/posts/
├── _index.md
├── post1/
│   └── index.md
└── post2/
    └── index.md

Šablony a customizace

Struktura šablony

themes/my-theme/
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── partials/
│   │   ├── header.html
│   │   └── footer.html
│   └── shortcodes/
├── static/
│   ├── css/
│   ├── js/
│   └── images/
├── assets/
│   └── scss/
└── theme.toml

Vlastní CSS

// assets/scss/custom.scss

// Override theme variables
$primary-color: #007acc;
$secondary-color: #6c757d;
$font-family-sans-serif: "Roboto", sans-serif;

// Custom styles
.custom-header {
  background: linear-gradient(135deg, $primary-color, $secondary-color);
  color: white;
  padding: 2rem 0;

  h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.2rem;
    opacity: 0.9;
  }
}

.custom-card {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

CSS custom properties

:root {
  --primary-color: #007acc;
  --secondary-color: #6c757d;
  --font-family: 'Inter', sans-serif;
  --border-radius: 8px;
}

Nasazení

GitHub Pages

GitHub Actions workflow:

name: Deploy Hugo site to Pages

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Netlify

netlify.toml:

[build]
  publish = "public"
  command = "hugo --gc --minify"

[build.environment]
  HUGO_VERSION = "0.111.3"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

AWS S3 + CloudFront

GitHub Actions pro AWS:

- name: Configure AWS credentials
  uses: aws-actions/configure-aws-credentials@v2
  with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: us-east-1

- name: Deploy to S3
  run: |
    aws s3 sync public/ s3://${{ secrets.S3_BUCKET }} --delete    

- name: Invalidate CloudFront
  run: |
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_ID }} --paths "/*"

Optimalizace výkonu

Načítání kritického CSS

.above-fold {
  // Critical styles loaded immediately
}

Lazy loading nekritických stylů

@media print {
  @import "print";
}

Optimalizace buildu

  • Pro produkční buildy použijte přepínač --minify
  • Zapněte garbage collection pomocí --gc
  • Pro lepší správu závislostí používejte Hugo moduly
  • Nastavte správné caching hlavičky
  • Optimalizujte obrázky pomocí Hugo image processingu

Osvědčené postupy

  1. Organizace obsahu: Používejte konzistentní front matter a strukturu adresářů
  2. Výkon: Zapněte minifikaci a optimalizujte assety
  3. SEO: Nastavte správné meta tagy a strukturovaná data
  4. Přístupnost: Dodržujte správnou hierarchii nadpisů a alt texty
  5. Verzování: Pro šablony používejte Git submoduly
  6. CI/CD: Zaveďte automatizované deployment pipeline
  7. Bezpečnost: Udržujte Hugo i šablony aktuální
  8. Monitoring: Používejte analytiku a sledování výkonu

Řešení problémů

Šablona se nenačítá:

# Check theme submodule
git submodule status

# Update theme
git submodule update --remote themes/theme-name

Obsah se nezobrazuje:

# Check front matter
hugo list drafts

# Build with verbose output
hugo -v

Problémy s výkonem:

# Check build metrics
hugo --templateMetrics --templateMetricsHints

# Analyze build steps
hugo --stepAnalysis
← Zpět na úvod