Chapter 6 Making a website
6.1 Getting started with Blogdown
- Hill, Alison, 2017, ‘Up & Running with blogdown’, 12 June, freely available at: https://alison.rbind.io/post/2017-06-12-up-and-running-with-blogdown/.
- Salmon, Maëlle, 2020, ‘What to know before you adopt Hugo/blogdown’, 29 February, freely available at: https://masalmon.eu/2020/02/29/hugo-maintenance/.
- Xie, Yihui, Amber Thomas, and Alison Presmanes Hill, 2020, blogdown: Creating Websites with R Markdown’, as at 6 February, freely available at: https://bookdown.org/yihui/blogdown/.
- Hill, Alison, 2019, ‘A Spoonful of Hugo: Troubleshooting Your Build’, 4 March, freely available at: https://alison.rbind.io/post/2019-03-04-hugo-troubleshooting/.
- De Leon, Desirée, 2019, ‘Trying out Blogdown’, 4 September, freely available at: http://desiree.rbind.io/post/2019/trying-out-blogdown/.
- Navarro, Danielle, 2018, ‘Day 1: Getting started with blogdown’, 27 April, freely available at: https://djnavarro.net/post/starting-blogdown/.
- Building a website using blogdown and hugo.
These notes were originally developed for a workshop at the ANU delivered in 2017, and published to my website. Thank you to Minhee Chae and Peter Gibbard for helpful comments.
A website is a critical part of communication. If you are searching for a job then it acts as one place to bring everything that you can do together. If you are using R, then you might like a website that makes it easy to share your work. This is where
blogdown is a package that allows you to make websites (not just blogs, notwithstanding its name) largely within R Studio. It builds on Hugo, which is a popular tool for making websites.
blogdown lets you freely and quickly get a website up-and-running. It is easy to add content from time-to-time. It integrates with R Markdown which lets you easily share your work. And the separation of content and styling allows you to relatively quickly change your website’s design.
That said, using
blogdown is more work than Google sites or Squarespace. It requires a little more knowledge than using a basic Wordpress site. And if you want to customise many aspects of your website, or need everything to be ‘just so’ then
blogdown may not be for you.
blogdown is still under active development and various aspects may break in future releases. That said, the investment of time required to set up a
blogdown website is unlikely to be wasted. Even if
blogdown were shuttered tomorrow most of the content could be repurposed for a regular Hugo website.
This post is a simplified version of the
blogdown user-guide and the blog post by Alison Presmanes Hill. It sticks to the basics and doesn’t require much decision-making. The purpose is to allow someone without much experience to use
blogdown to get a website up-and-running. Head to those two resources once you’ve got a website working and want to dive a bit deeper.
blogdown you need R and R Studio, but if you have made it this far in the course then you probably know that. We’ll install the
blogdown package then use GitHub to create a new folder where we’ll create our website.
First install blogdown:
Now we want to create a folder in GitHub (because it will be easier to put your website onto the internet if you have a GitHub account). We have seen GitHub earlier in this notes, but if you didn’t do this at that point, then please create a free GitHub account at https://github.com/.
Once you have an account, create a new repository by clicking on the plus and call it ‘my_website’ (or whatever you want).
Don’t worry about including a readme or gitignore. Once you get to the ‘Quick setup’ page, copy the website address.
At this point, we want to get that folder onto our own computer. So open RStudio, select
Git, and paste the information for the repo. Go through the rest of it, saving the folder somewhere sensible, and clicking ‘Open in new session’. This will then create a new folder on your computer which will be a Git folder that is linked to the GitHub repo that you created.
We can now construct a frame for our website in that folder.
6.4 Build the frame
Open R Studio and install Hugo via the blogdown package with the following code:
In R Studio create a new project in the folder that you just created ‘my_website’. To do this click on: File -> New Project -> Existing Directory. Then navigate to the folder ‘my_website’. This will open a new R Studio session. Creating a project just adds a .proj file in the folder that makes it easier to come back to your website later.
Using that new R Studio session create your website with the following code:
- download files into your ‘my_website’ folder;
- open a R Markdown file that you can close for now; and
- begin serving the site in your R Studio viewer.
The console and viewer of your R Studio session should look like this:
Now that we have a frame, we can add our own content.
6.5 Add content
At this point, the default website is being ‘served’ locally. This means that changes you make will be reflected in the website that you see in your R Studio Viewer. To see the website in a web browser click the ‘show in new window’ button on the top left of the Viewer. This is circled in the above image. That will open the website using the address that the R Studio also tells you.
The first change to make is to update the headshot. In your folder, go to my_website -> static -> img. Replace ‘portrait.jpg’ with your own square headshot jpg. If you do this correctly then when you go back to your website the image will have updated.
In your folder, go to my_website -> content -> home -> about.md. That should open in R Studio or your text editor. Any changes that you save should immediately show up in your website.
Search for ‘# List your academic interests.’ or go to line 12. There you can change your academic interests. If you don’t want this to show up on your website then you can just delete or comment out lines 12-18.
Search for ‘# List your qualifications (such as academic degrees).’ or go to line 20. There you can change your academic qualification. If you don’t want this to show up on your website then you can just delete or comment out these lines.
The ‘year’ is a numeric field. If you’d prefer to include duration (e.g. 2013 – 2017), then replace the ‘2012’ with ‘“2013 – 2017”’ (the "" are important). Or similarly, if you are expecting a degree then you could replace the ‘year’ with ‘“Expected month year”’.
Search for ‘# Biography’ or go to line 43. There you can add a brief biography.
Most of the other files in my_website -> content -> home just display content from elsewhere. This is because of the setup of the website. The exception is teaching.md. Open that and edit everything after line 15.
In your folder, go to my_website -> content -> publication. There are two default publications added there. You can edit those and then copy them to add extra publications.
If you want a blog in your website then the content is saved in: my_website -> content -> post. If you don’t want a blog then just delete this folder and comment out the posts menu item from my_website -> config.toml file so it doesn’t show up in the menu.
Once your website is working, if you want a new blog post, then you can simply use the R Studio menu bar: Tools -> Addins -> New Post.
Go through the different parts and change it as you need.
18.104.22.168 Subsequent editing
To come back to editing your website once you’ve closed R Studio, go to the ‘my_website’ folder and then double-click on the Rproj file, ‘blogdown_test.Rproj’. That will open a new instance of R Studio.
From there you can type ‘blogdown:::serve_site()’ into the console to serve your site and then continue editing, or you could use the R Studio menu bar: Tools -> Addins -> Serve Site.
6.6 Making your website public
So far everything has happened on your own computer. The first step to making your website public is to commit these changes to GitHub. To do this open Terminal again and as before use cd and ls to navigate to ‘my_website’.
Once there, type each of the following lines (adding your own description) and follow each by ‘return’
(You may be asked for your GitHub password. Terminal is a bit tricky to type passwords into because you don’t know how many characters you’ve typed, but have a go and follow it by ‘return’.)
There are many ways to make your website public, but one way is to use Netlify. What we are going to do is to link GitHub and Netlify, so that when you make a change in GitHub then Netlify automatically updates. Once you have an account then click “New site from Git” and at that point you can link your GitHub account. Once it has been authorised, then you should select the repo that you want to make public. The publish director is ‘public’.
Once this is all specified then you can “Deploy site”. Netlify gives you a default address, but you can change this. However it will still have .netlify.com. To get rid of this you need to purchase a domain, and then go through the custom domains setting in Netlify.