Quarto blog

How to create a blog using quarto and github-pages

Step 1: Create a repo

Here I’m creating a repo called blog for all my blogging needs.

Download the repo to your local machine so you can add in files:

  • I like using Github Desktop for this. But whatever works for you.
  • Here’s a tutorial on how to download code from github (aka cloning repos from github)

Choose the destination path (local path) where you want your repo:

  • I’m choosing Documents/GitHub/blog

Step 2: Create files for building website

  • Head over to https://quarto.org/docs/websites/

  • I prefer setting things up using the terminal.

As the docs say, you need to do the follwing:

  1. be in the parent folder of where your blog is. For me, this means being at Documents/GitHub
  2. run the command to create quarto’s magic files in your blog: quarto create-project blog --type website
  3. run quarto preview blog to view the preview of the built in website

Step 3: Make changes to _quarto.yml

  • Here, I remove (comment out) the blue navigation bar navbar and add a sidebar instead.
  • In the sidebar, I create 2 sections: fastai and blog.
    • Under each section is contents where I put in the relative paths of notebooks I want to display under those sections.
    • To keep this organized, I’ve created two separate folders lessons and myblog
    • Whenever I need to add a new notebook:
      • I can just download the notebook from Colab (or Kaggle)
      • drop nb into the corresponding folder
      • add a line under the correct section pointing to the nb’s path

Using quarto preview blog in the terminal (as I did in the previous step, I can see what my website looks like:

  • the sidebar has 2 sections fastai and blog
    • under each is a rendered nb

Step 4: Set up github pages

To complete this step, I used github pages, publish command from the quarto documentation.

Step 4.1 New branch called gh-pages

I use github desktop to do git related things:

  1. Commit changes to main branch
  2. Create a new branch called gh-pages

  1. Then go to github repo, check settings are okay. I didn’t need to make any changes here.

Step 4.2: Modify .gitignore

  • Move to the main branch, push all changes to remote

Step 5: Publish (while you’re on main branch)!

  • Here’s the quarto documentation

  • The rule seems to be that you make/push all changes in main branch. Use gh-pages branch only when you’re using the command quarto publish gh-pages

The final site looks like this:

  • From the address bar, you see this is hosted on github now

Aaaand it’s done!

You can view the site at https://nabiafshan.github.io/blog/

It looks pretty good!