Personal Website Version 2.0

New Quarto Website

I wanted to move away from my “original” blogdown method of blogging because I am really enthused about how great Quarto is. My blogdown project had accumulated so much code debris over the years because I started it when I was first learning to code, that it seemed easier to just take the posts and migrate them to a new Quarto Website + Blog than correcting all the mistakes accumulated over 4 years. I am initially going to post this on Github Pages, but once I have migrated content from my old site, I will reassign this repo to my Netlify account to deploy to my personalized domain.

Three things I wanted out of the new website:

1. Make writing posts easy. Quarto does not have an add-in (yet) like Blogdown does to create a new blog post. So I leaned very, very heavily on Mark Edney’s R-Blogger’s post on how to make a handy Shiny app to take the thinking out of setting up each blog post. The rough part of being just excited enough to blog, but with huge time constraints is that I might go months in between posting and inevitably forget things and it frustrates me.

2. Have a website plus a blog so the Quarto Website + Blog was a great combo idea that I was able to execute with help from a post by Samantha Csik.

3. Enable discussions on my blog. I don’t think I have much traffic on my blog, but I know a few people have used things I have written because when I was Googling myself I found someone thanking me in their blog post about something I had had to troubleshoot in my blog and of course then blogged about it. Last fall I saw a cool method called giscus, so will use that.

Shiny App for Blog Post Creation

For setting up the Shiny App, the only major change I did was to make a multi-select option for categories for my blog post template from Mark’s original work. This is nice because it helps me make sure I am not duplicating categories (eg Medicine and medicine) because categories are case sensitive. I also added a data-modified section to my template because I like to capture when I update a post. Also, I love the YAML template including draft = 'true' to harder to accidentally post a draft version of your post.

Here’s the whole app below.

Code

# Source https://www.r-bloggers.com/2022/08/creating-posts-for-quarto-blog/
#

library(shiny)
library(miniUI)

QGadget <- function() {....}

ui <- miniUI::miniPage(
  miniUI::gadgetTitleBar("Quarto Blog Post"),
  miniUI::miniContentPanel(
    shiny::textInput("title", "Title", placeholder = "Post Title"),
    shiny::selectInput("categories", "Categories", 
                       choices = list("How-to", 
                                      "R", "Python", "Quarto",
                                      "Medicine", 
                                      "Family Life", "Cooking"),
                       multiple = TRUE)

  )
)

server <- function(input, output, session) {
  
  shiny::observeEvent(input$done, {
    Blog_post(input$title, input$categories)
    stopApp("Post Created")
  })
}

shiny::runGadget(ui, server, viewer = shiny::dialogViewer("Quarto Blog Post"))

Blog_post <- function(title, categories){
  data <- list(title = title,
               author = "'Mara Alexeev'",
               date = Sys.Date(),
               date_modified = "'`r Sys.Date()`'",
               categories = categories,
                 
               draft = 'true',
               description = "''",
               image = "''",
               archives = format(date, "%Y/%m"),
               toc = 'false',
               fold = "true",
               tools = 'true',
               link =  'false')
  
  Template <- '---
title: {{title}}
author: {{author}}
date: {{date}}
date-modified: {{date_modified}}
categories: [{{categories}}]
draft: {{draft}}
description: {{description}}
image: {{image}}
archives:
  - {{archives}}
toc: {{toc}}

format:
  html:
    code-fold: {{fold}}
    code-tools: {{tools}}
---

# Introduction

# Conclusion

'
  
  dir.create(paste0("./posts/",data$date, "-", title))
  writeLines(whisker::whisker.render(Template, data), paste0("./posts/",data$date, "-", title, "/index.qmd"))
  file.edit(paste0("./posts/",data$date, "-", title, "/index.qmd"))
}

Blog on a Quarto Website

Samantha points out that a Quarto Blog is just a special point of a Quarto website. I actually got a little concerned about using Quarto as my blog because the directions of how to set up the individual posts had a lot of steps that I was worried I would not be able to do consistently over time. That’s when I thought to write a script to do it for me, and instead was saved several hours of work by Mark’s post.

giscus

Okay, so this is the main thrust of this post: Giscus. Which has painfully cute name. I was actually able to set it up on a test Quarto Book project, but of course that was months ago, and I can’t remember the process because I didn’t write it down! So for myself and for everyone else, here I go!

First, why did I choose giscus? I loved that it supported multiple languages (human languages because I sometimes blog about languages that don’t use the Latin alphabet), it has some math notation ability, and it is open source and has a great github page.

giscus steps

1. You have to add giscus as an app on Github.

2. Depending on your settings, you additionally may need to add the repo of interest to you configuration settings on giscus.

3. Enable discussions on your repo (settings -> features -> discussions).

4. Go to giscus.app and follow instructions there and it will give you some good information like repo-id which you will need to put in your _quarto.yml.

5. Take the information from the giscus.app and update your _quarto.yml to include information about the repo, giscus, and some ids. Unfortunately, it is not formatted the way you need to put it into the _quarto.yml.

  comments: 
    giscus:
      repo: MaraAlexeev/personal_website_v2
      repo-id: FAKE_REPO_ID #Get this from giscus.app
      category: General
      category-id: FAKE_CATEGORY_ID #Get this from giscus.app
      mapping: title #pathname was very gross format
      reactions-enabled: TRUE
      input-position: bottom
      theme: light

6. For pages you don’t want to have comments on put in the yaml header of that page comments: false. I do this for my blog post listing page and my about page.

Other fiddly things with Quarto Website to do

Deploy this to my personal domain with Netlify.

• Only hard part was finding the applications part of my Github Settings to authorize Netlify to access the correct repo.

Transfer over my old posts to here.

• Fear this will just be a manual process as I have time for it. I do have a last modified part to my post template so that I can keep track of original post dates and update dates.

Get my CV links up here.

• This was actually much easier than expected! All you need to do for external links is put the following in the _quarto.yml file

    navbar:
      left:
        - href: index.qmd
          text: Home
        - posts.qmd # add your posts.qmd file to your navbar!
        - about.qmd
        - href: https://maraalexeev.github.io/cv/ #your desired URL
          text: CV #the text that shows up on the navbar

Long term, figure out how to make it prettier.

• Probably gonna finally need to learn some css

• I did one thing to help make sure figures don’t go off the (here, phone) screen which happened with a plot I made for my first (manually) migrated blog post here. Just add this to the style.css file to cap image output to the max width of the screen.

  img {
  
  max-width: 100%;
  
  }