2016-08-09 23:42:05 +00:00
# Victor Hugo
2016-07-05 18:38:18 +00:00
2016-09-16 08:18:01 +00:00
**A [Hugo ](https://gohugo.io/ ) boilerplate for creating truly epic websites**
2016-08-09 23:42:05 +00:00
2017-01-30 19:04:02 +00:00
This is a boilerplate for using Hugo as a static site generator and Gulp + Webpack as your
2016-07-05 18:38:18 +00:00
asset pipeline.
It's setup to use post-css and babel for CSS and JavaScript.
2016-09-21 17:37:14 +00:00
This project is released under the [MIT license ](LICENSE ). Please make sure you understand its implications and guarantees.
2016-07-05 18:38:18 +00:00
## Usage
2017-07-30 02:03:01 +00:00
Be sure that you have the latest node and npm installed.
2017-01-19 22:13:59 +00:00
2016-09-16 08:18:01 +00:00
Next, clone this repository and run:
2016-07-05 18:38:18 +00:00
```bash
npm install
npm start
```
2016-08-09 22:38:45 +00:00
Then visit http://localhost:3000/ - BrowserSync will automatically reload CSS or
refresh the page when stylesheets or content changes.
2016-07-05 18:38:18 +00:00
2017-03-25 08:45:19 +00:00
To build your static output to the `/dist` folder, use:
2016-07-05 18:38:18 +00:00
```bash
npm run build
```
2016-08-09 22:38:45 +00:00
## 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/...
2017-02-25 03:55:52 +00:00
| |--js // app.js will be compiled to /app.js with babel
2016-08-09 22:38:45 +00:00
```
## 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 ](http://cssnext.io/ )
to `/dist/css/{filename}.css` . Import statements will be resolved as part of the build
2016-07-05 18:38:18 +00:00
## Deploying to netlify
2016-08-10 00:06:10 +00:00
- Push your clone to your own GitHub repository.
- [Create a new site on Netlify ](https://app.netlify.com/start ) and link the repository.
2016-07-05 18:38:18 +00:00
Now netlify will build and deploy your site whenever you push to git.
2016-08-09 22:38:45 +00:00
2016-12-14 21:42:05 +00:00
You can also click this button:
[![Deploy to Netlify ](https://www.netlify.com/img/deploy/button.svg )](https://app.netlify.com/start/deploy?repository=https://github.com/eliwilliamson/victor-hugo)
2016-09-21 17:37:14 +00:00
## Enjoy!!