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
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
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 subrepo clone email@example.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
and Miss Shields.