New Year, New Website

image of a single green leaf on a hite background

I haven't been keeping my website up to date with my career as a data scientist and I'd love to start sharing more about the projects my team and I have been working on. I used to be on Squarespace and the thought of trying to write up R code in Squarespace's CMS was enough to keep me from just never sharing.

No more! I’ve migrated over to blogdown and am hosting on Netlify. What follows is a short write up of the process and some of the custom configurations I’ve made.

What’s Needed

Other than wanting to use blogdown, I didn’t have a firm grasp of what tools I needed at the outset. Here were my four requirements for the project that led me to my current solution:

With those requirements in mind, here’s the tech stack I’ve ended using:

Process

I won’t belabor a step-by-step here because there are already good blog posts on the topic, and no better resource than the blogdown book itself. Still, my process looked roughly something like this:

  1. Install blogdown & Hugo
  2. Pick Hugo theme (hard!!)
  3. Create a new R project for the site
  4. Initialize a repo on GitHub
  5. Add public/ to gitignore
  6. Connect Netlify to the GitHub repo
  7. Customize and add content

That’s it. It took me only the better part of one weekend afternoon to read up on it all, make a few false starts, and then get something up and running on the web. Here are some more details on the process.

Read the manual

Before really getting going, the very first thing I did was skim through the blogdown book. At a minimum, I’d recommend you read all of chapters 1, 2, 3, and 4. Much of it will no doubt make no sense at first (layouts/partials/ what?) but I felt better prepared having gone through it and knew which sections to revisit once the process was underway.

Pick a Hugo theme

As recommended in the blogdown book, you should spend some time first picking the Hugo theme you’ll use, before building the site. I took the advice to heart and spent a considerable amount of time looking through the different options and exploring the demos before settling on Hyde. This was a bit of making a decision in a vacuum, having not built a Hugo site before, but I liked the simplicity and type-forwardness of the Hyde theme. Seeing how a static-site generator like Hugo seperates content and design, I’m also confident that it will be straightforward to change themes down the road if I change my mind.

A note on deployment

There seems to be some consensus out there now on deploying through Netlify. I originally planned on hosting on GitHub using GitHub Pages for deployment, but it turns out that they rely on Jekyll, an alternative to Hugo. While it’s possible to build a blogdown site through Jekyll (see section 5.1 of the blogdown site), or to trick Github Pages into serving just the blogdown/Hugo rendered pages in public (section 3.3), I didn’t want play with any of that business. If using Netlify, just be sure to put public/ in your .gitignore, then push to your heart’s content.

I loved that I could put the website project under version control, point Netlify to the repo, and let it take care of rendering and serving the site automatically. Honestly, it’s the best.

💡 Another thing to watch out for with Netlify: You have to update the baseURL field in the config.toml file to match the URL of your site (the default is “www.example.com”), otherwise none of your precious Hugo theme will apply. Unless you are rolling with a custom domain right out of the gate, the way Netflify works is that it assigns you some random url, which you won’t know until after your first deploy. So, you’ll have to go back and update your config file once you know your URL. Like I did here in commit b80b984.

Customize the theme

As good as the Hyde theme is, I wanted to modify certain aspects. Here’s some of the changes I made.

Resources

Here are some of the resources I found helpful.

— Samuel

Lead photo by Sarah Dorweiler on Unsplash