Getting Started on Hugolify

Prerequisites

Mon, 01 Jan 0001 00:00:00 +0000

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

Install

Mon, 01 Jan 0001 00:00:00 +0000

Use Github template

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

Commands

Mon, 01 Jan 0001 00:00:00 +0000

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

Setup

Mon, 01 Jan 0001 00:00:00 +0000

Modules

Edit config file

/config/_default/module.yaml

Required modules

imports:

# Core theme required
- path: github.com/hugolify/hugolify-theme

# CMS
- path: github.com/hugolify/hugolify-admin

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
- path: github.com/hugolify/hugolify-theme-posts

# Core theme required
- path: github.com/hugolify/hugolify-theme

# CMS
- path: github.com/hugolify/hugolify-admin

Example 2

In this example, I have a website for to propose services and I would like to show my press publications.

Modules

Mon, 01 Jan 0001 00:00:00 +0000

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.

PurgeCSS

Mon, 01 Jan 0001 00:00:00 +0000

Setup

/config/default/hugo.yaml

build:
 buildStats:
 disableClasses: false
 disableIDs: true
 disableTags: false
 enable: true

/postcss.config.js

module.exports = {
 plugins: {
 autoprefixer: {},
 cssnano: {
 preset: "default",
 },
 "@fullhuman/postcss-purgecss": {
 mode: "all",
 content: ["./hugo_stats.json"],
 dynamicAttributes: ["aria-current", "aria-hidden", "role", "type"],
 safelist: {
 standard: [
 "show",
 "showing",
 "hide",
 "fade",
 /-backdrop$/,
 /^is-/,
 /^splide_/, // if your need carousel
 ],
 },
 defaultExtractor: (content) => {
 let els = JSON.parse(content).htmlElements;
 els = els.tags.concat(els.classes);
 return els;
 },
 },
 },
};

Documentations

Cloud

Mon, 01 Jan 0001 00:00:00 +0000

Services available

These services are supported for seamless media management and optimization in cloud-based applications.

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

Cookie banner

Mon, 01 Jan 0001 00:00:00 +0000

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

Mon, 01 Jan 0001 00:00:00 +0000

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

Search

Mon, 01 Jan 0001 00:00:00 +0000

Setup

Params

/config/default/params.yaml

search:
 enable: false # Set true to enable search
 layout: raw # Also modal or offcanvas
 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

Best practices

Mon, 01 Jan 0001 00:00:00 +0000

Bootstrap

Bootstrap in version 5.3 is used to support the theme.

To lighten and make the code more semantic and readable, as well as to facilitate site customizations, @extend of class are preferred.

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

Contributes

Mon, 01 Jan 0001 00:00:00 +0000

Mainteners

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