A New Look for This Web Site

Converting This Site To the Hugo Apéro Theme

personal

It’s a new look! I have converted the site to Hugo Apéro theme. It includes some fun images, including some grotesques from the Sterling Library and Law School buildings at Yale. Except it’s an old “new look” because I am converting the blog to quarto.

Published

May 29, 2021

Update: It’s now a bit more than a year later (August 2022), and I’m in the process of converting my blogdown/Hugo/Apéro blog to quarto. I’ll still be using many of the Yale images that I discuss below. Apéro encouraged me to care about the appearance of the site. The quarto version may look a bit rough for now, but I’m sure it will be much better than if I first hadn’t worked with Apéro. Expect a new blog post called “The New New Look.”

I’m now generating this site using the Hugo Apéro theme. I chose to look for a new theme for this site for three reasons.

  1. My previous theme looked bland compared with the many interesting examples I’ve seen lately. Of course my site actually is fairly bland, but I don’t need to emphasize that!

  2. A blog format doesn’t always fit what I want to put on the site. Most notably, since last June I have been updating my post on Covid in Connecticut each week night with the latest stats. That’s a crazy way to use a dated blog post. Apéro gives me a way to have a separate section without the scrolling dates of a blog format.

  3. I feel like I have a lot of things I need to do this month, so of course I was eager to take on an irrelevant new task as a way to procrastinate from the things I was supposed to be doing.

I’m happy with the result.

Finding Some Images to Dress Up the Site

The Apéro theme encourages me to add more images associated with pages on the site. So I had a good time looking for images to use. I have featured photos of gothic grotesques from the Sterling Library and Sterling Law Building at Yale. I have walked between these two buildings thousands of times on Wall Street. There were a lot of gothic decorations included during the explosion of academic gothic buildings at Yale during the depression. The most fanciful are on Sterling Law. The scene of a professor in front of a class that is the heading for the blog page is directly over the main entrance to the building. Actually there are two images. One is the class active and eager at the start of the day and the other is a bunch of tired and sleeping students at the end of the day.

Sterling Law class

For the landing page I have a grotesque from the gallery in the Library. In true grotesque fashion it lampoons the negative image of a callow Yale student with his mug of beer, cigar, and girlie picture. Perhaps I’ll reconsider whether this is the image I want to lead with.

The Library gallery has an array of students carved in stone. In the corner opposite there is one of my favorites: a student with an open book where the page says “U R A JOKE”.

U R A Joke

For more on the Library gallery, read If These Walls Could Talk or see this video on what’s happening on the other side of Wall Street on the Sterling Law Building:

I plan to use some more photos of these details at Yale. I should point out that usually the only time I noticed these things was when I had out of town visitors who wanted a tour of the campus. Only then would I actually look at the details rather than dashing by on the way to somewhere else.

It has been fun looking through my photos for images to use of Yale, or walking in England, or anything else that might fit in.

More To Do

Converting to a new Hugo theme has forced me to actually look at the site. I need to fix up some old posts. I have two draft posts related to the Apple Health Kit that I should just go ahead and finish and publish. I’m hoping that the way Apéro separates the blog from Projects or more ephemeral products will inspire me to use the blog more frequently.

Why Did I Choose Apéro?

I didn’t do an exhaustive search. From time to time I have checked out the gallery of Hugo themes. Switching to a new theme is an investment in time, and I wasn’t confident it would be worth the effort. I have been seeing lots of examples of people in the R crowd using the Academic theme so I was considering that. Then I saw an announcement of a coming talk by Alison Hill that mentioned Apéro. I had recently given a talk to our staff group at work on creating a web presence and based that mostly on a talk by Alison Hill and Desirée De Leon. I’ve been getting most of my tips on Blogdown from reading Alison’s posts so I felt like diving into Apéro wouldn’t be too risky. I think the talk at the end of May seems like it’s the coming out of Apéro so there are not yet a lot of instructions on how to use the theme. I was jumping the gun a bit and appropriately paid a wee price of additional time and frustration. But adapting to the theme has mostly been entertaining and the pain and frustration has encouraged me to develop my weak GitHub skills. I had to dust off Happy Git and try again to learn some basic skills. I even took Jenny Bryan’s advice and started using GitKracken.

As discussed above, I was particularly attracted to the place Apéro would provide for non-blog content. I have more to learn about how to take advantage of those features. What I have done so far with the Project and Collections menus is just a first attempt at exploring what’s possible.

What Have I Learned While Updating

  1. The magick package (based on the ImageMagick library) is more useful than I realized. I used it to resize a photo as raw material to make an iconset. I also used it to concatenate the two law school photos displayed above and resize them so that they were both exactky the same width:
#  Using magick package to append two photos: 
image1 <- magick::image_read("IMG_6832.PNG")     
    image1_width <- magick::image_info(image1)$width    
    image2 <- magick::image_read("IMG_6833.PNG")    
    image2_width <- magick::image_info(image2)$width    
    if (image2_width > image1_width){    
      image1 <- magick::image_scale(image1, paste0(image2_width, "x"))    
    } else if (image2_width < image1_width) {    
      image2 <- magick::image_scale(image2, paste0(image1_width, "x"))    
    }     
