98 lines
3.3 KiB
Markdown
98 lines
3.3 KiB
Markdown
# Victor Hugo
|
|
|
|
**A [Hugo](https://gohugo.io/) 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.
|
|
|
|
It's setup to use post-css and babel for CSS and JavaScript.
|
|
|
|
This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees.
|
|
|
|
## Usage
|
|
|
|
Be sure that you have the latest node and npm installed.
|
|
|
|
Next, clone this repository and run:
|
|
|
|
```bash
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
Then 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:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## 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 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
|
|
|
|
## Environment variables
|
|
|
|
|
|
To seperate 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
|
|
|
|
- Push your clone to your own GitHub repository.
|
|
- [Create a new site on Netlify](https://app.netlify.com/start) and link the repository.
|
|
|
|
Now netlify will build and deploy your site whenever you push to git.
|
|
|
|
You can also click this button:
|
|
|
|
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/victor-hugo)
|
|
|
|
|
|
|
|
## Enjoy!!
|