Converting from Jekyll to Hugo

I’ve decided to convert this website from Github Pages/Jekyll to Hugo. Th inspiration for this came when I saw the website that Roger Peng put up for his live data analysis screencasts, and there was a big Hugo logo on the bottom. After learning more about this and discovering the blogdown package by Yihui Xie that is based on Hugo, I decided to take the leap in converting my Jekyll Github Pages site to Hugo (hosted on Github Pages).

The rough outline of conversion steps went like this:

Install Software

  1. Install devtools (I never really needed it before)
  2. Install blogdown
  3. Install Hugo (via handy dandy blogdown function)

Create New Hugo Site

  1. Make new RStudio project
  2. Make new Hugo site inside the project (another handy dandy blogdown function)
  3. Transfer the Rmd files from my old Github Pages site to the content/posts directory
  4. Edit all the yaml headers into the appropriate format for Hugo
  5. Build/serve site (RStudio Addins butto)
  6. Play around with many Hugo themes before settling on one (Beautiful Hugo)
  7. Create new Github (non-Pages) repository for the new Hugo site code and push local files to Github

Convert Github Pages Jekyll Site to Hugo

  1. Delete my old Github Pages repository and local directory
  2. Create new empty Github Pages repository and clone to my computer
  3. Change Hugo site’s config.toml to point Hugo to publish files to my local Github Pages repo. publishDir = "../mching.github.io/"
  4. Push locally generated mching.github.io files to Github Pages repo

Pros

The biggest benefit of the change has been not having to deal with images manually anymore. Before, I would convert the Rmd to markdown. If there were images (figures, photos), I would move them to an images folder and then manually edit the markdown file with the image paths. Now it’s all automatic!

The built-in web server on Hugo also allows me to preview pages much faster than before. Before I would have to push the files to Github (and the images too) before seeing what it would look like. Now I only have to push it once when I’m satisfied with the result.

Issues

The biggest issue with the change over was editing the yaml headers. I had a year’s worth of files to go through so it took me a little while. I could have made a script for some of the conversions, but because each file could have certain tags, I had to go through manually and add these anyway.

The other issue was the conversion of the theme. My current theme (beautifulhugo) is a port of the Jekyll theme used on my old site (Beautiful Jekyll), but it suffers from the fact that the little teaser/abstract under each headline is pulling too much text. It will add uninterpreted markdown and code to the abstract, whereas the old Jekyll theme could figure out where to stop. I’m sure there’s a way that it decides how much text to add, but I haven’t gotten around to fixing this myself.

The last issue has been making sure that my various computers are all set up the same way as far as the data locations and packages. In the past, with static markdown files, I could have data on one computer and edit the markdown file from another computer. I would be able to push the markdown changes without re-running the analysis. With Hugo, because the pages are rebuilt every time they are edited, this makes it important that the computers are all set up the same way. Packages are not always easy to install everywhere (Rgdal being a particularly hairy one). However this hasn’t been a big problem because re-editing doesn’t happen too often and I can always wait to use the right computer for the right page.

Conclusion

I’ve been very happy with the switch to Hugo. Use of blogdown has made it much simpler to post, and hopefully I’ll be doing more of this in the future!

hugo