Hello, Quarto

Setting up a Quarto website.

Welcome

Hello world!

Making a professional website has been on my todo list for a long time, and with the recent release of Quarto, I decided this would be a great way to kick Quarto’s tires. And what better way to start than documenting my set up process?

This first post is not too exciting; just some basic setup. There are many ways to set up a Quarto website and they’re well documented at quarto.org. I’m therefore not explaining things in detail for this post, just recording the steps I took.

The next few posts will dig into the nitty gritty details of customizing my site, which is a bit more of an adventure.

Set Up Quarto Project

This assumes:

• You’re using RStudio
• You’ve already set up git and GitHub to play nicely with R/RStudio, and are familiar with the basics (committing and pushing)
  • If you need help with this, Happy Git with R by Jenny Bryan and Jim Hester is an excellent resource
• You’ve installed usethis (not essential, just convenient)

To set up your Quarto project:

1. Create a new quarto blog using RStudio
   1. File > New Project > New Directory > Quarto blog
2. usethis::use_git()
   1. Restart RStudio
3. Add /.quarto/ to .gitignore (and commit)
4. Update _quarto.yml (and commit)

   1. Set output directory

      project:
        type: website
        output-dir: docs

   2. Set website title (for the site metadata)

      1. Note: this will not update the Title displayed on your homepage - that is set in index.qmd.

   3. Update social media icons

5. Preview site by clicking Render

Set Up GitHub Pages

This set up has you rendering locally (into /docs) and then pushing to GitHub and telling GitHub pages where to find your rendered site. I chose this method because it’s simple and it allows me to preview my changes before pushing them to the live site.

In RStudio:

1. Render your site (even if you have already previewed, do a complete render now)
   1. RStudio top right pane > Build > Render Website
2. Ensure that the /docs folder is being tracked by git
3. Add an (empty) .nojekyll file to the root directory (and commit)
   1. Heads up: this file may not be displayed in the RStudio Files tab (or in your computer’s file browser), unless you’ve enabled display of hidden files. By default, RStudio only displays a few specific hidden files (e.g. .gitignore).
4. usethis::use_github()

On GitHub:

1. Set GitHub Pages to use /docs
   1. Settings > Pages > Build and deployment
      1. Source: Deploy from a branch
      2. Branch: Main > /docs (and click Save)
2. Wait a little bit for the site to update (you can see progress under the Actions tab)
3. Check out your new website! (You can find the url under Settings > Pages)