Dustin Boston

Another day, another website redesign. However, this one ought to last.

• Create a new theme using hugo new theme <name>.
• This will create a new theme starter in the themes directory.
• Hugo will look for templates in the layouts folder too.
• You can put site-specific templates here, e.g. the home.html page.
• Add a cover image to your post with page bundles and this snippet:

  {{ with .Resources.GetMatch "cover.*" }}
    {{ with .Fit "300x200 webp" }}
      <img
        src="{{ .RelPermalink }}"
        width="{{ .Width }}"
        height="{{ .Height }}"
        alt=""
      />
    {{ end }}
  {{ end }}

• Fit will rescale your image to fit within the dimensions provided.
• I’m using the Verti template by HTML5Up as a base.
• Generate styles for the syntax highlighter with hugo gen chromastyles.

The Verti Theme

• It’s a common practice for me to redo my side-projects several times.
• I’m going to update the theme so that it reuses the Verti HTML and CSS.
• The Verti theme does not enable ligatures by default. It’s an easy add:

font-feature-settings:
  "liga" 1,
  "calt" 1;

• Replacing jQuery and plugins with a simpler CSS-only hamburger menu.
• See https://codepen.io/ryemccoy/pen/eYrmpw for a good example.
• The Verti theme doesn’t look awesome in Hugo because it is very custom.
• I’ll tag the branch at this point and begin my own customizations.
• If I want to publish the theme later on I can checkout this tag.

In the future

• Can somebody please turn off the lights? (Dark mode needed)