Website Design

The Workflow and Tools Behind This Site

Build Status

This website is a passion of mine, I have spent a great deal of time customizing all aspects of it from the stylesheets to the functionality of buttons and menus both to make it as easy to read and be on as possible but also pleasing to look at. However, my main priority has always been designing it to be able to handle code and analyses efficiently and display those results to other colleagues. It’s lead me to do a lot of experimentation and make numerous changes over the years with regards to my workflow, and I still believe it is evolving but that it has matured substantially so I shall describe it as succinctly as possible.

Current Status

This website is built on Hugo and the theme is completely custom built as are many of the go functions I use. It’s compiled using the R package blogdown and is also heavily composed of pandoc arguments. Almost all of my writing and editing of the website is done on RStudio and I host this website on Amazon Web Services using AWS Amplify.

I used to use AWS S3 Buckets in conjunction with CloudFront as the CDN, however, that was quite a hassle for things like website redirects, and it required a lot of work for not much in return. Amplify still uses CloudFront as the CDN and uses S3 buckets, but takes care of those on its own, so I am fairly content with the results at the moment.

My workflow basically involves writing in RMarkdown, compiling it via blogdown/hugo, checking to see what the results look like, and if everything is okay, I push it to GitHub, which triggers AWS Amplify to start building the site.

I generally use tools like Zotero for references, \(MathJaX\) for math/\(latex\), and Algolia for my search engine. If you want to know how I got to this point, you can see my history below when I first started this website and what prompted me to move to a static website generator like Hugo rather than stay with something like Wordpress.

Some History

The WordPress Site Origins

This website was originally built on WordPress and hosted on SiteGround. I had a lot of success with that configuration for a while after trying several other hosts (I’ve used Bluehost, DreamHost, and HostGator, which was the worst host I’ve ever used).

However, despite success with the Wordpress & Siteground configuration, it was largely frustrating to think about and maintain subscriptions for so many Wordpress plugins (I was maintaining subscriptions for my theme, a caching plugin, an image optimizer, an SEO plugin, and a page builder) on top of hosting.

I also had to frequently deal with updates and database errors, and the backend was often slow. The other frustration stemmed from the fact that such an environment was clearly not built for hosting content rich in \(\LaTeX\) and statistical outputs.

Migrating to Hugo and Static Sites

So at the end of last year, I migrated to Hugo, a static website builder that can build an entire website in milliseconds. Because of the static nature of the site, I no longer have to deal with plugins, databases, and typical security vulnerabilities that I would encounter with a content management system like WordPress.

Migrating from WordPress was a bit of a headache, since I had to convert all of my posts (about 40) into RMarkdown format (more on that below), and I had to learn a good deal of CSS, HTML, and Go (the language that Hugo is written in) along the way, but there’s no doubt that it was worth it.

Most of my posts are written in RMarkdown via RStudio or Atom and the website is hosted on AWS Cloud via S3 + CloudFront. Unlike typical website hosts (such as SiteGround, BlueHost, etc.), the advantage of hosting on a cloud service with a pay-for-what-you-use model is that it’s easy to scale up or down depending on goals and needs at any point in time, whereas typical hosts lock you in to a particular plan.

The fonts on the site are provided by Google Fonts. Images on the website are served via Cloudinary, which optimizes images depending on the user, and serves images via several CDNs, including industry leaders such as Akamai.

The search engine on the site is powered by Algolia, which I recently moved to from Google Custom Search Engine. Comments are powered by Disqus. The theme used is custom built as are many of the features on the site.

That’s pretty much everything that powers this website.

See also: