Foreword & Introduction
In this blog post, I will show you how to get started making a website with Quarto in VScode and hosting it through Github pages!
Throughout this tutorial I’ll assume that you have at least some knowledge of what Quarto is and how to use it. If that’s not the case and you feel lost - feel free to reach out to me in the comments below, or through email - or read the quarto about/documentation here.
Github Copilot Summarizes Quarto:
“Quarto is a powerful and flexible publishing system built on Pandoc. It allows you to create beautiful and meaningful documents, reports, presentations, and websites using a variety of languages including Markdown, R, Python, and others.
Quarto documents are plain text files that can include code, equations, and visualizations. These documents can be converted into a wide range of output formats such as HTML, PDF, EPUB, and Word, among others.
One of the key features of Quarto is its ability to execute embedded code chunks from multiple programming languages within the same document, similar to Jupyter notebooks or R Markdown documents. This makes it a great tool for literate programming and reproducible research.
In the context of creating websites, Quarto provides a simple yet powerful system for creating static websites from a collection of input documents. These websites can be easily hosted on platforms like GitHub Pages, making Quarto a good choice for creating personal websites, blogs, project documentation, and more.”Getting Started
The first portion of this tutorial essentially replicates the official Quarto “Creating a Website” documentation which also covers how to do this process using RStudio and Terminal - which isn’t covered here.
Step 1
Make a new Quarto website project in VScode via “> Quarto: Create Project” and then selecting “Website Project” from the list
Next, it will ask you to create a directory - for use with Github pages, name the directory “[Your Github Username].github.io”, for example - mine is MaxMascini.github.io
References & Helpful Links
Quarto Documentation:
- General Quarto Website Documentation
- Website Options
- Built-in Icon Options