Quarto includes native support for a number of deployment options for HTML based websites and blogs from the open-source GitHub Pages to the commercial Netlify as well as a dedicated free platform for Quarto documents called Quarto Pub.
In practice, any deployment service that can host either a static HTML based website or an environment that can pull a git repository and run a build command is sufficient. The focus of this blog post is Cloudflare Pages, a popular and free hosting service.
Deployment Strategies
There are at least two approaches available:
- Generate a static HTML site including its assets and upload to Cloudflare Pages either manually or by connecting a
gitrepository. - Use a Continuous Integration / Continuous Deployment (CI/CD) pipeline such as GitHub Actions.
The following guide will cover the first method and the second approach may be covered in a future post.
Cloudflare Domain Setup
The use of Cloudflare Pages requires an active account and is available for free on all service tiers, including the free tier. A domain name is not required as deployments will occur using a randomly generated subdomain of *.pages.dev. However, most people will want to use their own domain name. Access can be controlled using Cloudflate Zero Trust controls, which is useful for accessing and sharing previews.
If you don’t have an account, create one, select the Free tier and then add a domain using Add a Site:
Enter your domain and press Continue:
Select your desired service tier:
Update the nameservers for your domain where you purchased the domain from to those provided by Cloudflare:
Cloudflare Pages Setup
From the dashboard or home page select Workers & Pages
Select the Pages tab and two options are presented to deploy a site. The first is to connect directly to a git repository where GitHub and Gitlab are directly supported.
Select the tab that represents your provider and then connect directly by authenticating and then authorising Cloudflare for either all repositories (including future ones) or selecting specific repositories.
Define a project name and select the relevant branch. I suggest having a dedicated branch such as publish or deploy where changes from main can be merged. This allows you preview the site prior to publication - which is in effect merging changes from the main branch.
Configure the build settings based on the documentation for a generic/static deployment and then press Save and Deploy:
The important component is the exit 0 statement for the build command (the code for success within typical Unix shells such as bash) and the location of the _site directory relative to the root of the repository.
A series of deployments looks like the following:
The example above shows that I use the branch publish to control what is deployed in production.
Add Domain
Click on the Custom domains tab:
Enter the domain name name and press Continue:
Confirm the domain name and press Activate domain:
Deploying A Site
Now that the git repository is connected to Cloudflare any changes in the main branch will be reflected in the preview sites. A key element is that the user must now run at least quarto render prior to committing to git. For production deployment the user can follow their usual process for merging git branches between main and publish.
Conclusion
The guide shows how to connect to Cloudflare Pages and deploy a Quarto site. The process is simple and can be completed in a few minutes. The user can then focus on the content and let Quarto and Cloudflare handle the rest.
Attribution
Citation
@online{2024,
author = {, miah0x41},
title = {Deploying {Quarto} to {Cloudflare} {Pages}},
date = {2024-04-20},
url = {https://blog.curiodata.pro/posts/02-quarto-cloudflare},
langid = {en}
}