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

DS Skills Lab 05

Build-A-Blog!

Dr Danielle Evans

03 Nov 2023

1 / 23

Overview

  • Building your own blog

  • Styling your site

  • Top Tips

  • Post questions/comments/errors/cool things on the Padlet, password: ds

2 / 23

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!

3 / 23

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
4 / 23

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...
4 / 23

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 😄

4 / 23

Blog the BuildR 👷‍♀️

Click me! 🐣

  • 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 rendering the site!






5 / 23

Blog the BuildR 👷‍♀️

Click me! 🐣

  • 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 rendering the site!






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

5 / 23

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

6 / 23

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!

6 / 23

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)

    • custom.scss custom theme for website

    • styles.css custom CSS for website

    • images, data, and docs folders

7 / 23

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








8 / 23

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!

8 / 23

_quarto.yml

9 / 23

_quarto.yml

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

9 / 23

index.qmd

10 / 23

index.qmd



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

10 / 23

about.qmd

11 / 23

about.qmd

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

11 / 23

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates







12 / 23

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!

12 / 23

posts/

  • Writing new posts

  • Adding posts

  • Specifying preview images

  • Adding categories

  • Changing authors & dates

13 / 23

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!

13 / 23

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


14 / 23

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!

14 / 23

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

15 / 23

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

16 / 23

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!

16 / 23

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! Undo what you just did, and go back to our custom .scss theme!

17 / 23

custom.scss

18 / 23

custom.scss


Task! Change the heading & drop-down colour to whatever you like!

18 / 23

styles.css

19 / 23

Resources

20 / 23

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!

21 / 23

Final RemindRs!

22 / 23

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

  • Design our new Sussex Psychology Hex Sticker

  • Give session feedback here

  • Add songs to our Spotify Kahoot Karaoke playlist! 💃

  • 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! 🤑

22 / 23

That's all - happy building!


23 / 23

Overview

  • Building your own blog

  • Styling your site

  • Top Tips

  • Post questions/comments/errors/cool things on the Padlet, password: ds

2 / 23
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