+ - 0:00:00
Notes for current slide
Notes for next slide

DS Skills Lab 05

Build-A-Blog!

Dr Danielle Evans

24 Oct 2024

1 / 22

Mid-Term Module Evaluation

  • Whilst we wait to begin, please complete our mid-term module evaluation for Discovering Statistics through this link, or the QR code:

  • Across all modules we typically get really low response rates for these evaluations, and we know small sample sizes are not representative! So PLEASE do complete this

  • These evaluations help us to see what we're doing well and what we could improve on, they're super helpful for us to tweak anything in the rest of the module and for next years group of students, and are also very important to us for career progression!

  • One of our students is also applying for funding for students to attend conferences for free (the final question), so we need a large number of responses for her to have reliable, representative data!

2 / 22

Overview

  • Building your own blog

  • Styling your site

  • Top Tips

3 / 22

Intro

  • I personally LOVE creating non-statistical things in R

  • There's various packages and tools that are relatively straightforward to use:

    • I use the distill package to build all my websites

    • All my slides are made with xaringan, and my apps are made with shiny

    • My published papers are all made with papaja (and so was my PhD thesis!)

  • & the process of making them is so much fun (I'm being SO serious!!)

  • So today we're going to walk through creating your own blog-style website using Quarto!

4 / 22

But Why??

  1. Coding is a very valuable skill in the job market

    • The more skills you develop, the more career opportunities you'll have
5 / 22

But Why??

  1. Coding is a very valuable skill in the job market

    • The more skills you develop, the more career opportunities you'll have
  2. You can produce your own site containing all your R/stats materials, and even notes from other modules if you wanted!

    • You'll have two TAP assessments on this module (with your first one in a couple weeks), and having one detailed resource to refer to during those assessment periods will hugely help you...
5 / 22

But Why??

  1. Coding is a very valuable skill in the job market

    • The more skills you develop, the more career opportunities you'll have
  2. You can produce your own site containing all your R/stats materials, and even notes from other modules if you wanted!

    • You'll have two TAP assessments on this module (with your first one in a couple weeks), and having one detailed resource to refer to during those assessment periods will hugely help you...
  3. & because it's cool & fun 😄

5 / 22
  • A blog is a website with a specific structure/look, where you have 'posts' listed on the homepage - but it doesn't have to be something you share with others to read!

  • One of the most useful things about using a blog structure is that you can tag any of your 'posts' with keywords to make it easier to find the topics you want to review, and you can easily search their content too!

  • I've already created a template for you to use on the Posit Cloud in the Week 05 Skills Lab project, so let's take a quick look by opening then rendering the site!





6 / 22
  • A blog is a website with a specific structure/look, where you have 'posts' listed on the homepage - but it doesn't have to be something you share with others to read!

  • One of the most useful things about using a blog structure is that you can tag any of your 'posts' with keywords to make it easier to find the topics you want to review, and you can easily search their content too!

  • I've already created a template for you to use on the Posit Cloud in the Week 05 Skills Lab project, so let's take a quick look by opening then rendering the site!





Task! Open up the Week 05 Skills Lab Project on the Posit Cloud!

6 / 22

Rendering

  • You can use the Render Website button in the Build tab in the top right pane to build your site

  • You can also render an individual post by using Render just like you would any other Quarto doc

    • The entire website is just a bunch of Quarto docs with some extra settings to make it look like a blog!
  • As a tip, if you run into any rendering problems when doing the entire site, try rendering each post separately to see if you can spot any issues/errors with them

7 / 22

Rendering

  • You can use the Render Website button in the Build tab in the top right pane to build your site

  • You can also render an individual post by using Render just like you would any other Quarto doc

    • The entire website is just a bunch of Quarto docs with some extra settings to make it look like a blog!
  • As a tip, if you run into any rendering problems when doing the entire site, try rendering each post separately to see if you can spot any issues/errors with them


Let's have a first look at our beautiful blog!

7 / 22

The Setup

  • The project has the following structure:

    • _quarto.yml - Quarto project file

    • index.qmd - the home page

    • about.qmd - the 'about' page

    • posts/ - the directory containing posts (i.e., your docs!)

    • posts/_metadata.yml - shared options for posts (can be ignored)

    • styles.css custom CSS for website

    • images, data, and docs folders

8 / 22

Extra Folders

  • You can pretty much ignore the docs folder, this is where your rendered posts will go automatically as you build your site!

  • You can upload any images you want to use to the images folder, and any data to the data folder, to use either, just write a file path to that folder/file

    • For each post, you can have a preview image that you specify, or if missing it will use the default image








9 / 22

Extra Folders

  • You can pretty much ignore the docs folder, this is where your rendered posts will go automatically as you build your site!

  • You can upload any images you want to use to the images folder, and any data to the data folder, to use either, just write a file path to that folder/file

    • For each post, you can have a preview image that you specify, or if missing it will use the default image








Task! Upload two images (from your device or online), to the images folder to use as a preview image of a post later on!

9 / 22

_quarto.yml

10 / 22

_quarto.yml

Task! Change Discovering Statistics' to 'Home' and re-render your site!

10 / 22

index.qmd

11 / 22

index.qmd



Task! Change the image placeholder to one of the images you uploaded, & re-render your site!

11 / 22

about.qmd

12 / 22

about.qmd

Task! Change the text description on the about page, & re-render your site!

12 / 22

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates







13 / 22

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates







Task! Add your tutorial or worksheet .qmd from this week to the ds folder, & re-render your site!

13 / 22

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates

14 / 22

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates







Task! For the doc you just added, change the preview image to one you uploaded earlier, & re-render your site!

14 / 22

Slides & Such

  • The website is built from Quarto docs but we can also include other file types

  • In our template, I've included an HTML file, and a pdf in the Slides menu to show you!

  • To add docs to this list, we want to upload the file to the relevant topic folder in the posts folder
  • Then, in our _quarto.yml file, we can include a text label for it, and the file path (href) to that doc


15 / 22

Slides & Such

  • The website is built from Quarto docs but we can also include other file types

  • In our template, I've included an HTML file, and a pdf in the Slides menu to show you!

  • To add docs to this list, we want to upload the file to the relevant topic folder in the posts folder
  • Then, in our _quarto.yml file, we can include a text label for it, and the file path (href) to that doc


Task! Download these slides from Canvas (as a pdf/HTML), upload them to the ds folder, add a text label & link to the menu in the .yml, & re-render!

15 / 22

Styling

  • Our aesthetic choices when it comes to our blog are pretty much limitless!

  • We have different methods of making our site as beautiful as we can imagine:

    • Ready-made Bootstrap themes

    • Custom Syntactically Awesome Style Sheets (Sass) - .scss files

    • Custom Cascading Style Sheets (CSS) - .css files

16 / 22

Themes

  • We can change the theme of our blog to be one of the ready-made Bootstrap themes

  • To use one of these themes, we need to change our _quarto.yml to include theme: minty for example...

17 / 22

Themes

  • We can change the theme of our blog to be one of the ready-made Bootstrap themes

  • To use one of these themes, we need to change our _quarto.yml to include theme: minty for example...





Task! Change the .yml to a Bootstrap theme of your choice & re-render!

17 / 22

styles.css

18 / 22

Resources

19 / 22

Top Tips!

  • Make small changes & re-render the site each time

    • This way you can work out what different features actually do

    • & you can debug errors easily when you know what you've just changed (Ctrl + Z is your friend!)

  • If you have errors rendering your entire site, try rendering each 'post'

  • Google styling and design questions - W3Schools is a great resource for CSS and HTML

  • Use Inspect Element to help identify specific components of a webpage

  • The YML/YAML is very fussy when it comes to spacing/indentation so watch out when making edits!

20 / 22

Final RemindRs!

  • Submit the easteR eggs you've found today on Canvas

  • Nominate your peers for the savioR award

  • Have a go at the Cloud ChallengRs

  • Give session feedback here 😀

  • Add the rest of your DS files to your new blog, and any other slides/work from other modules as you like

21 / 22

Final RemindRs!

  • Submit the easteR eggs you've found today on Canvas

  • Nominate your peers for the savioR award

  • Have a go at the Cloud ChallengRs

  • Give session feedback here 😀

  • Add the rest of your DS files to your new blog, and any other slides/work from other modules as you like

  • We'll do a mini Kahoot if we have time, but if you also upload a screenshot of your beautiful blog to Canvas, I'll give you 7500 extra Kahoot points! 🤑

21 / 22

That's all - happy building!


22 / 22

Mid-Term Module Evaluation

  • Whilst we wait to begin, please complete our mid-term module evaluation for Discovering Statistics through this link, or the QR code:

  • Across all modules we typically get really low response rates for these evaluations, and we know small sample sizes are not representative! So PLEASE do complete this

  • These evaluations help us to see what we're doing well and what we could improve on, they're super helpful for us to tweak anything in the rest of the module and for next years group of students, and are also very important to us for career progression!

  • One of our students is also applying for funding for students to attend conferences for free (the final question), so we need a large number of responses for her to have reliable, representative data!

2 / 22
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
sToggle scribble toolbox
Esc Back to slideshow