A couple weeks ago, I wrote a post about a new Wordpress Theme that I had developed, called "MathesonDigital". Well, I got sick of it quickly. Not because of the design, but because I was using Wordpress, and I wanted to be trendy and cool and use a static site generator.
So for the few weeks following that, I spent my weekends working on a theme for Hugo. The theme that you see my site using (at least, as of this writing) is that theme. You can head on over to my GitHub and grab it. If you're not sure what Hugo is, I highly recommend it. Previously, I'd used Jekyll in the past, but ultimately dropped it because it was slow at generating pages. Hugo, on the other hand, is lightning fast.
If you read the
Readme.md on my GitHub, you'll see that Allegiant is a super clean, no-frills theme developed for Hugo. Some other notable features are:
- Super simple/clean design
- Client side source code highlighting (using Highlight.js)
- Social links (Twitter, Facebook, GitHub, LinkedIn, etc)
- Analytics with Google Analytics
- Font Awesome icons
Make sure that you have Hugo installed first (which can be done easily by following the Hugo documentation). Then, in your Hugo site directory run:
$ mkdir themes $ cd themes $ git clone https://github.com/brycematheson/allegiant
Once that's done, you'll have to configure a
config.toml file. In that file, you can enter the following information and then customize it to your needs:
baseurl = "yoursitehere.com" languageCode = "en-us" title = "Allegiant" copyright = "© Allegiant. All Rights Reserved." # Copyright notice. This will be displayed in the footer.
canonifyurls = true
[params] ga_api_key = "Your Google Analytics tracking id" # Google Analytics API key. avatar = "../../img/avatar.jpg" # Image should be square, and roughly 150px x 150px bio = "Insert your bio here. You should write something really whitty and interesting that nobody is ever going to read or care about. But such is life. I really like the look of having a bio snippet on the blog, though. You may have to adjust some CSS styles depending on how long or short your bio is. I didn't make it super resillient." github = "http://github.com/username" twitter = "https://twitter.com/username" linkedin = "https://www.linkedin.com/in/username" footer_1 = "Some text here." footer_2 = "Some different text here." footer_3 = "Even more different text here."
Once that's done, simply run a
hugo server -w, and you'll be up and running.
"Allegiant" is currently showcased as one of the available themes on the Hugo website. If you find any issues with it, go ahead and post any issues on my GitHub. Otherwise, enjoy it and let me know what you think in the comments.