A modern theme for the Hugo static site generator.
This is a heavily modified version of Julio Pescador's Future Imperfect, which itself is a port of HTML5 UP's theme by the same name. The latest version can be seen at my personal website reillywood.com.
What's new since @jpescador's version?
This is a very large rewrite focused on styling, performance, and developer tooling. I've done the following:
- Rewrote the CSS using Tailwind CSS
- The original Hugo theme worked well, but it had 3000 lines of CSS in a single file - it was very difficult to make styling changes
- Tailwind's generated CSS is automatically pruned using PurgeCSS as part of a PostCSS workflow to keep file sizes down
- The layout looks roughly the same as before, but I've made a lot of small tweaks and rewritten how categories look
- Added a dark mode using the new
prefers-color-schememedia query and the Solarized colour scheme
- The full FontAwesome icon set has been replaced with a custom font from IcoMoon that only contains the icons used in the website
- Yes, I went a bit overboard with performance
- Replaced the Fancybox lightbox with a customized Flickity implementation
- This allows for nicer fullscreen interactions, image carousels, and best of all – no JQuery
- Replaced the highlight.js client-side code syntax highlighting with Hugo's compile-time highlighting.
- The theme now uses Hugo's built-in bundling and minification for CSS and JS files.
- Generated HTML is automatically formatted using Prettier
- CSS is automatically linted using Stylelint
- There are new shortcodes for images, email obfuscation, card elements...
- Site search is now done with DuckDuckGo instead of Google
- Social sharing functionality has been removed
config.toml. This is where most configuration occurs.
- Replace the /static/img/main/headshot.jpg file with a photo of yourself (unless you look a lot like me)
- Create a new post with
hugo new blog/post-name.md
npm run serve-devand enjoy!
OK, what's the catch?
This is still a work in progress, and it's heavily customized for my own needs. There are some places where I've hardcoded values that are only relevant to me – but they should be pretty easy to swap out.
Some parts that I think are especially in need of attention:
- The CSS for my custom Flickity implementation is a bit hacky, it should be rewritten
srcsetfor responsive images in Flickity is disabled for now, it kept loading the responsive image and the non-responsive fallback image. Spend some time figuring this out
- I have not implemented error code pages (404 etc.) in the same style as the rest of the site
- Need to spend a couple hours tidying this up for public use – move hardcoded functionality into Hugo variables, remove all obsolete functionality from the old theme