Converting Simple Web Page Into Hugo Theme Part 5 - Templating and Icons

February 12, 2019

We are almost done with creating theme. What is left is to add icons for social menu items and nav links. Previous posts: Part 1 - HTML & CSS Part 2 - Theme Home Page Part 3 - Single Post Page Part 4 - Externalized Configuration For that we’ll use Hugos templating functionalities (and the fact that Hugo doesn’t care what we are trying to template as long as it uses .

Read more

Converting Simple Web Page Into Hugo Theme Part 4 - Externalized Configuration

February 11, 2019

Externalizing theme configuration Everything so far looks OK but navigation is hardcoded in sidebar but it should be configurable so that one can enable/disable/change some options. Hugo pulls site configuration from two places, global site config file (blogv1/config.toml) and theme config file (blogv1/themes/only-bones/config.yaml). Some properties from site config file cannot be overriden by theme config file, more on that here. Notice different files extensions of the config files. It doesn’t matter as Hugo supports toml, yaml and json format (BTW, you can convert between these configurations (and see what changes) using toolkit.

Read more

Converting Simple Web Page Into Hugo Theme Part 3 - Single Post Page

February 10, 2019

Single Post page In previous post we saw how to convert HTML page into fragments and created home page that shows list of posts. In this part we’ll show how to implement single post page. When creating page that shows list of posts we said that all pages will inherit _default/baseof.html that looks like this: <!DOCTYPE html> <html> {{- partial "header" . -}} <body> <div class="wrapper"> {{- partial "sidebar" .

Read more

Converting Simple Web Page Into Hugo Theme Part 2 - Theme Home Page

February 9, 2019

Creating Hugo theme Before we start with theme, lets first create our blog and add few posts. Run hugo new site blogv1 in some folder where you’d like to to put your blog. Then cd into blogv1 and create two posts: hugo new posts/my-first-post.md hugo new posts/my-second-post.md and paste some content (from good old) into the newly created files. Then run hugo server -D and open localhost:1313 in your browser.

Read more

Converting Simple Web Page Into Hugo Theme Part 1 - HTML & CSS

February 8, 2019

Once I’ve decided to start blogging several questions opened like what to use, where to host, what theme… I decided to go with Hugo for generating static sites since hosting static sites is a lot easiear than hosting something dynamic like Wordpress, plus Hugo is fast and supports live reloading (via JS it injects into the page) in development mode when it detects changes in files. I installed Hugo, wrote some posts and tried some themes hoping to find one that is minimal, light and that fits my expectations.

Read more