In-Class Lab 5
Create and publish a simple website using Quarto
In this lab, you will publish a simple website to demonstrate your ability to create a web page and host it online. Share the URL of your published website with your instructor for full credit.
Why Markdown?
Markdown is a lightweight, really simple markup language that lets you focus on authoring content in a plain-text editor while handling the formatting. Markdown is easy to learn and use, making it an ideal choice for creating simple websites without needing to write HTML or CSS. And of course, you can add HTML to your Markdown if you still need the extra control.
Install Quarto
Use the following commands to install Quarto directly or download the installer from Quarto website
# Windows
winget install Posit.Quarto
# Linux, using uv
uv tool install quarto-cliNote: To use the uv command, you need to install uv first.
Create a New Quarto Project
Type quarto create in your terminal and follow the prompts to create a project of type “website”. This will generate a basic website structure with some example content.
Preview
Move into the project directory that you created above and type quarto preview to start a local development server. Open the provided URL in your web browser to see your website. You can edit the content files (e.g., index.qmd) and see the changes live in your browser as soon as you save the files. As you edit the content, the preview will automatically refresh and update to show your changes.
Publish
You can publish your website to GitHub Pages or Netlify for free. GitHub Pages requires more manual setup but scales really well. Netlify is far easier to set up but has some limitations on bandwidth and automation. Pick either option and follow the instructions below.
Netlify
Type quarto publish, select “Netlify” as the hosting provider, and follow the prompts to connect your GitHub repository and deploy your site.
GitHub Pages
Initialize a Git repository in your project directory.
cd MY_FIRST_WEBSITE git init git add . git commit -m "Initial commit"Create a new repository on GitHub and push your local work to GitHub. This implies that you have a GitHub account. Once you have created the repository, you can push your local repository to GitHub using the following commands:
git remote add origin https://github.com/USERNAME/REPOSITORYNAME.git git push -u origin mainType
quarto publishand select “GitHub Pages” as the hosting provider.Optionally, add the Github Actions for Quarto to your repository to automate the deployment process. This will ensure that your website is automatically updated whenever you push changes to the source files on GitHub. To do so, you have to create a workflow file named
quarto.ymlor anything along those lines in the.github/workflowsdirectory. Copy it from here.
Optional: Use a Custom Domain Name
Optionally, purchase a domain name from Cloudflare or any domain registrar of your choice. This step is not required to get points for this lab, but it will make your website look more professional and easier to share. Totally up to you.
Follow the specific instructions for GitHub Pages or Netlify to set up your custom domain.
quarto publish
Example
See this website hosted on GitHub. Feel free to clone, modify, and publish your own version.
Complete the Lab
Share the URL of your published website with your instructor for full credit. The content of the website can be anything you like, but it should demonstrate that you have successfully created and published a website using Quarto or any other tool of your choice.