Resources for building your website with Quarto

and some extra tips ;)

Website
Quarto
RStudio
Github
Community
Author

Virginia García Alonso

Published

December 13, 2023


I was motivated by all the communities of practice I know and by the generous individuals who are part of them to share as much as I can and grow collectively. So, I embarked on the journey to create a website as a platform to do so.

I knew it was possible to use RStudio (an environment I am comfortoble with) to create a website and GitHub to deploy it, although many also do it via Netlify. Choosing a site generator was the last thing missing. I came across many sites built with Hugo or Jekyll. I definitely recommend checking out this list of RLadies blogs for some inspiration. I finally decided to use Quarto after reading this blog post from Silvia Canelón.

There are many options on how to build and deploy a website, and there is not a “correct” choice, but rather “a choice that better suits you”.

There are VERY GOOD guidelines and examples already out there, so here’s a list of the persons and resources I turned to in case you want to build your site with Quarto. And there are some extra comments and tips from my experience at the end that may also be helpful ;)


Building this website was only possible thanks to amazing people and communities who share their software and resources openly (thank you all! 🙌). I hope this post and the code on this website will contribute to this effort.


Samantha Csik

I do not know how I ended up in Samantha’s website, but she has some of the most awesome guides to create and customize Quarto websites I could find (and in such detail and style 💜).

I based most of the design and structure of my website on her guides and checking out her website’s GitHub repository and the site she rebuilt for Openscapes.

There are also many other interesting posts including one on how to add a blog to your existing Quarto website and another with more details on CSS (and Sass) to further style web pages 😎.


Silvia Canelón

When looking for inspiration, I really liked Silvia Canelón’s website, which was inspired by the Hugo Apéro theme but was modified using Quarto and has all her code open in a GitHub repository.

By inspecting her site and GitHub repository, I learned how to include favicons in the index and special characters like “∙”.

I also learned that I could create a contact form with formspree to have people leave messages directly on the website that I would receive in my email account.


Other Quarto resources

Looking for further inspiration I came across with other Quarto websites and blogs that you may also want to check out:


Some extra tips

Reinstalling everything

I had a lot of problems at the beginning, with nothing rendering and many error messages I did not understand... I could finally solve this problem following steps 1-7 from the MEDS Installation Guide for Windows as mentioned in Sam Csik’s post materials which recommended/explained to:

  • install the latest versions of R & RStudio

  • get Git installed/configured

  • get a GitHub account & your personal access token (PAT) stored

Styling a contact form (an any page!)

I wanted to modify the style of the contact form, and I saw in Maya’s repository that you could change it by adding some style parameters into the same QMD document!

This approach is not limited to the contact form; you can apply it to any page! However, I do recommend being consistent and trying to set up the style in the SCSS file. Nevertheless, I have used this resource in special cases, such as the landing page, and it has been a really useful way around for some styling, given my complete absence of knowledge regarding web design.

Feel free to adapt the formatting to match your preference :)