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.
  • See the quarto docs on navbar and sidebar
• 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

3. 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!