Getting Started

Quick start

This guide will help you get started with Glowing. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

If you have any questions that are beyond the scope of this help document, please create a ticket on our support page.

Contact Form Support Page

Please remember…

Requests sent during weekends or on holidays will be replied on business days.
We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.

File Structure

Once downloaded, unzip the compressed folder and you’ll see something like this:

glowing/
├── dist/
├── scss/
│	├── bootstrap/
├── src/
│	└── assets/
│	└── content/
│	└── data/
│	└── layouts/
│	└── static/
├── config.yaml
└── package.json

dist All template distribution files like HTML / CSS / JS that have been processed (compiled / minified) from src folder using Node.js / Hugo.
scss/bootstrap Contains all .scss file of bootstrap framework
src All template source files like HTML / SCSS / CSS / JS that are then processed (compiled / minified) to dist folder.
- src/assets/js Contains project JS files that are processed (compiled / minified) to dist/assets/js/theme.min.js.
- src/assets/scss Contains all project SCSS files that are compiled and minified in dist/assets/css folder.
- src/data This directory is used to store configuration files that can be used by Hugo when generating your website. You can write these files in YAML, JSON, or TOML format. In addition to the files you add to this folder, you can also create data templates that pull from dynamic content.
- src/layouts Stores templates in the form of .html files that specify how views of your content will be rendered into a static website.
- src/static Stores all the static content: images, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is.
dist/docs Contain all documentation files (installation, blocks, elements, etc.) regarding the template. You can also reach the documentation from the live demo as well.
package.json Includes the list of dependencies to install from npm.
config.yaml Hugo uses the config.toml, config.yaml, or config.json (if found in the site root) as the default site config file. Learn more about it from Working with Hugo section or Hugo documentation.

Installation

This step is optional. It aims at advanced user who wants to speed up the development process with a professional grade Front-End toolset shipped with GoHugo. If you are not familiar with these tools and have no time to dive in you can still use plain HTML / CSS / JS to customize GoHugo. Files you need are located inside dist folder. In this case, you can skip this and the next sections. Happy coding :)

If you’d like to speed up development process with Node.js / Hugo / SASS, then follow these steps:

1. Install Node.js if you don’t have it yet.
2. Unzip the template package and in the root project folder Glowing, go to your command line and run npm install. This will install the npm packages listed in the package.json file.
3. You should now have the project files set up and all the npm packages installed.

Hugo Commands

Speed up your workflow with commands You can see more here https://gohugo.io/commands/

hugo [flags] hugo builds your site.
hugo mod clean [flags] Delete the Hugo Module cache for the current project.
hugo version [flags] Print the version number of Hugo.
hugo new site [path] [flags] Create a new site (skeleton).
hugo server [flags] A high performance webserver.
hugo mod npm [flags] Various npm (Node package manager) helpers.
hugo mod npm pack [flags] Experimental: Prepares and writes a composite package.json file for your project.

Quick start

File Structure

Installation

Hugo Commands

On this page