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