Moving from PowerPoint to Quarto presentations

Let me explain why I wanted to password-protect these slides first: primarily because a lot of them are incomplete and/or not updated and since I’ve setup continuous deployment on netlify, I don’t want them to be public; second, these are current and future teaching materials that I have been building from scratch, so I want to restrict public access to them, at least for now.

I’ve been a big fan of markdown ever since the format came into being and I often take notes and write early versions of my papers in markdown format, especially in Rmarkdown if they also involve data analysis on R as I have described in one of my earlier posts. I had earlier tried making slides on RStudio using xaringan but couldn’t really stick to it. When I came across quarto presentations demo last year, I was amazed by its smoothness and the features it provided. So, last summer I started converting my old lecture slides to quarto just to check if I would be able to deliver my teaching without using PowerPoint. Luckily I was able to test it before teaching term started as I had to give an invited talk (35-40 minutes) just before the start of the term this year, and I used presentation slides completely built on quarto with animations, slide transitions and all. It worked really well, and being able to zoom onto a section of the slide was like magic to my audience! So that was that, I decided to completely move all my lecture slides to quarto.

Quarto presentations are basically static html pages with javascript doing all the fancy stuffs in the background. So, I thought why not setup a website with all my lecture slides which I could just wherever and whenever I needed. I already host my main homepage on github deploying via netlify, so I decided to do the same for my presentations. But I also needed the website to be password-protected so only I had the access. After a bit of search, I came across staticrypt which seemed to be exactly what I needed. Better still, I found a netlify plugin to implement staticrypt making it even easier to setup the whole thing. So, that is what I did, the result of which you can see at lectures.poudyal.me. There are already plenty of great ‘step-by-step’ guides to setup on how to build/host websites using github and netlify, so I’m not going to repeat it here. Once you set that up, you just need three more steps to get quarto to render documents (presentations & any other files, e.g. index files) and encrypt them:

I. Setup a new Environment variable called PROTECTED_PASSWORD within your Site settings in netlify. This will be used to encrypt/decrypt your html pages.

II. Add package.json file at the root of your repository with following entry:

{
    "dependencies": {
        "@quarto/netlify-plugin-quarto": "^0.0.5"
    },
    "devDependencies": {
        "netlify-plugin-password-protection": "^3.0.2"
    }
}

III. Add netlify.toml file at the root of your repository with following entry. See further details at the netlify password protection page about [plugins.inputs].

[[plugins]]
    package = "@quarto/netlify-plugin-quarto"
[[plugins]]
    package = "netlify-plugin-password-protection"

    [plugins.inputs]
        directoryFilter = ["!node_modules"]
        title = "Protected Page"
        instructions = "Enter your passphrase"

After that, push everything to your github repository¹ and deploy on netlify. everything should work just as required. Some screenshots below on how my website with lecture materials looks like now.

Image 1: Encrypted landing page

Image 2: Once I enter the passphrase above, I get here.

Image 3: Title page of one of my quarto presentation document.

Next step for me is to use quarto to build all my websites - currently I use hugo.