Rebuilding my website with GitHub, Hugo, R blogdown, and Netlify.

I rebuilt my personal website from scratch using a static site generator, first, because I wanted a cleaner and streamlined site with an easy upkeep, plus I was motivated to learn the new tools, and more importantly, to move away from hosting on Wordpress due to the really annoying ads. The process was on and off during the past months, and although I found tips online that you can indeed complete it in a day or less, I only found time to work on it very intermittently, mostly while in transit at airport terminals and during flights and over weekends, which was why it took about three months to finally deploy the site in early February! My website is still incomplete and still under reconstruction, with most of my old blog posts and pages from my old 14n121e website being slowly incorporated in my new website. So please continue to watch this space!

Below, I have put together some guidance on how I rebuilt my new website with these new tools, specifically the ensemble of Hugo, R blogdown and RStudio, GitHub, and Netlify, which you may find helpful in case you were wondering how you could go about building one for yourself too. I tried to put together the major steps with as much detail as I can recall, albeit I may have missed minor ones.

Prerequisites. After some prior searching online, I settled on using Hugo, R blogdown, GitHub, and Netlify as the combination of tools/resources I would employ for rebuilding my website. Note that I did not mind reconstructing the site manually (e.g., migrating contents such as blog post one by one) because it was not alot and also because I wanted understand the inner workings, hence I did not pursue (semi-)automated ways that existed for migrating content from Wordpress to the new site. To get started, I ensured the following online accounts were set up and the software tools were installed in my Mac OSX machine:

• Git and a GitHub account as the version control system for tracking the changes in a dedicated repository containing the website contents;
• R and RStudio, the premier IDE for R, plus the blogdown R package developed by Yihue Xie;
• Then, Hugo, an open-source static site generator for building websites, plus the Academic Hugo theme by George Cushen, of which was my personal choice for the theme given its simple and customisable functions using the Markdown markup language (and it is apt for academics/scientists/researchers);
• In addition, I used some advanced features including Disqus to enable comments and discussions, and Google Analytics to understand my website traffic; and
• Finally, a Netlify account to enable a fast and continuous deployment of the website, once the GitHub repository was connected and the build settings were added.

Note that for most of the above, I already had prexisting registered accounts and had installed the tools, except for Netlify (so I had to sign up for a new account) and R blogdown and Hugo (both of which I had to newly install). So now let’s get started:

1. Setting up Git and GitHub, and creating a repository on Github. Follow these instructions to help you install Git on your machine and set up GitHub, and once you have them both, create a repository that is located remotely on GitHub and cloned locally on your machine, which will be linked to Netlify later on so that any new content you generate in your repository gets dynamically updated on your website via Netlify.

2. Installing blogdown, Hugo, and the Academic theme. First install R and RStudio, in case you do not have these locally on your machine yet. Once you have completed that step, you can install the blogdown R package and Hugo via RStudio using the following commands:

install.packages("blogdown")
blogdown::install_hugo(version = "0.63.1", force = TRUE)

Using the Terminal, you can find out the installed version of Hugo on your machine via:

hugo version

Also, check if your config.toml is found in the root of your project repository. Finally, you are ready to create a new site and serve it locally on your browser by using the following commands in RStudio:

blogdown::new_site(theme="gcushen/hugo-academic")
blogdown:::serve_site()

Tada! You now have a new site and you’re ready to move on to personalising your website. More information on installing blogdown, Hugo, and the Academic theme can be found here with specific instructions for installing via RStudio here.

3. Customising your website. You’ll find more guidance about personalising your website, especially with the way you want it by following these Getting Started instructions. As a start, the first main items you need to modify are the following:

