2.1 Static sites and Hugo

A static site often consists of HTML files (with optional external dependencies like images and JavaScript libraries), and the web server sends exactly the same content to the web browser no matter who visits the web pages. There is no dynamic computing on the server when a page is requested. By comparison, a dynamic site relies on a server-side language to do certain computing and sends potentially different content depending on different conditions. A common language is PHP, and a typical example of a dynamic site is a web forum. For example, each user has a profile page, but typically this does not mean the server has stored a different HTML profile page for every single user. Instead, the server will fetch the user data from a database, and render the profile page dynamically.

For a static site, each URL you visit often has a corresponding HTML file stored on the server, so there is no need to compute anything before serving the file to visitors. This means static sites tend to be faster in response time than dynamic sites, and it is also much easier to deploy, since the deployment simply means to copy static files to a server. A dynamic site often relies on databases, and you will have to install more software packages to server a dynamic site. For more advantages of static sites, please read the introduction on Hugo’s website.

There are many existing static site generators, including Hugo, Jekyll, and Hexo, etc. Most of them can build general-purpose websites but are often used to build blogs.

We love Hugo for many reasons but there are a few that stand out. Unlike other static site generators, the installation of Hugo is very simple because it provides a single executable without dependencies for most operating systems (see Section 1.1). It was also designed to render hundreds of pages of content faster than comparable static site generators and can reportedly render a single page in approximately 1 millisecond. Lastly, the community of Hugo users is very active both on the Hugo discussion forum and on GitHub issues.

Although we think Hugo is a fantastic static site generator, there is really one and only one major missing feature: the support for R Markdown. That is basically the whole point of the blogdown package.14 This missing feature means that you cannot easily generate results using R code on your web pages, since you can only use static Markdown documents. Besides, you have to use Hugo’s choice of the Markdown engine named “Blackfriday” instead of the more powerful Pandoc.15

Hugo uses a special file and folder structure to create your website (Figure 2.1). The rest of this chapter will give more details on the following files and folders:

  • config.toml
  • content/
  • static/
  • themes/
  • layouts/
Possible files and folders created when you create a new site using blogdown.

FIGURE 2.1: Possible files and folders created when you create a new site using blogdown.

  1. Another motivation was an easier way to create new pages or posts. Static site generators often provide commands to create new posts, but you often have to open and modify the new file created by hand after using these commands. I was very frustrated by this, because I was looking for a graphical user interface where I can just fill out the title, author, date, and other information about a page, then I can start writing the content right away. That is why I provided the RStudio addin “New Post” and the function blogdown::new_post(). In the past few years, I hated it every time I was about to create a new post either by hand or via the Jekyll command line. Finally I felt addicted to blogging again after I finished the RStudio addin.

  2. There is a feature request in Hugo’s repository that has been more than three years old: https://github.com/gohugoio/hugo/issues/234, and it seems that it will not be implemented in the near future.