- Add Google Analytics Partial
- Add Disqus Partial
- Add Google Rich Site Data Partial - Using JSON+LD, not RDF.
- Factor header and footer into partials and master layout.
- Add content archetypes back in
- Add blog type and front matter
- Add section type and associated front matter
- Add FB, Twitter
- Add Pagination Support
Hugo & WebPack 2 with Materialize.css
This is our template for using Hugo as a static site generator with WebPack 2 as the asset pipeline. It is tightly integrated with Hugo and has a Netlify build script as well.
We built this to make it easier for us to develop websites.
Features:
- MaterializeCSS ready to go
- SEO Optimized Templates with Twitter, Facebook and Google Rich Site Data
- WebPack 2 for Asset Pipeline
- WebPack Dev Server
- PostCSS and CSSNext
- Babel for modern Javascript
- Netlify build script (Optional)
This project is released under the MIT license.
Be sure that you have the latest node, yarn/npm and Hugo installed.
We recommend the brew package manager if you're using OSX.
If you need to install Yarn, run:
brew install yarnIf you need to install hugo, run:
brew install hugoNext, clone https://github.com/ntharani/HST-Materialize-Hugo repository and run:
yarn
yarn start.
├── archetypes
├── content // Where your blogs and page content resides
├── data // YAML/TOML data files.
├── layouts // All templates for Hugo
│ └── index.html
├── public // This folder will be generated when you type 'hugo'
│ ├── css
│ ├── fonts
│ ├── images
│ └── js
├── static // Files in here end up in the public folder at root level
│ ├── css
│ ├── images
│ └── js
├── themes // Hugo Themes
├── package.json
├── postcss.config.js
├── webpack.config.js
You can read more about Hugo here: https://gohugo.io/
hugo
- This generates files in
/public - You can delete
publicat any time and rebuild it. - Do not edit files in
publicas this folder is generated by Hugo.
hugo s
- Navigate to
http://localhost:1313 - Changes are tracked from changes to physical files in
/staticand displayed immediately. - You will likely spend most of your time making edits and viewing them this way.
- Webpack is offically a module bundler, but can do much more and act a task runner with plugins. Using WebPack allows you to write modern, future CSS code and Javascript today.
- Webpack also can prepare your code for production, eg: compressing files, etc.
- The
static/js/app.jsfile is the entrypoint for webpack. Anything referenced by this file will be built to/public/. (Put another way, all the stuff in/publicthat is built by Hugo will then be optimized and saved to the same directory.
── static
│ ├── css
│ │ ├── main.css <--- For convenience. You can @import this file from `start.css` while developing using `Hugo Server`
│ │ ├── start.css <--- Anything you put in this file will be compiled to styles.css
│ │ └── styles.css <--- We recommend you leave this file blank. It will be populated on a production build.
│ ├── images
│ └── js
│ ├── app.bundle.js <-- This file is pre-built with Materialize.CSS. Don't like it? Blow it away and regenerate without Materialize.
│ ├── app.bundle.js.gz <-- Ooh! The compressed one.
│ ├── app.bundle.js.map <-- So you can debug your code in Web Inspector
│ ├── app.js <-- Entry point
│ ├── commons.js <--- Generated when you build for production.
│ └── commons.js.map <--- Generated when you build for production.
- Any CSS file referenced by
styles.cssorstart.csswill get compiled with PostCSS Next - Import statements will be resolved as part of the build
At a minimum you need to reference styles.css, commons.js and app.bundle.js.
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="js/commons.js"></script>
<script src="js/app.bundle.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
- Out of the box you can start editing files as you see fit.
To see edits in realtime, type hugo s, then open your browser to http://localhost:1313 to see website changes. (HTML, CSS changes will show). This will use app.bundle.js and commons.js.
- If you want to play with ES6 and see realtime postCSS edits, but not see HTML changes, then use webpack-dev-server: type
yarn start. - WebPack-dev-server can't handle HTML edits without some hacky changes, and Hugo's server is ideal for most stuff.
- Your changes are being run from memory, not the physical files.
- The exception to this is /static/js/ files when running
hugo server. So if you see phantom CSS styles.css you'll know they're being served from memory.
- If you have some compiled JS changes you want to be able to use Hugo's server - type
yarn hw. This uses WebPack to create new files. Then copy the new app.bundle.js and commons.js from/publictostatic/js
yarn build
This will optimize and compress assets for production. It will also separate out CSS to public/css/styles.css
- 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.