samanthacsik / samanthacsik.github.io Goto Github PK

Took me a while to track down the Google slides where I created this diagram of a Quarto website/blog repo structure from this blog post. Saving here for easier access!

...should probably add to a wiki

• Maya Gans
• Robert Mitchell

see:

General steps:

1. created new repo, samanthacsik-quarto-website that I'll eventually rename as samanthacsik.github.io once I decommission my distill site
2. followed steps as outlined in the Create the scaffolding for your website section (I just went with the RStudio setup option)
3. created .qmd file for my resources page, copied content over from .Rmd file and linked to navbar in _quarto.yml
4. added blog following the steps outlined in #2

Misc.

• install font awesome extension using the following in the command line:
  quarto install extension quarto-ext/fontawesome

Code chunks

• update code chunk options = moving them from inside {} to hashpipes, #|; quarto uses - rather than _ as a separator and booleans are lowercase (e.g. true, false) rather than uppercase (e.g. TRUE, FALSE)

Blog post yaml differences:

• note differences in author name, orcid, affiliation-url

Quarto:

title: title here
author:
   - name: Samantha Csik
   - orcid: ####-####-####-####
   - affiliation: Master of Environmental Data Science & the National Center for Ecological Analysis & Synthesis
   -  affiliation_url: https://bren.ucsb.edu/masters-programs/master-environmental-data-science

versus distill:

title: title here
author: 
   - first_name: "Samantha"
   - last_name: "Csik"
   - orcid_id: ####-####-####-####
   - affiliation: Master of Environmental Data Science & the National Center for Ecological Analysis & Synthesis
   - affiliation_url: https://bren.ucsb.edu/masters-programs/master-environmental-data-science

• Quarto categories inside brackets ([cat1, cat2]) while distill is listed:

category:
    - cat1
    - cat 2

• Quarto preview image option: image: preview_image.png vs. distill option: preview: preview_image.png

• adding citation links:

citation: 
  url: https://samanthacsik.github.io/talks/2022-08-05-creating-your-personal-website-using-quarto/

Deploying

There may be a more sophisticated way of doing this, but these were the steps I took:

1. My distill site was hosted for free via GitHub pages from the repo samanthacsik.github.io -- I first needed to free the domain name by unpublishing the distill website. To do this, go to Settings > Pages > click the three dots next to Visit Site > Unpublish site

2. Rename the original website repo something different (bc we'll need to rename the quarto website repo as samanthacsik.github.io. I renamed mine to samanthacsik-distill-site by going to Settings > General > Rename site (type new name in the box at the top of the page)

3. Go to the repo containing your quarto website and rename as samanthacsik.github.io.
4. Go to Settings > Pages and deploy (make sure it's deploying from /docs and not /root

fontawesome icons weren't working so removed from a number of workshop pages. Also, come back to centering buttons

Or something similar? Can showcase the following:

• Porting Openscapes website from blogdown to quarto: https://openscapes.org/
• refactoring code for Bren Student Data Explorer: https://github.com/UCSB-MEDS/shiny-dashboard

Created with Adobe Express Free Logo Service: https://www.adobe.com/express/create/logo

Fonts:

Montserrat Alternative, size 101.8 (thicker text)

• Background: #98A08D
• Line: #ABB69B
• Text: #FDFBF7
  

Lato Hairline, size 132 (thinner text)

• Background: #98A08D
• Line: #ABB69B
• Text: #FDFBF7
  

Relief Single Line Regular, size 294.3 (short logo)

• Background: #98A08D
• Text & Icon: #ECEFE1
  

Montserrat, size 132

• Background: #98A08D
• Line: #D1D9CE
• Text: #FDFBF7
  

https://bookdown.org/content/b298e479-b1ab-49fa-b83d-a57c2b034d49/

https://pittmethods.github.io/r4ss/

Yes I was stalking your website late at night for inspiration, I won't apologize! 🤪

Anyways... I saw in your index.qmd for your customizing quarto workshop page that you tried to center some buttons but that it didn't work (since they aren't centered on your site).

I would like to oh-so-humbly recommend the use of the following code:

<center>
   [your button code]
   [your second button code]
</center>

I used that on a page I'm still developing and it worked out 👀 okay bye!

https://www.quantumjitter.com/project/
https://github.com/cgoo4/quantumjitter/blob/main/project/_metadata.yml

So I can find my way back to these:

• HTML Theming - includes info on SASS variables (defaults)
• More About Quarto Themes - describes how to set up your .scss file

• Quarto documentation
• Notes on Changing from Rmarkdown/Bookdown to Quarto, by Nick Tierney
• porting a distill blog to quarto, by Danielle Narvarro
• The ultimate guide to starting a Quarto blog, by Albert Rapp

1. create subdirectory in your website project called posts -- this is where your blog posts will eventually live
2. add a _metadata.yml file to your posts directory using touch _metadata.yml in the terminal -- options specified in this file will apply to all documents inside the posts folder. NOTE: this is not required, but can make your life easier if you want certain options to apply to all blog posts that you create. You may want to start with the following options:

# options specified here will apply to all posts in this folder

# freeze computational output
# (see https://quarto.org/docs/projects/code-execution.html#freeze)
freeze: true

# Enable banner style title blocks
title-block-banner: true

3. add a posts.qmd to root directory -- this is your "listing page" where all your blog post previews will appear
4. modify the yaml of posts.qmd (just some options included below, not all are necessary, some are set to defaults):

---
title: "posts"
listing:
  contents: posts
  sort: "date desc"
  type: grid
  grid-item-border: true
  grid-item-align: left
  max-description-length: 175
  date-format: medium
  categories: true
---

6. add your listing page, posts.qmd to your website's navbar in _quarto.yml
7. to add your first blog post, create a subdirectory inside your posts folder and add an index.qmd file to that subdirectory (e.g. posts/my_first_blog_post/index.qmd)
8. Some yaml options to consider including for individual post index.qmd files:

---
title: "blog post title"
description: |
  blog post description (appears underneath the title in smaller text) which is included on the listing page
author: "Samantha Csik"
date: 09-24-2021
categories: [distill, R] # self-defined categories
image: preview_image.jpg
---

9. Important: for a blog post to show up on your rendered website, you need to Render the index.qmd file before you build your site using the Render Website button. You only need to do this the first time you publish your post, unless your specify freeze: true and subsequently make changes to your post.

https://new.express.adobe.com/

Needed a place to job down random things; need to organize better soom.

{httr2} package

HTTP protocol: there's a url that specifies the location + there can then be query parameters, which are designated by a ? + anything that follows

E.g. UC Census Bureau (not a very nicely-documented API...)
api.census.gov/data/2021/pep/population?get=DENSITY_2021,POP_2021,NAME,STATE&for=region:*&key=YOUR_KEY

• api.census.gov/data/2021/pep/population: API endpoint, which correesponds to a resource that a server knows how to provide back; in this case, that resource is the 2021 pop estimate
• ?get=DENSITY_2021,POP_2021,NAME,STATE&for=region:*&key=YOUR_KEY: this is the query string that contains all of the parameters (variables) that are being passed in this example API call that affect the output of the request
• get, for, key: all accepted query string parameters
• get accepts a list of strings, for accepts a string, and key is your API key