JWDoughty
  • About 
  • Blog 
  • Contact  

I Want You to Write ...

... a Theme *

278 words - 2 minutes to read

I’ve been writing code for a long time. So once I find I am using very similar code in multiple places …

… the urge to be DRY - the Don’t Repeat Yourself principle - that discourages copy and paste or Clone and Modify development in favor of creating re-usable modules kicks in.

Hugo version 0.42 added the ability to use a composite of multiple themes in the form of theme components. Since this, my wife’s, and my home owner association’s web sites, all Hugo-based, were now sharing these responsive image generating partials and shortcodes it made sense to start defining those in a single sharable theme.

Step one was to create the required theme contents and skeleton directory structure for a responsive component theme: hugo new theme responsive

Step two was to git mv the layout partials and shortcodes from the websites’ own layout directory structure to that of the theme.

Step three: convert the responsive component theme into its own small git repo and enable that to be shared among each websites’ individual project code.

Step four: Incorporate the now modular theme components into each website’s local git repo. For that I prefer to use git subrepo rather than alternatives like git submodule or git subtree

git subrepo clone git@github.com:JonathanDoughty/hugo-responsive-components.git themes/responsive-components

Step five, along with step four repeated for each webite’s git repos: add the new theme as a component theme in the website’s config.toml, before the theme that provides the overall look and feel:

theme = ["responsive-components", "gohugo-theme-ananke"]

Since hugo added these capabilities I have made several such reusable components.

[*] With apologies for the reference to Jean Sheperd’s classic “Christmas Story” and Miss Shields.

November 10, 2019

Related posts

  • Adding structured data to web pages
  • Responsive background images
  • More adjustments for responsive images
  • Adapting images to end users' devices
  • Optimizing the artist's web site

Tags

  • hugo
  • website software
© 2019 JWDoughty