Scheduling Hugo Builds with AppScript and Node.

Profile Picture (Mani)

Written by

Mani

Founder, BusinessAddons.com

Learn how to save time and resources by implementing an intelligent rebuild scheduling system for your Hugo website.

Managing a Hugo website can be a time-consuming task, especially when it comes to scheduling content updates and rebuilds. Many developers resort to inefficient methods like frequent cron jobs or manual updates, which waste resources and valuable time.

In this guide, we’ll explore an innovative solution that leverages Hugo’s JSON endpoint and third-party services to create an intelligent rebuild scheduling system for your website.

Understanding the Problem and Solution

Traditional approaches to Hugo site rebuilds often involve:

  • Using cron jobs to rebuild the site every few hours, which can quickly deplete build time limits set by hosting providers.
  • Manually triggering rebuilds, which is time-consuming and impractical for most developers.

Our solution offers a smarter approach:

  • Utilize Hugo’s JSON endpoint to list all explicit rebuild times for your website.
  • Implement a third-party service (in this case, Google AppScript) to trigger rebuilds at specific times by sending requests (via a build hook) to your hosting provider.
  • Works with any CMS.

The Use Case

This guide is particularly useful for scenarios where content updates are tied to specific events or dates, such as:

  • Event Conclusion: Automatically updating the site when an event concludes, for example, by removing the event from the “Upcoming Events” section and adding it to a “Past Events” archive. This ensures that the website remains accurate and up-to-date without manual intervention.
  • Press Embargo: Scheduling content to be published automatically once a press embargo lifts. This is crucial for news outlets and companies looking to synchronize the release of information with specific dates and times, ensuring timely and coordinated content publication.
  • Product Launches: For businesses, automating the reveal of new products or services on their launch date. This allows for seamless transitions on the website, showcasing new offerings the moment they become available.
  • Content Expiration: Automatically hiding or updating content that is no longer relevant after a certain date, such as limited-time offers, discount codes, or temporary announcements. This helps in maintaining the relevance and accuracy of the website’s content.

By automating Hugo site rebuilds based on these use cases, organizations can ensure their website’s content is dynamically updated in response to real-world events, reducing the need for manual updates and allowing for more strategic content planning.

Prerequisites

Before diving into the implementation, ensure you have:

  • A functioning Hugo site
  • A build hook link from your hosting provider (Cloudflare, Netlify, or Vercel)
  • NodeJS installed on your system
  • Basic JavaScript knowledge
  • CMS Is Optional

Flow:

Here’s the flow of what we’re building.

Flow of how to build a hugo site as per a schedule

...

CMS Support:

This guide is designed to work with any Git CMS, like Decap or Cloud Cannon. It focuses on using keys from your post’s frontmatter. This means you can add these keys in any CMS you prefer, manually or otherwise. Rebuilds are managed by the code we’re sharing later, and your website hosting provider, not your CMS.

shape-1
shape-1

Did this post get too technical?

If you're finding the technical details of this post overwhelming, we're here to help. Scheduling a consultation can provide you with personalized guidance tailored to your specific needs.

1. Setting Up the Build Script

Create a new file in your project’s root directory, inside a folder called ‘build_scripts’. We’ve assumed ./build_scripts/rebuild_at_generator.js This script will:

  • Execute the Hugo command to list future content
  • Process the output to extract relevant date information
  • Generate a JSON file with rebuild times

Here’s a summary of what the script does:

  • Sets up the working directory and handles command-line arguments for relative paths.
  • Executes the ‘hugo list future’ command to get a list of future content.
  • Processes the command output, extracting relevant date fields (date, expiryDate, publishDate).
  • Creates a JSON object with an array of these dates under the key “rebuild_at”.
  • Writes this JSON data to a file in the ‘data/rebuild_at/’ directory.

Run The Script: Using node build_scripts/rebuild_at_generator.js ..

(.. stands for relative path to your project, my case it’s one at the root of build_scripts folder)

This script effectively creates a structured list of dates when the site needs to be rebuilt, based on future content publish dates, expiry dates, and other relevant timestamps.

