This repository has been archived on 2020-04-22. You can view files and clone it, but cannot push or open issues or pull requests.
Go to file
renovate[bot] 51974699ae Configure Renovate (#102) 2018-08-23 17:28:23 -04:00
.github Add project management files. 2016-12-22 14:35:46 -08:00
site use base and blocks pattern instead of partials (#75) 2018-04-24 19:42:32 -04:00
src New Gulp task to move all the fonts in a flattened directory inside dist 2018-01-16 13:57:08 -05:00
.babelrc updates babel preset env and webpack versions 2017-10-06 16:14:51 -07:00
.eslintrc User browserSync instead of webpack dev server 2016-07-21 10:33:50 -07:00
.gitignore Basic setup - gulp + webpack + hugo 2016-07-03 15:07:47 -07:00
.nvmrc Update Node to 8.10.0 (current LTS) in .nvmrc 2018-03-24 16:50:03 +01:00
CODE_OF_CONDUCT.md Add project management files. 2016-12-22 14:35:46 -08:00
CONTRIBUTING.md Fix misspelling (runing -> running) 2018-01-16 13:58:17 -05:00
LICENSE Add missing license file. 2016-09-21 10:40:01 -07:00
README.md Added start-preview script and server-preview task (#90) 2018-05-14 10:16:17 -04:00
gulpfile.babel.js Removed deprecated gulp-util dependency (#94) 2018-08-21 14:42:12 -04:00
netlify.toml Revert "Pin Hugo version on Netlify to the most recent one." 2017-07-30 04:37:14 +01:00
package-lock.json Removed deprecated gulp-util dependency (#94) 2018-08-21 14:42:12 -04:00
package.json Removed deprecated gulp-util dependency (#94) 2018-08-21 14:42:12 -04:00
renovate.json Configure Renovate (#102) 2018-08-23 17:28:23 -04:00
webpack.conf.js Update exports loader to Webpack 3 syntax 2018-02-25 07:48:49 -05:00
yarn.lock update dependencies for Node 10 support 2018-05-16 10:35:58 -04:00

README.md

Victor Hugo

A Hugo boilerplate for creating truly epic websites

This is a boilerplate for using Hugo as a static site generator and Gulp + Webpack as your asset pipeline.

Victor Hugo setup to use PostCSS and Babel for CSS and JavaScript compiling/transpiling.

This project is released under the MIT license. Please make sure you understand its implications and guarantees.

Usage

Prerequisites

You need to have the latest/LTS node and npm versions installed in order to use Victor Hugo.

Next step, clone this repository and run:

npm install

This will take some time and will install all packages necessary to run Victor Hugo and its tasks.

Development

While developing your website, use:

npm start

or

gulp server

or for developing your website with hugo server --buildDrafts --buildFuture, use:

npm run start-preview

or

gulp server-preview

Then visit http://localhost:3000/ - or a new browser windows popped-up already - to preview your new website. BrowserSync will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.

Static build

To build a static version of the website inside the /dist folder, run:

npm run build

To get a preview of posts or articles not yet published, run:

npm run build-preview

See package.json or the included gulp file for all tasks.

Structure

|--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 /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 end 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.

Environment variables

To separate the development and production - aka build - stages, all gulp tasks run with a node environment variable named either development or production.

You can access the environment variable inside the theme files with getenv "NODE_ENV". See the following example for a conditional statement:

{{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }}

All tasks starting with build set the environment variable to production - the other will set it to development.

Deploying to Netlify

Now Netlify will build and deploy your site whenever you push to git.

You can also click this button:

Deploy to Netlify

Enjoy!! 😸