🌐 kj_shugo

my VERY minimal, “no style” Hugo theme that you’re seeing right now! 🎨

✨ features

• generates an rss feed with a Makefile (public/rss.xml).
• dynamic navigation with topnav and nextprev (good for blogs).
• decent amount of code and configuration comments to make it as self-documenting as possible.
• “no style” stylesheet (static/style.css).
  • utilizes default HTML colors and styles wherever reasonable.
  • it exists just to provide responsive web design for mobile and desktop (see screenshots).
• dark mode and light mode (based on site visitors’ system settings).
  • this is not done with CSS; rather, it is achieved with a simple <meta> tag:
    • <meta name="color-scheme" content="light dark">

📷 screenshots

this might look a bit weird on here 😅

on desktop 🖥

on mobile 📱

🔧 usage

theme installation 🎨

hugo new site [YOUR SITE NAME]
cd [YOUR SITE NAME]
git clone https://github.com/kj-sh604/kj_shugo.git themes/kj_shugo
# copy css to the parent directory
cp themes/kj_shugo/static/style.css static/
# copy Makefile to parent directory (for rss feed generation)
cp themes/kj_shugo/Makefile ./
# be careful with the next command(s) 
# remove the .git directory in themes/kj_shugo
rm -rf themes/kj_shugo/.git
# remove assets/ directory (not necessary for the theme)
rm -r themes/kj_shugo/assets

you can now declare theme = ['kj_shugo'] in your hugo.toml file to use the theme.

see themes/kj_shugo/hugo.toml for configuration options and parameters.

generate rss feed 🛜

• run the following in the hugo working directory (where Makefile is located)

make

⚠ Disclaimer: this Makefile originally used sed -i, which works as expected on GNU/Linux. However, I have not been able to test its behaviour on macOS or the BSDs. I have rewritten it to avoid using any OS-specific arguments (-i in this case), but it remains untested at this time. Therefore, please exercise caution when running make on these operating systems.

creating a new page 📃

hugo new content [TITLE OF WEBPAGE].md

📎 main links

• Source Code (GitHub)
• “No Javascript” Version of my Website (another example site)

🖇 additional links and info

• Hugo’s Documentation Site.
• Hugo’s Templates Documentation.