Victor Hugo CMS Template is a Hugo static site generator boilerplate that integrates Netlify CMS and bundles Gulp, Webpack, PostCSS, and Babel into a build pipeline. It produces a static website from markdown content stored in a Git repository, with an editable admin UI at the /admin route.
What is the Victor Hugo CMS Template?
The Victor Hugo CMS Template is a boilerplate for creating static websites with Hugo. It sets up Gulp and Webpack as the asset pipeline, uses PostCSS Next for CSS and Babel for JavaScript, and comes pre-configured with Netlify CMS. The template takes content from the site/content folder and YAML data files, and outputs a static site to /dist via npm run build. It is published as a template for Netlify CMS with the Casper theme design.
Key Features
- Hugo static site generation — All files in the site folder are compiled by Hugo into static HTML, with layouts and partials defined under site/layouts.
- Gulp and Webpack asset pipeline — The src folder holds source CSS and JS; Webpack compiles src/js/app.js to /dist/app.js, and CSS files from src/css are compiled to /dist/css with PostCSS Next.
- Netlify CMS integration — A single-page app served at /admin, configured via site/static/admin/config.yml, lets editors create and edit content stored in a Git repository.
- GitHub backend — The CMS uses GitHub's API as a repository backend and Netlify's Authentication Provider for login, storing changes directly as commits.
- BrowserSync development server — Running npm start opens a server at localhost:3000 that auto-reloads on CSS or content changes.
- ES6 and npm imports — The webpack entry point src/js/app.js supports ES6 syntax and importing libraries from npm, either relatively or as packages.
- Static file passthrough — Files in site/static, such as favicon.ico or images, are copied to the web root unchanged.
Who is it for?
- Static site developers — Build modern websites with a preconfigured Hugo setup and asset pipeline instead of wiring Gulp and Webpack from scratch.
- Content editors and writers — Use the Netlify CMS admin at /admin to edit or publish markdown content without touching code or Git.
- Netlify users — Deploy the template by pushing the GitHub repository to Netlify, which builds and publishes the site on every push.
- Open source learners — Study a working example of Hugo, Gulp, Webpack, and Netlify CMS combined under the MIT license.
What can you do with it?
- Publish a blog fast — The template is based on the Casper theme, so you can create a blog with a clean design and manage posts through the CMS.
- Create a company or portfolio site — Use the content, data, layouts, and statics structure to build multi-page sites with YAML data and editable markdown.
- Prototype Hugo themes — Use the Gulp/Webpack pipeline and BrowserSync reload to develop custom Hugo layouts efficiently.
How does it work?
After cloning, run npm install and then npm start to launch the local development server. Hugo reads content from site/content, while the asset pipeline compiles CSS and JS from src. For production, run npm run build to generate the static output in /dist.
Pricing
The template is free to use and open source under the MIT license, as stated in the repository's LICENSE file.
FAQ
Does the Victor Hugo CMS Template include a CMS?
Yes, it includes Netlify CMS, a single-page app that runs at the /admin path. You configure your content model in the YAML config file at site/static/admin/config.yml, and it integrates with Git so edits are saved as commits.
How do I set up GitHub as the CMS backend?
Edit the backend section of the Netlify CMS config file, set the repo value to your owner/repo, and configure GitHub as an authentication provider in Netlify. After that, users can log in at /admin and edit content.
What build tools are used?
The asset pipeline is built with Gulp and Webpack. CSS in src/css is compiled with PostCSS Next to /dist/css, and JavaScript in src/js/app.js is transpiled with Babel and bundled to /dist/app.js.
How do I deploy to Netlify?
Push the cloned repository to your own GitHub account, then create a new site on Netlify and link that repository. Netlify will build and deploy the site automatically whenever you push changes.
Do I need to install Hugo separately?
Yes, the README instructs installing Hugo as a prerequisite, along with the latest Node and npm. The template does not bundle the Hugo binary; you install it following Hugo's installation guide.
