Fun blogdown in R to design a personal website
Inspired by David Robinson‘s keynote talk at the RStudio conference 2019 (summary in the following tweet), I decided to write a post about how I use Yihui‘s fantastic R package blogdown to develop my own personal website.
When you’ve written the same code 3 times, write a function— David Robinson (@drob) November 9, 2017
When you’ve given the same in-person advice 3 times, write a blog post
Well, there are a lot of useful references to check out. Here are a few of them that I would recommend. And you can always search by keyword in Yihui's book on blogdown whenever you'd like to figure out how things work.
The whole process is actually pretty intuitive and quite straightforward if you use RStudio and are comfortable with R, git and markdown. For the following part of this post, I'll give some general guidelines and explain a few tricky steps (at least for me). Let's get ready to fire it up! 🔥
A brand new start
By default, I assume you like the Hugo theme called
academic I'm currently using and the following guidelines are trying to show you how to build a personal website with a similar style to mine.
Get the template
install.packages("blogdown")in R if you haven't yet.
- In RStudio, click Project -> New Project -> New Directory -> Website using blogdown. Configure the directory name and path, and the hugo theme is
gcushen/hugo-academic. By default, this will download the most updated theme version for you1.
- In RStudio, click Addins -> Serve Site (BLOGDOWN) or run
blogdown::serve_site(), then you should be able to preview the example website.
If everything works well for you so far, you've made a big move! Congratulations! 👏
Personalize everything for yourself
Everyone has his own taste, and the following steps show how I modify the template for mine. 😝
- Go to the folder
content/homewhich contains the files that configure the home page. Each markdown (.md) file can be regarded as one section horizontally displayed on the home page. Remove any unwanted sections by setting
active = falsein the corresponding markdown files2. The contact information at the bottom of the home page is editable in the file
- All the personal information at the top of the home page (Name, Role, Organization, Avatar, Social Media, Biography, Interests, Education) is editable in the file
- You can adjust the order of each section on the home page by changing the value of
weightin the markdown files in the folder
content/home. The sections with smaller
weightwould go before those with larger
- The menu bar on the top of the home page is also editable in the file
weightadjusts the order of the menu items and works in the same way as for the sections. And you'll see the instructions in the comments to add a link to your resume3 in the menu bar.
- Great! Until now you're done with the self introduction. 👍 Now it's time to show people your achievements by editing the file
content/home/experience.md. If you keep the
gallerysection on the home page4, you can personlize the photo wall by replacing the images in the folder
content/home/gallery/gallerywith your own. Try adding your amazing work to the folder
talkunder the directory
content. Just follow the template format and you'll find a way to put your own stuff there. 💪
Configure the website name
- Name it in your own way! Change
titlein the file
- If you'd like, you could personalize the URL of your site by modifying the
config.toml. But nothing comes free. 😂 I purchased my domain name (annielyu.com) from Google Domains. The registration fee costs me $12 per year. And you can add Google Analytics to your site by setting the
config/_default/params.toml. Your Google Analytics account ID can be found at setting -> admin -> account settings.
By the way, if you'd like to enable comments on your site, you can sign up an account on Disqus and configure the
Comments part in the file
Deploy your website
Now comes the most exciting part. ✨ Are you ready to show your profile to the whole world? The following steps will guide you how to use GitHub and Netlify to maintain and update your website in a most effortless way!
- First of all, go 👉 and get yourself a GitHub and an Netlify account you haven't yet.
- Publish the project directory as a GitHub repository under your account. If you are uncomfortable with git command lines like me, I highly recommend downloading GitHub Desktop or Source Tree for easy manipulation of your Git repo. The following steps assume you are using GitHub Desktop and have linked your GitHub account already.
- Open GitHub Desktop, click New -> Add an Existing Repository and open the project directory.
- Before you commit adding all the files, add a new file
.gitignoreto the project repository so that some files or folders such as
publicwon't be tracked5. For your reference, my
.gitignorefile looks like the following:
.Rhistory .RData .Ruserdata .DS_Store public/ .Rproj.user/ .Rproj.user
- Make your GitHub repo online by clicking Publish repository. Next let's log in to Netlify and click New site from Git. Follow the instructions and pick the GitHub repo you just created. It's important in the 3rd step, you change the basic building setting by clicking show advanced -> new variable, setting
Valueas the minimum hugo version you need for the current version of the academic theme6. If the site is deployed successfully, you've hit another milestone, bravo! 🎉
- You can change the site name so that the web address would be
xxxx.netlify.com. Wait?!!! You've already purchased a custom domain name like I do? Go to Settings -> Domain management -> Add custom domain, then follow the instructions. Once you complete all the steps, you are all set! 👍
From now on, once you push your changes to the remote GitHub repo, the website would be updated accordingly as if by magic! 🌟
Some useful tips
Now you've come a long way to collect all the fundamentals to buid your site. There are still a lot of interesting features you can explore out there. Below are some tips based on my exploration. Take whichever you like to decorate your site! 🌺
- You can use emoji everywhere in your site. Check out the emoji cheatsheet. By default,
enableEmoji = truein
- Don't forget to set
hasCJKLanguage = truein
config.tomlif you use Chinese/Japanese/Korean languages somewhere.
- Set a rule to generate permanent links of your posts using
titleby adding the following to
slugcan be regarded as an unique ID for your post. It turns out to be pretty useful if you can't help changing your post title after sharing the post link on social media.
# Rules to generate permanent links of your pages [permalinks] post = "/:year/:month/:day/:slug/"
- Check out Hugo's Build-in Shortcodes. That's how I embed the twitter and the Youtube video in this post. 😄
- You may notice there is a section called
Shinyon my website which is not included in the template. Well, I almost adapted everything from the
projectssection. 😂 All I did is: (1) renaming
shiny.md; (2) renaming the folder
shiny; (3) adding the following in
[[main]] name = "Shiny" url = "#shiny" weight = 10
- As you may see it,
[Shiny](#shiny)would create a hyperlink that would take site visitors to the
Shinysection. The same logic applies to
categories. Below is part of the source code for my biography. And I bet you've seen how the hyperlinks work. If not, check it out! 😆
I enjoy programming, [traveling](/tags/travel/) and [baking](/tags/foodie/).
- It's suggested to delete any non-customized files in the folders under
slidesso that the links to those files won't be accidentally exposed to visitors. By default, those files are searchable on the site and may appear in the
Relatedsection such as below a post.
- Somehow the old way of making a foonote such as
^[here is a footnote]is not working for a newer version of Hugo. Check their new manual for guidance.
Well, that's all I have to suggest for developing your personal website with R blogdown. And finally I can check ✅ write a post about blogdown in my to-do list for winter break (on the last day 😅)! Please feel free to comment below this post if you have any questions or would like to share your own website with me. Have fun blogging and exploring!
At the time when I write this post, it's version 4.7.0. ↩︎
For me, I disabled
You can also disable the
gallerysection by setting
active = falsein the file
You should always keep the folder
publicuntouched and this folder is not needed for deployment. ↩︎