Tutorial: Make a Hugo blog from scratch

#1

Copied from the tutorial intro:

In my opinion, Hugo’s current quick start is ample. It does just what the name says, gets you started you quickly .

Still, there have many requests on the forums for a tutorial that dives deeper than the quick start, and gets into some templating basics. The thing you’re reading is my go at that. Starting from scratch, we’ll build a Hugo blog.

The finished product will be a stripped-down version of the vanilla bootstrap theme.

For the folks out there thinking, “just show me the money already”, here’s the finished product source code and demo.

I hope you guys enjoy :heart: https://zwbetz.com/make-a-hugo-blog-from-scratch/

14 Likes

Comprehensive hugo tutorial for beginners?
Struggling to get 'hello world' site to work
Trouble understanding Hugo's page template structure?
Hugo 101: variables
#2

Thanks. Your other blog posts about Hugo are cool too. Bookmarked :+1:

0 Likes

#3

Your article should be included in the docs. It was exactly what I was looking for since I was struggling just to display navigation links on the page. Thank you for writing this guide. It was structured like the Jekyll quickstart guide and I really liked it for that reason.

Edit: I would be more happy, if you actually explained why partial css is better than linking to an external css file. And also why PublishedDate is the best of the both worlds. Or maybe they are explained in the docs and I just exposed my ignorance :sweat_smile:

0 Likes

#4

@martignoni :slight_smile:


@MrSimsek Glad to hear it was helpful. To address your questions:

Placing the CSS in a partial allows the use of templating features. In particular, accessing params from the config file. This allows you (or others users, if it’s a theme) to configure CSS settings from their config file.

There are other ways to accomplish this, such as creating a resource from template, I just prefer this way.

Per the configure dates docs, the default configuration for publish date is:

[frontmatter]
publishDate = ["publishDate", "date"]
0 Likes

#5

@zwbetz, can’t thank you enough for this! That’s a lot of well organized work friend.

0 Likes

#6

@theadle am glad you liked it :+1: it’s something I’ve been meaning to write for a few weeks now

0 Likes

#7

Oh I see. Thank you again for the article.

0 Likes