• /config.toml, where you can change your site name, base URL (say with your own domain, or with a free one from Netlify), copyright display, and other advanced options;
• /config/_default/menus.toml, where you can change the names and the sequence of the menu links displayed on the navigation bar at the top of your homepage;
• /config/_default/params.toml, where you can customise your theme, modify your basic info (such as your website type, displaying a bespoke logo on your navigation bar), site details, contact details, social networks for sharing, and other regional and advanced options. You can configure your comments (e.g., Disqus), search, maps, and marketing (i.e., Google Analytics) via the params.toml;
• /config/_default/languages.toml, where you can configure another language to provide language options for your visitors/readers; and finally,
• /content/authors/admin/_index.md, where you can modify your biographical sketch and tell people who you are. In the same folder place a photo of yourself (called avatar.jpg) to display your profile photo or avatar.

You can implement so many other neat customisations, including customising your theme colours and fonts; choosing your website icon (or favicon); enabling Google Analytics to understand your website traffic; enabling comments or discussions for your content such as by using Disqus; selecting your social networks (e.g., Twitter) for page sharing, and many more.

One of the main customisations that I wanted to do was displaying Altmetric badges for each of my publication pages. Following available instructions, I created a file called custom_js.html in the following folder /layouts/partials/ under the root directory of your repository, which had the following contents:

<html>
  <body>
    <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
  </body>
</html>

The above script was copied from Altmetric’s guidance for embedding their badges. And then, include the following code at the end of the body of your publication post. I did this for each of my publications that had an Altmetric page and modified the DOI accordingly.

<div data-badge-details="right" data-badge-type="medium-donut" data-doi="10.1088/1748-9326/ab666d" data-hide-no-mentions="true" class="altmetric-embed"></div>

Once you have set this up, you’ll see the Altmetric badge with its details similar to the one below. Customising the Altmetric badge to your liking is easy and you can follow these instructions.

4. Deploying your website using Netlify. Finally, it is time to deploy your website for free on Netlify. To create your new website, first, you need to choose and connect to your Git provider (in this case GitHub) where your site’s source code is hosted for continuous deployment. That means when you push to Git, Netlify runs your build tool of choice on their servers and deploys the result. Then, pick the repository where your site’s source code is located. Finally, build and deploy! Although I only used a free Netlify account, you can add a custom domain for your site if you prefer.

Concluding Remarks. You will definitely spend a good amount of time customising your site, particularly during the initialisation stage. But once you have most of your site elements and pages completed, updating becomes much easier. For example, I create new content exclusively in RStudio, such as a new blog post, a recent publication, or news item. This means that when I save the files and once I am ready to deploy the new content to my wesbite, I instantiate a commit of the recent changes and push the changes to the public repository of my website. And since this repository is dynamically linked to Netlify, new content or any changes get deployed automatically on my website via Netlify.

As a final note, I have to say that the initial setup required some effort and time to learn a few new tools—and troubleshoot as required—but in the end, I was satisfied with the process and the outcome, and also from knowing that from here on the upkeep required to maintain my online presence would be minimal.

Acknowledgements. I used several resources online including instructions of how to use Hugo, blogdown, and Netlify, which of note were the helpful and easy-to-follow instructions from Yihue Xie for blogdown and George Cushen for the Academic theme for Hugo. I’ve benefitted alot from reading blog posts, especially getting up and running with blogdown and a week of blogdown by Alison Hill; building my website with blogdown by Katie Scranton; how to make your own website for free for under and hour by Dan Quintana; creating a website with the Academic theme in blogdown by Kevin Zolea; and tips for using the Academic theme by Leslie Myint. I also found bits of inspiration about the content possibilities of using the Hugo Academic theme from the bespoke website designs of Erika Fille Legara, Zhi Yang, Daniel Quintana, Alison Hill, and Leslie Myint, which were all super helpful.

Special thanks to Lloyd Zapanta for developing a true type font for the Baybayin script, which is the indigenous alphabet writing script of pre-colonial Philippines. He designed several true type fonts of the Baybayin script, of which I particularly used Baybayin Sisil rendition for creating my website logo, which is essentially my written name in Baybayin to express my ethnic roots.