How this website is built

So you wanna know how I built this bad-boy eh? Cool! I’m honestly new to this, but I love teaching what I know to others!

First thing to know about this site (as in the files you are accessing to view it) is that the site is built using Hugo, a Static Site Generator (aka SSG). Now I know what you’re thinking, “GENERATOR? LIKE AI? YOU’RE NOT REAL??? IS THIS ALL FAKE?! IS LIFE A LIE?!?!?!?!?!

No. Now calm down for a sec. Have some chamomile tea and chill bro. An SSG is basically a system one uses to make the actual maintenance and building of a website faster and automated. However, I had to go through and set it all up to be the way I wanted it to be before I could start using it. I’ve done HTML in the past, so I know how to code the pages (although I am so rusty at it), but SSG’s help solve some problems that are super annoying to change when hand-coding everything. For example, say I put a nav bar on every page (in fact, there is one on every page on my site!). I went ahead and put in what I think should be there when I first started building it. Time goes on, I make my site (and every page I create contains the code for that nav bar), but then I find I want to put one more item on the nav bar. Shoot. Now I’ve got to go back through all of those pages and add it in. See how tedious this can be?

With an SSG, I just give it some parameters and boom. If I add a page some place that I specify it to look, it will automatically populate the nav bar with that new page. And it does it to every other page in the site. Now, the savvy of you might say “Well gee, couldn’t you just make a nav.html and reference it with a little piece of PHP code in each page and just update that nav file with the new page?" Yes, I could, and I did do that in the past. Here’s the problem though. Your website is no longer static. Now you need to make sure your hosting provider / web server has what it needs to run PHP in the back-end. That, and I HATE PHP. It is the most ugliest-looking programming language I’ve ever seen (aside from BF, but even that has a strange beauty to it). It seriously looks like your computer is puking right into your eyeballs. No thanks bruh.

All-in-all, Hugo is what I’ve settled on. I like it, and even though I have to re-upload the entire site if I do make a major change like that, the actual pages in my website weigh in at under 10KB per page, so it’s basically like nothing to re-upload it every time.

So after I got Hugo and learned a little on how to use it, I grabbed a theme (the bear blog theme to be precise) and started making it my own. I went through a lot of trial and error to learn how Hugo worked, and how the theme was built. I learned about Markdown (which is what this page was written in which Hugo converted to HTML), re-learned HTML and CSS (enough to get what I needed) and then started testing everything out.

All things considered, took about a week of poking around on it after work every day. Actually, if you’re interersted, you can see the reference page I was using to configure my CSS and manage my markdown code conversions here. I included a picture in that post of what the Markdown looked like for the page as well.

And then after all that, I started writing the Home page, the About page, this page, and next I’m going to tackle my first blog post!

If you have any questions, comments, praise, or just want to share in the struggles of web-dev; hit me up!