serg/hugo-init

A Hugo minimal boilerplate for creating the static websites from scratch by using Brunch as a building tool for the assets

hugo-init

A starter kit for creating a homepage static website with Hugo framework. You can use it as a starting point for development different kinds of page templates, which are allowed in the Hugo (e.g. for a static blog). Please see the Hugo documentation for more info. For managing the assets (css, javascript, etc) this template is using a Brunch building tool. It's fast tool, simple to configure and expand.

Please note At the current moment this project probably can have some incompatible package cases related to the Brunch building tool (as this tool and its plugins weren't actively maintained by developers at least half of year). In general this boilerplate is working, but in some partial cases you need to find the solutions if you will customize it for fit your needs.

Feel free to expand the abilities of this template to fit your requirements. Also please note by using this project you understand the implications and guarantees of the MIT license.

Requirements

Before start you already need to have these applications on aboard:

• Node 6.x+ (LTS version) and npm (shipped with node installation)

Installation

Install all dependencies by running this command inside a project folder:

$ npm install

Development mode

Build assets with Brunch and Hugo, start a development server:

$ npm start

The application will be available at the http://localhost:3333 link in your browser. All changes in the src/ and site/ folders will be synced and displayed in browser automatically.

Production mode

To build the application for production use this command:

$ npm run build

All created files will be available in the public/ folder of project.

Preview mode

To build the application like for production, but with some restrictions use the command:

$ npm run preview

A website will be generated by applying almost all production features, except:

• all draft pages are included;
• the Google Analytics code is absent on the pages;
• all pages have the rules for prevent of indexing by search engines if you deploy website on a hosting for the testing reasons;
• the robots.txt file has a rule for prevent of indexing a whole website.

All above restrictions will be applied for the development mode also, except the assets (js, css) optimization and minification. You can find the files of website in the public/ folder as always.

Restrictions for production

Your markdown file (in content/ folder) needs to be not a draft for including its content into a website template. Change the draft value to false inside a certain page for publishing its content:

draft: false

All website pages contain the noindex and nofollow values in the meta tags when website was generated in the development or preview mode. Also the Google Analytics is absent on a page and the robots.txt file has an option for prevention of indexing by search engines. When you will be ready to share your website with a world please run the build of application in the production mode.

Deployment of a website

You can move the generated website from the public/ folder to on any type of a hosting provider for the static files. One of an option for the simplest and fastest deploying your site is using the Netlify service. Besides the Netlify provide a great service with a lot of features for free and your website will never slow down the speed of loading for a webpage when deliver it to your users. The instructions for the deploying to Netlify below.

• 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.

You can also click this button:

License

MIT © Sergey Furtak

hugo-init's Issues

Updated files doesn't reloads in some browsers properly

I have faced with an issue when I working in the development mode. In this mode the changes in files need to be displaying in the browser automatically. Everything works properly in the Chrome browser. The issue with inconsistent page reloading is appear in the Firefox or IE.

I have some fix for these browsers. You need to add this config for the auto-reload-brunch plugin into your brunch-config.js file:

plugins: {
  ...
  autoReload: {
    delay: 200
  }
  ...
}

This is a workaround and it's need to be considered as a temporary solution.

I will try to find another way for solving this issue. If you have any suggestions about how to deal with this please share.

Here is a visual description about current behavior and how to fix the issue: