Code Monkey home page Code Monkey logo

hugo-winston-theme's Introduction

Hugo Winston Theme

Hugo Winston is a bold minimal blogging theme.

Live Demo | Zerostatic Themes

Hugo Winston Theme screenshot

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

Install Hugo

To use this theme you will need to have Hugo installed. If you don't already have Hugo installed please follow the official installation guide

Check Hugo version (Hugo 0.51+ Extended is required)

This theme uses Hugo Pipes to compile SCSS and minify assets. Please make sure you have the Hugo Extended version installed. If you are not using the extended version this theme will not not compile.

To check your version of Hugo, run:

hugo version

This will output the currently installed version of Hugo. 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, you can use any version of Hugo above 0.51. It just needs to have the /extended part

Create a new Hugo site

hugo new site mynewsite

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

Install theme with Git

Clone this repo into the themes folder

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

Copy 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/. .

Update config.toml

After you copy the config.toml into the root folder of your Hugo site you will need to update the baseURL, themesDir and theme values in mynewsite/config.toml

baseURL = "/"
themesDir = "themes"
theme = "hugo-winston-theme"

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
  addFrame = true
  addDot = true

Google Analytics

Add you google analytics ID to the config.toml

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

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.

Deploy to Netlify

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

๐Ÿ‡ฆ๐Ÿ‡บ Made in Australia by Robert Austin - leave a star mate!

hugo-winston-theme's People

Contributors

cchiggins avatar jugglerx avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.