Victor Hugo
A Hugo boilerplate for creating truly epic websites
This is a boilerplate for using Hugo as a static site generator and Gulp + Weback as your asset pipeline.
It's setup to use post-css and babel for CSS and JavaScript.
Usage
Clone this repository and run:
npm install
npm startThen visit http://localhost:3000/ - BrowserSync will automatically reload CSS or refresh the page when stylesheets or content changes.
To build your static output to the /dist folder, use:
npm run buildStructure
|--site // Everything in here will be built with hugo
| |--content // Pages and collections - ask if you need extra pages
| |--data // YAML data files with any data for use in examples
| |--layouts // This is where all templates go
| | |--partials // This is where includes live
| | |--index.html // The index page
| |--static // Files in here ends up in the public folder
|--src // Files that will pass through the asset pipeline
| |--css // CSS files in the root of this folder will end up in /css/...
| |--js // app.js will be compiled to /js/app.js with babel
Basic Concepts
You can read more about Hugo's template language in their documentation here:
https://gohugo.io/templates/overview/
The most useful page there is the one about the available functions:
https://gohugo.io/templates/functions/
For assets that are completely static and don't need to go through the asset pipeline,
use the site/static folder. Images, font-files, etc, all go there.
Files in the static folder ends up in the web root. So a file called site/static/favicon.ico
will end up being available as /favicon.ico and so on...
The src/js/app.js file is the entrypoint for webpack and will be built to /dist/app.js.
You can use ES6 and use both relative imports or import libraries from npm.
Any CSS file directly under the src/css/ folder will get compiled with PostCSS Next
to /dist/css/{filename}.css. Import statements will be resolved as part of the build
Deploying to netlify
- Push your clone to your own GitHub repository.
- Create a new site on Netlify and link the repository.
Now netlify will build and deploy your site whenever you push to git.