Notes to Self, on Self Hosting Fonts on My Hugo Blog

Writing this down, so that I will not struggle the next time1, I have to do this. I use Valkyrie for everything on the blog in various weights, except for code and preformatted stuff, which uses Source Code Pro Medium. Both are WOFF2 fonts. Anything in Hugo’s assets/css/extended folder will be picked up by Hugo and bundled into a single CSS file. The fonts are in subdirectories in the static/fonts/font-name folder. Anything in the static folder shows up at the root of the site. ~/mjb/blog/static/images/test.jpg will become /images/test.jpg I’ve created an embed-font-name.css file in the css folder above, with embed instructions generously provided by Matthew Butterick in his font documentation for Valkyrie. I adapted the same for Source Code Pro as well. Here’s a sample of my embed-source-code-pro.css 1 2 3 4 5 6 7 8 @font-face { font-family: 'Source Code Pro Medium'; font-style: normal; font-weight: medium; font-stretch: normal; font-display: auto; src: url('/fonts/source-code-pro/SourceCodePro-Medium.woff2') format('woff2'); } Finally, I created a zz-include-css.css file, which I use to overide the default CSS, so I can use my custom fonts. Since it starts with a zz it comes after the files above, that start with embed, in the final munged and minified CSS file. These are my instructions to have most text rendered with Valkyrie and code as Source Code Pro Medium2 1 2 3 4 5 6 7 8 9 10 #top { font-family: valkyrie; font-variant: oldstyle-nums; } .post-content pre, code { font-family: 'Source Code Pro Medium'; font-style: medium; font-weight: 500; } Look! So pretty :) P.S. Subscribe to my mailing list! Forward these posts and letters to your friends and get them to subscribe! P.P.S. Feed my insatiable reading habit. ...

October 9, 2022 · Mario Jason Braganza

Line Numbers in Hugo Codeblocks

I want my code blocks on the blog to sometimes have line numbers. Looking at the Hugo docs here and here led me to the linenos argument. While we’d start our code blocks like (```python)1, all I need more is to add the line number argument like so. Vanilla code block … print(f""" “It’s silly to try to escape other people’s faults. They are inescapable. Just try to escape your own.” — Marcus Aurelius """) print(f""" “Just that you do the right thing. The rest doesn’t matter.” – Marcus Aurelius """) Now, using the linenos option, I can be all fancy to show … ...

September 17, 2022 · Mario Jason Braganza

Drafts App Needs Escaping if I Am to Use Hugo Shortcodes

When I finally figured out how to get line breaks working on my microblog, I ran into another sort of hiccough, when I tried doing that from my phone. I use the Drafts app on my phone and tablet to slice and dice all manner of text and to send it to various locations as I please. One of those is a workflow, that lets me shoot text to a folder on my server which is then published (via a script) on the microblog. And everytime I typed my {{< hbr >}} Hugo shortcode to let me have a line break in that post1, it would just publish gibberish2 instead of giving me said break. ...

September 14, 2022 · Mario Jason Braganza

Line Breaks on My Microblog

I use a (not quite) hidden blog to collect all sorts of bits and bobs and to (selectively and automatically) publish them to my fediverse or twitter accounts. The one thing that constantly bugged me, was that it would not accept line breaks to differentiate between paragraphs. Like this post, here. I don’t know if it’s my theme or a Hugo thing. And try as I might, I couldn’t quite figure it out. Since I don’t quite have the time to dig into the code, I just decided to add a couple of <br> tags. And that did the trick! 1 ...

August 31, 2022 · Mario Jason Braganza

Setting Canonical URLs in Hugo

I steal quite a bit from other folk, to put on my blog.1 Case in point, is my last post where I stole the image from Tom Gauld. Or a few Seth Godin posts, somewhere on the blog, that I have posted in their entirety. While I do credit them in the post, I wished there was a way, I could programmatically tell the search engines and the bots of the world that I did in fact, steal from someplace and that they should actually be looking over there and leading people there. A little bit of searching, reavealed that there is in fact, such a way to do it. It’s called the Canonical URL. In a nutshell, it tells the machines to guide folk there, because that is the source of truth. ...

July 17, 2022 · Mario Jason Braganza

All About the Move to Hugo

I finally got done, moving the blog from Nikola to Hugo today. I already wrote about why I did it. These are a few more thoughts about what went into the endeavour; and some colophonesque details. One, really small hope, is that it will help me learn Go. The DevOps world that I now seek to enter, speaks Go. I also, now run two Go programs that are indispensible to me, Hugo and Miniflux. And being the control freak, that I am, I’d love to tweak them to just how I like it. Nikola did help learn me Python, after all. ...

May 13, 2022 · Mario Jason Braganza