2. Exposing the Rebuild Data

To make the rebuild data accessible:

  • Create a new file at ./content/rebuild-at/_index.md with specific front matter to control its output

---
outputs: ["json","html"]⁣ 
build:⁣ 
    list: local # Prevent this from coming up on the sitemap⁣ 
    publishResources: true # Prevent this from coming up on the sitemap⁣ 
    render: always  # Prevent this from coming up on the sitemap⁣ 
draft: false
---
  • Set up a template file at ./layout/rebuild-at/list.json to format the rebuild data

Create the following files: ./layout/rebuild-at/list.json

3. Generating the Rebuild List

The list.json template does the following:

  • Iterates over the rebuild_at data generated by the previous script.
  • Checks all regular pages and events for relevant dates (publish, expiry, event start).
  • Filters for dates in the future.
  • Creates a sorted list of all future dates when the site needs to be rebuilt.
  • Outputs this list as a JSON array.

This template ensures that your Hugo site exposes an endpoint with all the necessary rebuild dates, including those from scheduled posts, expiring content, and upcoming events.

Run your Hugo server and access localhost:1313/rebuild-at/index.json to view a formatted list of rebuild times. Example output:

[
    {
    "date": "2024-07-16T14:00:00Z",
    "source": "rebuild_at" // meaning this is a scheduled post for a future date
    },
    {
    "date": "2024-07-21T05:00:00Z",
    "source": "events" // meaning this is an event's conclusion date
    }
]

This list will include times for:

  • Posts going live
  • Posts expiring
  • Events concluding

PS: If you don’t like this endpoint to be publicly exposed, you can consider moving it to a serverless function endpoint with any custom authentication you have in mind.

Notes for CMS Users: If you’re using a CMS such as Netlify CMS or CloudCannon, it’s crucial not to provide an Admin UI for data/rebuild-at/data.json, as the build script will overwrite this file each time. The purpose of this guide’s approach is to let you set values in your frontmatter anywhere in your project and create a build a system that automates the rebuild process. We’ll also be adding this file to .gitignore in a later step.

4. Implementing the Rebuild Service

Use Google AppScript to create a service that:

  • Checks for upcoming rebuilds
  • Schedules triggers for the next rebuild
  • Executes the rebuild process by calling your hosting provider’s build hook

Here’s a summary of the AppScript functionality:

  • scheduleRebuild(): This is the main function that:
    • Deletes old triggers
    • Fetches the list of rebuild dates from your Hugo site
    • Finds the earliest future rebuild date
    • Schedules a trigger for this date if it’s more than 15 minutes in the future
    • Schedules itself to run every 6 hours

  • scheduleTriggerForRebuild(date): Schedules a trigger for the specified date.
    • triggerRebuildSite(): Called by the scheduled trigger to rebuild the site and reschedule the next rebuild.
    • deleteAllTriggers(): Removes all existing triggers to avoid conflicts.
    • rebuildSite(): Sends a POST request to your hosting provider’s build hook to trigger a site rebuild.


This script ensures that your site is rebuilt at the exact times needed, based on your content schedule, without wasting resources on unnecessary rebuilds.

5. Finalizing the Setup

  • Add the generated data/rebuild-at/data.json file to your .gitignore to prevent version control conflicts.
  • Append your build script node build_scripts/rebuild_at_generator.js .. && hugo

That’s it!

By implementing this intelligent rebuild scheduling system, you can significantly optimize your Hugo website management process. This solution eliminates the need for wasteful cron jobs or time-consuming manual updates, ensuring your site rebuilds exactly when needed.

As you apply these techniques, you’ll find yourself spending less time on maintenance and more time creating great content for your Hugo website. The combination of Hugo’s powerful content management capabilities with this custom scheduling system provides an efficient and resource-friendly approach to keeping your site up-to-date.

If you’d like to view the full source code, you van visit this Github Repo.

Browser Our Addons

SwitchCase.xyz

Effortlessly convert your text to multiple cases, within your browser, Figma, Canva, and VSCode!

Row Browser

Individually browse through each row on your spreadsheet, without clutter.