KimberlyHirsh
KimberlyHirsh

Hey Micro.bloggers and other interested parties, do you have favorite resources that helped you learn how to create a Hugo theme?

|
Embed
Progress spinner
pimoore
pimoore

@KimberlyHirsh When I worked on Tufte, I referenced other MB themes to see what they were doing in various HTML elements. I’ve done some scripting so parts of the templating made sense to me—the rest I had to read online. Stackexchange is an excellent resource for tech and web-related topics I find, much better than Hugo’s own documentation IMO.

|
Embed
Progress spinner
mandaris
mandaris

@pimoore @KimberlyHirsh I did the same thing. I started with some of the more less complicated themes. It’s so that I could build an understanding of how it comes together and what the bare minimum was. From there, I iterated until I got something I enjoy.

|
Embed
Progress spinner
gregmoore
gregmoore

@KimberlyHirsh I started my theme by making a plain old HTML and CSS layout that I could add all of Hugo’s codes into one at a time. It really helped force a step-by-step approach where I rarely had to troubleshoot multiple bugs at the same time.
From there I stood on the shoulders of giants by looking to working Micro.blog themes. I referenced Marfa’s code a lot because I knew Mantin had baked the essentials into it.

|
Embed
Progress spinner
KimberlyHirsh
KimberlyHirsh

@gregmoore @mandaris @pimoore Thanks y'all! I have plenty of HTML & CSS experience (but I'm old, so I'm always having to re-learn newer stuff like Flexbox, Grid, & semantic HTML). These are great starting places.

|
Embed
Progress spinner
heyloura
heyloura

@KimberlyHirsh Micro.blog lets you have a test blog which is perfect for playing around. Another tip, if it looks like your changes aren't taking effect (like mine do all...the...time) then you can go to micro.blog/account/l... and see if there are any build errors.

|
Embed
Progress spinner
gregmoore
gregmoore

@KimberlyHirsh I used my personal theme development specifically to learn Flexbox and Grid. They seem tricky at first but greatly simplify and reduce complexity once you see what they're doing.

|
Embed
Progress spinner
In reply to
KimberlyHirsh
KimberlyHirsh

@heyloura Thanks! I knew those things but they definitely weren't top of mind so I appreciate the reminder!

|
Embed
Progress spinner
jsonbecker
jsonbecker

@KimberlyHirsh my strongest advice is not to start from an existing theme. Many of them are incredibly complex, often for (in my opinion) no good reason. I find it really helpful to start with a nearly blank theme, locally, with the common "exampleSite" content, running the Hugo server, and making your own changes step by step. It's actually not that complex, and doing things from the bottom up will help you understand all the "pieces". I did this almost exclusively with the Hugo Docs themselves and was able to learn pretty fast.

|
Embed
Progress spinner