hugoplate Documentation

To start a new project with Hugoplate, follow these steps in order:

1. Clone or download the repository.
2. Run Project Setup: This custom script creates a new Hugo theme folder, clones the Hugoplate theme into it, and moves the exampleSite folder to the root so you can start the server immediately.
3. Install Dependencies: Install the necessary Node.js packages.
4. Start Development: Run the local development server.

Prerequisites

Ensure your machine has the following installed:

• Hugo Extended v0.144+
• Node.js v22+
• Go v1.24+

Local Build

To generate a static version of your site locally, run:

npm run build

This creates a public folder containing your static assets.

Deployment

• Pre-configured Platforms: The template includes configurations for Netlify, Vercel, GitHub Actions, GitLab CI, and AWS Amplify.
• Manual Hosting: You can copy the contents of the public folder to any hosting provider.

CRITICAL: You must update the baseURL in your hugo.toml file before deploying, otherwise the site will not function correctly.

Hugoplate provides several files for easy customization without modifying core logic:

• Site Config: Edit hugo.toml to change the site title, base URL, language, theme, and plugins.
• Site Params: Edit config/_default/params.toml to customize the logo, favicon, search settings, and SEO metadata.
• Colors and Fonts: Edit data/theme.json to change the primary/secondary colors, font family, and font size.
• Social Links: Edit data/social.json to add social media links which will automatically appear on the site.

When creating an 'About' page in hugoplate, use the following Front Matter keys in your Markdown file to control SEO, imagery, and the specific page layout.

• title: The main heading displayed on the page.
• meta_title: The title used for SEO/browser tabs.
• description: The meta description for search engines.
• image: Path to the featured image (e.g., /images/image-placeholder.png).
• layout: Set this to "about" to use the specific About page template.
• draft: Set to false to ensure the page is published.

---
title: "Hey, I am John Doe!"
meta_title: "About"
description: "this is meta description"
image: "/images/image-placeholder.png"
layout: "about"
draft: false
---

### This is a title

* Lorem ipsum, dolor sit amet
* Enim voluptatem dicta expedita veritatis

The Call-to-Action section is a content block that can be enabled or disabled via its front matter. When enabled, it displays a title, an image, a description, and an optional button.

To prevent Hugo from generating a standalone page for this content file, set build.render to "never". This ensures the section is treated as a reusable component rather than a discrete page in the site hierarchy.

enable: true
title: "Ready to build your next project with Hugo?"
image: "/images/call-to-action.png"
description: "Experience the future of web development with Hugoplate and Hugo."
button:
  enable: true
  label: "Fork Deploy and Edit Online 🚀"
  link: "https://example.com"

# prevents the creation of a separate page
build:
  render: "never"

Display images in a slider format using the {{< slider >}} shortcode.

Parameters:

• dir: The directory containing the images.
• class: CSS classes.
• height: Slider height.
• width: Slider width.
• webp: Boolean to enable WebP.
• command: Image processing command (e.g., Fit).
• option: Image processing option.
• zoomable: Boolean to enable zooming.

{{< slider dir="images/gallery" class="max-w-[600px] ml-0" height="400" width="400" webp="true" command="Fit" option="" zoomable="true" >}}

Display callout boxes using the {{< notice >}} shortcode. The type of notice is determined by the first argument passed to the shortcode.

Supported notice types:

• note
• quote
• tip
• info
• warning

{{< notice "note" >}}
This is a simple note.
{{< /notice >}}

Embed a video from a direct URL using the {{< video >}} shortcode.

Parameters:

• src: The video URL.
• width: Video width.
• height: Video height.
• autoplay: Boolean.
• loop: Boolean.
• muted: Boolean.
• controls: Boolean.
• class: CSS classes.

{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" width="100%" height="auto" autoplay="false" loop="false" muted="false" controls="true" class="rounded-lg" >}}

Display a collection of images in a gallery using the {{< gallery >}} shortcode.

Parameters:

• dir: The directory containing the images.
• class: CSS classes.
• height: Gallery height.
• width: Gallery width.
• webp: Boolean to enable WebP.
• command: Image processing command (e.g., Fit).
• option: Image processing option.
• zoomable: Boolean to enable zooming.

{{< gallery dir="images/gallery" class="" height="400" width="400" webp="true" command="Fit" option="" zoomable="true" >}}