# Hugolify > Open-source Jamstack solution for building easily a fast, as accessible as possible and low carbon website. Since v2, hugolify-theme is an agnostic core and the styling lives in a separate module: hugolify-theme-bootstrap (Bootstrap 5, the default) or hugolify-theme-design-system (framework-free, preview). In v1, Bootstrap CSS and JS were bundled inside hugolify-theme. This file inlines every documentation and tutorial page as plain text. The v1 documentation is archived at https://v1.hugolify.io/ Index: https://www.hugolify.io/llms.txt Generated: 2026-09-07 --- # Last release Source: https://www.hugolify.io/docs/admin/v1/ Current version (v1) of Hugolify Admin Pairs with hugolify-theme v1 v1 is the current stable release of Hugolify Admin and targets hugolify-theme v1. It also runs against hugolify-theme v2, minus the ratio and scrollsnap controls, which is handy while migrating — but the pair to settle on is admin v2 with theme v2. See Hugolify Admin v2 --- # Blocks Source: https://www.hugolify.io/docs/admin/v1/blocks/ Add/modify blocks Disable or enable /config/_default/params.yaml All blocks are available by default but if you want hide or add your blocks, you can do it: params: admin: blocks: # Array of available blocks enable: - alert - cta - editorial # … Personalize fields /config/_default/params.yaml params: admin: blocks: # Array of available fields for a block # e.g with paragraph block paragraph: fields: - title - text_markdown # … See Hugolify fields in repository How to create a block Fields allowed Add a HTML block file contains fields (e.g. alert.html). layouts/ └── partials/ └── admin/ └── blocks/ └── fields/ Content of fields: {{- $fields := slice "text_markdown" "state" "background" -}} {{- $fields = partial "admin/func/GetFields.html" (dict "block" . "fields" $fields) -}} {{- return $fields -}} Block types Add a YAML block file with config (e.g. alert.yml). layouts/ └── partials/ └── admin/ └── blocks/ └── types/ Content of block type: {{- $fields := partial "admin/blocks/fields/alert.html" . -}} {{- $args := dict "label" (i18n "admin.blocks.alert.label") "name" "alert" "collapsed" false "fields" $fields -}} {{ partial "admin/widgets/object.js" $args }} And add it in enable blocks: see above Examples See examples in repository List of Hugolify blocks Hugolify blocks --- # CloudCannon Source: https://www.hugolify.io/docs/admin/v1/cms/cloudcannon/ Content management Git-based. Not available in production Maintened CMS Beta Warning: Not supported features i18n structure Map Widget Enable CloudCannon /config/_default/params.yaml admin: cms: cloudcannon Build config file Build a cloudcannon.config.yml file with Hugo and NodeJS script. This file needs to be versioned. yarn build:config:cloudcannon Group collections /config/_default/params.yaml admin: collection_groups: - heading: Posts collections: - posts - posts_categories - posts_tags Card preview collections /config/_default/params.yaml admin: collections: persons: card_preview: subtext: - key: persons_statutes - key: persons_expertises - key: description Documentation Hugolify Admin setup CloudCannon documentation --- # Decap CMS Source: https://www.hugolify.io/docs/admin/v1/cms/decap-cms/ Open-source content management Git-based. Available in production Maintened CMS Warning: Not supported features UUID widget Enable Decap CMS /config/_default/params.yaml admin: cms: decapcms Icon library Bootstrap Icons (via CSS) Screenshot Documentation Hugolify Admin setup Decap CMS documentation Decap CMS repository Tutorials How to create a multisite with Hugo and Decap CMS using Hugolify How to create a portfolio with Hugo and Decap CMS using Hugolify How to create a blog with Hugo and Decap CMS using Hugolify --- # Netlify CMS Source: https://www.hugolify.io/docs/admin/v1/cms/netlify-cms/ Open-source content management Git-based. Available in production Deprecated CMS Enable Netlify CMS /config/_default/params.yaml admin: cms: netlifycms Icon library Bootstraop Icons (via CSS) Documentation Hugolify Admin setup https://github.com/netlify/netlify-cms-legacy --- # Pages CMS Source: https://www.hugolify.io/docs/admin/v1/cms/pages-cms/ Open-source content management Git-based (GitHub only). Available in production Maintened CMS Compatibility WIP Warning: Not supported features Cloud assets i18n structure Map Widget Nested pages Enable Pages CMS /config/_default/params.yaml admin: cms: pagescms Build config file Build a .pages.yml file with Hugo and NodeJS script. This file needs to be versioned. yarn build:config:pagescms Enable/disable media With media from Pages CMS, you can configure how to handle files you want to upload, attach to or embed in your content. /config/_default/params.yaml admin: media: audio_folders: true pdf_folders: true video_folders: true Documentation Hugolify Admin setup Pages CMS documentation Pages CMS repository Tutorial How to create a Website with Hugo and Pages CMS using Hugolify --- # Static CMS Source: https://www.hugolify.io/docs/admin/v1/cms/static-cms/ Open-source content management Git-based. Available in production Deprecated CMS Warning: Not supported features Cloud assets Nested pages Enable Static CMS /config/_default/params.yaml admin: cms: staticcms Documentation Hugolify Admin setup https://staticjscms.netlify.app/ --- # Sveltia CMS Source: https://www.hugolify.io/docs/admin/v1/cms/sveltia-cms/ Open-source content management Git-based. Available in production Maintened CMS Warning: Not supported features Git Gateway Nested pages Netlify Identify See Current limitations and features not to be implemented in Sveltia CMS documentation. Enable Sveltia CMS /config/_default/params.yaml admin: cms: sveltiacms repo: Hugolify/hugolify-template # set your repository’s URL Additional featured Disable Netlify identify admin: auth: netlify_identity: false Including Hugo’s special index file in a folder collection Disables unnecessary indexes collection ( See more about this on Sveltia’s documentation ): /config/_default/params.yaml admin: collections: indexes: enable: false Shortcodes Since hugolify-admin v1.0.0 Icon library Material Symbols Documentations Hugolify Admin setup Sveltia CMS documentation Sveltia CMS repository Tutorial How to create a Website with Hugo and Sveltia CMS using Hugolify --- # Tina CMS Source: https://www.hugolify.io/docs/admin/v1/cms/tina-cms/ Open-source content management Git-based and API driven. Not available in production Maintened CMS Beta Warning: Not supported features i18n structure Map Widget Shortcodes Enable Tina CMS /config/_default/params.yaml admin: cms: tinacms Build config file Build a tina/config.js file with Hugo and NodeJS script. yarn build:config:tinacms Documentation Hugolify Admin setup Tina CMS documentation Tina CMS repository --- # Collections Source: https://www.hugolify.io/docs/admin/v1/collections/ All sections and taxonomies. Info Collections are automatically added based on Hugolify modules added (Sections) or (Taxonomies) Enable or disable collections /config/_default/params.yaml admin: collections: indexes: enable: true pages: enable: true # e.g. set to false to disable posts even if you load hugolify-theme-posts posts: enable: false # … Enable or disable file creation /config/_default/params.yaml admin: collections: pages: create: false Override fields avalaible for a collection /config/_default/params.yaml admin: collections: pages: fields: - is_draft - title_page - description - featured_image - body Add filter /config/_default/params.yaml admin: collections: pages: filter: - field: isPage value: true Add path /config/_default/params.yaml admin: collections: pages: path: "{{slug}}" Add slug /config/_default/params.yaml admin: collections: pages: slug: "{{id}}" Add sortable /config/_default/params.yaml admin: collections: pages: sortable: "['title']" Add summary /config/_default/params.yaml admin: collections: pages: summary: "{{title}}" Add view filters /config/_default/params.yaml admin: collections: pages: view_filters: - label: 'Posts published in 2020' field: date pattern: '2020' Add view groups /config/_default/params.yaml admin: collections: pages: view_groups: - label: 'Draft' field: draft Create a collection Use params to create a collection /config/_default/params.yaml admin: collections: new_collection: enable: true fields: - draft - title_page - description - featured_image - body Or add a yml collection file layouts/ └── partials/ └── admin/ └── collections/ └── types/ See examples in repository --- # Fields Source: https://www.hugolify.io/docs/admin/v1/fields/ Add/modify fields How to create a field Create file Add a yml field file in fields directory. layouts/ └── partials/ └── admin/ └── fields/ Simple widget {{- $args := dict "label" (i18n "admin.fields.audio.mp3.label") "name" "mp3" "type" "audio" -}} {{ partial "admin/widgets/file.js" $args }} List or Object widget {{- $pin := cond (or (eq site.Params.admin.cms "decapcms") (eq site.Params.admin.cms "sveltiacms")) "location" "coordinates" -}} {{- $fields := slice "street" "zipcode" "city" "country" $pin -}} # This line allows you to modify the fields via the parameters {{- $fields = partial "admin/func/GetFields.html" (dict "field" . "fields" $fields) -}} {{- $args := dict "label" (i18n "admin.fields.address.label") "name" "address" "collapsed" true "fields" $fields -}} {{ partial "admin/widgets/object.js" $args }} Add or remove fields in object field /config/_default/params.yaml In this example, we set two fields (title and text with markdown) for the Hero field. params: admin: fields: # Array of available fields for a fields # e.g with hero field hero: fields: - title - text_markdown # e.g with nested fields - image: fields: - image_src - image_alt List of Hugolify fields See fields in repository --- # Setup Source: https://www.hugolify.io/docs/admin/v1/setup/ Install module and config Install /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-admin CMS params /config/_default/params.yaml # Default params admin: cms: decapcms # optional, decapcms by default branch: main # optional, default "main" git: git-gateway # optional, default "git-gateway" but not supported for Sveltia CMS repo: # optional, e.g "hugolify/hugolify-template" config: id: false # use ID for dir/name files and relation nested: depth: 2 # optional, set minimum 2, not supported for Sveltia CMS preview: false publish_mode: simple # optional, default "simple" # Auth auth: app_id: # The Client ID provided by Gitea/GitLab api_root: # API URL of your Gitea/GitLab instance auth_endpoint: # Auth endpoint of your Gitea/GitLab instance base_url: # Root URL of your Gitea/GitLab instance netlify_identity: true # Add Netlify identity # Languages i18n: default_locale: en # master lang for an i18n website locales: false # "[en,fr]" for an i18n website # Assets media: media_folder: 'assets/images/uploads' public_folder: '/images/uploads' audio_max_file_size: 700000 # 700ko max_file_size: 700000 # 700ko pdf_max_file_size: 5000000 # 5Mo specific_filter: false # set true to add a selected filter by image video_max_file_size: 5000000 # 5Mo # Optional cloud settings [start], not supported for Sveltia CMS cloud: name: cloudinary # or uploadcare cloud_name: # your cloudinary cloud name api_key: # your cloudinary api key publicKey: # your uploadcare public api key # Optional cloud settings [end] providers: # for sveltia-cms CMS language /config/_default/hugo.yaml Language set with defaultContentLanguage from Hugo config. Repository Hugolify Admin --- # Shortcodes Source: https://www.hugolify.io/docs/admin/v1/shortcodes/ Add/modify shortcodes Available for CloudCannon, Decap CMS, Netlify CMS and Sveltia CMS Add or remove shortcodes /config/_default/params.yaml All shortcodes are available by default but if you want hide or add your shortcodes, you can do it: params: admin: shortcodes: # Array of available shortcodes enable: - alert - badge - blank_link - blockquote - button - details - map - twitter - youtube Disable shortcodes /config/_default/params.yaml params: admin: shortcodes: enable: false Create a shortcodes Create file Add a js shortcode file in shortcodes directory. layouts/ └── partials/ └── admin/ └── cms/ └── decapcms/ └── shortcodes/ And add it in enable shortcodes: see above Examples See examples in repository (for decap CMS) List of Hugolify shortcodes Hugolify shortcodes --- # Widgets Source: https://www.hugolify.io/docs/admin/v1/widgets/ Available widget partials and their parameters Instead of writing raw CMS-specific YAML or JSON, you call a widget partial and pass a standardized dict. The widget internally handles the output format for each supported CMS (Decap, Sveltia, CloudCannon, Pages CMS, TinaCMS…), so the same field definition works across all of them without any change. Widgets are Hugo partials that generate CMS field configuration. Each widget is called with a dict of parameters. {{- $args := dict "label" (i18n "admin.fields.title.label") "name" "title" -}} {{ partial "admin/widgets/string.js" $args }} Parameters marked required must always be provided. Blocks Variable-type list field for page builder blocks. {{ partial "admin/widgets/blocks.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name blocks array yes Array of block type definitions collapsed boolean — Collapse items by default (default: true) hint string — Help text i18n boolean or string — i18n mode label_singular string — Singular label max number — Maximum number of blocks min number — Minimum number of blocks required boolean — Mark as required Boolean Toggle / checkbox field. {{ partial "admin/widgets/boolean.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default boolean or string — Default value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode nameOverride string — Override the name in output required boolean — Mark as required Code Code editor field with optional syntax highlighting. {{ partial "admin/widgets/code.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default boolean or string — Default value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode language string — Syntax language (e.g. html, css, javascript) nameOverride string — Override the name in output required boolean — Mark as required Color Color picker. {{ partial "admin/widgets/color.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default boolean or string — Default value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode required boolean — Mark as required Datetime Date and time picker. {{ partial "admin/widgets/datetime.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default date or string — Default value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode nameOverride string — Override the name in output required boolean — Mark as required File File upload field. Use type to restrict to a specific media category. {{ partial "admin/widgets/file.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name type string yes Media category: audio, document, file, video extensions array — Allowed file extensions hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode label_singular string — Singular label max number — Maximum number of files min number — Minimum number of files multiple boolean — Allow multiple files nameOverride string — Override the name in output required boolean — Mark as required Image Image upload field. {{ partial "admin/widgets/image.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode max number — Maximum number of images max_file_size number — Maximum file size in bytes media_folder string — Upload folder min number — Minimum number of images multiple boolean — Allow multiple images nameOverride string — Override the name in output public_folder string — Public path for images required boolean — Mark as required List Repeatable list of fields (an array of objects). {{ partial "admin/widgets/list.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name fields array yes Array of field definitions collapsed boolean — Collapse items by default (default: true) hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode label_singular string — Singular label max number — Maximum number of items min number — Minimum number of items nameOverride string — Override the name in output required boolean — Mark as required summary string — Summary template for collapsed view Map Map / geolocation field. Not available with CloudCannon, Pages and TinaCMS {{ partial "admin/widgets/map.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default string — Default value hint string — Help text i18n boolean or string — i18n mode Markdown Rich text / markdown editor. {{ partial "admin/widgets/markdown.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name buttons array — Toolbar buttons to show default string — Default value editor_components array — Editor components to enable hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode minimal boolean — Minimal toolbar (default: true) modes array — Editor modes (default: ['rich_text']) nameOverride string — Override the name in output pattern object — Validation pattern required boolean — Mark as required Number Numeric input or range slider. {{ partial "admin/widgets/number.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default string — Default value hint string — Help text i18n boolean or string — i18n mode max number — Maximum value min number — Minimum value nameOverride string — Override the name in output range boolean — Render as a range slider required boolean — Mark as required step number — Step increment Object Groups multiple fields into a collapsible object. {{ partial "admin/widgets/object.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name fields array yes Array of field definitions collapsed boolean — Collapse by default (default: true) hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode label_singular string — Singular label nameOverride string — Override the name in output required boolean — Mark as required summary string — Summary template for collapsed view Relation Relation field — links to another collection entry. {{ partial "admin/widgets/relation.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name collection string yes Target collection name value_field string yes Field used as the stored value display_fields array — Fields shown in the picker filters array — Filter entries by field values hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode label_singular string — Singular label multiple boolean — Allow multiple relations (default: true) nameOverride string — Override the name in output required boolean — Mark as required search_fields array — Fields to search in the picker Select Dropdown select field. {{ partial "admin/widgets/select.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name options array or object yes Available options default string — Default selected value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode label_options string — i18n key prefix for option labels multiple boolean — Allow multiple selections nameOverride string — Override the name in output required boolean — Mark as required String Single-line text input. {{ partial "admin/widgets/string.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default string — Default value hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode nameOverride string — Override the name in output pattern object — Validation pattern required boolean — Mark as required Text Multi-line plain text input. {{ partial "admin/widgets/text.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name default string — Default value hint string — Help text i18n boolean or string — i18n mode nameOverride string — Override the name in output pattern object — Validation pattern required boolean — Mark as required UUID Auto-generated UUID field, read-only in the editor. {{ partial "admin/widgets/uuid.js" $args }} Parameter Type Required Description label string yes Field label name string yes Field name hidden boolean — Hide from the editor hint string — Help text i18n boolean or string — i18n mode nameOverride string — Override the name in output --- # Prerelease Source: https://www.hugolify.io/docs/admin/v2/ Prerelease version (v2) of Hugolify Admin Prerelease v2 is published as prerelease tags only — the latest is v2.0.0-11. Go resolves stable versions by default, so hugo mod get will keep you on v1 unless you pin a prerelease explicitly. v2 requires hugolify-theme v2. The two are versioned together and a mismatched pair fails silently — see Compatibility. See the current stable version (v1) Install # /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-bootstrap - path: github.com/hugolify/hugolify-admin/v2 hugo mod get github.com/hugolify/hugolify-admin/v2@v2.0.0-11 Replace the tag with the most recent one — prereleases are published often and Go will not pick them up on its own. See the latest prereleases Compatibility Pair the majors: a v1 project runs hugolify-admin v1 with hugolify-theme v1, a v2 project runs both in v2. One off-pair combination degrades gracefully, the other does not work at all. hugolify-theme v1 hugolify-theme v2 hugolify-admin v1 Supported Partially supported hugolify-admin v2 Not supported Supported admin v1 on theme v2 — partial The theme resolves a block’s appearance through func/GetBlockUI, which reads the parameters from the root of the block and accepts a nested ui object as an override, with a fallback mapping the legacy background flag to the bg theme. Front matter written by admin v1 is therefore understood, and pages render as intended. What you lose is reach, not correctness: admin v1 has no field for ratio or scrollsnap, so those two theme v2 controls cannot be set from the CMS. Every other control — column, align, grid, layout, offset, theme — comes through. Useful as a transition, when you want to move the theme first and the admin later. admin v2 on theme v1 — no hugolify-theme v1 has no equivalent resolver and never reads ui, while admin v2 writes the appearance parameters there only. This one fails silently Nothing errors. The values are written where the theme is not reading, so blocks render with their default appearance and every control set from the CMS is quietly ignored. See the v1 to v2 migration guide Breaking changes v1 v2 Module path hugolify-admin hugolify-admin/v2 hugolify-theme v1 or v2 v2 Weight widget select (10, 20, 30…) number input (min: 1, integer) Background colour field background-color.yml background_color.yml UI fields hardcoded in the module configurable through params If you relied on the stepped weight select, the previous behaviour is preserved in a separate field: admin/fields/weight_select.yml The UI object A block or a hero has always carried a handful of appearance parameters — how many columns, which grid, how it is aligned. In v1 they sat flat at the root of the block, next to its content, and there were only a few of them. They are now grouped into a single ui object, which separates what the block says from how it looks, and leaves room to grow without cluttering the block. /content/_index.md # Before — flat, and only a few parameters blocks: - type: informations column: 3 ratio: 1 # After — everything under ui blocks: - type: informations ui: column: 3 ratio: 1 grid: large offset: center align: center theme: dark scrollsnap: md This is a front matter change hugolify-theme v2 reads these keys from ui, hugolify-theme v1 reads them from the root of the block. Moving to admin v2 therefore means moving to the theme v2 as well, otherwise the values are written where the theme is not looking. Choosing which controls appear v1 hardcoded the object to theme, grid and offset. In v2 the set is driven by params, so you decide which controls the editor sees and which values they offer. /config/_default/params.yaml params: admin: fields: grid: options: [container, small, medium, large, full] theme: options: [light, dark, accent] ui: fields: [theme, grid, offset, align] The field is now labelled Layout & appearance instead of UI. Navigation Header and footer menus each gain three levels, replacing the single menu of v1. Header — primary, secondary, tertiary Footer — primary, secondary, tertiary The footer also accepts blocks, not just an information text. New fields Field Purpose ratio Media aspect ratio, 1 being square scrollsnap Breakpoints at which items scroll sideways (none, sm, md, lg, xl, all) selected_source Choose block items manually or by taxonomy vertical_align Vertical text alignment (start, center, end) image.src_mobile Dedicated mobile image, used by the hero weight_select The v1 stepped weight select, kept as an opt-in Other additions: a reorder configuration for collections (Sveltia CMS), blocks on the persons and products collections, firstname and lastname on persons, a file input for form fields, and an optional format on the datetime widget for Decap and Sveltia storage. v2 is still moving. Report anything you hit on the issue tracker . --- # Alert Source: https://www.hugolify.io/docs/blocks/alert/ Displays an alert message with 3 different statutes. Frontmatter blocks: - type: alert text: '' # string state: '' # [danger, dark, light, infos, success, warning] background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Audio Source: https://www.hugolify.io/docs/blocks/audio/ Displays a audio element. Frontmatter blocks: - type: audio heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) audio: {} mp3: '' # url (optional) ogg: '' # url (optional) autoplay: false # boolean loop: false # boolean transcription: '' # string (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Chart Source: https://www.hugolify.io/docs/blocks/chart/ Displays a chart. Frontmatter blocks: - type: chart heading: {} surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) grid: '' # [small, medium, large, container, full] (optional) chart: {} type: "" # string title: "" # string backgroundColor: "" # string (optional) borderColor: "" # string (optional) items: [] label: "" # string value: "" # string color: "" # hexadecimal color (optional) data: # (optional) json: "" # text (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file Related link Chart JS docs CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Comparison Source: https://www.hugolify.io/docs/blocks/comparison/ Displays comparison block. Frontmatter blocks: - type: comparison heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) column: '' # number, columns by row in desktop items: [] title: '' # string (optional) text: '' # string (optional) offer: price: '' # float discount: '' # string (e.g. 10%) frequency: '' # string arguments: [] icon: '' # string (bootstrap icon) text: '' # string cta: {} # (optional) text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) is_primary: false # boolean (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Call to action Source: https://www.hugolify.io/docs/blocks/cta/ Displays a centered call to action. Frontmatter usage blocks: - type: cta heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) ctas: [] text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Datas Source: https://www.hugolify.io/docs/blocks/datas/ Displays datas with gauges or not in column. Frontmatter blocks: - type: datas heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) column: '' # number, columns by row in desktop show_gauge: false # boolean show_color: false # boolean items: [] prefix: "" # string (optional) value: "" # number suffix: "" # string (optional) limit: 100 # number title: "" # string (optional) text: "" # string (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Javascript file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Editorial Source: https://www.hugolify.io/docs/blocks/editorial/ Displays a block with content (title, text, button) on the left and image on the right (possible to reverse the direction). In mobile the image is first. Frontmatter blocks: - type: editorial direction: "" # [rtl, ltr] surtitle: "" # string (optional) title: "" # string (optional) text: "" # string (optional) notes: [] # (optional) text: # string (optional) ctas: [] # (optional) text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) image: {} # (optional) src: '' # url filter: '' # string (optional) alt: '' # string (optional) legend: '' # string (optional) credit: '' # markdown (optional) Demo visual renderer Params /config/_default/params.yaml Image size params: blocks: editorial: desktop: "624x" mobile: "336x" Files HTML file SASS file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Embed Source: https://www.hugolify.io/docs/blocks/embed/ Displays a centered embed Frontmatter blocks: - type: embed heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) embed: "" # HTML background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # FAQ Source: https://www.hugolify.io/docs/blocks/faq/ Displays some images cards in column. Alignment and button are available. Frontmatter blocks: - type: faq heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) items: [] name: "" # string (optional) open: false # boolean (optional) summary: "" # string (optional) title: "" # string (optional) text: "" # string (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Decap CMS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Figure Source: https://www.hugolify.io/docs/blocks/figure/ Displays a centered figure image with legend and credit. Frontmatter blocks: - type: figure heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) figure: {} src: '' # url alt: '' # string legend: '' # string credit: '' # markdown linear: false # boolean, set true for linear filter compression screenshot: false # boolean, set true you want add fake browser around your picture (and linear filter compression) grid: '' # [small, medium, large, container, full] (optional) offset: '' # [start, end, center] (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file on Github Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Form Source: https://www.hugolify.io/docs/blocks/form/ Displays a form. Netlify hosting is required or use another default service Frontmatter blocks: - type: form heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) grid: '' # [small, medium, large, container, full] (optional) offset: '' # [start, end, center] (optional) name: '' # string submit: '' # string items: [] label: '' # string type: '' # [email, select, tel, text, textarea] options: [] # if select title: '' # string value: '' # string required: false # boolean full: false # boolean autocomplete: '' # autocomplete value like postal-code, email… background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file Related links Autocomplete attributes Use Netlify form or another services CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Gallery Source: https://www.hugolify.io/docs/blocks/gallery/ Displays an images gallery with accessible lightbox. Frontmatter blocks: - type: gallery heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) column: '' # number, columns by row in desktop (optional) ratio: 1 # number, ratio of thumbnails format gallery: [] src: '' # url filter: '' # string (optional) alt: '' # string (optional) legend: '' # string (optional) credit: '' # markdown (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Javascript file Demo content file Hugolify admin file Related link Tobii JS library PostCSS Add tobii class in deep safelist of postcss.config.js . safelist: { deep: [/^tobii/] } CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Images Source: https://www.hugolify.io/docs/blocks/images/ Displays an images list in one or two columns. Frontmatter blocks: - type: images heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) images: [] src: '' # url alt: '' # string (optional) legend: '' # string (optional) credit: '' # markdown (optional) screenshot: false # boolean (optional) half: false # boolean (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Informations Source: https://www.hugolify.io/docs/blocks/informations/ Displays some cards informations in column. Icon, images and button are available Frontmatter blocks: - type: informations heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) column: '' # number, columns by row in desktop (optional) items: [] icon: '' # string (bootstrap icon) image: {} # (optional) src: '' # string alt: '' # string (optional) isLogo: false # boolean (optional) title: '' # string (optional) text: '' # string (optional) cta: {} # (optional) text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) background: false # boolean (optional) Demo visual renderer Params /config/_default/params.yaml Image size blocks: informations: image: ratio: .5 Files HTML file SASS file Demo content file Hugolify admin file Related link Icon list CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Instagram Source: https://www.hugolify.io/docs/blocks/instagram/ Displays an instagram feed with your latest posts. Instagram access_token is required Frontmatter blocks: - type: instagram token: '' # string limit: 5 # number (optional) heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) cta: {} # (optional) text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Javascript file Demo content file Hugolify admin file Related link Instafeed.js documentation CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Latest Source: https://www.hugolify.io/docs/blocks/latest/ Displays latest items from posts, projects… Frontmatter blocks: - type: latest heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) section: '' # string [posts, publications, products…] layout: '' # [grid, list] (optional) count: 4 # number (optional) show_more: true # boolean (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Logos Source: https://www.hugolify.io/docs/blocks/logos/ Displays a logos list. Frontmatter blocks: - type: logos heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) items: [] title: # string (optional) url: # url (optional) src: # url (optional) layout: '' # [grid, carousel] (optional) carousel: {} # object only if carousel layout (optional) params: {} # (optional) focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) responsive: {} # (optional) breakpoints: 640 # number [640, 768, 1024, 1280, 1440] params: {} focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Javascript carousel file Demo content file Hugolify admin file Related links Enable / Disable javascript Splide JS CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Map Source: https://www.hugolify.io/docs/blocks/map/ Displays a simple map with one marker. GDPR compliant Frontmatter blocks: - type: map heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) show_places: false # boolean (optional *) location: {} # map widget (optional *) coordinates: {} # (optional *) lat: # float lng: # float zoom: 13 # [1…20] (optional) grid: '' # [small, medium, large, container, full] (optional) background: false # boolean (optional) * use location (map widget from CMS), coordinates (object with lat and lng) or show_places (map with all markers from your places section). Demo visual renderer Files HTML file SASS file Javascript file Demo content file Hugolify admin file Related links Enable / Disable javascript Open street map leafletjs documentation CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Not with map widget Sveltia CMS Available --- # Newsletter Source: https://www.hugolify.io/docs/blocks/newsletter/ Displays a newsletter signup form. Frontmatter blocks: - type: newsletter heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) form: {} url: '' # url button: '' # string hiddens: [] # (optional) name: '' # string value: '' # string grid: '' # [small, medium, large, container, full] (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Paragraph Source: https://www.hugolify.io/docs/blocks/paragraph/ Displays a simple paragraph. Frontmatter blocks: - type: paragraph title: '' # string (optional) text: '' # markdown (optional) grid: '' # [small, medium, large, container, full] (optional) offset: '' # [start, end, center] (optional) align: '' # [start, end, center] (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Pushes Source: https://www.hugolify.io/docs/blocks/pushes/ Displays some images cards in column. Alignment and button are available Frontmatter blocks: - type: pushes heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) column: '' # [1…2] items: [] title: '' # string (optional) text: '' # string (optional) cta: {} text: '' # string url: '' # url blank: false # boolean (optional) lang: '' # code lang (optional) image: {} # (optional) src: '' # url filter: '' # string (optional) alt: '' # string (optional) legend: '' # string (optional) credit: '' # markdown (optional) offset: '' # [start, end, center] card: false # boolean (boolean) darken: false # boolean (boolean) background_color: '' # color (boolean) color: '' # color (boolean) layout: '' # [grid, carousel] (optional) carousel: {} # object only if carousel layout (optional) params: {} # (optional) focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) responsive: {} # (optional) breakpoints: 640 # number [640, 768, 1024, 1280, 1440] params: {} focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Quote Source: https://www.hugolify.io/docs/blocks/quote/ Displays a quote and its author Frontmatter blocks: - type: quote quote: '' # string author: {} # (optional) title: '' # string (optional) text: '' # string (optional) image: {} src: '' # url (optional) alt: '' # string (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Search Source: https://www.hugolify.io/docs/blocks/search/ Displays a search form Enable Check how to enable search on your website Frontmatter blocks: - type: search heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file Related link Pagefind CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Selected Source: https://www.hugolify.io/docs/blocks/selected/ Displays a selection of items from a sections Frontmatter blocks: - type: selected-* # [selected-posts, selected-publications, selected-products…] section: '' # [posts, publications, products…] layout: '' # [grid, list] (optional) heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) items: [] # list of slugs show_more: false # boolean (boolean) background: false # boolean (boolean) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Testimonials Source: https://www.hugolify.io/docs/blocks/testimonials/ Displays some testimonials in grid or carousel. Frontmatter blocks: - type: testimonials heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) items: [] quote: '' # string author: {} # (optional) title: '' # string (optional) text: '' # string (optional) image: {} src: '' # string alt: '' # string (optional) isLogo: false # boolean (optional) layout: '' # [grid, carousel] (optional) carousel: {} # object only if carousel layout (optional) params: {} # (optional) focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) responsive: {} # (optional) breakpoints: 640 # number [640, 768, 1024, 1280, 1440] params: {} focus: '' # boolean (optional) autoplay: true # boolean (optional) arrows: true # boolean (optional) pagination: false # boolean (optional) type: '' # [slide, loop, fade] (optional) perPage: '' # number (optional) padding: '' # number (optional) gap: '' # number (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Javascript carousel file Demo content file Hugolify admin file Related links Enable / Disable javascript Splide JS CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Timeline Source: https://www.hugolify.io/docs/blocks/timeline/ Displays a timeline element. Frontmatter blocks: - type: timeline heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) items: [] surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Title Source: https://www.hugolify.io/docs/blocks/title/ Displays a heading title with surtitle and text. Frontmatter blocks: - type: title heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # Video Source: https://www.hugolify.io/docs/blocks/video/ Displays a video element. Frontmatter blocks: - type: video heading: {} # (optional) surtitle: '' # string (optional) title: '' # string (optional) text: '' # markdown (optional) video: {} mp4: '' # video url (optional) webm: '' # video url (optional) controls: false # boolean (optional) autoplay: false # boolean (optional) loop: false # boolean (optional) screenshot: false # boolean (optional) legend: '' # string (optional) transcription: '' # string (optional) poster: '' # image url (optional) grid: '' # [small, medium, large, container, full] (optional) background: false # boolean (optional) Demo visual renderer Files HTML file SASS file Demo content file Hugolify admin file CMS availability Hugolify Admin Hugolify Admin Decap CMS Available Netlify CMS Available Pages CMS Available Sveltia CMS Available --- # CorrectPunctuation Source: https://www.hugolify.io/docs/codes/functions/correctpunctuation/ Replace space to insecable space to string before punctuation. Description In french, we need a space before a double punctuation (:;?!), insecable space allows this punctuation not to be left alone on the line depending on the text, it will always be preceded by a word. Usage {{ partial "func/CorrectPunctuation" $string }} Related links Func file --- # GetFileExtension Source: https://www.hugolify.io/docs/codes/functions/getfileextension/ Get file extension from file (string) and display correctly file extension with abbr HTML tag. Usage {{ partial "func/GetFileExtension" $file }} Example Usage {{ partial "func/GetFileExtension" "filename.pdf" }} HTML rendered <abbr>PDF</abbr> Related links Func file --- # GetTaxonomyPageBySlug Source: https://www.hugolify.io/docs/codes/functions/gettaxonomypagebyslug/ Get pages of specific section with specific taxonomy Arguments section String Type of request pages taxonomy String Target taxonomy filter slug String The relation value to find (Slug or Title) additionalParams (optional) String Where expression additional Usage {{ partial "func/GetTaxonomyPageBySlug" $map }} Example In this example, we want all people with “Lorem ipsum” as expertise (persons_expertises). {{- $pages := partial "func/GetTaxonomyPageBySlug" (dict "section" "persons" "taxonomy" "persons_expertises" "slug" "lorem-ipsum") -}} Related links Func file --- # PrepareHTML Source: https://www.hugolify.io/docs/codes/functions/preparehtml/ Secures the display of a string. Actions safeHTML chomp CorrectPunctuation Hugolify Usage {{ partial "func/PrepareHTML" $string }} Related links Func file --- # Address Source: https://www.hugolify.io/docs/codes/partials/address/ Displays an formating address. Arguments card Boolean Set true to add card class direction Boolean Set true to add a direction link to Google Map address Map Object of address values Usage {{ partial "commons/address" $map }} Example Usage {{ $address := (dict "street" "24 Rue de Commandant Guilbaud" "zipcode" "75016" "city" "Paris" "country" "France" ) }} {{ $args := (dict "card" true "direction" true "address" $address ) }} {{ partial "commons/address" $args }} HTML rendered <address class="address"> <div> <p>24 Rue de Commandant Guilbaud</p> <p>75016 Paris</p> <p>France</p> <a class="direction" href="https://www.google.fr/maps/dir//24 Rue de Commandant Guilbaud 75016 Paris France" target="_blank" title="How to go? - external link">How to go?</a> </div> </address> Related link Commons file — hugolify-theme --- # Carousel Source: https://www.hugolify.io/docs/codes/partials/carousel/ Displays a carousel. Arguments context Map Page context partial String Partial to load to each slide Usage {{ partial "commons/carousel" $args }} Example A carousel of logos (block logos) {{ $args := (dict "context" . "partial" "blocks/templates/logos/logo.html" ) }} {{ partial "commons/carousel" $args }} Related links Commons file — hugolify-theme GetGlobalParamsCarousel file function — hugolify-theme GetParamsCarousel file function — hugolify-theme --- # CTA Source: https://www.hugolify.io/docs/codes/partials/cta/ Displays a call to action. Example Usage {{ $args := (dict "url" "https://www.hugolify.io/" "text" "Hugolify button" "blank" true ) }} {{ partial "commons/cta" $args }} HTML rendered <a class="btn" href="https://www.hugolify.io/" target="_blank" rel="noreferrer noopener" title="Hugolify button - external link">Hugolify button</a> Datas url: "" // Button href text: "" // Button text blank: false // boolean, true to add target="_blank" (optional) class: "" // Add additional class (optional) title: "" // Add title attribute (optional) hreflang: "" // Add hreflang attribute (optional) Related link Commons file — hugolify-theme --- # Date Source: https://www.hugolify.io/docs/codes/partials/date/ Displays a paragraph tag with a formating and localize date. Example Usage {{ $args := (dict "date" "2006-01-02T15:04:05Z07:00" ) }} {{ partial "commons/date" $args }} HTML rendered <p class="date"><time datetime="2006-01-02T15:04:05Z07:00">Monday, February 2, 2006</time></p> Datas date: "" format: "" // default is ":date_full" https://gohugo.io/functions/time/format/ itemprop: false // or https://schema.org/Date Related link Date commons file — hugolify-theme Time commons file — hugolify-theme --- # File Source: https://www.hugolify.io/docs/codes/partials/file/ Displays a file link with extention and size details. Example Usage {{ $args := (dict "file" "videos/example-file.mp4" ) }} {{ partial "commons/file" $args }} HTML rendered <a href="videos/example-file.mp4" download class="file"> <span> <b>Example file</b> <abbr>MP4</abbr> 15<abbr title="Megabytes">MB</abbr> </span> </a> Datas file: "" // path file (required) title: "" // custom title download: false // add download attribute to link, default is true Related link Commons file — hugolify-theme --- # Image Source: https://www.hugolify.io/docs/codes/partials/image/ Displays a responsive image with srcset, type, retina, lazy loading… Example Usage {{ $args := (dict "src" $src_image "alt" $alt_text "desktop" $desktop_size "mobile" $mobile_size ) }} {{ partial "commons/image" $args }} HTML rendered <picture> <source srcset="" type="image/webp" media="(min-width: 577px)" /> <source srcset="" type="image/webp" media="(max-width: 576px)" /> <source srcset="" type="image/jpg" media="(max-width: 576px)" /> <img src="" alt="" width="" height="" /> </picture> Datas src: "" // Image’s URL, required alt: "" // Alternative text for a11y desktop: "" // width x height of desktop image, required mobile: "" // width x height of mobile image lazy: true // set false if above the fold, default true class: "" // class to <img> itemprop: "" // add a Schema.org information Available for Hugo image processing Cloudinary Uploadcare Related link Commons file — hugolify-theme Cloudinary file — hugolify-theme Hugo file — hugolify-theme Uploadcare file — hugolify-theme --- # Map Source: https://www.hugolify.io/docs/codes/partials/map/ Displays an openstreetmap with markers. Example Usage {{ $args := (dict "location" (slice (dict "coordinates" "[44.8425666,-0.5737107]" "coordinates" "[45.8425666,1.5937107]")) ) }} {{ partial "commons/map.html" $args }} HTML rendered <div class="map js-map" data-markers="[{&quot;coordinates&quot;:[44.8425666,-0.5737107]},{&quot;coordinates&quot;:[45.8425666,1.5937107]}]" ></div> Datas location: [] // array of markers marker_hidden: false // boolean (optional) zoom: "" // int (optional) Related links Enable / Disable javascript Map commons file — hugolify-theme Map javascript file — hugolify-theme --- # Price Source: https://www.hugolify.io/docs/codes/partials/price/ Displays a price with currency, discount, frequency… Example Usage {{ $args := (dict "price" 100 "discount" "10%" "frenquency" "/month" ) }} {{ partial "commons/price" $args }} HTML rendered <p class="princing">90€ <del>100€</del> <span>-10%</span> <i>/month</i></p> Datas price: "" // Float price, required discount: "" // Percent or value to discount frequency: "" // If you have subscription and you want itemprop: false // boolean to add itemprop="price" content="{price}" Related link Commons file — hugolify-theme --- # Text Source: https://www.hugolify.io/docs/codes/partials/text/ Displays a formating text block. Usage {{ $args := (dict "text" "Lorem ipsum" ) }} {{ partial "commons/text" $args }} HTML rendered <div class="text"> <p>Lorem ipsum</p> </div> Datas text: "" class: "" // default is text Related link Commons file — hugolify-theme --- # Time Source: https://www.hugolify.io/docs/codes/partials/time/ Displays a time tag with a localize date. Example Usage {{ $args := (dict "date" "2006-01-02T15:04:05Z07:00" "format" "2006" "itemprop" "datePublished" ) }} {{ partial "commons/time" $args }} HTML rendered <time datetime="2006-01-02T15:04:05Z07:00" itemprop="datePublished">2006</time> Datas date: "" format: "" // default is 2006, https://gohugo.io/functions/time/format/ itemprop: false // or https://schema.org/Date Related link Commons file — hugolify-theme --- # Toc Source: https://www.hugolify.io/docs/codes/partials/toc/ Displays a responsive table of content to your page. Usage {{ partial "commons/toc" . }} Related link Commons file — hugolify-theme --- # Video Source: https://www.hugolify.io/docs/codes/partials/video/ Displays a video… Example Usage {{ $args := (dict "mp4" $src_mp4_video "webm" $src_webm_video "controls" true ) }} {{ partial "commons/video" $args }} HTML rendered <video class="js-video is-lazy" controls muted playsinline> <source data-src="" type="video/webm" /> <source data-src="" type="video/mp4" /> </video> Datas mp4: "" // MP4 video’s URL, required webm: "" // WEBM video’s URL, required autoplay: false // to set autoplay video or not controls: false // to add native controls video loop: false // to set loop video or not Related link Commons file — hugolify-theme --- # CSS Source: https://www.hugolify.io/docs/customization/css/ Preload CSS or add print CSS PostCSS /config/default/params.yaml Each design module defines a directory where Hugo looks for postcss.config.js. This value is set in the theme’s own hugo.yaml, you don’t need to override it in your project params: # Set by the theme (e.g. hugolify-theme-bootstrap/hugo.yaml) css: postcss: "postcss/bootstrap" # hugolify-theme-bootstrap The config file must exist at that path in your project (e.g. postcss/bootstrap/postcss.config.js). Each styling module ships the file at its root, ready to copy. A declared path with no file there is a build error. The fallback to postcss.config.js at the project root only applies when no path is declared at all. PostCSS for hugolify-theme-bootstrap PostCSS for hugolify-theme-design-system Preload CSS /config/default/params.yaml css: preload: true # adds <link rel="preload"> for performance Print CSS /config/default/params.yaml css: print: true # loads sass/print.sass or css/print.css with media="print" --- # CSS Source: https://www.hugolify.io/docs/customization/design/bootstrap/css/ Bootstrap variables, mixins and semantic classes Variables Override Bootstrap and Hugolify variables in your project: assets/ └── sass/ └── abstracts/ └── _variables-site.sass Bootstrap variables Bootstrap variables reference $primary: #000000 $secondary: #333333 $font-family-base: 'Your Font', sans-serif Additional Hugolify variables Hugolify variables reference // Theme variables $global-spacing: 2.8rem !default $global-spacing-double: $global-spacing * 2 !default $global-spacing-semi: $global-spacing / 2 !default $gutter-mobile: 1.875rem !default // Header and menu $header-background-color: #F8F9FA !default $header-color: invert($header-background-color) !default $header-height: 60px !default $header-height-mobile: $header-height !default $menu-background-color: $header-background-color !default $menu-color: $header-color !default $logo-height: 40px !default $offset: $header-height + 15px !default $navbar-expand: lg !default // false for always collapse // Hero $hero-background-color: $header-background-color !default $hero-color: $header-color !default $hero-h1-font-size: $h1-font-size !default $hero-min-height: 400px !default $hero-min-height-mobile: $hero-min-height !default $home-hero-h1-font-size: $hero-h1-font-size !default $home-hero-min-height: $hero-min-height !default $home-hero-min-height-mobile: $hero-min-height !default // Footer $footer-background-color: #F8F9FA !default $footer-color: invert($footer-background-color) !default $footer-logo-height: 40px !default // Components $blockquote-color: $body-color !default $blockquote-font-family: $font-family-base !default $blockquote-font-style: normal !default $blockquote-font-weight: $font-weight-normal !default $blockquote-line-height: $line-height-base !default $breadcrumb-background-color: $body-bg !default $breadcrumb-color: $body-color !default $breadcrumb-border-color: $border-color !default $color-fail: #FF3333 !default $color-average: #FFAA33 !default $color-pass: #00CC66 !default $color-credit: dimgrey !default $color-screenshot: #D9D9D9 !default $color-screenshot-1: #EE0E00 !default $color-screenshot-2: #EEAB00 !default $color-screenshot-3: #0EB000 !default $gauge-color: #EEEEEE !default $gauge-size: 200px !default $gauge-stroke-color: #999999 !default $gauge-stroke-size: 2.4 !default $minititle-background-color: transparent !default $minititle-border-radius: 0 !default $minititle-border-width: 0 !default $minititle-color: $body-color !default $minititle-font-family: $font-family-base !default $minititle-font-size: .75rem !default $minititle-font-weight: $font-weight-bold !default $minititle-letter-spacing: .05em !default $minititle-line-height: inherit !default $minititle-padding-x: 0 !default $minititle-padding-y: 0 !default $minititle-text-transform: uppercase !default $scroll-snap-sm: 75% !default $scroll-snap-md: 45% !default $scroll-snap-lg: 43.75% !default $transition-delay: 1s !default $transition-duration: 2s !default $transition-effect: cubic-bezier(.085,1.335,.285,.995) !default $transition: all $transition-duration $transition-effect $transition-delay !default Mixins All Bootstrap mixins are available in your SASS once hugolify-theme-bootstrap is imported. See Bootstrap mixins reference Additional Hugolify mixins Hugolify mixins reference @mixin avatar @mixin icon($icon: "") @mixin more @mixin scroll-snap @mixin minititle @mixin link-arrow @mixin navbar-expand($navbar-expand) Semantic classes Column Column classes are generated dynamically based on $grid-columns using Bootstrap’s make-col() mixin: Class Ratio Default (12 cols) col-xsmall 1/3 4 cols col-small 1/2 6 cols col-medium 2/3 8 cols col-large 5/6 10 cols Offset classes: Class Effect offset-center centered offset-end push right Badge Badge classes are generated from Bootstrap’s $theme-colors map: // generated automatically for each color in $theme-colors .badge-primary // @extend .text-bg-primary .badge-secondary // @extend .text-bg-secondary // … PostCSS and PurgeCSS Bootstrap generates a large stylesheet; PurgeCSS removes the classes your site never renders. Both live in the PostCSS config of your project. PostCSS and PurgeCSS setup --- # Icons Source: https://www.hugolify.io/docs/customization/design/bootstrap/icons/ Bootstrap, Materials, Icomoon icons… Overview hugolify-theme-bootstrap includes Bootstrap Icons by default. But you can replace it with any other icon set. Optimize To strip unused icons from the font, run: yarn build:icons:bootstrap This script parses templates and SASS to detect which icons are actually used and rebuilds the icon font with only those. Custom icon sets You can replace or extend the default icon set by overriding the icons SASS in your project. Material icons Use Google Material Icons . assets/ └── sass/ └── base/ └── _icons.sass @import "base/icons/material-icons/icons" Add icon variables with glyph names: // example $icon-arrow-right: 'east' Icomoon For custom SVG icon sets via Icomoon : assets/ └── sass/ └── base/ └── _icons.sass @import "base/icons/icomoon/icons" $icons-map: (); --- # Javascript Source: https://www.hugolify.io/docs/customization/design/bootstrap/javascript/ Bootstrap and Vanilla JS Overview hugolify-theme-bootstrap layers Bootstrap JS components. Each component can be enabled or disabled individually. Some Vanilla JS are also added (Menu, Blocks…). Enable/disable Bootstrap components /config/_default/params.yaml bootstrap: collapse: true # default true dropdown: true # default true modal: true # default true offcanvas: true # default true (drawer) carousel: false # default false popover: false # default false scrollspy: false # default false tab: false # default false toast: false # default false tooltip: false # default false Enable/disable Vanilla JS components Animation /config/default/params.yaml animation: false # default true, Set true to enable Blocks Files from enabled blocks (w/ Hugolify admin) are automatically added. The name of the javascript file is the same as the block name and must be in the blocks directory /assets/js/blocks/. If you do not use Hugolify admin, blocks files are fallback in this file: /assets/js/blocks/index.js Carousel (SplideJS) /config/default/params.yaml carousel: true # default true, Set false to disable Splide JS Map (Leaflet) /config/default/params.yaml map: true # default true, Set false to disable Tiles tile: 1 # default 0, Set 1 to 11 to change tile Leaflet JS List of map tiles — hugolify-theme Parallax (Rellax) /config/default/params.yaml parallax: enable: false # default false, Set true to enable Rellax Vimeo API /config/default/params.yaml vimeo: false # default false, Set true to enable Youtube API /config/default/params.yaml youtube: false # default false, Set true to enable File override Place a file at the same path to replace a theme JS file entirely (Hugo’s asset priority: project > theme > modules). assets/ └── js/ └── blocks/ └── chart.js Add specific files Import your specific files in custom files. Components assets/ └── js/ └── components/ └── custom.js To override how components are imported: /assets/js/components/index.js Features assets/ └── js/ └── features/ └── custom.js Vendors assets/ └── js/ └── vendors/ └── custom.js --- # PostCSS Source: https://www.hugolify.io/docs/customization/design/bootstrap/postcss/ The PostCSS config and PurgeCSS setup required by hugolify-theme-bootstrap One file to create in your project The module declares where Hugo looks for the PostCSS config. The file itself has to exist in your project: a module cannot provide it. Bootstrap generates a large stylesheet, so this config is also where PurgeCSS removes the classes your site never renders. The path The module sets the directory in its own hugo.yaml, so there is nothing to declare in your project params: # provided by hugolify-theme-bootstrap, do not repeat it params: css: postcss: "postcss/bootstrap" The file Create the file at that path. The module ships it at its root, ready to copy: postcss.config.js in the module /postcss/bootstrap/postcss.config.js module.exports = { plugins: { autoprefixer: {}, '@fullhuman/postcss-purgecss': { mode: 'all', content: ['./hugo_stats.json'], dynamicAttributes: ['aria-current', 'aria-hidden', 'aria-expanded', 'href', 'role', 'type'], safelist: { standard: ['show', 'showing', 'hide', 'fade', /-backdrop$/, /^is-/, /^splide_/], deep: [/^tobii/] }, defaultExtractor: (content) => { // hugo_stats.json holds null tags/classes/ids until Hugo finishes // collecting stats (first build, or after a crashed build), so guard // against null to avoid "Cannot read properties of null". const els = JSON.parse(content).htmlElements; return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]; } } } }; Enable the build stats PurgeCSS does not read the rendered HTML. It reads hugo_stats.json, the list of tags, classes and ids Hugo actually emitted. That file has to be enabled: /config/_default/hugo.yaml build: buildStats: disableClasses: false disableIDs: true disableTags: false enable: true build.writeStats: true is the deprecated form of the same switch. Use build.buildStats.enable: it lets you keep ids out of the file, which keeps it small. The safelist A class that only ever appears at runtime (added by JavaScript, or built by string concatenation) is invisible to Hugo, so it never lands in hugo_stats.json and PurgeCSS strips it. The safelist puts it back. Entry Why show, showing, hide, fade Bootstrap toggles them from JS (collapse, modal, offcanvas) /-backdrop$/ Backdrops are injected by Bootstrap at runtime /^is-/ State classes set by the Hugolify vanilla JS /^splide_/, /^tobii/ Class names generated by the carousel and lightbox vendors Add your own entries when a component of yours toggles a class from JavaScript. Install the packages hugo mod get && hugo mod npm pack && yarn install Projects started from hugolify-template have it as a script: yarn install:hugolify Run it again after every hugo mod get -u: the npm dependencies are declared by the modules, and hugo mod npm pack is what copies them into your package.json. Troubleshooting Why the module cannot provide it Hugo resolves css.postcss from the project root, on the real filesystem, and the file is then loaded by Node (postcss-load-config), which knows nothing about Hugo’s virtual filesystem. A module mount therefore cannot supply it, and Hugo does not fall back to the theme or to the modules: POSTCSS: failed to transform "sass/main.sass" (text/css): postcss config "postcss/bootstrap" not found Styles missing in production only PurgeCSS runs on every build, but a class rendered on a page you did not build locally is absent from hugo_stats.json. Build the whole site once (yarn build) before judging what was purged. The stylesheet is not processed, and nothing errors If the package.json of your project declares "type": "module", a postcss.config.js written in CommonJS loads as an empty config, without an error and therefore without any purge. Name the file postcss.config.cjs instead. Documentation PurgeCSS for Hugo Hugo PostProcess --- # Setup Source: https://www.hugolify.io/docs/customization/design/bootstrap/setup/ Setup hugolify-theme-bootstrap hugolify-theme-bootstrap Bootstrap is include in hugolify-theme-bootstrap module. It provides Bootstrap 5: SASS components and variables Bootstrap Icons Bootstrap JS components Vanilla JS hugolify-theme-bootstrap on GitHub Example project A ready-to-run project: hugolify-template on its Bootstrap branch, with config/_default/module.yaml and postcss/bootstrap/postcss.config.js (PurgeCSS included) already in place. hugolify-template — Bootstrap branch What it provides Bootstrap 5 (CSS + SASS + JS) Bootstrap Icons SASS variables (abstracts/_variables.sass) Vendor packages (vendors/_packages.sass) Bootstrap JS component overrides (menu, tooltip, search…) Semantic column classes (col-small, col-medium…) Semantic badge classes (badge-primary, badge-success…) 5 color themes Install # /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-bootstrap - path: github.com/hugolify/hugolify-admin/v2 Migration from v1 In v1, Bootstrap was bundled directly inside hugolify-theme. No styling module needed to be declared. In v2, declare hugolify-theme-bootstrap explicitly: # /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 # add /v2 - path: github.com/hugolify/hugolify-theme-bootstrap # add this - path: github.com/hugolify/hugolify-admin/v2 No template or content changes are required — the rendering is identical to v1. --- # CSS Source: https://www.hugolify.io/docs/customization/design/design-system/css/ CSS custom properties and design tokens hugolify-theme-design-system uses CSS custom properties (design tokens) instead of SASS variables. Tokens are plain CSS, consumable by any tool (Figma, Tokens Studio, style dictionaries). CSS packages The module does not ship its own reset or token system. It composes four framework-agnostic npm packages and adds the Hugolify-specific layer on top. Package Contents Layers @uncinq/design-tokens Primitive + semantic custom properties (color, size, typography, spacing…) tokens @uncinq/component-tokens Component-scoped custom properties (--btn-*, --card-*, --container-*…) tokens @uncinq/css-base Reset, native element styles, layout primitives (container, grid, row), @custom-media breakpoints reset, base, layouts @uncinq/css-components Generic UI components (alert, badge, button, card, form, nav, panel…) components Each package is strictly additive: no package reaches into a lower layer. They are installed by hugo mod npm pack, see PostCSS. hugolify-theme-design-system itself is a Hugo module, not an npm package: it is imported through module.yaml and brings the Hugolify-specific layer (tokens, layouts, components, blocks, pages and utilities), writing into every layer above. Import order matters: @import '@uncinq/css-base' must come before any @import that inlines local CSS in the same file, because postcss-import resolves npm package imports only in that position. Token architecture Tokens follow a three-level chain: primitive → semantic → component. primitive/color.css → raw values (oklch…) semantic/color.css → purposeful aliases (--color-brand, --color-danger…) components/button.css → scoped tokens (--btn-color-background, --btn-border-radius…) Never skip two levels: a component token should reference a semantic token, not a primitive directly — unless the primitive has no semantic meaning (e.g. --radius-none). CSS layers All tokens and styles are assigned to a named layer. The order is declared once, at the very top of assets/css/main.css, before any @import — CSS fixes a layer’s position the first time its name is seen. @layer reset, tokens, vendors, base, layouts, components, pages, utilities; Layer Content Provided by reset CSS reset @uncinq/css-base tokens All custom properties (primitive, semantic, component) @uncinq/design-tokens, @uncinq/component-tokens, module vendors Third-party libraries (Leaflet, Splide) module base Native element styles (body, headings, links, tables, forms…) @uncinq/css-base layouts Layout primitives (container, grid, row) + hugolify layouts @uncinq/css-base, module components UI components (.alert, .btn, .card…) and hugolify components @uncinq/css-components, module pages Page-specific rules module utilities Single-purpose classes — they win over a component’s own rules module The last layer wins. reset and tokens come first (lowest priority) so token defaults never override base, layout or component styles. Custom media queries are not layered: @custom-media is resolved at build time by PostCSS. Breakpoints Breakpoints are @custom-media rules from @uncinq/css-base, named as rungs on a ladder rather than devices. Custom media Width Deprecated alias --sm >= 48rem (768px) --tablet --md >= 64rem (1024px) --tablet-wide --lg >= 90rem (1440px) --laptop --xl >= 100rem (1600px) --desktop @media (--md) { .card { --card-padding-inline: var(--spacing-lg); } } The device names still work but are aliases kept for compatibility — prefer --sm/--md/--lg/--xl in new code. Components that own a panel (header, filters, sidebar menu, table of contents) get their own semantic custom media, generated in main.css from site params — so the breakpoint and the .panel-inline-* classes in the markup cannot drift: # /config/_default/params.yaml header: expand: md # md by default, none = always an overlay Heading sizes Heading font sizes are fluid: each level references a clamp() token from the semantic scale, so no media query is involved. /* @uncinq/design-tokens — semantic/typography.css */ --font-size-fluid-xl: clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem); --font-size-heading-01: var(--font-size-fluid-xl); --font-size-heading-02: var(--font-size-fluid-lg); /* @uncinq/css-base — base/headings.css */ h1 { --font-size-heading: var(--font-size-heading-01); } To change a heading size, redefine the token — not the selector: /* assets/css/tokens/site.css */ @layer tokens { :root { --font-size-heading-01: var(--font-size-fluid-2xl); } } Responsive tokens Some component tokens change at breakpoints. The breakpoint logic lives in the component CSS, not in the token file: token files only hold static values, and the media query just reassigns the token the component reads. /* @uncinq/component-tokens — components/container.css — static values */ --container-max-width-tablet: 100%; --container-max-width-tablet-wide: 100%; --container-max-width-laptop: 100%; --container-max-width-desktop: var(--size-desktop); /* @uncinq/css-base — layouts/container.css — responsive logic */ .container { max-width: var(--container-max-width, var(--container-max-width-mobile)); @media (--tablet) { --container-max-width: var(--container-max-width-tablet); } @media (--tablet-wide) { --container-max-width: var(--container-max-width-tablet-wide); } @media (--laptop) { --container-max-width: var(--container-max-width-laptop); } @media (--desktop) { --container-max-width: var(--container-max-width-desktop); } } Grid params and image widths Four site params describe the page grid in numbers. They are read only by the Go templates, to compute the pixel width of an image before it is resized. They never produce a single line of CSS. /config/_default/params.yaml column: mobile: 1 desktop: 12 container: desktop: 1440 mobile: 375 gap: desktop: 30 mobile: 30 gutter: desktop: 60 mobile: 30 Param What it drives column.desktop The divisor of the grid (12), how wide one column is column.mobile Same, on mobile (1 → one column fills the container) container.desktop / .mobile The reference width the gutters are subtracted from gap.desktop The space between two columns, part of a multi-column span gutter.desktop / .mobile The inside margin of the container, subtracted from the usable width A block asking for a 4-column image gets GetColumnWidth → (container − 2 gutters − gaps) / 12 × 4 + gaps, rounded up, and that number is what Hugo (or your image CDN) resizes to. Keep them in sync with the CSS The CSS width of the container comes from tokens (--container-max-width-desktop, --gutter), not from these params. Change one side without the other and Hugo generates images calibrated for a width the page no longer has: too small, so upscaled and soft. Each styling module ships the values matching its own grid: 1440 / 30 / 60 for the design system, 1296 / 24 / 30 for Bootstrap. Dark mode Dark mode is off by default. Turning it on hands the choice to the operating system: /config/_default/params.yaml css: darkmode: true # false (default) forces light css.darkmode <meta name="color-scheme"> Root attribute true light dark none, the OS decides false only light data-color-scheme="light", dark tokens suppressed The dark values ship with @uncinq/design-tokens and reassign the semantic color tokens only: --color-background, --color-text, --color-border… Components follow without a single dark-specific rule. Your own dark values go under the same guard, so a site switched back to light keeps working: /* assets/css/tokens/theme.css */ @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --color-brand: oklch(0.7 0.16 22); --header-color-background: var(--color-background); } } } Write dark overrides against semantic tokens, never against a component’s own colors: a component that reads --color-background flips on its own, while one that hardcodes a value has to be handled twice. Where overrides go The module ships four empty files, imported last by main.css in this order — tokens first, rules after, and site after theme in each pair: tokens/theme.css → tokens/site.css → theme.css → site.css In both pairs the split is the same, and it is about lifespan, not about size: what a second site would want too goes in the theme file, typically shipped as a theme module of your own; what only this project needs goes in the site file. A project with no shared look uses the site files only, and never has to touch the theme ones. The four files are empty in the module — create the one you need at the same path in your project, and Hugo’s asset priority (project > theme > modules) replaces it. Overriding tokens Two entry points, both imported after tokens/design-system.css, so they cascade over every default: File Use for assets/css/tokens/theme.css the tokens that define a reusable look — brand colors, typography, radius scale assets/css/tokens/site.css the tokens this site alone changes /* assets/css/tokens/theme.css — the look, reusable across sites */ @layer tokens { :root { --color-brand: #e63946; --btn-border-radius: var(--radius-pill); } } /* assets/css/tokens/site.css — this site only, wins over the theme above */ @layer tokens { :root { --header-height: 72px; } } Overriding CSS Same split for rules that no token covers. Write to the same layer as the rule you are overriding: File Use for assets/css/theme.css rules that belong to the reusable look assets/css/site.css rules this site alone needs /* assets/css/site.css */ @layer components { .card .media img { filter: grayscale(1); } } Check first Two things to check first: a token often covers the case (–card-color-background, –hero-min-height…), and a modifier class often exists (.hero-center, .block-dark, .btn-ghost…) — reach for the markup or the token before writing a rule. The block and hero classes are listed in UI. Component variants Color variants set CSS custom properties scoped to the modifier class, consumed by the base component: .alert { background-color: var(--alert-color-background); color: var(--alert-color-text); } .alert-danger { --alert-color-background: var(--color-danger-muted); --alert-color-text: var(--color-danger-strong); } .alert-success { --alert-color-background: var(--color-success-muted); --alert-color-text: var(--color-success-strong); } Available variants (alert, badge, btn): brand, primary, secondary, neutral, success, danger, warning, info, light, dark. Buttons add ghost, link and control variants, plus sizes btn-xs to btn-xl. --- # Javascript Source: https://www.hugolify.io/docs/customization/design/design-system/javascript/ Vanilla JS Overview hugolify-theme-design-system ships vanilla JS only — no Bootstrap JS, no framework. Behaviour is progressive enhancement: JS adds behaviour, it never replaces structure. Structure assets/js/ ├── utils/ # pure helpers (a11y, global, scrollspy) ├── components/ # always-on UI, initialised on every page ├── features/ # optional, enabled per-site via params ├── blocks/ # block-specific JS, loaded conditionally ├── vendors/ # third-party integrations ├── datas/ # static JS data (map tiles…) └── main.js # entry point, executed as a Hugo template Components Always loaded, no param to enable them: Component Role dialog.js Modal panels — native <dialog> or popover="auto", top layer and ::backdrop in both cases dropdown.js Dropdown menus menu.js Main menu tooltip.js Tooltips video.js Video playback controls Panels driven by dialog.js (header, filters, sidebar menu, table of contents) switch between inline and overlay at the breakpoint declared in the site params — see CSS. Features Vendors Each feature is imported by main.js only when its param is true. /config/_default/params.yaml animation: false # default false, data-anim scroll reveal carousel: true # default true, loads Splide map: true # default true, loads Leaflet parallax: enable: false # default false, loads Rellax search: enable: false # default false, focuses the input when the search panel opens vimeo: false # default false, Vimeo API youtube: false # default false, YouTube API Map tiles tile: 1 # default 0, Set 1 to 11 to change tile Leaflet JS Splide JS List of map tiles Blocks Files from enabled blocks (w/ Hugolify admin) are automatically added. The name of the javascript file is the same as the block name and must be in the blocks directory /assets/js/blocks/. If you do not use Hugolify admin, blocks files are fallback in this file: /assets/js/blocks/index.js File override Place a file at the same path to replace a theme JS file entirely (Hugo’s asset priority: project > theme > modules). assets/ └── js/ └── components/ └── menu.js Add specific files Each layer has an extension point imported by main.js — add your code there rather than editing the barrels. File Loaded assets/js/components/custom.js after all components assets/js/features/custom.js after all features assets/js/vendors/custom.js first, before everything else (npm imports) To change how components are imported: /assets/js/components/index.js --- # PostCSS Source: https://www.hugolify.io/docs/customization/design/design-system/postcss/ The PostCSS config required by hugolify-theme-design-system One file to create in your project The module declares where Hugo looks for the PostCSS config. The file itself has to exist in your project: a module cannot provide it. The path The module sets the directory in its own hugo.yaml, so there is nothing to declare in your project params: # provided by hugolify-theme-design-system, do not repeat it params: css: postcss: "postcss/design-system" The file Create the file at that path: /postcss/design-system/postcss.config.js module.exports = { plugins: { 'postcss-import': {}, 'postcss-custom-media': {}, autoprefixer: {}, } }; The module ships that exact file at its root, ready to copy: postcss.config.js in the module The plugins Plugin Role postcss-import Inlines the @import of the npm packages (@uncinq/css-base, @uncinq/css-components…). Hugo’s own inlineImports resolves what it finds under assets/ and skips the rest postcss-custom-media Resolves the @custom-media breakpoints at build time. See CSS autoprefixer Vendor prefixes, driven by the .browserslistrc of your project Install the packages hugo mod get && hugo mod npm pack && yarn install Projects started from hugolify-template have it as a script: yarn install:hugolify Run it again after every hugo mod get -u. The npm dependencies are declared by the modules, not by your project, and hugo mod npm pack is what copies them into your package.json. Update a module without re-running it and node_modules stays behind: a package the module has started importing breaks the build on an unresolved @import, and a package left at an older major is worse, the CSS reads tokens that do not exist yet and nothing errors. Troubleshooting Why the module cannot provide it Hugo resolves css.postcss from the project root, on the real filesystem, and the file is then loaded by Node (postcss-load-config), which knows nothing about Hugo’s virtual filesystem. A module mount therefore cannot supply it, and Hugo does not fall back to the theme or to the modules: POSTCSS: failed to transform "css/main.css" (text/css): postcss config "postcss/design-system" not found The stylesheet is not processed, and nothing errors If the package.json of your project declares "type": "module", a postcss.config.js written in CommonJS loads as an empty config, without an error. The stylesheet comes out unprocessed: npm imports left as-is, @custom-media unresolved. Name the file postcss.config.cjs instead: postcss-load-config looks for it and loads it with its CommonJS loader. The build fails on a missing config postcss config "postcss/design-system" not found The directory does not exist in the project. Create postcss/design-system/postcss.config.js. Hugo never looks anywhere else. --- # Setup Source: https://www.hugolify.io/docs/customization/design/design-system/setup/ Setup hugolify-theme-design-system hugolify-theme-design-system Framework-free styling module for hugolify-theme. It provides the complete styling layer — design tokens (CSS custom properties), vanilla CSS and vanilla JS — without any CSS framework and without an icon font. It is a drop-in replacement for hugolify-theme-bootstrap: switching is a one-line change in module.yaml, no template or content changes required. hugolify-theme-design-system on GitHub Example project A ready-to-run project: hugolify-template on its design system branch, with config/_default/module.yaml and postcss/design-system/postcss.config.js already in place. hugolify-template — design system branch What it provides Design tokens as CSS custom properties (primitive → semantic → component) Vanilla CSS, organized in cascade layers, built on four framework-agnostic npm packages — see CSS Hugolify-specific components (header, footer, hero, blocks, sections…) Vanilla JS components (dialog, dropdown, menu, tooltip, video) and optional features (carousel, map, parallax, search, animation, Vimeo, YouTube) Icons are not part of this module — they come from hugolify-theme-icons, see Icons. Install Modules /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-design-system # CSS and JS - path: github.com/hugolify/hugolify-theme-icons # Icons (Lucide + Simple Icons) - path: github.com/hugolify/hugolify-admin/v2 PostCSS The CSS pipeline needs a PostCSS config in your project. The module declares the directory (postcss/design-system), the file has to exist there. PostCSS setup Command hugo mod get && hugo mod npm pack && yarn install Run it again after every hugo mod get -u: a module can add or bump an npm dependency, and only this command writes it into your package.json. See PostCSS. Requirements Hugo extended >= 0.158.0 Switching from hugolify-theme-bootstrap Replace the styling module in module.yaml, everything else stays: imports: - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-bootstrap # remove this - path: github.com/hugolify/hugolify-theme-design-system # add this - path: github.com/hugolify/hugolify-theme-icons # add this - path: github.com/hugolify/hugolify-admin/v2 partials/head/css.html detects the active module by its entry file: sass/main.sass for Bootstrap, css/main.css for the design system. Project-side SASS (assets/sass/) is ignored once the design system is active — its overrides move to CSS custom properties, see CSS. --- # Favicons Source: https://www.hugolify.io/docs/customization/favicons/ To replace or add favicons… Icons /static/assets/images/favicons/ apple-touch-icon.png 180x180px favicon-32x32.png 32x32px favicon-16x16.png 16x16px favicon.ico favicon.png favicon.svg safari-pinned-tab.svg Files /static/ site.webmanifest --- # HTML Source: https://www.hugolify.io/docs/customization/html/ To replace or add html… The HTML files override is possible by keeping the same tree structure. layouts/ └── partials/ └── posts/ └── item.html --- # Icons Source: https://www.hugolify.io/docs/customization/icons/ Lucide and Simple Icons with hugolify-theme-icons module hugolify-theme-icons Icons are a module of their own, hugolify-theme-icons. It renders Lucide for UI and content icons, and Simple Icons for brands. The module is opt-in: a project that does not import it renders no icons. It ships no framework CSS and completes hugolify-theme-design-system, which bundles no icon of its own. Not compatible with hugolify-theme-bootstrap For now the module targets hugolify-theme-design-system only. hugolify-theme-bootstrap comes with its own icons — the Bootstrap Icons webfont — and both define a .icon class: importing the two together makes them collide. hugolify-theme-icons on GitHub Icon sets Two libraries are imported by the module, each with its own role. Lucide Browse the Lucide icon list The UI and content set, and the only one for that role: over 1700 outline icons, drawn on a 24x24 grid and stroked (see Stroke weight). Mounted on assets/icons/ui/, resolved by its Lucide name, as-is: {{ partial "icon" "map-pin" }} Simple Icons Browse the Simple Icons list The brand set: over 3400 logos, solid fills with no stroke, rendered monochrome. Mounted on assets/icons/brands/, resolved by its Simple Icons slug prefixed with brand:: {{ partial "icon" "brand:github" }} Use the slug shown on the site, not the marketing name (x, not twitter). The prefix also disambiguates a name held by both sets: apple gives the Lucide fruit, brand:apple the Apple logo. Install /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-design-system # styling module - path: github.com/hugolify/hugolify-theme-icons # icons The module imports Lucide and Simple Icons as Hugo modules and mounts them on role-based paths (assets/icons/ui/, assets/icons/brands/), so swapping an icon set is a one-line change and no icon file is committed to your project. Requires Hugo >= 0.128.0 (templates.Defer). Usage {{ partial "icon" "map-pin" }} {{/* UI icon — Lucide name, as-is */}} {{ partial "icon" "brand:github" }} {{/* brand icon — Simple Icons */}} The name is the filename: there is no mapping table and no alias layer. Browse the Lucide icon list to find a name. The rendered DOM is a single element, no inline SVG: <i class="icon icon-map-pin" aria-hidden="true"></i> Approach Icons are rendered via CSS mask-image from inline SVG data-URIs. No icon font, no SVG sprite, no request per icon. .icon { background-color: var(--icon-color, currentColor); display: inline-block; height: var(--icon-size, 1em); mask: var(--icon-glyph) center / contain no-repeat; vertical-align: -0.125em; width: var(--icon-size, 1em); } Each icon only differs by its --icon-glyph. The SVG is used as an alpha mask, so its own colors are irrelevant: the icon inherits the current text color via currentColor and scales with the font size. Size and color are overridden with the two custom properties: .main-menu .icon { --icon-color: var(--color-brand); --icon-size: var(--size-24); } Brand icons render monochrome — the norm for social rows. A colored logo needs an inline SVG instead of a mask. Stroke weight Lucide ships every icon at stroke-width="2", which reads heavy at UI sizes. The module treats stroke weight as a design token and defaults it to 1. Change it with a single param: /config/_default/params.yaml icons: strokeWidth: 1.5 # default 1, set 2 to restore Lucide's own weight The unit is viewBox units, not pixels. All Lucide icons are 24x24, so the rendered thickness is strokeWidth / 24 * --icon-size: at the default --icon-size: 1em (16px), 1 gives 0.67px, 1.5 gives 1px and 2 gives 1.33px. A weight of 1 is genuinely hairline at 16px and depends on the browser antialiasing, so 1.5 is the safer pick for icon-dense interfaces. Two limits come from the mask rendering described above: It is not a CSS variable. A mask exposes only its alpha channel, so no runtime custom property can reach the stroke-width attribute inside the SVG: the value is substituted into the source before encoding, at build time. It is site-wide. A per-component weight would require a second glyph set and would double the stylesheet. The param only applies to UI icons. Simple Icons brands are solid fills and carry no stroke. Build There is no project-side build step and no Node script. The subset ships natively: partial "icon" registers each name used during the render. After the full render, templates.Defer resolves the union of those names. One stylesheet is emitted (minified and fingerprinted in production) with the base .icon rule plus one --icon-glyph per icon actually used. Nothing to run, and nothing to commit: there is no yarn build:icons step as with the Bootstrap Icons font, and no generated font file in the project. An unknown name logs a build warning and renders nothing — the default glyph is an empty SVG, so a missing icon is invisible rather than a solid square. Missing brands Some brands are dropped by both Simple Icons and Lucide. The module ships curated SVGs in its own assets/icons/brands/, and local assets take precedence over the imported modules — so you can add a missing brand in your project at the same path: assets/ └── icons/ └── brands/ └── linkedin.svg --- # Image Source: https://www.hugolify.io/docs/customization/image/ Logo, retina, dimensions… Logo /config/default/params.yaml logo: header: '/assets/images/logo.svg' footer: '/assets/images/logo-footer.svg' # default: /assets/images/logo.svg Retina /config/default/params.yaml image: retina: desktop: false # default false, Set true to enable retina for desktop Dimensions /config/default/params.yaml Commons hero: cover: '1600x400' cover_mobile: '360x400' desktop: '416x' mobile: '300x' image: xlarge: '1600x' xsmall: '50x50' desktop: '856x' mobile: '300x' mobile_full: '360x' scrollsnap: '240x' thumbnail: desktop: '414x177' mobile: '300x129' scrollsnap: '240x103' navigation: desktop: '414x200' mobile: '300x150' Sections pages: thumbnail: desktop: '414x177' desktop: '416x179' desktop_large: '636x273' mobile: '300x129' scrollsnap: '240x103' image: desktop: '856x' mobile: '360x' posts: … Blocks blocks: editorial: desktop: '636x' mobile: '360x' gallery: mobile: '138x138' informations: image: ratio: .5196 --- # Menu Source: https://www.hugolify.io/docs/customization/menu/ Layout of primary navigation menu, colors… Layout Drawer is the default layout. Modal /config/default/params.yaml header: layout: modal modal: size: fullscreen # default, or lg, xl centered: true # default, or false Modal layout requires hugolify-theme-bootstrap. Make sure you have not disabled the corresponding Bootstrap JS component. Bootstrap modal documentation Drawer /config/default/params.yaml header: layout: drawer drawer: position: end # default, or start, top, bottom Drawer layout requires hugolify-theme-bootstrap. Make sure you have not disabled the corresponding Bootstrap JS component. Bootstrap offcanvas documentation Navbar expand breakpoint This variable is provided by hugolify-theme-bootstrap. Override it in your project’s _variables.sass. $navbar-expand: lg // false to disable Colors Override menu colors in your project’s _variables.sass (or site.sass for scoped overrides): $menu-background-color: // $header-background-color !default $menu-color: // $header-color !default --- # SEO Source: https://www.hugolify.io/docs/customization/seo/ Edit global SEO… Global /data/seo.yml color: "#000000" # theme-color, msapplication-TileColor, mask-icon title: "" # Global meta title description: "" # Global meta description Editable in Hugolify admin. Specific In frontmatter of pages. --- seo: title: "" # Page meta title description: "" # Page meta description --- Not editable in Hugolify admin. --- # Theme 1 Source: https://www.hugolify.io/docs/customization/themes/theme-1/ First available theme Not available in Hugolify v2 This theme has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Demo Explore demo Preview homepage Setup Import module /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-1 - path: github.com/hugolify/hugolify-theme # Core theme Custom main.sass? Import sass /assets/sass/main.sass // Core Theme @import "hugolify-theme" // Theme @import "hugolify-theme-1" // Site @import "site" Repository Hugolify theme 1 --- # Theme 2 Source: https://www.hugolify.io/docs/customization/themes/theme-2/ Second available theme Not available in Hugolify v2 This theme has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Demo Explore demo Preview homepage Setup Import module /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-2 - path: github.com/hugolify/hugolify-theme # Core theme Custom main.sass? Import sass /assets/sass/main.sass // Core Theme @import "hugolify-theme" // Theme @import "hugolify-theme-2" // Site @import "site" Repository Hugolify theme 2 --- # Theme 3 Source: https://www.hugolify.io/docs/customization/themes/theme-3/ Third available theme Not available in Hugolify v2 This theme has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Demo Explore demo Preview homepage Setup Import module /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-3 - path: github.com/hugolify/hugolify-theme # Core theme Custom main.sass? Import sass /assets/sass/main.sass // Core Theme @import "hugolify-theme" // Theme @import "hugolify-theme-3" // Site @import "site" Repository Hugolify theme 3 --- # Theme 4 Source: https://www.hugolify.io/docs/customization/themes/theme-4/ Fourth available theme Not available in Hugolify v2 This theme has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Demo Explore demo Preview homepage Setup Import module /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-4 - path: github.com/hugolify/hugolify-theme # Core theme Custom main.sass? Import sass /assets/sass/main.sass // Core Theme @import "hugolify-theme" // Theme @import "hugolify-theme-4" // Site @import "site" Repository Hugolify theme 4 --- # Theme 5 Source: https://www.hugolify.io/docs/customization/themes/theme-5/ Fith available theme Not available in Hugolify v2 This theme has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Demo Explore demo Preview homepage Setup Import module /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-5 - path: github.com/hugolify/hugolify-theme # Core theme Custom main.sass? Import sass /assets/sass/main.sass // Core Theme @import "hugolify-theme" // Theme @import "hugolify-theme-5" // Site @import "site" Repository Hugolify theme 5 --- # UI Source: https://www.hugolify.io/docs/customization/ui/ Layout classes shared by blocks and hero — theme, grid, align, layout, offset Overview Blocks and hero expose their layout options through a ui object in the front matter. hugolify-theme turns each value into a CSS class — it holds no style itself, so the class is only meaningful if the active styling module implements it. The value is the class: theme: dark renders block-dark, grid: full renders block-full. A value the module does not style renders markup with no visual effect, never an error — which is why the tables below list the coverage of each module. Blocks ui object in a block’s front matter blocks: - type: editorial ui: theme: dark # block-dark grid: medium # block-medium + col-medium on the row child offset: center # block-center + offset-center align: center # block-align-center layout: carousel # block-carousel The class string is built by func/GetBlockClasses.html , always prefixed with block-, alongside the block’s own type class (block-editorial). Front matter Class Design System Bootstrap theme block-<value> accent black dark highlight light neutral white — only the legacy .block-bg (background: true) align block-align-<value> start center end — layout block-<value> carousel — grid block-<value> full (padding), width via col-* width via col-* offset block-<value> position via offset-* position via offset-* Available theme and grid values are declared per project in the admin config (params.admin.fields.theme.options and .grid.options, default light dark accent and container small medium large full). align and offset are always start, center or end. Columns grid and offset do not size the block themselves: func/GetColOffsetClass.html maps them to semantic column classes, implemented by both modules. Class Span Design System Bootstrap col-xsmall 1/3 ✓ ✓ col-small 1/2 ✓ ✓ col-medium 2/3 ✓ ✓ col-large 5/6 ✓ ✓ offset-center centered ✓ ✓ offset-end pushed right ✓ ✓ The spans are relative to the active column count, not hardcoded to 12: @uncinq/css-base computes them from --columns, Bootstrap from $grid-columns via make-col(). Hero hero object in a page’s front matter hero: ui: align: center # hero-center vertical_align: end # hero-vertical-end theme: dark # hero-dark darken: true # hero-with-darken (darken under text only) image: src: '/images/cover.jpg' background: true # hero-with-cover hero-with-cover-image (darken whole background) Classes are built by commons/hero.html . Front matter Class Design System Bootstrap align: center / end hero-center hero-end ✓ ✓ theme hero-<value> — accent black dark highlight light neutral white ✓ ✓ image / video + background hero-with-cover + hero-with-cover-image / -video ✓ ✓ image / video (side media) hero-with-image / hero-with-video ✓ ✓ cover darkening hero-cover-darken ✓ ✓ vertical_align hero-vertical-<value> ✓ — darken: true hero-with-darken ✓ — The hero themes are the one place where the two modules are explicitly kept in sync: _hero-theme.sass in hugolify-theme-bootstrap is a port of hero-theme.css from @uncinq/css-components, generated from the same seven names. Adding a variant A value with no CSS is inert, so a project-specific variant only needs a rule in the right layer — no template change: /* assets/css/site.css — hugolify-theme-design-system */ @layer components { .block-brand { --block-color-background: var(--color-brand); --color-text: var(--color-text-on-brand); } } Then expose the value to the editors: # /config/_default/params.yaml admin: fields: theme: options: [light, dark, accent, brand] --- # Netlify Source: https://www.hugolify.io/docs/getting-started/auth/netlify/ Identity, Git gateway… Only for Decap/Netlify/Static CMS Identity To create user accounts for Netlify CMS you must activate the Identify Netlify. Site settings > Identity > Enable Git Gateway To connect Netlify CMS to the Github API, it must be activated. Site settings > Identity > Services > Enable Git Gateway Emails notifications To redirect each email template to those in the repository. Site settings > Identity > Email Then modify the path: Invitation template: /admin/emails/invitation.html Confirmation template: /admin/emails/confirmation.html Recovery template: /admin/emails/recovery.html Email change template: /admin/emails/email-change.html --- # Best practices Source: https://www.hugolify.io/docs/getting-started/best-practices/ To lighten and make the code more semantic and readable. Agnostic templates Since v2, hugolify-theme is framework-agnostic: templates use semantic CSS classes only, with no Bootstrap-specific class names in HTML. This makes it possible to swap the styling layer (e.g. replace hugolify-theme-bootstrap with hugolify-theme-design-system) without touching any template. Classes in templates are semantic: col-medium, badge-primary, btn, posts, etc. Each styling module maps them to its own framework. hugolify-theme-bootstrap When using Bootstrap via hugolify-theme-bootstrap, semantic classes are mapped to Bootstrap utilities using @extend. This keeps HTML clean and customizations easy. To lighten and make the code more semantic and readable, as well as to facilitate site customizations, @extend of class are preferred over using Bootstrap classes directly in HTML. Example Original Bootstrap DOM <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col"> <div class="card"></div> </div> </div> Hugolify DOM for posts grid <div class="posts"> <div> <article class="post"></article> </div> </div> Hugolify SASS for posts grid (in hugolify-theme-bootstrap) .posts @extend .row @extend .row-cols-1 @extend .row-cols-md-2 @extend .row-cols-lg-3 SASS Styleguide for writing sane, maintainable and scalable Sass. Sass Guidelines Prettier We use prettier to keep same codestyle everywhere. If you use Vs Code, you will need to install the prettier extension . Then, in settings: Select Prettier as default formater Enable “Format on save” Create files: /.prettierrc "@hugolify/prettier-config" /.prettierignore **/*.html --- # Cloud Source: https://www.hugolify.io/docs/getting-started/cloud/ Media management and optimization Services available These services are supported for seamless media management and optimization in cloud-based applications. Cloudinary Uploadcare Setup Hugolify Admin /config/_default/params.yaml admin: media: cloud: # object (Sveltia CMS accept an array) Cloudinary /config/_default/params.yaml admin: media: cloud: name: cloudinary cloud_name: # write your cloudinary cloud name api_key: # write your cloudinary api key Uploadcare /config/_default/params.yaml admin: media: cloud: name: uploadcare public_key: # write your uploadcare public api key tabs: "['file', 'url', 'gdrive']" # optional --- # Commands Source: https://www.hugolify.io/docs/getting-started/commands/ Basics commands lines Launch To launch Hugo project with livereload, available here: http://localhost:1313/ yarn watch To launch Netlify/Decap CMS in localhost (in a second terminal), available here: http://localhost:1313/admin/ yarn cms Build To build the project yarn build Update Modules of your project yarn update Hugolify template git remote add template git@github.com:hugolify/hugolify-template.git git fetch --all git merge template/main --allow-unrelated-histories Clean To clean modules of your project yarn clean --- # Contributes Source: https://www.hugolify.io/docs/getting-started/contributes/ Help us to improve Hugolify. Mainteners Sébastien Moulène Arthaud Proust Publish a version We use release-it to automate version publication. You juste have to run npx release-it and hit Enter to publish a version. Then (if you have rights), publish version on Github by clicking on the link provided by release-it Config: create commit : true push : true create tag : true publish on github : true publish on npm : false --- # Cookie banner Source: https://www.hugolify.io/docs/getting-started/cookie-consent/ Enable a cookie banner Setup /config/default/params.yaml cookie_banner: enable: false # Enable Cookie banner cookieconsent: enable: false # Use CookieConsent analytics: false functionality: false marketing: false disablePageInteraction: false consentModal: layout: box position: bottom left preferencesModal: layout: box position: bottom left Documentation A complete documentation of how to use CookieConsent. See documentation --- # Form Source: https://www.hugolify.io/docs/getting-started/form/ Use Netlify form or another services Setup /config/default/params.yaml form: netlify: true # Set false to disable Netlify forms action: false # Replace by URL from formspree, fabform, kwes… Services available FabForm Formspree KwesForms Netlify forms Default --- # Cloudflare Pages Source: https://www.hugolify.io/docs/getting-started/hosting/cloudflare-pages/ Not available Form: Netlify form Auth: Netlify identify Use a specific Hugo version higher of 0.141.0 and extended Pages project > Settings > Variables and Secrets HUGO_VERSION 0.146.4 Documentation A complete documentation of how to host is available on Cloudflare website. See documentation Website Learn more about the host and sign up. www.cloudflare.com --- # Github Pages Source: https://www.hugolify.io/docs/getting-started/hosting/github-pages/ Not available Form: Netlify form Auth: Netlify identify Documentation A complete documentation of how to host is available on Hugo website. See documentation Github action .github/workflows/hugo.yml # Sample workflow for building and deploying a Hugo site to GitHub Pages name: Deploy Hugolify to Pages on: # Runs on pushes targeting the default branch push: branches: ["main"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false # Default to bash defaults: run: shell: bash jobs: # Build job build: runs-on: ubuntu-latest env: HUGO_VERSION: 0.146.4 steps: - name: Install Hugo CLI run: | wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \ && sudo dpkg -i ${{ runner.temp }}/hugo.deb - name: Install Dart Sass run: sudo snap install dart-sass - name: Checkout uses: actions/checkout@v4 with: submodules: recursive - name: Setup Pages id: pages uses: actions/configure-pages@v5 - name: Install Yarn run: npm install -g yarn - name: Install Node.js dependencies run: yarn install --frozen-lockfile || true - name: Build with Hugo env: HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache HUGO_ENVIRONMENT: production run: | hugo \ --minify \ --baseURL "${{ steps.pages.outputs.base_url }}/" - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./public # Deployment job deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 Website Learn more about the host and sign up. pages.github.com --- # Netlify Source: https://www.hugolify.io/docs/getting-started/hosting/netlify/ The most compatible and easy-to-use hosting with Hugolify. Available Form: Netlify form Auth: Netlify identify Documentation A complete documentation of how to host is available on Hugo website. See documentation Website Learn more about the host and sign up. www.netlify.com --- # Render Source: https://www.hugolify.io/docs/getting-started/hosting/render/ Not available Form: Netlify form Auth: Netlify identify Documentation A complete documentation of how to host is available on Hugo website. See documentation Website Learn more about the host and sign up. www.render.com --- # Install Source: https://www.hugolify.io/docs/getting-started/install/ Easy to install Architecture flowchart TD A[hugolify-template] -->|HTML + Core| B(hugolify-theme) A[hugolify-template] -->|Headless CMS| C(hugolify-admin ) A[hugolify-template] -->|Specific modules| X(hugolify-theme-*) B --> |CSS + JS| B1[hugolify-theme-bootstrap] B --> |CSS + JS| B2[hugolify-theme-design-system] style A fill:#A90940,color:#fff,stroke:none Use Github template This is the recommended way to install Hugolify. Go to our Github template repository and click to use this template button then create a new repository. Hugolify template on Github Use Github template Create a new repository Create a new repository on Github Clone repository localy In your repository, click on code button and copy SSH git url. Clone repository Command In your terminal and where you want to install the repository. git clone git@github.com:hugolify/hugolify-template.git Rename to your informations Module /go.mod This part needs modify (use your repository name): module github.com/hugolify/hugolify-template Package /package.json This part needs modify with your informations: { "name": "hugolify-www", "version": "1.2.3", "homepage": "https://www.hugolify.io", "repository": "https://github.com/sebousan/hugolify-www", "author": { "name": "Sébastien Moulène", "url": "https://www.sebastienmoulene.com/" } } Install packages With yarn yarn With npm npm install --- # Migration from v1 Source: https://www.hugolify.io/docs/getting-started/migration/ Breaking changes and migration guide from Hugolify v1 to v2 Overview v2 turns hugolify-theme into an agnostic core and moves CSS and JavaScript into a separate styling module. With hugolify-theme-bootstrap the rendering is identical to v1. The theme and the admin are versioned together: a v2 project uses hugolify-theme/v2 with hugolify-admin/v2. You can move the theme first and keep admin v1 for a while — it still works against the theme v2, without the ratio and scrollsnap controls — but admin v2 does not work against the theme v1. Your content, front matter and layouts are unchanged. What changed v1 v2 Core theme hugolify-theme hugolify-theme/v2 Bootstrap CSS + JS bundled in the core separate module Styling fixed hugolify-theme-bootstrap or hugolify-theme-design-system PostCSS config project root path defined by the styling module 1. Update the modules /config/_default/module.yaml imports: # Core theme - path: github.com/hugolify/hugolify-theme/v2 # add /v2 # Styling layer - path: github.com/hugolify/hugolify-theme-bootstrap # add this # Headless CMS - path: github.com/hugolify/hugolify-admin/v2 The /v2 suffix is required: Go modules treat a major version as a distinct module path, so hugolify-theme and hugolify-theme/v2 are two different modules. Keep your content modules (hugolify-theme-posts, hugolify-theme-projects…) declared above the core theme, exactly as in v1. 2. Choose a styling module hugolify-theme-bootstrap is the default and a drop-in replacement for what v1 bundled: Bootstrap 5, Bootstrap Icons, SASS variables and the Bootstrap JS components. No template or content change is required. hugolify-theme-design-system is the framework-free alternative, built on CSS custom properties and a lightweight icon system. Switching between the two is a one-line change in module.yaml. Compare both design modules 3. Move your PostCSS config Each styling module declares the directory where Hugo looks for postcss.config.js, through the css.postcss param set in the module’s own hugo.yaml. With hugolify-theme-bootstrap that path is postcss/bootstrap. postcss/ bootstrap/ postcss.config.js If your project kept postcss.config.js at the root, move it into that directory. Each styling module ships an example you can copy. This is the step that most often breaks a v2 build: the styling module declares the path, so if no config sits there Hugo stops with postcss config "postcss/bootstrap" not found. It does not fall back to the project root: that fallback only applies when no path is declared at all. 4. Fetch the modules hugo mod get -u hugo mod tidy What has not changed Content structure, front matter and blocks Layout overrides in /layouts/ Shortcodes Section and taxonomy modules Hugolify Admin hugolify-admin moves with the theme. Each major of the admin targets the matching major of the theme, so a v2 project uses hugolify-admin/v2 and the /v2 suffix applies here too. Staying on admin v1 for a transition is workable — see Compatibility. Admin v2 is a prerelease There is no stable v2.0.0 of hugolify-admin yet, only prerelease tags. Migrating to the theme v2 therefore means running a prerelease admin. If your project cannot take that, stay on v1 for now — theme and admin both. See Hugolify Admin v2 GitHub template hugolify-template The GitHub template still ships v1 (hugolify-theme v1.28.0, hugolify-admin v1.0.0). If you start a new project from it today, apply this guide to move it to v2. Staying on v1 The v1 documentation remains available and is no longer updated. Browse the v1 documentation --- # Modules Source: https://www.hugolify.io/docs/getting-started/modules/ List of Hugolify modules. These Hugo modules allow you to structure the data correctly to have a dedicated CMS and a display corresponding to the type of content. Sections Case studies: hugolify-theme-casestudies Docs: hugolify-theme-docs Events: hugolify-theme-events Expertises: hugolify-theme-expertises Jobs: hugolify-theme-jobs Pages: in core theme Persons: hugolify-theme-persons Places: hugolify-theme-places Posts: hugolify-theme-posts Products: hugolify-theme-products Projects: hugolify-theme-projects Publications: hugolify-theme-publications Real estates: hugolify-theme-realestates Services: hugolify-theme-services Taxonomies Authors (posts): hugolify-theme-posts-authors Categories (posts): hugolify-theme-posts-categories Categories (products): hugolify-theme-products-categories Categories (publications): hugolify-theme-publications-categories Categories (realestates): hugolify-theme-realestates-categories Categories (services): hugolify-theme-services-categories Expertises (persons): hugolify-theme-persons-expertises Persons (expertises): hugolify-theme-expertises-persons Persons (publications): hugolify-theme-publications-persons Persons (realestates): hugolify-theme-realestates-persons Persons (services): hugolify-theme-services-persons Places (persons): hugolify-theme-persons-places Sellers (realestates): hugolify-theme-realestates-sellers Statutes (persons): hugolify-theme-persons-statutes Tags (posts): hugolify-theme-posts-tags Tags (projects): hugolify-theme-projects-tags Types (projects): hugolify-theme-projects-types How to use Check setup page to how to use them. --- # Prerequisites Source: https://www.hugolify.io/docs/getting-started/prerequisites/ Required to knows Git https://git-scm.com/ Go https://go.dev/ Hugo Minimum version 0.141 Example in macOS with brew brew install hugo Check full documentation --- # PurgeCSS Source: https://www.hugolify.io/docs/getting-started/purgecss/ To remove all unused CSS from Bootstrap and Hugolify, we use PurgeCSS to clean it. Setup /config/default/hugo.yaml build: buildStats: disableClasses: false disableIDs: true disableTags: false enable: true Configuration hugolify-theme-bootstrap Documentations https://gohugo.io/hugo-pipes/postprocess/ https://purgecss.com/guides/hugo.html --- # Search Source: https://www.hugolify.io/docs/getting-started/search/ Use Pagefind search Setup Params /config/default/params.yaml search: enable: false # Set true to enable search layout: raw # Also modal or drawer filter: false # Set true to add filters by type sort: false Command Use specific command to build and index yarn build:search PostCSS safelist: { deep: [/^pagefind-ui/] } Documentation A complete documentation of how to use Pagefind. See documentation --- # Setup Source: https://www.hugolify.io/docs/getting-started/setup/ How to add content and modules. Modules Edit config file /config/_default/module.yaml Required modules imports: # Core theme - path: github.com/hugolify/hugolify-theme/v2 # Styling layer - path: github.com/hugolify/hugolify-theme-bootstrap # Headless CMS - path: github.com/hugolify/hugolify-admin/v2 Since v2, hugolify-theme is the agnostic core. It provides templates, functions, layouts and vendors JS. It requires a styling module to supply variables, vendors, and framework-specific styles. The default is hugolify-theme-bootstrap. See Design customization for alternatives. In v1, Bootstrap CSS and JS were bundled directly inside hugolify-theme. Add modules Adds modules according to your needs. Example 1 In this example, I have a website with a blog and portfolio to show my projects. imports: # Content - path: github.com/hugolify/hugolify-theme-projects - path: github.com/hugolify/hugolify-theme-posts-categories/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 # Core theme - path: github.com/hugolify/hugolify-theme/v2 # Styling layer - path: github.com/hugolify/hugolify-theme-bootstrap # CMS - path: github.com/hugolify/hugolify-admin/v2 Example 2 In this example, I have a website for to propose services and I would like to show my press publications. imports: # Content - path: github.com/hugolify/hugolify-theme-services - path: github.com/hugolify/hugolify-theme-publications/v2 # Core theme - path: github.com/hugolify/hugolify-theme/v2 # Styling layer - path: github.com/hugolify/hugolify-theme-bootstrap # CMS - path: github.com/hugolify/hugolify-admin/v2 Content Use your Headless CMS to add content in your website or add it directly in the content directory. /content/ --- # Case studies Source: https://www.hugolify.io/docs/sections/casestudies/ Present case studies with blocks of content. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme casestudies Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-casestudies - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer --- # Docs Source: https://www.hugolify.io/docs/sections/docs/ Nested documentations pages. Modules required Hugolify theme Hugolify theme docs Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-docs/v2 - path: github.com/hugolify/hugolify-theme/v2 Params /config/_default/params.yaml docs: thumbnail: desktop: '38x38' desktop_large: '100x100' mobile: '38x38' scrollsnap: '38x38' Files HTML partials SASS Files Single page List page Item component Items component CMS Hugolify Admin Available --- # Events Source: https://www.hugolify.io/docs/sections/events/ Page for an event. Beta Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme events Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-events - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Categories Persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-events-categories - path: github.com/hugolify/hugolify-theme-events - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component CMS Hugolify Admin (Multiple CMS) Available --- # Expertises Source: https://www.hugolify.io/docs/sections/expertises/ Skills of a firm or a person. Modules required Hugolify theme Hugolify theme expertises Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Jobs Source: https://www.hugolify.io/docs/sections/jobs/ Job advertisement. Modules required Hugolify theme Hugolify theme jobs Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Categories Expertises Places Persons Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs-categories/v2 - path: github.com/hugolify/hugolify-theme-jobs-expertises/v2 - path: github.com/hugolify/hugolify-theme-jobs-places/v2 - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme-places/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component CMS Hugolify Admin (Multiple CMS) Available Example Demo visual renderer --- # Pages Source: https://www.hugolify.io/docs/sections/pages/ Nested pages with blocks of content. Examples Demo visual renderer Demo content file on Github Modules required Hugolify theme Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available --- # Persons Source: https://www.hugolify.io/docs/sections/persons/ Authors, concerned people and persons. Modules required Hugolify theme Hugolify theme persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Expertises Places Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-persons-expertises/v2 - path: github.com/hugolify/hugolify-theme-persons-places/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme-places/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer --- # Places Source: https://www.hugolify.io/docs/sections/places/ Places of your firm. Modules required Hugolify theme Hugolify theme places Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-places/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available --- # Posts Source: https://www.hugolify.io/docs/sections/posts/ News about your business. Modules required Hugolify theme Hugolify theme posts Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Authors Categories Expertises Tags Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts-authors/v2 - path: github.com/hugolify/hugolify-theme-posts-categories/v2 - path: github.com/hugolify/hugolify-theme-posts-tags/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer --- # Products Source: https://www.hugolify.io/docs/sections/products/ Description, price, variants. Modules required Hugolify theme Hugolify theme products Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-products/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Categories Tags Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-products-categories/v2 - path: github.com/hugolify/hugolify-theme-products-tags/v2 - path: github.com/hugolify/hugolify-theme-products/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer --- # Projects Source: https://www.hugolify.io/docs/sections/projects/ Your projects with image list and data list. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Example Demo visual renderer Modules required Hugolify theme Hugolify theme projects Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-projects - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Tags Types Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-projects-tags - path: github.com/hugolify/hugolify-theme-projects-types - path: github.com/hugolify/hugolify-theme-projects - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available --- # Publications Source: https://www.hugolify.io/docs/sections/publications/ Archiving of press releases. Modules required Hugolify theme Hugolify theme publications Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-publications/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Categories Expertises Persons Setup with multiple taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-publications-categories/v2 - path: github.com/hugolify/hugolify-theme-publications-expertises/v2 - path: github.com/hugolify/hugolify-theme-publications-persons/v2 - path: github.com/hugolify/hugolify-theme-publications/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available Example Demo visual renderer --- # Real estates Source: https://www.hugolify.io/docs/sections/realestates/ Ads, auctions Modules required Hugolify theme Hugolify theme realestates Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-realestates/v2 - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Persons Setup with taxonomies example /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-realestates-persons/v2 - path: github.com/hugolify/hugolify-theme-realestates/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available --- # Services Source: https://www.hugolify.io/docs/sections/services/ Service of your company or person. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme services Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-services - path: github.com/hugolify/hugolify-theme/v2 Taxonomies Categories Persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-services-categories - path: github.com/hugolify/hugolify-theme-services - path: github.com/hugolify/hugolify-theme/v2 Files HTML partials SASS Files Single page List page Item component Items component Decap CMS file CMS Hugolify Admin Available --- # Alert block Source: https://www.hugolify.io/docs/shortcodes/alert-block/ Displays an alert block with different state in your body markdown. Example Markdown usage {{< alert-block title="Tempus vitae" state="danger" >}} Lorem {{< blank_link link="https://www.hugolify.io" text="ipsum" >}} dolor sit amet, consectetur adipiscing elit. * In condimentum facilisis gravida. * Nam diam ipsum, tempus vitae [posuere](https://www.hugolify.io). * mattis non lacus. {{< /alert-block >}} HTML rendered <div class="alert alert-danger"> <h4 class="alert-heading">Tempus vitae</h4> <p>Lorem <a href="https://www.hugolify.io" target="_blank">ipsum</a> dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>In condimentum facilisis gravida.</li> <li>Nam diam ipsum, tempus vitae <a href="https://www.hugolify.io">posuere</a>.</li> <li>mattis non lacus.</li> </ul> </div> Visual renderer Tempus vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere. mattis non lacus. Datas Inner: "" # markdown title: "" # string state: [ "danger", "dark", "info", "light", "primary", "secondary", "success", "warning", ] # select Params /config/_default/hugo.yaml markup: goldmark: renderer: unsafe: true CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Boostrap component --- # Alert Source: https://www.hugolify.io/docs/shortcodes/alert/ Displays an alert with different state in your body markdown. Example Markdown usage {{< alert text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus." state="danger" >}} HTML rendered <div class="alert alert-danger"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. </p> </div> Visual renderer Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. Datas text: "" # string state: [ "danger", "dark", "info", "light", "primary", "secondary", "success", "warning", ] # select CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Boostrap component --- # Badge Source: https://www.hugolify.io/docs/shortcodes/badge/ Displays a badge with different state in your body markdown. Example Markdown usage {{< badge text="Lorem ipsum" state="warning" >}} HTML rendered <span class="badge badge-warning">Lorem</span> Visual renderer Lorem ipsum Datas text: "" # string state: [ "danger", "dark", "info", "light", "primary", "secondary", "success", "warning", ] # select CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Boostrap component --- # Blank link Source: https://www.hugolify.io/docs/shortcodes/blank_link/ Displays a blank target link in your body markdown. Example Markdown usage {{< blank_link link="https://www.hugolify.io/" text="Link with target blank" >}} HTML rendered <a href="https://www.hugolify.io/" target="_blank" rel="noreferrer noopener" title="« Link with target blank » - external link" >Link with target blank</a > Visual renderer Link with target blank Datas link: "" # string text: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Shortcode file — hugolify-decap-cms --- # Blockquote Source: https://www.hugolify.io/docs/shortcodes/blockquote/ Displays a blockquote in your body markdown. Example Markdown usage {{< blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus." title="John Doe" text="Founder" image="https://res.cloudinary.com/uncinq/image/upload/v1758205367/sebastien-moulene_ft0yg7.jpg" >}} HTML rendered <figure class="quote"> <blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. </p> </blockquote> <figcaption> <picture> <source srcset="…" type="image/webp" media="(min-width: 577px)" /> <source srcset="…, … 2x, … 3x" type="image/webp" media="(max-width: 576px)" /> <source srcset="…, … 2x, … 3x" type="image/jpg" media="(max-width: 576px)" /> <img src="…" alt="" width="50" height="50" loading="lazy" decoding="async" /> </picture> <div> <cite>John Doe</cite><br /> Founder </div> </figcaption> </figure> Visual renderer Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. John Doe Founder Datas quote: "" # markdown title: "" # string text: "" # string image: "" # image Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Bootstrap blockquote --- # Button Source: https://www.hugolify.io/docs/shortcodes/button/ Displays a button link in your body markdown. Example Markdown usage {{< button text="This is a button" url="https://www.hugolify.io/" blank="true" >}} HTML rendered <a href="https://www.hugolify.io/" class="btn btn-primary" target="_blank" rel="noreferrer noopener" title="« This is a button » - external link" >This is a button</a > Visual renderer This is a button Datas text: "" # string url: "" # string blank: false # boolean class: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Shortcode file — hugolify-decap-cms --- # Dailymotion Source: https://www.hugolify.io/docs/shortcodes/dailymotion/ Displays a dailymotion embed. Example Markdown usage {{< dailymotion 2656646242 >}} HTML rendered <iframe loading="lazy" src="https://geo.dailymotion.com/player.html?video=x9t0c4w" allowfullscreen></iframe> Visual renderer Datas id: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Details Source: https://www.hugolify.io/docs/shortcodes/details/ Displays a details HTML markup in your body markdown. Example Markdown usage {{< details summary="This is a question" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. {{< /details >}} HTML rendered <details> <summary>This is a question</summary> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. </div> </details> Visual renderer This is a question Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. Datas name: "" # string title: "" # string summary: "" # string contents: "" # markdown CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Figure Source: https://www.hugolify.io/docs/shortcodes/figure/ Displays a responsive image with legend and credit. Example 1 Markdown usage {{< figure src="https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg" alt="" legend="Lorem ipsum" credit="Unsplash" >}} HTML rendered <figure> <picture> <source srcset="" type="image/webp" media="(min-width: 577px)" /> <source srcset="" type="image/webp" media="(max-width: 576px)" /> <source srcset="" type="image/jpg" media="(max-width: 576px)" /> <img src="https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg" alt="" width="" loading="lazy" height="" decoding="async" /> </picture> <figcaption> <p>Lorem ipsum</p> <p class="credit">Unsplash</p> </figcaption> </figure> Visual renderer Lorem ipsum Unsplash Example 2 Markdown usage {{< figure src="https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png" alt="Screensot of Hugolify admin with Decap CMS" legend="Screenshot" screenshot="true" >}} HTML rendered <div class="screenshot"> <span></span> <figure> <picture> <source srcset="" type="image/webp" media="(min-width: 577px)" /> <source srcset="" type="image/webp" media="(max-width: 576px)" /> <source srcset="" type="image/jpg" media="(max-width: 576px)" /> <img src="https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png" alt="Screensot of Hugolify admin with Decap CMS" width="" loading="lazy" height="" decoding="async" /> </picture> <figcaption> <p>Screenshot</p> </figcaption> </figure> </div> Visual renderer Screenshot Datas src: "" # image alt: "" # string legend: "" # string (or caption) credit: "" # markdown screenshot: false # boolean (set true if you want add a fake browser around your picture and linear filter compression) class: "" # string link: "" # string target: "" # string rel: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin Decap CMS file — hugolify-decap-cms --- # Map Source: https://www.hugolify.io/docs/shortcodes/map/ Displays a map with one or multiples markers in your body markdown. Example Markdown usage {{< map markers=`{"coordinates":[44.8425666,-0.5737107]},{"coordinates":[45.8425666,1.5937107]},{"coordinates":[46.8425666,-0.5737107]}` >}} HTML rendered <div class="map js-map" data-markers="[{&quot;coordinates&quot;:[44.8425666,-0.5737107]},{&quot;coordinates&quot;:[45.8425666,1.5937107]},{&quot;coordinates&quot;:[46.8425666,-0.5737107]}]" ></div> Visual renderer Datas markers: "" # object zoom: "" # [1…20] if only one marker CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin JS file — hugolify-theme --- # QR Source: https://www.hugolify.io/docs/shortcodes/qr/ Displays a QR code image. Example Markdown usage {{< qr text="https://www.hugolify.io" >}} HTML rendered <img src="/qr_6cbabfe65842f919.png" width="132" height="132"> Visual renderer Datas text: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Not available Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode documentation — Hugo Shortcode file — Hugo Shortcode fields file — hugolify-admin --- # Span lang Source: https://www.hugolify.io/docs/shortcodes/span_lang/ Displays a span HTML with lang attribute to specifi another language. In accessibility, it is necessary to identify words corresponding to a language other than the content of the page. Example Markdown usage {{< span_lang text="English text" lang="en" >}} HTML rendered <span lang="en">English text</span> Visual renderer Lorem ipsum Datas text: "" # string lang: "" # string (e.g: de) CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related links Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Twitch Source: https://www.hugolify.io/docs/shortcodes/twitch/ Displays a twitch embed. Example Markdown usage {{< twitch 2656646242 >}} HTML rendered <iframe loading="lazy" src="https://player.twitch.tv/?channel=2656646242" allowfullscreen></iframe> Visual renderer Datas id: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Video Source: https://www.hugolify.io/docs/shortcodes/video/ Displays a video with legend and credit. Example Markdown usage {{< video mp4="/videos/lawyerify-international.mp4" webm="/videos/lawyerify-international.webm" controls=true screenshot=true legend="Lorem ipsum" credit="Lawyerify" >}} HTML rendered <figure> <video muted playsinline controls> <source src="/videos/lawyerify-international.webm" type="video/webm"> <source src="/videos/lawyerify-international.mp4" type="video/mp4"> </video> <figcaption> <p>Lorem ipsum</p> <p class="credit">Lawyerify</p> </figcaption> </figure> Visual renderer Lorem ipsum Lawyerify Datas mp4: "" # string webm: "" # string controls: false # boolean autoplay: false # boolean loop: false # boolean legend: "" # string credit: "" # markdown screenshot: false # boolean (set true if you want add a fake browser around your picture) CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Vimeo Source: https://www.hugolify.io/docs/shortcodes/vimeo/ Displays a vimeo embed. Example Markdown usage {{< vimeo 146022717 vimeo "iframe title" >}} HTML rendered <div class="vimeo"> <iframe loading="lazy" title="iframe title" src="https://player.vimeo.com/video/JP8HNPKQWfI?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" allowfullscreen></iframe> </div> Visual renderer Datas id: "" # string class: "" # string title: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode documentation — Hugo Shortcode file — Hugo Shortcode file — hugolify-theme Shortcode fields file — hugolify-admin --- # Youtube Source: https://www.hugolify.io/docs/shortcodes/youtube/ Displays a youtube embed. Example Markdown usage {{< youtube id="JP8HNPKQWfI" title="Proin maximus" class="youtube" >}} HTML rendered <div class="youtube"> <iframe loading="lazy" src="https://www.youtube.com/embed/JP8HNPKQWfI?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" allowfullscreen></iframe> </div> Visual renderer Datas id: "" # string CMS availability Hugolify Admin Hugolify Admin CloudCannon Available Since v1.0.0 Decap CMS Available Netlify CMS Available Pages CMS Not available Sveltia CMS Available Since v1.0.0 Tina CMS Not available Related link Shortcode documentation — Hugo Shortcode file — Hugo Shortcode fields file — hugolify-theme --- # Showcase Source: https://www.hugolify.io/docs/showcase/ Some websites work with Hugolify. Name URL Repository Architectify website repository Biver website Eco-conception site Web website repository FJ Habitat website Guilhem Granier website repository Hugolify website repository Lawyerify website repository Le 52 website repository Le Noailles website repository Medicalify website repository Miriam Lasserre website repository Nicolas Gaillot website Quasar website repository Realestatify website repository Sébastien Moulène website repository Tdesign Architecture website repository Un Cinq website repository Un mois au Japon website repository Villagers website repository Venn Capital website repository --- # Events categories Source: https://www.hugolify.io/docs/taxonomies/events-categories/ Taxonomy categories for events section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme events Hugolify theme events categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-events-categories - path: github.com/hugolify/hugolify-theme-events - path: github.com/hugolify/hugolify-theme/v2 Related section Events CMS Hugolify Admin Available --- # Events persons Source: https://www.hugolify.io/docs/taxonomies/events-persons/ Taxonomy persons for events section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme events Hugolify theme events persons Hugolify theme persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-events-persons - path: github.com/hugolify/hugolify-theme-events - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Events CMS Hugolify Admin Available --- # Jobs categories Source: https://www.hugolify.io/docs/taxonomies/jobs-categories/ Taxonomy categories for jobs section. Modules required Hugolify theme Hugolify theme jobs Hugolify theme jobs categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs-categories/v2 - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Jobs CMS Hugolify Admin (Multiple CMS) Available --- # Jobs expertises Source: https://www.hugolify.io/docs/taxonomies/jobs-expertises/ Taxonomy expertises for jobs section. Modules required Hugolify theme Hugolify theme expertises Hugolify theme jobs Hugolify theme jobs expertises Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs-expertises/v2 - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Expertises Jobs CMS Hugolify Admin (Multiple CMS) Available Example Demo visual renderer --- # Jobs places Source: https://www.hugolify.io/docs/taxonomies/jobs-places/ Taxonomy places for jobs section. Modules required Hugolify theme Hugolify theme places Hugolify theme jobs Hugolify theme jobs places Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs-places/v2 - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme-places/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Jobs Places CMS Hugolify Admin (Multiple CMS) Available Example Demo visual renderer --- # Jobs tags Source: https://www.hugolify.io/docs/taxonomies/jobs-tags/ Taxonomy tags for jobs section. Modules required Hugolify theme Hugolify theme jobs Hugolify theme jobs tags Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-jobs-tags/v2 - path: github.com/hugolify/hugolify-theme-jobs/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Jobs CMS Hugolify Admin (Multiple CMS) Available Example Demo visual renderer --- # Persons expertises Source: https://www.hugolify.io/docs/taxonomies/persons-expertises/ Taxonomy expertises for persons section. Modules required Hugolify theme Hugolify theme expertises Hugolify theme persons Hugolify theme persons expertises Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-persons-expertises/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Expertises Persons CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Persons places Source: https://www.hugolify.io/docs/taxonomies/persons-places/ Taxonomy places for persons section. Modules required Hugolify theme Hugolify theme places Hugolify theme persons Hugolify theme persons places Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-persons-places/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme-places/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Persons Places CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Persons statutes Source: https://www.hugolify.io/docs/taxonomies/persons-statutes/ Taxonomy statutes for persons section. Modules required Hugolify theme Hugolify theme persons Hugolify theme persons statutes Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-persons-statutes/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Persons CMS Hugolify Admin Available --- # Posts authors Source: https://www.hugolify.io/docs/taxonomies/posts-authors/ Taxonomy authors for posts section. Modules required Hugolify theme Hugolify theme persons Hugolify theme posts Hugolify theme posts authors Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts-authors/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Persons Posts CMS Hugolify Admin Available Example Demo visual renderer --- # Posts categories Source: https://www.hugolify.io/docs/taxonomies/posts-categories/ Taxonomy categories for posts section. Modules required Hugolify theme Hugolify theme posts Hugolify theme posts categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts-categories/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Posts CMS Hugolify Admin Available Example Demo visual renderer --- # Posts expertises Source: https://www.hugolify.io/docs/taxonomies/posts-expertises/ Taxonomy expertises for posts section. Modules required Hugolify theme Hugolify theme expertises Hugolify theme posts Hugolify theme posts expertises Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts-expertises/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Expertises Posts CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Posts tags Source: https://www.hugolify.io/docs/taxonomies/posts-tags/ Taxonomy tags for posts section. Modules required Hugolify theme Hugolify theme posts Hugolify theme posts tags Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-posts-tags/v2 - path: github.com/hugolify/hugolify-theme-posts/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Posts CMS Hugolify Admin Available Example Demo visual renderer --- # Products categories Source: https://www.hugolify.io/docs/taxonomies/products-categories/ Taxonomy categories for products section. Modules required Hugolify theme Hugolify theme products Hugolify theme products categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-products-categories/v2 - path: github.com/hugolify/hugolify-theme-products/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Products CMS Hugolify Admin Available Example Demo visual renderer --- # Products tags Source: https://www.hugolify.io/docs/taxonomies/products-tags/ Taxonomy tags for products section. Modules required Hugolify theme Hugolify theme products Hugolify theme products tags Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-products-tags/v2 - path: github.com/hugolify/hugolify-theme-products/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Products CMS Hugolify Admin Available --- # Projects tags Source: https://www.hugolify.io/docs/taxonomies/projects-tags/ Taxonomy tags for projects section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme projects Hugolify theme projects tags Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-projects-tags - path: github.com/hugolify/hugolify-theme-projects - path: github.com/hugolify/hugolify-theme/v2 Related section Projects CMS Hugolify Admin Available Example Demo visual renderer --- # Projects types Source: https://www.hugolify.io/docs/taxonomies/projects-types/ Taxonomy types for projects section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme projects Hugolify theme projects types Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-projects-types - path: github.com/hugolify/hugolify-theme-projects - path: github.com/hugolify/hugolify-theme/v2 Related section Projects CMS Hugolify Admin Available Example Demo visual renderer --- # Publications categories Source: https://www.hugolify.io/docs/taxonomies/publications-categories/ Taxonomy categories for publications section. Modules required Hugolify theme Hugolify theme publications Hugolify theme publications categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-publications-categories/v2 - path: github.com/hugolify/hugolify-theme-publications/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Publications CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Publications expertises Source: https://www.hugolify.io/docs/taxonomies/publications-expertises/ Taxonomy expertises for publications section. Modules required Hugolify theme Hugolify theme expertises Hugolify theme publications Hugolify theme publications expertises Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-publications-expertises/v2 - path: github.com/hugolify/hugolify-theme-publications/v2 - path: github.com/hugolify/hugolify-theme-expertises/v2 - path: github.com/hugolify/hugolify-theme/v2 Related sections Expertises Publications CMS Hugolify Admin Available Example Demo visual renderer (on lawyerify in french) --- # Publications persons Source: https://www.hugolify.io/docs/taxonomies/publications-persons/ Taxonomy persons for publications section. Modules required Hugolify theme Hugolify theme publications Hugolify theme publications persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-publications-persons/v2 - path: github.com/hugolify/hugolify-theme-publications/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Persons Publications CMS Hugolify Admin Available Example Demo visual renderer --- # Realestates persons Source: https://www.hugolify.io/docs/taxonomies/realestates-persons/ Taxonomy persons for realestates section. Modules required Hugolify theme Hugolify theme realestates Hugolify theme realestates persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-realestates-persons/v2 - path: github.com/hugolify/hugolify-theme-realestates/v2 - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Persons Realestates CMS Hugolify Admin Available Example Demo visual renderer (on realestatify in french) --- # Services categories Source: https://www.hugolify.io/docs/taxonomies/services-categories/ Taxonomy categories for services section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme services Hugolify theme services categories Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-services-categories - path: github.com/hugolify/hugolify-theme-services - path: github.com/hugolify/hugolify-theme/v2 Related section Services CMS Hugolify Admin Available --- # Services persons Source: https://www.hugolify.io/docs/taxonomies/services-persons/ Taxonomy persons for services section. Not available in Hugolify v2 This module has not been migrated to v2 yet — no /v2 module path is published for it. It stays available for Hugolify v1. Modules required Hugolify theme Hugolify theme services Hugolify theme services persons Hugolify theme persons Setup /config/_default/module.yaml imports: - path: github.com/hugolify/hugolify-theme-services-persons - path: github.com/hugolify/hugolify-theme-services - path: github.com/hugolify/hugolify-theme-persons/v2 - path: github.com/hugolify/hugolify-theme/v2 Related section Services CMS Hugolify Admin Available --- # How to create a blog with Hugo and Decap CMS using Hugolify Source: https://www.hugolify.io/tutorials/how-to-create-a-blog-with-hugo-and-decap-cms-using-hugolify/ This tutorial guides you through creating a blog featuring categories and tags using Hugolify. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Use Hugolify template - See Hugolify documentation Choose the necessary Hugolify modules /config/_default/module.yaml Add required modules imports: # Add hugolify-theme-bootstrap too for hugolify-theme v2 - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Add posts modules (section and taxonomies) - path: github.com/hugolify/hugolify-theme-posts-tags - path: github.com/hugolify/hugolify-theme-posts-categories - path: github.com/hugolify/hugolify-theme-posts You should be to have imports: # posts modules - path: github.com/hugolify/hugolify-theme-posts-tags - path: github.com/hugolify/hugolify-theme-posts-categories - path: github.com/hugolify/hugolify-theme-posts # Required modules - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin The section module (hugolify-theme-posts) should always be listed after taxonomies in this configuration. Required module (hugolify-theme and hugolify-admin) need be always at the end of list. Launch project Install packages yarn To launch Hugo project with livereload. yarn watch And in a second terminal, launch Decap CMS in localhost. yarn cms Admin Edit all your content in http://localhost:1313/admin/. Hugolify admin with Decap CMS Create content Add new categories (localhost link) Add new tags (localhost link) Add new posts (localhost link) Your first post Create your first post Front See locally your website in http://localhost:1313/. Your local website Customization Add an available Hugolify theme How to customize design How to customize admin fields Hosting Host your website on Netlify or others hosters. Repository demo Check hugolify-demo-blog repository --- # How to create a multisite with Hugo and Decap CMS using Hugolify on Netlify Source: https://www.hugolify.io/tutorials/how-to-create-a-multisite-with-hugo-and-decap-cms-using-hugolify/ With common and different content. Introduction We’ll be creating two websites, each with shared and different content, on a single Hugo instance and hosted by Netlify. They’ll be managed from a single location via Decap CMS. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Use Hugolify template - See Hugolify documentation Edit and create specific config files We need to create a config file for each websites. Remove all config from module /config/_default/module.yaml Site A config Create a specific site_a config file: /config/_default/site_a.yaml title: Site A publishDir: public/site_a module: imports: # Content # -> Hugolify content types and taxonomies available https://www.hugolify.io/docs/sections/ - path: github.com/hugolify/hugolify-theme-posts # Core theme # Add hugolify-theme-bootstrap too for hugolify-theme v2 - path: github.com/hugolify/hugolify-theme # Admin - path: github.com/hugolify/hugolify-admin # Get specific contents mounts: # Index posts file - source: 'content/site_a/posts.md' target: 'content/posts/_index.md' # Posts - source: 'content/posts' target: 'content/posts' # Sitemap - source: 'content/sitemap' target: 'content/sitemap' # Content - source: 'content/site_a' target: 'content' # Data - source: 'data/site_a' target: 'data' # SASS Variables - source: 'assets/sass/abstracts/_variables-site-a.sass' target: 'assets/sass/abstracts/_variables-site.sass' Now add specific site params in same file: # Set site param params: _merge: deep site: site_a logo: header: '/assets/images/logo_site-a.svg' footer: '/assets/images/logo_site-a.svg' share: '/assets/images/share_site-a.png' Now add Hugolify admin params in same file and same params: # Admin admin: # Disable nested pages nested: depth: 1 collections: # Disable collections originals indexes: enable: false pages: enable: false # Enable all sites site_a: enable: true site_b: enable: true Add specific config production file: /config/production/site_a.yaml baseURL: https://www.site_a.com/ Site B config Create a specific site_b config file: /config/_default/site_b.yaml title: Site B publishDir: public/site_b module: imports: # Content # -> Hugolify content types and taxonomies available https://www.hugolify.io/docs/sections/ - path: github.com/hugolify/hugolify-theme-posts # Core theme - path: github.com/hugolify/hugolify-theme # Get specific contents mounts: # Index posts file - source: 'content/site_b/posts.md' target: 'content/posts/_index.md' # Posts - source: 'content/posts' target: 'content/posts' # Sitemap - source: 'content/sitemap' target: 'content/sitemap' # Content - source: 'content/site_b' target: 'content' # Data - source: 'data/site_b' target: 'data' # SASS Variables - source: 'assets/sass/abstracts/_variables-site-b.sass' target: 'assets/sass/abstracts/_variables-site.sass' Add specific config production file: /config/production/site_b.yaml baseURL: https://www.site_b.com/ Prepare your directories SASS assets/ └── sass/ └── abstracts/ └── _variables-site-a.sass └── _variables-site-b.sass Content Common and specific content: content/ ├── posts/ ├── site_a/ │ └── _index.md │ ├── about/ │ │ └── _index.md │ ├── legal-mentions/ │ │ └── _index.md │ ├── posts/ │ │ └── _index.md │ └── privacy-policy/ │ └── _index.md ├── site_b/ │ └── _index.md │ ├── about/ │ │ └── _index.md │ ├── legal-mentions/ │ │ └── _index.md │ ├── posts/ │ │ └── _index.md │ └── privacy-policy/ │ └── _index.md └── sitemap Data Specific menus by websites: data/ ├── site_a/ │ ├── banner.yml │ ├── footer.yml │ └── menu/ │ └── legal.yml │ └── primary.yml │ └── secondary.yml │ └── social.yml └── site_b/ ├── banner.yml ├── footer.yml └── menu/ └── legal.yml └── primary.yml └── secondary.yml └── social.yml Static Example: your website specific image share static/ └── assets/ └── images/ └── logo_site-a.svg └── logo_site-b.svg └── share_site-a.png └── share_site-b.png Create specific commands { "scripts": { "build": "hugo --noChmod --gc --minify", "build-site_a": "hugo --config config/_default/site_a.yaml,config/production/site_a.yaml --noChmod --gc --minify", "build-site_b": "hugo --config config/_default/site_b.yaml,config/production/site_b.yaml --noChmod --gc --minify", "watch-site_a": "hugo server --config config/_default/site_a.yaml", "watch-site_b": "hugo server --config config/_default/site_b.yaml", } } Launch project Install packages yarn Site A To launch Hugo project with livereload. yarn watch-site_a Homepage of Site A And in a second terminal, launch Decap CMS in localhost. yarn cms Site B To launch Hugo project with livereload. yarn watch-site_b Homepage of Site A Admin Edit all your content in http://localhost:1313/admin/. Hugolify admin with Decap CMS Create content Add new common posts (localhost link) Add new site A page (localhost link) Add new site B page (localhost link) Your first posts Create your first posts Customization Add an available Hugolify theme How to customize design How to customize admin fields Hosting Host your website on Netlify. Github repository Check hugolify-demo-multisite repository --- # How to create a portfolio with Hugo and Decap CMS using Hugolify Source: https://www.hugolify.io/tutorials/how-to-create-a-portfolio-with-hugo-and-decap-cms-using-hugolify/ This tutorial guides you through creating a portfolio featuring categories using Hugolify. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Use Hugolify template - See Hugolify documentation Choose the necessary Hugolify modules /config/_default/module.yaml Add required modules imports: # Add hugolify-theme-bootstrap too for hugolify-theme v2 - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Add projects modules (section and taxonomies) - path: github.com/hugolify/hugolify-theme-projects-types - path: github.com/hugolify/hugolify-theme-projects You should be to have imports: # Projects modules - path: github.com/hugolify/hugolify-theme-projects-types - path: github.com/hugolify/hugolify-theme-projects # Required modules - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin The section module (hugolify-theme-projects) should always be listed after taxonomies in this configuration. Required module (hugolify-theme and hugolify-admin) need be always at the end of list. Assets If you want to host your images through a cloud service like Cloudinary or Uploadcare, here’s what to do. Cloudinary /config/_default/params.yaml admin: media: cloud: name: cloudinary cloud_name: # write your cloudinary cloud name api_key: # write your cloudinary api key Uploadcare /config/_default/params.yaml admin: media: cloud: name: uploadcare publicKey: # write your uploadcare public api key Launch project Install packages yarn To launch Hugo project with livereload. yarn watch And in a second terminal, launch Decap CMS in localhost. yarn cms Admin Edit all your content in http://localhost:1313/admin/. Hugolify admin with Decap CMS Create content Add new types (localhost link) Add new projects (localhost link) Your first project Create your first project Front See locally your website in http://localhost:1313/. Your local website Customization Add an available Hugolify theme How to customize design How to customize admin fields Hosting Host your website on Netlify or others hosters. Github repository Check hugolify-demo-portfolio repository --- # How to create a Website with Hugo and Pages CMS using Hugolify Source: https://www.hugolify.io/tutorials/how-to-create-a-website-with-hugo-and-pages-cms-using-hugolify/ This tutorial guides you through creating a Website editable via Pages CMS. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Use Hugolify template - See Hugolify documentation Github account Pages CMS account Choose the necessary Hugolify modules /config/_default/module.yaml Add required modules imports: # Add hugolify-theme-bootstrap too for hugolify-theme v2 - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Add content type modules (optional) Feel free to add some type of content Hugolify modules (sections and taxonomies). Example imports: # Content type modules examples - path: github.com/hugolify/hugolify-theme-posts-authors # taxonomy - path: github.com/hugolify/hugolify-theme-posts-categories # taxonomy - path: github.com/hugolify/hugolify-theme-posts # section - path: github.com/hugolify/hugolify-theme-publications # section - path: github.com/hugolify/hugolify-theme-persons # section # Required modules - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Tutorials How to create a blog featuring categories and tags using Hugolify How to create a portfolio featuring categories using Hugolify Configuration Set Pages CMS /config/_default/params.yaml admin: cms: pagescms # set Pages CMS as CMS for Hugolify More about customizations About Admin About Pages CMS About Collections About Blocks About Fields Get Pages CMS config file Install packages yarn Command to build project and create Pages CMS config file yarn build:config:pagescms To modify the config file, it is advisable to do so via the params because this file is compiled to the build command. Push in Github Config file .pages.yml needs to be in your root repository. Commit and push to Github your changes. Pages CMS Go to https://app.pagescms.org/ Pages CMS, login Pages CMS, home Pages CMS, project Pages CMS, page home Pages CMS, blocks Hosting your project Host your website on Netlify or others hosters. Repository demo Check hugolify-demo-pagescms repository --- # How to create a Website with Hugo and Sveltia CMS using Hugolify Source: https://www.hugolify.io/tutorials/how-to-create-a-website-with-hugo-and-sveltia-cms-using-hugolify/ This tutorial guides you through creating a Website editable via Sveltia CMS. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Use Hugolify template - See Hugolify documentation Choose the necessary Hugolify modules /config/_default/module.yaml Add required modules imports: # Add hugolify-theme-bootstrap too for hugolify-theme v2 - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Add content type modules (optional) Feel free to add some type of content Hugolify modules (sections and taxonomies). Example imports: # Content type modules examples - path: github.com/hugolify/hugolify-theme-posts # section # Required modules - path: github.com/hugolify/hugolify-theme - path: github.com/hugolify/hugolify-admin Tutorials How to create a blog featuring categories and tags using Hugolify How to create a portfolio featuring categories using Hugolify Configuration Set Sveltia CMS /config/_default/params.yaml admin: cms: sveltiacms # set Sveltia CMS as CMS for Hugolify repo: Hugolify/hugolify-demo-sveltiacms # set your repository’s url collections: indexes: enable: false # disable unused collection More about customizations About Admin About Sveltia CMS About Collections About Blocks About Fields Launch project Install packages yarn To launch Hugo project with livereload. yarn watch Admin Edit all your content in http://localhost:1313/admin/. Sveltia CMS, signin page Sveltia CMS, pages list Sveltia CMS, contact page Hosting your project Host your website on Netlify or others hosters. Repository demo Check hugolify-demo-sveltiacms repository --- # How to create your own design system with Hugo and Hugolify Source: https://www.hugolify.io/tutorials/how-to-create-your-own-design-system-using-hugolify/ This tutorial guides you through building a framework-free design system on top of hugolify-theme-design-system, then shipping it as a reusable Hugo module. Introduction hugolify-theme-design-system is the framework-free styling module of Hugolify v2: no Bootstrap, no icon font, nothing but design tokens and vanilla CSS. It is a drop-in replacement for hugolify-theme-bootstrap: the same templates, the same content, a different look. Building your own design system on top of it is not writing CSS from scratch. It is redefining a handful of CSS custom properties and letting them cascade through every component the theme already renders. Change --color-brand once and the buttons, links, badges, active menu items and focus rings follow. This tutorial goes from a fresh v2 project to a design system packaged as its own Hugo module, reusable across several sites. What you will not do You will not fork the module, you will not copy its CSS into your project, and you will not touch a single template. Everything happens in four files that the module leaves empty for you. Prerequisites Git, Go and Hugo installed - See Hugolify documentation Hugo extended >= 0.158.0, required by the styling module A Hugolify v2 project - See the migration guide The template’s hugolify-theme-design-system branch is a ready-to-run v2 project with the module list and the PostCSS config already in place. hugolify-template on its design system branch Install the modules /config/_default/module.yaml imports: # Core theme - path: github.com/hugolify/hugolify-theme/v2 # HTML and Go Template - path: github.com/hugolify/hugolify-theme-design-system # CSS and JS - path: github.com/hugolify/hugolify-theme-icons # Lucide and Simple Icons # Admin - path: github.com/hugolify/hugolify-admin/v2 Icons are a module of their own. The design system ships none: a project without hugolify-theme-icons renders no icon. See Icons. PostCSS and packages The CSS pipeline needs a PostCSS config, at the path the module declares (postcss/design-system). It has to exist in your project: a module cannot provide it. PostCSS setup Then pull the modules and the npm packages they declare: hugo mod get && hugo mod npm pack && yarn install What you are building on The module ships no reset and no token system of its own: it composes four framework-agnostic npm packages (@uncinq/design-tokens, @uncinq/component-tokens, @uncinq/css-base, @uncinq/css-components) and adds the Hugolify layer on top. What matters for the rest of this tutorial is the three-level chain your design system plugs into: primitive/color.css → raw values (oklch…) semantic/color.css → purposeful aliases (--color-brand, --color-danger…) components/button.css → scoped tokens (--btn-color-background, --btn-border-radius…) You will work at the semantic and component levels, almost never on the primitives. And everything lands in a named cascade layer, so an override must be written into the same layer as the rule it replaces. Packages, layers and breakpoints The four files your design system lives in The module ships four empty files, imported last by main.css, in this order: tokens/theme.css → tokens/site.css → theme.css → site.css Create the one you need at the same path in your project: Hugo’s asset priority (project > theme > modules) replaces the empty file with yours. They form two pairs, and what separates them is not their content but where each one is destined to live: File Entry point of Destined to live in assets/css/tokens/theme.css your theme, tokens a Hugo module of your own, shared by several sites assets/css/theme.css your theme, rules a Hugo module of your own, shared by several sites assets/css/tokens/site.css this site, tokens this project, and this project only assets/css/site.css this site, rules this project, and this project only The theme files are the entry points of your design system. They carry the look you intend to reuse: brand colors, typography, radius scale, and the rules that make it recognizable. They are written in the project at first, then moved into a Hugo module of your own, see Ship it as a module. The site files are the entry points of one website. They never become a module. They hold what this project alone needs (a header height for this client, a tweak on this landing page), and they win over the theme module, because the project always beats every module. assets/ └── css/ ├── tokens/ │ ├── theme.css ← your design system, tokens → becomes a module │ └── site.css ← this site only, tokens → stays here ├── theme.css ← your design system, rules → becomes a module └── site.css ← this site only, rules → stays here Which of the two do I write in? Ask yourself what happens on the next site you build. I would want this again → a theme file. This is specific to this client, this campaign, this page → a site file. Building a single site, with no look to share? Use the site files only and never touch the theme ones. Nothing forces you to create a module. Step 1. Brand colors Redefine the semantic aliases, not the primitives. Every component reads --color-brand, --color-accent and their -hover / -muted / -strong variants. /assets/css/tokens/theme.css @layer tokens { :root { --color-brand: oklch(0.53 0.195 22); --color-brand-hover: oklch(0.46 0.19 22); --color-brand-muted: oklch(0.94 0.03 22); --color-brand-strong: oklch(0.3 0.13 22); /* Accent drives links, active states and focus */ --color-accent: var(--color-brand); --color-accent-hover: var(--color-brand-hover); } } That single block repaints the buttons, the badges, the active menu item, the link hover and the focus outline. Why OKLCH Colors are authored in OKLCH , whose lightness is perceptually uniform, so a scale built by moving the L channel stays visually even. Text on brand A brand color light enough to need dark text has one token to flip: @layer tokens { :root { --color-text-on-brand: var(--color-black); } } Step 2. Typography Load your fonts assets/css/base/fonts.css is another empty file the module imports. Declare your faces there. /assets/css/base/fonts.css @font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 100 900; src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations'); } Then point the family tokens at it: /assets/css/tokens/theme.css @layer tokens { :root { --font-family-sans: 'Inter', system-ui, sans-serif; --font-family-heading: var(--font-family-sans); --font-family-text: var(--font-family-sans); } } Heading scale Heading sizes are fluid: each level references a clamp() token, so no media query is involved. To change a heading size, redefine the token, never the selector. @layer tokens { :root { --font-size-heading-01: var(--font-size-fluid-2xl); --font-size-heading-02: var(--font-size-fluid-xl); --font-weight-heading: var(--font-weight-black); --line-height-heading: var(--line-height-none); --text-transform-heading: uppercase; } } The fluid scale runs from --font-size-fluid-2xs to --font-size-fluid-display. Redefine one of those and every level that references it moves together. Step 3. Shape and spacing Two semantic aliases carry the whole radius language: --radius-control for interactive elements, --radius-surface for panels and cards: @layer tokens { :root { --radius-control: var(--radius-pill); --radius-surface: var(--radius-lg); } } Spacing works the same way, through purpose-named aliases rather than raw sizes: @layer tokens { :root { --spacing-section: var(--spacing-fluid-xl); /* vertical rhythm between blocks */ --spacing-card: var(--spacing-md); --gutter: var(--spacing-fluid-sm); /* .container inline padding */ } } Container width The container is capped by breakpoint-specific tokens: @layer tokens { :root { --container-max-width-laptop: var(--size-laptop); --container-max-width-desktop: var(--size-desktop); } } Do not forget the grid params The column, container, gap and gutter site params are a different thing: the Go templates read them to compute the pixel width of images before resizing them, and they style nothing. Change a container token without them and Hugo generates images calibrated for a width the page no longer has. Grid params and image widths Step 4. Component tokens Once the semantic layer is set, most components are already on brand. Component tokens are for the deliberate exceptions. @layer tokens { :root { /* Buttons */ --btn-font-weight: var(--font-weight-bold); --btn-padding-inline: var(--spacing-sm); --btn-text-transform: uppercase; /* Header */ --header-height: 72px; --header-color-background: var(--color-brand); --header-color-link: var(--color-text-on-brand); /* Cards */ --card-color-background: transparent; --card-border-width: var(--border-width-sm); --card-color-border: var(--color-border); /* Hero */ --hero-height: clamp(20rem, 18rem + 8vw, 28rem); --hero-media-brightness: 0.45; } } The naming is mechanical: --{component}-{property}-{sub-property?}-{state?}, with color-{role} for every color: --btn-color-background-hover, never --btn-bg-hover. Full component token reference Step 5. Rules no token covers Check first Two things to check before writing a rule: a token often covers the case (–card-color-background, –hero-height…), and a modifier class often exists (.hero-center, .block-dark, .btn-ghost…). Reach for the token or the markup first. The block and hero classes are listed in UI. When neither does, write the rule into the same layer as the one you are overriding. /assets/css/theme.css @layer components { .card .media img { filter: grayscale(1); transition: filter var(--duration-normal) var(--easing-out); } .card:hover .media img { filter: none; } } Overriding a rule at a breakpoint? Reassign the token inside the media query rather than restyling the component. The @custom-media scale is listed in CSS. Ship it as a module Once the look is worth reusing, move the two theme files into a Hugo module of your own. Nothing about their content changes, only where they live. Create the repository /go.mod module github.com/your-org/your-theme go 1.21 /hugo.yml module: mounts: - source: assets target: assets - source: i18n target: i18n - source: layouts target: layouts - source: static target: static Move your files Only the theme pair moves. The paths inside the module are the very same ones you have been writing in, so this is a git mv, not a rewrite. Not a line of CSS changes. your-theme/ (the module, moves out) your-site/ (the project, stays) └── assets/ └── assets/ └── css/ └── css/ ├── tokens/ ├── tokens/ │ └── theme.css │ └── site.css └── theme.css └── site.css The two site files stay in the project: they are what makes this site different from the next one built on the same theme. Import it first /config/_default/module.yaml imports: # Your design system - path: github.com/your-org/your-theme # Core theme - path: github.com/hugolify/hugolify-theme/v2 - path: github.com/hugolify/hugolify-theme-design-system - path: github.com/hugolify/hugolify-theme-icons # Admin - path: github.com/hugolify/hugolify-admin/v2 Order matters: modules are prioritized in the order they are imported, so your theme must be listed before the design system for its files to win. The project itself always wins over every module, which is why tokens/site.css and site.css stay in the project and override the theme. Each site built on your theme now only carries what is specific to it, in the two site files. Optional: tokens in DTCG JSON CSS custom properties are enough. But if your tokens also have to travel to Figma or Tokens Studio, author them as DTCG JSON and generate the CSS with Style Dictionary . This is how the upstream packages are built. /assets/tokens/theme/semantic/color.json { "color": { "brand": { "default": { "$value": "oklch(0.53 0.195 22)", "$type": "color" }, "hover": { "$value": "oklch(0.46 0.19 22)", "$type": "color" }, "muted": { "$value": "oklch(0.94 0.03 22)", "$type": "color" }, "strong": { "$value": "oklch(0.30 0.13 22)", "$type": "color" } } } } yarn build # style-dictionary → assets/css/tokens/theme/semantic/color.css The generated files are imported by your tokens/theme.css barrel and land in @layer tokens, exactly like a hand-written override. DTCG conventions used by the module Launch project yarn watch See your website in http://localhost:1313/. Build failing on postcss config "postcss/design-system" not found? The file is missing: the module declares the path, and Hugo does not look anywhere else. See Troubleshooting. What the module also gives you Three things you get without building them, each documented on its own page: Dark mode Off by default. css.darkmode: true hands the choice to the OS, and the dark values reassign the semantic color tokens, so your components follow. Dark mode Icons Lucide and Simple Icons , rendered as a CSS mask so they inherit the text color. Styled with --icon-color and --icon-size. Icons JavaScript Vanilla JS only: dialog, dropdown, menu, tooltip, video always on; carousel, map, parallax, search opt-in per site. JavaScript Going further Setup for hugolify-theme-design-system PostCSS CSS: tokens, layers, breakpoints, dark mode JavaScript Icons UI: block and hero classes Demo Explore the design system demo Repository Check hugolify-theme-design-system repository