Hugo Starter Kit

Hugo Starter Kit

Tutorials, Themes, Sortcodes and More!

Table of Contents

Edit

This content is open source. Help improve it.

Official Resources

[Permalinks]
  # | :year        | the 4-digit year                           |
  # | :month       | the 2-digit month                          |
  # | :monthname   | the name of the month                      |
  # | :day         | the 2-digit day                            |
  # | :weekday     | the 1-digit day of the week (Sunday = 0)   |
  # | :weekdayname | the name of the day of the week            |
  # | :yearday     | the 1- to 3-digit day of the year          |
  # | :section     | the content's section                      |
  # | :sections    | the content's sections hierarchy           |
  # | :title       | the content's title                        |
  # | :slug        | the content's slug (or title, if no slug)  |
  # | :filename    | the content's filename (without extension) |

  # Examples
  posts = "/:filename/"
  # post = "/:year/:month/:title/"
  notes = "/notes/:filename/"

Publishing Websites Via Hugo

Using different versions of Hugo:

  • Netlify Plus Hugo .20 and beyond

    Until yesterday, if you wanted to use a new version of Hugo on Netlify, you had two options. The first one was to wait for us to install it on our build servers and work around name collisions. Although it was not complicated, you can see by reading this blog post, it’s not very sustainable. The second option was to add the version of the Hugo binary you wanted to use to your repository. Since Hugo is a static binary, this is a very convenient solution if you want to manage it yourself.

    Starting today, if you want to use a specific new version of Hugo on Netlify, you only need to set the environment variable HUGO_VERSION with the version number you want to use. If it’s a valid release number, we’ll install it for you and use that version. You don’t have to wait for us, or manage binaries yourself. For example, if you want to use Hugo 0.20 right now, you can go to your site’s settings (Build and Deploy, Build Environment Variables section) and set HUGO_VERSION to 0.20 in your environment.

Basically, if you use netlify it will build with whatever version you tell it to. Otherwise you need to install specific versions locally. You can just drop the binary of the version you need in the root of that projects repository.

Tutorials

  • Hugo Video Turorials

    This course covers the basics of using Hugo - Static Site Generator. Work your way through the videos and we’ll teach you everything you need to know to create a professional and scalable website or blog!

Hugo Variables and Templating

Internal Templates

Hugo ships with a group of boilerplate templates that cover the most common use cases for static websites.

Twitter Cards

I guess the creators of hugo don’t use twitter much… since I couldn’t get interal includes to work. Or probably I am borked.. anyways.

    
    <!-- Twitter Cards-->
    <!-- Twitter summary card with large image must be at least 280x150px -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="{{ with .Params.images }}{{ . }}{{ else }}{{ .Site.Params.images }}{{ end }}"/>
    <!-- Twitter Card data -->
    <meta name="twitter:title" content="{{ .Title }}"/>
    <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
    {{ with .Site.Social.twitter }}<meta name="twitter:site" content="@{{ . }}"/>{{ end }}
    {{ with .Site.Social.twitter_domain }}<meta name="twitter:domain" content="{{ . }}"/>{{ end }}

I still use their params, but coocked up my own based from theirs and something I had in my head.

You can verify this works at web-work-tools.github.io/indieweb:

Now I just have to design a header image that fits with twitter dimensions, or set it up to look for an og:image, incase I use a thinner banner image.

Params for config.toml

[params]
  description = "Text about my cool site"
  images = ["site-feature-image.jpg"]

Front Matter Post Variables

description = "Text about this post"
images = ["post-cover.png"]
title = "Post title"

Hugo Shortcodes

Themes

Academic

If you are somewhat familiar with Jekyll already, you may want to jumping right in with Academic Pages. It’s not exactly simple, but its versatile.

I tried github.com/search?q=hugo+theme, and found that Academic has a toooon of stars. More even than the repository for all of hugos themes in one place !!!

There is a one click fork\deploy with GitHub\GitLab Pages and Netlify.

Seriously just click a button, it creates the repo and publishes it for you.

Learn

Another documentation theme, I think a bit simpler than Academic.

All this started a few months ago when I began creating an awesome list on github, then got into publishing via GitHub Pages.