Hugo Winston Theme

Hugo Winston is a bold minimal blogging theme.

Live Demo | Zerostatic Themes

Theme features

• Posts (Markdown)
• Basic Page (Markdown)
• SCSS (Hugo Pipelines)
• Responsive design
• 100/100 Google Lighthouse speed score
• 100/100 Google Lighthouse SEO score
• 100/100 Google Lighthouse accessibility score
• Google analytics configured in config.toml
• Configure GID using env variable HUGO_GOOGLE_ANALYTICS_ID, compatible with Netlify.
• Title, meta description and meta tags automatically generated for every page
• OG Meta data for Facebook and Twitter
• Semantic HTML document structure

Installation

1. Install Hugo

To use this theme you will first need to have Hugo installed. Please follow the official installation guide

⚠️ Note: Check your Hugo version - Hugo Extended is required!

This theme uses Hugo Pipes to compile SCSS and minify assets which means if you are not using the Hugo extended version this theme will not work. To check your version of Hugo, run hugo version. Make sure you see /extended after the version number, for example Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown You do not need to use version v0.51 specifically, it just needs to have the /extended part.

2. Create a new Hugo site

This will create a fresh Hugo site in the folder mynewsite.

hugo new site mynewsite

3. Install the theme

Download or git clone this theme into the sites themes folder mynewsite/themes. You should end up with the following folder structure mynewsite/themes/hugo-winston-theme

cd mynewsite
git clone https://github.com/zerostaticthemes/hugo-winston-theme.git themes/hugo-winston-theme

4. Copy the example content

Copy the entire contents of the mynewsite/themes/hugo-winston-theme/exampleSite/ folder to root folder of your Hugo site, ie mynewsite/. To copy the files using terminal, make sure you are still in the projects root, ie the mynewsite folder.

cp -a themes/hugo-winston-theme/exampleSite/. .

6. Run Hugo

After installing the theme for the first time, generate the Hugo site.

You run this command from the root folder of your Hugo site ie mynewsite

hugo

For local development run Hugo's built-in local server.

hugo server

Now enter localhost:1313 in the address bar of your browser.

Configuration

Config options

# config.toml
[params]
  google_analytics_id = ""
  twitter_handle = "@zerostaticio"
  showAuthorOnHomepage = true
  showAuthorOnPosts = false
  showPostsOnHomepage = false
  addDot = true
  addFrame = true
  highlightColor = '#7b16ff'
  baseColor = "#ffffff"
  baseOffsetColor = "#eaeaea"
  highlightColor = "#7b16ff"
  dotColor = "#7b16ff"
  headingColor = "#1c1b1d"
  textColor = "#4e5157"

Google Analytics

Add your google analytics ID to the config.toml

# config.toml
[params]
  google_analytics_id="UA-132398315-1"

Plausible Analytics

Add your plausible analytics domain to the config.toml. This is data-domain in your tracking script code.

// config.toml
[params]
  plausible_analytics_domain = "barryhennessy.com"

Deploying to Netlify

Use Netlify to deploy this theme. This theme contains a valid and tested netlify.toml - Feel free to use the 1-click deploy below.

This theme includes a netlify.toml which is configured to deploy to Netlify from the exampleSite folder. See this discussion on how to deploy your site on Netlify from the exampleSite folder - https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508

Most likely if you are deploying to Netlify and created a new Hugo site or added this theme to an existing Hugo site then you are not deploying from the exampleSite directory and you can delete the netlify.toml file.

Other Hugo Themes by Zerostatic

• Hugo Whisper
• Hugo Serif
• Hugo Winston
• Hugo Advance
• Hugo Paradigm

🇦🇺 Made in Australia by Robert Austin - leave a star mate!