xx <- magick::image_append(c(image2, image1), stack = TRUE)  
# and then use magick::image_write to export xx

  1. I should think about PNG images a bit more. To use them as featured images for my posts here, I need to size them correctly. Using the Preview app on MacOS, I ended up sizing them as 400 pixels high at 144 pixels per inch (after initially doing 200 pixels high at 72 pixels per inch). I kept an eye on the resulting file sizes trying to avoid too much clutter. I’ll have to see how well this does. Maybe I should use higher pixel density, which might make a difference on fancy screens. Maybe in the future I’ll use magick to resize images rather than Preview.

  2. My life will be easier if I buckle down and learn how to use Git. I made some progress working on this, but I’ve got a ways to go. And at the end of this project I’ve got bits and bytes lying around on the floor so I need to go back and do a bit of clean up.

  3. Maybe I need to break down and learn a bit more about CSS. As someone who pre-dates the internet, let alone pre-dates CSS, I’ve been reluctant to expose myself to the details of CSS. I did a tiny amount to adjust some Xarigan slides I did last month, but maybe I should do a bit more to help with my web site. I’m always feel like the font sizes of default markdown headers are too large. Maybe I could come up with some CSS that I could use repeatedly here and elsewhere.

  4. I should give some more thought to markdown versus RMarkdown for blog posts, or rather .md versus .Rmd versus .Rmarkdown. The advantage of using .Rmd and RMarkdown to create my content is that I can dive right in with less housekeeping. The disadvantage is that an .Rmd post is more fragile. If something changes, there may be a problem if it has to be re-knitted. I had to re-knit all my posts and there was only one that gave me trouble. In a census post, I was using a list of census variable names downloaded from the census by tidycensus. I had used the fixed position of variables in that list, and it turned out the number of variables had changed slightly. So I had to go back to figure out exactly which variables I needed. It wasn’t too difficult to fix the code and re-knit, but one can easily imagine a situation where the file I’m depending on no longer exists. Then I would be stuck. All the issues that come up when people worry about reproduceable code apply, such as changes in package versions or change in any resource that the code relies on. The solution is to use RMarkdown to create a markdown product and then use that markdown file as the blog post. If I had a blog with a larger audience and greater visibility the pressure to have posts that will endure over time would probably push me to use markdown rather than Rmd. Given my situation where I can be a bit more casual, relying on .Rmd seems like the easy way to go. But I should think about this more for the future.

I decided to follow Alison Hill’s advice and have my blogdown knit .Rmd files to .md rather than to .html. And I now use the knitr button to manually knit the page. It no longer automatically knits on save. The .md files are converted to .html by Hugo running on Netlify. I accomplished this change by adding to the .RProfile file in my blog’s main folder:

  # to automatically serve the site on RStudio startup, set this option to TRUE
  blogdown.serve_site.startup = FALSE,
  # to disable knitting Rmd files on save, set this option to FALSE
  blogdown.knit.on_save = FALSE,
  # full markdown mode
  # build .Rmd to .html (via Pandoc); to build to Markdown, set this option to 'markdown'
  blogdown.method = "markdown", # rather than html
  # so the live preview actually live previews
  blogdown.hugo.server = c('--disableFastRender', '-D', '-F', '--navigateToChanged')

An Update[May 23]

I have been struggling with the issue of going from .Rmd to .md (markdown), which in turn is converted into html by Hugo, versus the normal process with .Rmd which is for the knitr code to use pandoc to turn it directly into html. I’ve been a bit confused by all this.

Alison Hill’s advice (supported by others such as Maelle Salmon) is to have blogdown produce only a .md file rather than html and to leave the production of html to Hugo (which uses Goldmark markdown) to produce the html page.

I used to agonize over which file extension to use. But now I am squarely in .Rmarkdown camp with Maëlle- I like knitting to .markdown and wish this was easier in blogdown; see: https://github.com/rstudio/blogdown/issues/530
https://alison.rbind.io/post/new-year-new-blogdown/

I tried going directly to markdown for a while and it was working OK. But then I realized that I no longer had a table of contents at the top of any of my posts. I like to have toc as an option. So I changed my .RProfile for the blog so that it no longer relied on .md files:

  # build .Rmd to .html (via Pandoc); to build to Markdown, set this option to 'markdown'
  blogdown.method = "html" #  html or markdown

When the method was “markdown” in each post entry bundle I had an index.Rmd file and index.md. After changing to “html” I now have index.Rmd and index.html.

I will try this way for a while to see how I like it. Maybe I will discover new reasons why I should prefer markdown to html.

When blogdown is creating the html directly (via knitr and pandoc), it seems to have some options that are not available from the standard Goldmark markdown used by Hugo. The only thing I’m sure of is that I don’t fully understand the issues involved.

[A note from August, 2022: The confusion and uncertainty above is a part of the reason why I’m so ready to make the jump from Hugo to Quarto.]