· Pretty Good Hat · archive · about·

My First Hugo

 

This is my first post to Hugo. So far, so good?


Running log of my work to get Hugo set up the way I want it:

  • Jan 15: Installed on Pair and on my MacBook locally. Made the first version of this post. (Required installing Go on the MacBook, as well as figuring out the environment variables to run Hugo.)
  • Jan 16: Wrote a quick ruby script based on a snippet from my homegrown static blog site, to migrate all my markdown entries to Hugo; this required reading their dates and titles and adding them as proper toml metadata to the Hugo file headers. It sure was a good decision to use a bunch of plain text files when I built my own engine.
  • Jan 17: Themes are kind of complex. I’m playing with the HPSTR theme. Figuring out how to work with it involves learning a little bit of how SASS works, and a whole lot of trial and error. This theme has a lot of components. I’m tinkering with color and some of the page’s components: To wit, today in a couple of hours I learned how to change the header and link colors and remove the ‘reading time estimate’ from the list page.
  • Jan 18: What now? I’d like to remove the hamburger menu. Also need to figure out a urg-ahoy-hoy Deployment Method. Though I’m also re-watching The Expanse while I sit in a bar, so this may go more slowly.
  • The great majority of all my content converted to the Hugo site works just fine as-is. There are two notable exceptions:
    • First, the link list-type posts that I wrote for my homegrown blog worked by having a link in the title/header. As-is, Hugo doesn’t render these. This might be fixable easily by adding | markdownify to the template where the title is rendered, as in the list and single templates for the theme.
    • Second, the images that I display using the lightview lightbox don’t display, because I don’t have the required style and script available.
      • (Jan 21) This took a while to get a handle on, mostly because I’m not very good at this, I wasn’t focused, and I might have had a drink or two. Figuring out Lightview involved learning how to deal with Hugo shortcodes and then doing a bunch of debugging. I ended up with a shortcode, basically a snippet that inserts the arguments I specify, into the code that I used to build for lightview. Additionally, I had to put the calls to lightview’s javascript and stylesheets, as well as to jquery, in my page templates. Of course, now I have to go and re-code in my markdown files, but I do have a good method going forward (and I don’t have all that many posts with the old lightview method, anyway).
      • (Jan 22) Done. This shortcode thing works great and I’m looking forward to experimenting with it for more uses.
  • Jan 22: Now I need to figure out an index/archive page.
  • Jan 24: It’s a snow day. I’m screwing around at home while the kiddo builds stuff in Minecraft. So I learned a little more about templates, worked on a replacement for the nav hamburger menu, and applied a little bit of my crappy design sensibility to the header.
    • Next on the improvements list: Cleaning up markdown links in my archive page, and maybe better link presentation on their individual pages.
  • Jan 26: Oh, right, need to do RSS and figure out if there’s a webmentions method to add.
  • Internal links are probably broken and need to be either fixed in the markdown source or redirected. Here’s the perl I came up with to replace relative and absolute links that used my previous convention.
 
    perl -i -pe 's/]\(\/2012(\S*)\.html/]\(\/post\/2012$1/g' *.md
    perl -i -pe 's/]\(http:\/\/prettygoodhat.com\/2017(\S*)\.html/]\(\/post\/2017$1/g' *.md 
    perl -i -pe 's/pics\//\/pics\//g' *.md
  • Probably should install some syntax highlighting. Then I think it’s about time to go live.
    • That was easy. Added pygmentsuseclasses = true to my config, and:
<section id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Data.Pages }}
      {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

To make this work on my web server I needed to $ pip install --user pygments.

  • Prep for deployment by marking all posts as draft = false: perl -i -pe 's/draft \= true/draft \= false/g' *.md