Creating basic websites

Slides

 Open slides in new window  Download PDF of slides

Exercises

Anatomy of a Quarto website

TipYour turn

1. Create a new website project somewhere on your computer.

   We’ll use this as a playground throughout the course.

2. Open the project in RStudio and explore what the different files look like.

Workflow

TipYour turn

1. Open your playground website.

2. Open index.qmd and click Render/Preview.

3. Edit the title entry in index.qmd’s YAML metadata to something different and add a subtitle entry. Preview.

4. Add some text to index.qmd. Preview.

5. Add an R code chunk to about.qmd. Preview.

_quarto.yml

TipYour turn

1. Edit your _quarto.yml to make the following changes:

   • Change the preview port to 5555
   • Enable a cookie consent dialog
   • Add a site description

2. Bonus tasks!

   • Add a footer that says “© 2025, Myself”
   • Add an announcement bar that says something

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Reference > Websites

Navigation

TipYour turn 1

1. Create a new file named contact.qmd and paste the content from about.qmd into it. Then change it to something else.

2. Add contact.qmd to the left section of your top navigation bar.

3. Add a right section to the navigation bar with icon-based links to a few other websites.

4. Bonus task! Create a dropdown menu in the top navigation bar, either with links to other websites or links to some new .qmd pages that you create.

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Website Navigation

TipYour turn 2

1. Create a folder named research and create these files in there: index.qmd, project1.qmd, project2.qmd, and project3.qmd

2. Add an entry for research.qmd in your top navigation bar

3. Make a sidebar that only appears on the research page that contains links to index.qmd, project1.qmd, project2.qmd, and project3.qmd

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > Website Navigation

Special pages

TipYour turn

1. Create a basic About page for either yourself or some fictional person.

   • Find an image on your computer or from the internet and add it to your project, either in the root of project, or (better!) in a folder just for images, like img/
   • Add links to different websites (with icons!)
   • Try different template options
   • Try different image-shape options

Advice:

• Don’t try to make all these changes at once! Remember the workflow: edit, save, preview, repeat.
• Use the documentation at Quarto.org > Guide > Websites > About Pages