How to Get a Blog Up from Scratch in 1 Day Using Quarto and Netlify
Over the last two years, I avoided publishing my blog for technical reasons. I did not know how to build it, how to host it, etc. The purpose of this post is to show how easy and rewarding the experience can be.
It will run you through how to build and host a blog using the Quarto site generator, hosted on Netlify for free. The only thing you will need to purchase is a domain on any provider (though Namecheap will be used in this post).
Before starting from step 1, I recommend you skim through the entire article first, to get a quick overview of the process. It is all too easy to get your head stuck in the weeds and give up midway.
The first few steps will focus on setting up a GitHub account and installing VS Code. If you are familiar with these, skip directly to Building a Quarto Site.
Setting Up the Basics
Creating a GitHub Account
As UIs are updated, the most reliable way to create a GitHub account is to follow the site’s official documentation. Come back to this post when you have a working account.
Creating a New Repository
Using your GitHub account, you are now ready to create a new repository. I would recommend naming this one demo_site and making it private. It is always a good idea to add a licence; you can use the choosealicense.com website to help in this process.
Installing VS Code
To install VS Code, head over to its official site and download the appropriate version for your operating system.
Cloning the Repository Locally
Clone the newly created repository using VS Code. This should take 5–10 minutes at most. For a quick tutorial on this, check out the official Microsoft tutorial.
Building a Quarto Site
Some Configuration
Install the Quarto extension in VS Code. To do so, go to the Extensions tab and search for Quarto in the Extensions marketplace. You may have to restart VS Code after installing the extension.
In the cloned directory, run the >Quarto: Create Project command in the VS Code top bar:
And select Blog Project:
When in doubt about how to create a new project, refer to the official Quarto documentation on the topic.
This will create a demo blog.
To see what this demo blog looks like, enter the following commands in a new terminal.
If you do not know how to open a new terminal in VS Code, click here for a quick tutorial
For Mac users, click on Terminal on the top ribbon and select New Terminal. For non-Mac users, please refer to the VS Code Terminal basics page.
Enter the commands:
$ quarto renderThis will build your static site under the site/ directory. In this process, the Quarto magic converts Quarto Markdown files (.qmd) to .html files. As you make edits to your blog, never edit the files under the site/ directory as these get deleted and regenerated at each rendering.
$ quarto previewThis command will then host the site generated above on your local machine. You can then view the site using a browser.
But what does it mean to host a site on your local machine?
The web browser you use is also called a “web client”. It sends requests to web servers, i.e., computers waiting to receive requests, and receives site content in return. The browser then displays the site in a user-friendly way. In this paradigm, the site is said to be “hosted” on a server. There is a server waiting to send site contents to your web browser, communicating over the internet.
When developing your site, you can host the site content on your local machine, which would act as a server, waiting for requests from your browser. When previewing the site with quarto preview, you will see a new web page opened in your browser with a URL that looks like this:
http://localhost:6143/posts/quarto-blog-tutorial/#building-a-quarto-site
The localhost part indicates that the web browser is sending requests to your own machine.
At this point, it is a good idea to commit and push your changes to your Github repository.
If you are not familiar with git versioning, click here to expand this quick tutorial
The most up to date information on this topic will be found in this tutorial on the topic.
On the VS Code interface, go to the Source Control tab from the left pane (see image):
- Click on the
+next toChangesto stage all your changes - Write a commit message
- Press the commit button
- Sync your changes (see image below)
Customising Your Site
The index.qmd in the root directory is the home page. You can experiment with it, filling it with some Markdown text and images.
The blog posts are stored in the posts/ folder. In this folder, each subfolder represents a different post, with an index.qmd file and additional content like images.
Writing Your First Blog Post
To create a new blog post, simply add a new folder to the posts section. This folder name will be used in the URL of your blog post. I have used Open AI o1 to generate a quick blog post on Fibonacci. To follow along, create a folder in the posts/ directory called fibonacci/.
In this folder, create a file called index.qmd and copy the following snippet:
---
title: "Exploring the Fibonacci Sequence"
author: "Gregory Patrick Thomas (GPT)"
date: "2024-12-13"
categories: [Algorithms]
tags: [Algorithms, Maths, Caching, Sequences, Recursion]
---
## A Brief History
The Fibonacci sequence is a series of numbers where each number is the sum of the two preceding ones, starting from $0$ and $1$. It was introduced to Western mathematics by Leonardo of Pisa, known as Fibonacci, in his 1202 book *Liber Abaci*. The sequence arose from a problem related to the growth of a population of rabbits.
## Mathematical Definition
Mathematically, the Fibonacci sequence $(F_n)$ is defined by the recurrence relation:
$$
F_n = F_{n-1} + F_{n-2}
$$
with seed values:
$$
F_0 = 0, \quad F_1 = 1
$$
## Recursive Implementation in Python
We can implement the Fibonacci sequence using a simple recursive function in Python:
```python
def fibonacci(n):
if n <= 1:
return n
else:
return fibonacci(n-1) + fibonacci(n-2)
```
## Complexity Analysis
The recursive function above has exponential time complexity. Specifically, the time complexity is $O(2^n)$, because it makes two recursive calls for each non-base case. This leads to redundant calculations and inefficient performance for large values of $n$.
## Optimising with `lru_cache`
We can improve the performance by using the `lru_cache` decorator from Python's `functools` module, which implements memoisation:
``` python
from functools import lru_cache
@lru_cache(maxsize=None)
def fibonacci(n):
if n <= 1:
return n
else:
return fibonacci(n-1) + fibonacci(n-2)
```To add a picture, you could save the following picture into the fibonacci folder and call it fibonacci.svg:
By Romain - Own work, CC BY-SA 4.0, Link
In your code, where you would like the image to appear, add the following code:
If you use this image though, make sure to attribute the author.
Push the Changes
As you work, remember to commit and push your changes.
Congratulations, you have already created a blog with Git version control. The next section will walk you through (1) hosting it on Netlify and (2) publishing it to your custom domain. If you wonder why these are two separate steps, read on!
Hosting the Site
There are many ways to host a site, ranging from GitHub Pages to a personal server. I found Netlify perfect for this blog, but this is not the only option.
Log In to Netlify Using GitHub
Log into Netlify using your GitHub account. You can then select the demo_site repository you just created.
Host the Site
On the main Netlify dashboard, click on Add New Site and select Import New Project. Follow the steps to import your project from your GitHub repository.
You can refer to the Quarto documentation to fill the Netlify UI.
The site name is not relevant here; it will simply determine the URL of your site. The URL will be your-site-name.netlify.app. The next section will explore how to release this to your own domain instead. If you are satisfied with a .netlify.app domain, then choose your site name carefully.
For Quarto projects, it is important to keep the Build Command field empty. This got me stuck for some time when creating my first project. The Publish Directory should be _site or demo_site/_site; this must be the path to the _site folder from the root of the GitHub directory.
The picture of the form I filled for this demo site can be found below.
You should now see your site on the Sites page. Click on it, and you will see your site, hosted by Netlify. You can now reach it with any browser with the URL: site-name.netlify.app. Congratulations on getting this far!
PS: If this is already enough for you, you are done! The following section will show you how to host it on your custom domain.
Hosting the Site on a Custom Domain
Buy a Domain on Namecheap (or Any Other Provider)
There are many domain providers. In this section, I will share my experience with Namecheap.
Start by creating an account, and look for your desired site name using the site’s search function. Select your desired site and purchase the domain. Domains are generally managed with yearly contracts.
To write this post, I purchased the eliott.my domain for 1 year for €1.70. I will take the site down soon after publishing this article.
Add the Domain to Netlify
Back to Netlify, to publish your website to your custom domain, go to your Site Configuration, to the Domain Management tab. There, click on Add New Domain and follow the steps.
In the process, you will be asked to modify the your domain’s nameservers (see image below).
But what is a nameserver?
Nameservers are a key component of the Domain Name System (DNS). Nameservers translate domain names (e.g., eliott.my) into the numerical IP address (e.g., 92.168.123.132) at which your blog is hosted.
By default, when registering a domain on Namecheap, Namecheap will be in charge of this translation. When hosting your site using Netlify, you have to tell Namecheap that Netlify will now be in charge of the translation process between domain name and IP address.
Modify DNS Configuration
In your Namecheap account, go to your Domains list and click on the Manage button next to your domain name.
In the first page of the settings, change the Nameserver to Custom DNS and add the four nameservers shown on the Netlify UI. The change will take up to 48 hours to take effect. It took around 12 hours for my blog to be live.
Once this is done, your site is now online, congratulations!
Hosting my first blog was a fantastic experience. After spending more than 20 years consuming web content, I had finally stepped on the other side of the mirror. As always, this is only the start of the journey. Publishing blog entries and knowing that they may be useful to at least one person some day is enough to keep me writing.
If this inspired you, feel free to share or get in touch. I would love to hear about your experience and read your first articles.