Skip to content
Permalink
Browse files

Migrate from Gulp to Webpack (#138)

  • Loading branch information
walexnelson authored and erquhart committed Dec 3, 2018
1 parent 91f13a2 commit c2e09f4e49e995c6a3e5dec95611cf1d51308962
@@ -1,2 +1,3 @@
node_modules/
dist/
site/data/webpack.json
@@ -2,7 +2,7 @@

**A Hugo boilerplate for creating truly epic websites**

This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Gulp](https://gulpjs.com/) + [Webpack](https://webpack.js.org/) as your asset pipeline.
This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Webpack](https://webpack.js.org/) as your asset pipeline.

Victor Hugo setup to use [PostCSS](http://postcss.org/) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling.

@@ -30,25 +30,13 @@ While developing your website, use:
npm start
```

or

```bash
gulp server
```

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

```bash
npm run start-preview
npm run preview
```

or

```bash
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.
Then visit http://localhost:3000/ _- or a new browser windows popped-up already -_ to preview your new website. Webpack Dev Server will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.

### :package: Static build

@@ -61,10 +49,10 @@ npm run build
To get a preview of posts or articles not yet published, run:

```bash
npm run build-preview
npm run build:preview
```

See [package.json](package.json#L7) or the included gulp file for all tasks.
See [package.json](package.json#L8) for all tasks.

## Structure

@@ -77,8 +65,8 @@ See [package.json](package.json#L7) or the included gulp file for all tasks.
| | |--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
| |--css // Webpack will bundle imported css seperately
| |--index.js // index.js is the webpack entry for your css & js assets
```

## Basic Concepts
@@ -97,22 +85,22 @@ 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`.
The `src/index.js` file is the entrypoint for webpack and will be built to `/dist/main.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.
Any CSS file imported into the `index.js` will be run through Webpack, compiled with [PostCSS Next](http://cssnext.io/), and
minified to `/dist/[name].[hash:5].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`.
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`.
All tasks starting with _build_ set the environment variable to `production` - the other will set it to `development`.

## Deploying to Netlify

@@ -125,5 +113,4 @@ 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/netlify/victor-hugo)


## Enjoy!! 😸

This file was deleted.

@@ -7,4 +7,4 @@
publish = "dist"

[context.deploy-preview]
command = "npm run build-preview"
command = "npm run build:preview"

0 comments on commit c2e09f4

Please sign in to comment.
You can’t perform that action at this time.