Details
- Live Demo
- Source Code
- Tech Stack: Hugo, HTML/SCSS, JavaScript, Netlify
- Project Type: Personal
- Year(s) Built: 2021-23
- 50+ GitHub stars
What is Hugo Liftoff?
Hugo Liftoff is a minimal blog/portfolio theme with a focus on content creation and SEO best practices. It’s an ideal choice for technical users jump-starting a personal brand.
Why did I build it?
In short, I couldn’t find a Hugo theme with a design I liked that supported portfolio pieces, a newsletter, series posts, or content subsections.
That’s pretty much it. It was also a good excuse to work on my frontend skills and release my first official open source project.
How did I build it?
Creating a theme for Hugo has a bit of a learning curve. First, you need to understand how Hugo works and the basics of the Go templating language. If you’re coming from another CMS or have used other templating languages like Liquid or Jinja2 before, it’s luckily not too difficult to pick up.
I also had to come up with the best way to streamline the development process. I ended up creating a theme project for testing purposes and only committing the theme directory to source control. Then for any projects that use the theme, I simply pull in any changes by adding the theme as a git submodule. This way, all development can be self-contained within the theme project itself, and I won’t have to override anything in the projects that use it.
For simplicity’s sake, I decided to write the entire theme in Vanilla JS and CSS. Initially, I followed the BEM methodology for structuring CSS to avoid complexity as it grows. Later on, I switched to Sass/SCSS and dropped BEM altogether. I’ve never been a fan of using unnecessary libraries that bloat the codebase if you can just as easily accomplish the same thing with core technologies.
Lastly, the newsletter and contact form have Netlify forms support built-in. This makes it quite easy to integrate other services like an ESP using Zapier or similar automation tools.
Live Demo
You’re viewing a live demo of the theme now! This site is proudly powered by Hugo Liftoff.
Using Hugo Liftoff
You can view the full feature list and download the theme for free on GitHub.