How'd I Get This Working? Part 1 of ??
By norb
The Start
It all started a bit ago when I decided to quit relying on a friend to host my site (if you want to see what it looked like in all it’s hand-coded html glory, you can)
I’d tried different blogging and web platforms over the years (if we want to go alllll the way back, I had a Geocities site when I was a teenager - Livejournal - self hosted Wordpress - cloud hosted Wordpress (Godaddy ew) and who knows what else I’ve forgotten). I’m mostly setting this up as something to spend some time on. A project, if you will.
I did some deep, deep research (i.e. a quick web search) for self-hosted website or blog platforms. That turned up two results; Jekyll and Hugo.
I tried Jekyll first. Spoiler alert!! It did not go well. I could not even get the development environment up and running.
An Aside About My Background - Probably a Pointless Diversion
I have worked in IT professionally since 2000. I have run any and all kinds of systems. I know a lot about Microsoft products, and enough about Linux and MacOS to appear as a wizard to most of my friends and family. I am REAL GOOD at clicking on stuff and making thing happens. I am A FUCKING SAVANT at watching progress bars. What I am NOT GOOD AT is coding. I never have been.
When I was a kid, the first “computer” I remember us having was a TRS-80. You hooked it to your TV. It used cartridges to load software (we only had one, Dungeons of Daggorath which my tiny kid brain couldn’t figure out how to get past the first monster - hell I seem to remember just getting a torch and keeping it lit as a special challenge).
You cloud write BASIC programs and store them in RAM to be wiped out after a restart. This was super cool when I was 10.
Later we got a Gateway PC (cow boxes, anyone?). I didn’t spend much time programming or anything. What I did spend inordanant amounts of time on was editing .bat and .ini files and troubleshooting IRQ conflicts to get my Soundblaster card working with a 9600 baud modem also installed in the PC at the same time). I did take programming classes in high school (QBASIC and Pascal). At the time, programming was the only thing I thought you could do to get a job in computers, so when I enrolled in college I decided to go down that road.
It took me all of 2 college-level programming courses to realize I hated it. Spending hours looking for (as the meme goes) “one curly boy missing his friend” was an exercise in patience I did not have. Anyways, I eventually found my way to Geographic Information Systems and a job at the university help desk and then what would now be called a “Junio Sysadmin” position in one of the university departments.
So all of that aside, Jekyll was too much for my feeble coding skills. Enter Hugo!
Hugo Try 1
Ok, getting Hugo up and running isn’t too bad. I am using a Windows 11 laptop for this project (for now - I have a feeling that I’ll switch to Linux for this in the future). I followed the Quick Start Guide from the Hugo site. Don’t forget, I have a PHD in watching progress bars! Anyways, I got Hugo installed, Git for Windows installed, and then spent an hour looking at all the Hugo themes I could find looking for one I liked. This is where Try 1 goes hard left.
As far as I can tell, themes are the engine of making Hugo work. They are all built on the same Hugo base, but they do not all do things the same way. My original idea was to just shoehorn my old site into Hugo, then use Hugo to manage the blog posts. I think this might be doable (my old site is pretty barebones) but I found that I was just getting too deep into theme configuration to try to make it work. Editing the pages in the “public” folder worked, but a new build seemed to replace some of them. Ok fine, I am good at blowing things up and starting all over. This is how I’ve learned every technical skill I have.
Luckily getting rid of a Hugo site is as easy as deleting the folder you created to store it in. Then you just run hugo new site mysite again and start all over.
The Hugo commands are run in the Git Bash command line utility that was installed at the beginning of this folly. You can also use Powershell for this, but I picked Git cause it was required anyways so might as well.
Hugo Try 2
I’ll just go ahead and use out of the box Hugo and build my site that way.
NO
Hugo Try 3
Ok, I’ll just use the recommended theme “Ananke” and go from there. And that’s where I’m at today. I am still figuring it out. Getting Ananke working required me to install Go. Then I had to manually edit the PATH variables to point to where Go actually got installed. That took me a bit to figure out (in other words, I had to try to create the site 3 more times before I read the error message which specifically mentioned the PATH varible… I am not smart).
Here’s a struggle: images. As far as I can tell, Ananke has no built in image handling. This isn’t a problem, there’s a Hugo module for managing images. You just add a bit of code to your config.toml file and bada bing bada doom you’ve got an image handler that can be called with markdown. Neat! Except… I needed to copy go.mod from the root folder of my site where it comes with the theme to one folder higher. No idea why, but when I did the Hugo server would load and the site worked.
Ok, so what’s the real image struggle then? Well, it doesn’t seem to work exactly like it should based on the documentation. For example, this code should wrap the image to the left and resize the image to 200px wide while preserving the aspect ratio:
Well when I try that, I get this:
?width= should preserve the height. #float-start should wrap the test to the right of the image. My thought is ALL the text, not just the first line - this would appear to be confirmed by the documentation. So that’s why in the above section of this article the images are just between the paragraphs. Not how I want them exactly, but it will do for now. This paragraph will just look like hell until I figure out how to fix it, or else move on to Try 4.
Ok, so how am I getting this on the web? Well that takes me to
Hosting
This website runs on a DigitalOcean droplet. It’s a cheap Ubuntu build with a couple gigs of ram. I followed DigitalOcean’s configuration guide which was super easy. Then for https I followed their configuration guide for Let’s Encrypt. Again, pretty easy. But as mentioned above, I am AMAZING at watching progress bars. This is the stuff I cut my teeth on over the years.
I did a bit of additional firewalling, locking down SSH/SFTP to my home IP address and really only allowing 80 and 443 out to the internet. I’m sure there are detailed guides out there on managing the Ubuntu firewall and finding your IP address. I am too lazy to get into all that here.
Then, to get my site up for you to view I do a couple things. First, build it on the dev machine by running hugo --gc --minify then copy/upload the “public” directory to the root of my webserver.
Part 2 Ideas
Here’s hoping I write Part 2 sometime later.
Things I want to work on/revisit:
- Fixing images
- Dark mode
- RSS
- Link to message me on Signal?
- Use another/different theme? (not sure I like this one - blow it up and start over!)
Thanks for reading.