Welcome to the week 2 assignment, which I’m actually completing first because I kind of need it to publish the week 1 and other week 2 assignment.
First up is getting access to the git repo. I follow the instructions on the site, and need to generate a ssh key for my mit email and ssh-add it. Now I can git clone the ssh link, rad.
So now for the site. I guess I’ve been building personal sites since jQuery was the hip new thing. My knowledge is frozen in a bunch of ways though, and most of my web dev is just getting a blog or something on the internet. My go-to is usually Jekyll, but I decided to try Hugo for HMAAA.
I went through the quickstart, which created a new directory with a bunch of folders. Some are familiar, like content and static, and some are new, like archetypes (I guess like templates for new posts?) and the i18n (internationalization) is interesting to have right off the bat (though I wonder if that’s why I sometimes see sites that translate the page’s navigation to the region’s locale but leave the content…). I added a few draft posts for the first few weeks. I skipped the step with the theme because I wanted the most minimal thing possible, and ran hugo serve -D. That.. didn’t work. It produced an approximately empty website, just with some index.xml things. I guess page templates don’t come with the hugo new site command I ran.
I looked for the minima theme I usually go with but realized that was another jekyll thing (there was something else called minima, but it was a little different). I asked ChatGPT for the most minimal hugo themes, and I picked out mini. Upon adding the git submodule to my directory and rebuilding, I had a little website!
Now I start going through the configs a bit. I update the config.toml with my name. The template comes with an example in yaml, and I don’t know how off the top of my head how to map yaml back to toml, so I see if I can just change my site’s config.toml to a config.yaml. I do and it seems to be okay with that and gives me a new error
Hm, where did you log it hugo? I check the javascript console, nothing. Then the terminal, there we go.
"ERROR deprecated: .Site.RSSLink was deprecated in Hugo v0.114.0 and will be removed in Hugo 0.135.0. Use the Output Format's Permalink method instead, e.g. .OutputFormats.Get "RSS".Permalink"
Bah, the template I chose seems to be a bit out-of-date. I remove that from the yaml and get
JessicaLynnStringham/:1 Refused to apply style from 'http://localhost:53385/css/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
After some poking, and asking ChatGPT, I guess it was because I had changed the config.toml baseURL to what I think the production one will be.
Okay and now I have a little site, yay! Now I go through and start tearing up the theme. I might have chosen the wrong theme to start with, because it looks like mini is intended for blogs and has a lot of references to posting time and reading time, which I don’t really want. On the other hand, it is really minimal so it’s easy to understand how to change things. I stripped down the posts, removed almost everything from the navigation and added a title, and replaced the header matter’s date with a weight so I can control the order. I wanted to try some custom
fonts, because they can weirdly inspire me to write, so I went to Google fonts, picked a funky one, clicked the awkward “checkout”
button, and then the “embed” link, and copied those into my head.html template and update the stylesheet.
I’ll fall back on the normal system fonts if anything happens, but at least when I’m connected to the internet,
it looks good! And so I have a little site that I’m okay with using for now.
Unrelated aside, but I am annoyed that everytime I restart my server, it’s on a new port I need to copy and paste to the browser. Luckily I don’t have to restart the server very often (so far I’ve only done it when I’m confused, and I haven’t noticed it actually fixing things).
Resizing images 🔗
Anyways. A nice thing I have for my personal site is a script to resize all of my photos. That was also part of the first assignment.
I thought I heard hugo had some powerful rendering steps (though now I’m wondering if I had heard about a different framework…), so I looked for image processing, which I found here. It does seem to have everything I need, including converting things to jpg and reducing the quality.
So that’s pretty cool. Now I need to figure out how to apply those settings every time I add a photo.
There’s a code snippet on that page seems to show what I should be doing by calling a function called imgproc, but I don’t actually know where to put the code to define imgproc. Maybe if I would’ve read the manual I’d know, buuuut, I can poke ChatGPT.
It tells me to put it in a folder called shortcodes, and now I go and read the hugo documentation on shortcodes. There’s still things I don’t really understand, like why with seems to feed things into a
variable called . and that the with has an else associated with it. But I’ll learn hugo on a need-to-know basis, and I can get by here.
It’s good to know I’ll be able to make a reusable function out of this, so this seems like a promising path. But let’s try to get a little image to
show up in the page itself. I try to strip down the code example to get a simple example that just loads in the image and
puts it in a <img> tag. But hugo has other things in mind, and is happily rendering the {{ $image := .Resources.Match "images/error1.png" }} directly onto the
page. So now I’m trying various things to make it run the fancy .Resources.Match code. I wonder if it’s hugo’s
way of saying I wrote something wrong (looking back, I think hugo is pretty loud if it doesn’t like the code or can’t find a file), so I
rename files, restructure folders, but when I refresh the page,
it’s still outputting the template in plain text. I try to hold back judgement on hugo, and miss jekyll and jinja.
I went back to ChatGPT, and after some back-and-forth, it finally informs me what I had suspected that I can’t use the {{ things }}
in markdown files, I should do it in a shortcode. With some poking with the docs and ChatGPT, I got a snippet of code to render an image.
The next part was actually pretty, cool, I could apply a few image processing steps from here
to make a shortcode that ran some processing to decrease the size, convert to jpg, and decrease the quality. So as long as I always call things with imgproc, it’ll serve those small images.
Or, maybe not. A question is whether it still uploads the full size ones. I took a look in the public folder and, oh no, it doesn’t clean public so I’d have a lot of old images too from when I was testing.
I’ll need to remember to clean out the public folder before rendering the version I’ll upload. I tried clearing the folder and seeing what got generated from a blank slate, and indeed the original image will also be uploaded, even if it’s not shown. No good.
There’s a section on the page about Image processing performance consideration, which mentions a command hugo --gc. I try it, but it still doesn’t remove the full size images. A Google search gives me this post where others are running into the same issue. I’m kind of confused by the suggestion. Maybe I can just remove things after the fact, since the resized images all have _hu\d+ in the name, which might be enough to include them.
To finish things up, I wanted to move the images from the page resources (I’d been keeping them in content/posts/w2-web/images) to a global location (static/images/w2-web) so I could limit the hacky “only keep images hugo has processed” to a folder of images.
Since I was moving it out of the page resources to the site resources, I wondered if it was as easy as removing “page” from .Page.Resources.GetMatch, and it was not.
And now it won’t compile, and keeps complaining about Image.process. I comment things out until there was no image process code, but it still complained, wat. I searched the repo to see if maybe something had been cached and… realize it was because I had dropped the example code block above into my post. I’m kinda confused by why some things work in templates and what doesn’t, but ah. ChatGPT quickly tells me to use a special raw marker (which is hard to document here since.. they use the same marker for start and end of raw.)
Okay back to the image processing code. For most images, I just set the width to the target width of the text. But I have a separate vertical specification so that vertical images don’t become really long when I do that. I’m feeling a little brave (chronologically, this was just before the raw incident above), so I even write conditionals in the template. Right now it’s a shortcut for setting the height to 400, but I could also have it pass through a set number of pixels. I’ll wait until I need that though.
Wrap up 🔗
As some final things, the code examples are just trailing off the screen, and ChatGPT tells me to use the style overflow-x: auto;.
When I go into the stylesheet, I notice there’s plenty of overflow-x things going on, but it’s under p pre or code. I update my
use of triple-backticks to include text, and I get the scrolling without touching the stylesheet. (I realize also I probably could
have been using the “additional stylesheet” tools, but ah.)
And with that, I think that’s enough to get started! I put my other weeks into drafts that I’ll finish up later.
Bonus: what happened after uploading 🔗
- I realized
hugo serveis not the right command to build, it’s justhugo --environment production. I was including a livereload script, whoops.
Git tutorial 🔗
Another part of the assignment is a git tutorial.. which I.. I think I know 98% of what tutorials would tell me. But I could go find
some new part of Git I don’t understand. I check through the Pro Git book, and went
to the section on searching. I learn about the git log -S, a “pickaxe” that returns the commits where the number of occurrances change.
There’s also a git log -L that you can give a function to, and it’ll try to find all of the changes made to that function. Woah,
I didn’t know git had a concept of functions!
I also checked out the advanced merging chapter, but my dirty secret is that I’ve been resolving conflicts manually all this time, and probably will continue doing so.
One of the pages mentioned read-tree, which I don’t think I’ve heard heard of. I guess this page about git internals could be super interesting, but I think that’s for another day.
Appendix: Added in week 2 🔗
I needed some help from ChatGPT while working on w2-computer-controlled-cutting because I
had two new file formats: a gif and a lot of HEICs from my phone. For the gif, I created a new
shortcode that just pulls in the resource and copies it. That’s what worked at least. For the
HEIC, I was disappointed again because it appears it’s not supported, giving the error execute of template failed at <$image.Process>: error calling Process: this method is only available for image resources . ChatGPT told me to use a Folder Action, which I hadn’t used before so I tried it out. Good to know another trick, though it is annoying that I have to use another tool.
Appendix: Assignment 🔗
From the class website:
read, sign the student/instructor/lab agreements, and commit to your repos
work through a git tutorial
build a personal site in the class archive describing you and your final project