More Premium Hugo Themes Premium Hugo Themes

Hugo Pipes Parcel

Demo of a using Hugo with Hugo Pipes + Parcel.js + TailwindCSS and PurgeCSS

Hugo Pipes Parcel

Demo of a using Hugo with Hugo Pipes + Parcel.js + TailwindCSS and PurgeCSS

Author Avatar Theme by budparr
Github Stars Github Stars: 48
Last Commit Last Commit: Mar 23, 2020 -
First Commit Created: Jun 19, 2023 -
Hugo Pipes Parcel screenshot

Overview:

The New Dynamic Hugo Starter is a repository designed for demonstrating an asset pipeline using Hugo and Parcel. It is not considered a full starter, but rather a tool for showcasing the asset pipeline in their internal workflow. The setup utilizes Parcel for JavaScript and font processing, Hugo Pipes + PostCSS for CSS processing, and npm-run-all to run Parcel and Hugo in parallel. The asset pipeline is a shift from using Webpack to process JS/Fonts/CSS, offering a smaller configuration and file footprint and faster builds.

Features:

  • Hugo: A general-purpose website framework written in Go that generates static webpages.
  • Parcel: A “blazing” fast, zero configuration web application bundler.
  • PostCSS: A CSS processor used with Hugo Pipes to process CSS.
  • TailwindCSS: A library of JS-based CSS classes used in the CSS processing with Hugo Pipes.
  • PurgeCSS: A tool that removes unused CSS in the CSS processing with Hugo Pipes.
  • KyleAMathews/typefaces: A package used to load OS fonts locally with one require statement.
  • npm-run-all: A tool used to run Parcel and Hugo in parallel.

Installation:

To install the New Dynamic Hugo Starter, follow these steps:

  1. Clone the repository to your local machine.

    git clone [repository-url]
    
  2. Install the necessary dependencies using the package manager of your choice (Yarn or NPM).

    yarn install
    

    or

    npm install
    
  3. Customize the configuration files as needed for your project.

  4. Build the assets and start the development server.

    yarn run build
    

    or

    npm run build
    

That’s it! You are now ready to start using the New Dynamic Hugo Starter for your project.

Summary:

The New Dynamic Hugo Starter is a tool for showcasing an asset pipeline using Hugo and Parcel. By utilizing Hugo Pipes and PostCSS, the setup offers a faster and more efficient way of processing JavaScript and CSS files. The integration of Parcel and npm-run-all allows for parallel processing of assets. While not a full starter, the New Dynamic Hugo Starter provides a solid foundation for developers looking to implement an efficient asset pipeline in their projects.