How I Made My Blog

Long story short, I made it using Hugo!

Backstory

I’ve been wanting a creative outlet where I can share more details about my projects, and a blog seemed like a natural outlet. I spent a lot of time looking at what others were doing. Which led me to believe that I needed a React framework. Taking a look at all the branches my site has, you’ll find a plethora of failures…

Later, learning about static site generators ignited my hope of a simple and fast way of creating content. I didn’t want to abandon my simple HTML, CSS and JS to load my main page. A simple web search and a “Hugo in 100 seconds” masterclass convinced me I had found just the right thing!

Unconventional use of Hugo

While keeping my landing page just as is, the goal was to get Hugo to compile to a /blog directory. I created a “hugo_src/” directory where the Hugo source code will live. I had Hugo compile to a “../blog” directory that can be hosted normally as my site is. This was achieved by editing the hugo.toml:

1baseURL = 'https://v01d.dev/blog'
2languageCode = 'en-us'
3title = 'Blog'
4publishDir = "../blog"
5
6[[menus.main]]
7name = 'Blog'
8pageRef = '/blog'
9weight = 10

The key is defining the “publishDir” to “../blog”. I kept the rest of the site simple, with only the /blog page that includes the list of content.

Theming

As you can probably tell, I didn’t use a theme provided by Hugo. Based on a black theme created by Hugo. I copied and manually edited the partials and defaults from the basic template into my hugo_src.

  • In the menu.html I removed the default nav bar and added my basic html: 

    1<nav>
2    <ul>
3        <li><a href='/'>Home</a></li>
4        <li><a href='/blog'>Blog</a></li>
5    </ul>
6</nav>

  • In _defaults, home.html defines the blog page. I included a summary of every post and the date that it was published: 

     1{{ define 'main' }}
 2  {{ .Content }}
 3  {{ range site.RegularPages }}
 4    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
 5    <div class='summary'>
 6        {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
 7        {{ $dateHuman := .Date | time.Format ":date_long" }}
 8        <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
 9
10        {{ .Summary }}
11    </div>
12    <br>
13    {{ end }}
14{{ end }}

  • Finally in partials, the only change I made was to the menu.html which added my nav bar: 

    1{{- with index site.Menus $menuID }}
2  <nav>
3    <ul>
4        <li><a href='/'>Home</a></li>
5        <li><a href='/blog'>Blog</a></li>
6        <!-- {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} -->
7    </ul>
8  </nav>
9{{- end }}

I simply edited the main.css to style everything 👌.

Conclusion

While I’m sure this isn’t the best way to create the most optimized blog. This was an amazing way to get exactly what I wanted in a few hours of work over the weekend.

Of course, the source code to my website can be found on my GitHub

↑ Contents