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:
Clone the repository to your local machine.
git clone [repository-url]Install the necessary dependencies using the package manager of your choice (Yarn or NPM).
yarn installor
npm installCustomize the configuration files as needed for your project.
Build the assets and start the development server.
yarn run buildor
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.