'izi' name come from Croatian spelling of the English work 'eazy'

A fast (no JS), minimalist (text based), responsive and highly customisable hugo theme.

• Example site

Features:

• Fast
• Minimalist
• Responsive
• Archive
• Tags

1. Inside the folder of your Hugo site run:

   git submodule add https://github.com/tophatcroat/izi-hugo-theme.git themes/izi

2. Add the theme's directory to your config.yaml:

   theme: izi

⚠️ If you installed a Hugo binary, you may not have Go installed on your machine. To check if Go is installed:

$ go version

Go modules were considered production ready in v1.14. Download Go.

1. From your project's root directory, initiate the hugo module system if you haven't already:

   $ hugo mod init github.com/<your_user>/<your_project>

2. Add the theme's repo to your config.yaml:

   theme:
      - github.com/tophatcroat/izi-hugo-theme

For more information read the official setup guide of Hugo.

After installing the theme successfully it requires a just a few more steps to get your site running.

Take a look inside the exampleSite folder of this theme. You'll find a file called config.yaml. To use it, copy the config.yaml in the root folder of your Hugo site. Feel free to change the strings in this theme.

⚠️ You should delete the line: themesDir: ../../

You can set default content language by defaultContentLanguage:

defaultContentLanguage: en-us

Default is en-gb. Supported languages are:

• en-gb: English

• en-us: American English

• More about multiple languages: Multilingual Mode.

In order to see your site in action, run Hugo's built-in local server.

$ hugo server

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

To run in production, run HUGO_ENV=production before your build command. For example:

HUGO_ENV=production hugo

Note: The above command will not work on Windows. If you are running a Windows OS, use the below command:

set HUGO_ENV=production
hugo

To add a favicon, just paste it into the static/ directory and configure it's path in `config.yaml:

params:
  favicon: 'image/favicon.svg'

Just as easy to add an avatar, just paste it into the static/ directory and configure it's path in `config.yaml:

params:
  avatar: 'image/avatar.png'

You can put your custom css and js files to static directory, or use remote css and js files which start with http:// or https://.

For example:

customCSS:
  - css/custom.css # local css in `static/css/custom.css`
  - https://example.com/custom.css # remote css
customJS:
  - js/custom.js # local js in `static/js/custom.js`
  - https://example.com/custom.js # remote js

Set hiddenPostSummaryInHomePage to true to show the first paragraph on the index page, default is false.

For example:

hiddenPostSummaryInHomePage: true

Alternatively, you can add a description in the Front Matter to provide bespoke summary.

You can replace default fonts for article titles and content

  titleFont: 'https://fonts.googleapis.com/css?family=Unna'
  textFont: 'https://fonts.googleapis.com/css?family=Open+Sans'

And also inside your customCSS file, for example static/css/style.css, add:

:root {
    --title-font: Unna, serif;
    --text-font: 'Open Sans', serif;
}

If you wish to change the overall colours of the blogs, simply overwrite the CSS variables in your customCSS file as such:

:root {
    --accent-color: #8e24aa;
    --accent-color-light: #ab47bc;
    --text-primary: #0a0908;
    --text-secondary: #22333b;
    --background: #ffffff;
    --background-secondary: #f6fff8;
    --border: #6c757d;
}

If you want to add dark colour scheme support, for those who have it selected as preferred in their browser:

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color-light: #ffd60a;
    --text-primary: #f8f9fa;
    --text-secondary: #dee2e6;
    --background: #001d3d;
    --background-secondary: #003566;
    --border: #6c757d;
  }
}

If you want to change the colours of the syntax highlighter you can find the supported themes here and generate the CSS with hugo gen chromastyles --style=github and paste the output into your customCSS file.

/* Background */ .bg { background-color: #ffffff; }
/* PreWrapper */ .chroma { background-color: #ffffff; }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }

/*
    ...
    omitted for brevity
*/

If you are using a different light and dark themes then it's recommended to use a different theme that will look good with dark colours, it's also a good idea to wrap your light syntax with with @media (prefers-color-scheme: light) because some colours can overwrite one another

@media (prefers-color-scheme: light) {
    /* Background */ .bg { background-color: #ffffff; }
    /* PreWrapper */ .chroma { background-color: #ffffff; }
    /* Other */ .chroma .x {  }
    /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }

    /*
        ...
        omitted for brevity
    */
}

@media (prefers-color-scheme: dark) {
    /* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
    /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
    /* Other */ .chroma .x {  }
    /* Error */ .chroma .err {  }

    /*
        ...
        omitted for brevity
    */
}

Changing the spacing is just as easy, simply overwrite the CSS variables in your customCSS file as such:

:root {
    --line-height-scalar: 2;

    --space-base: 1.5rem;

    --space-page-width: calc(var(--space-base) * 64);
    --space-page-vertical: calc(var(--space-base) * 2);

    --space-content-vertical: calc(var(--space-base) * 3);
}

To add Google Analytics provide your tracking ID in your configuration file:

googleAnalytics: UA-PROPERTY_ID

You can add a link to edit article in your repository by adding editUrl in your configuration file:

params:
  editUrl: 'https://github.com/<your username>/<your repository>/tree/master'