Classwork 3

Quarto Website Basics

Introduction to Quarto Website

Website Files

• _quarto.yml configures the website:

  • It determines the structure of the website.
    • e.g., Navigation bar, themes, HTML options, etc.
  • If _quarto.yml is edited, use quarto render to render all qmd and ipynb files.

• index.qmd renders index.html, the front page of the website.

  • Do not create Quarto files something like index2.qmd within the working directory.

• blog-listing.qmd configures the blog listing page.

• posts directory includes sub-directories of blog posts.

• img directory can be used to store picture files.

• A file in the working directory can have its own web address.

  • For example, if you have resume-example.pdf in your working directory, it has the web address, https://USERNAME.github.io/resume-example.pdf.

• When naming a file in the website, do not have any space in a file name!

• Be systematic when naming a series of files in the website.

  • E.g., danl-320-cw-01.ipynb, danl-320-cw-02.ipynb, danl-320-cw-03.ipynb.

Blogging

• Rules

  1. One blog post corresponds to:
  • One sub-directory in the posts directory.
  • One *.ipynb (or *.qmd) file.

  2. Put all files for one blog post (e.g., *.ipynb (or *.qmd), *.png) in one corresponding sub-directory in the posts directory.

  3. When inserting an image file to a blog post, use a relative path, i.e., a file name of the image file.

Practice Problems

1. Decorate your website:

• Replace YOUR NAME with your name in _quarto.yml and index.qmd.
• Describe yourself in index.qmd.
• Add the picture (png) file of your profile photo to img directory. Then correct img/profile.png in index.qmd accordingly.
• Correct links for your resumé, linkedin, email, and social media.

2. Add a menu of “Project” to the navigation bar using danl_proj_nba.ipynb.

3. Add a drop-down menu of “Python Data Analysis” to the navigation bar.

• Under the menu of “Python Data Analysis”, add links for the following webpage:
  • Pandas Basics using pandas_basic.ipynb
  • Seaborn Basics using seaborn_basic.ipynb

3. Use the 3-step git commands (git add, git commit, and git push) to update your website.

References

• Quarto - Creating a Website
• Quarto - HTML Basics
• Quarto - HTML Code Blocks
• Quarto - HTML Theming
• Quarto - Creating a Blog

Discussion

Welcome to our Classwork 3 Discussion Board! 👋

This space is designed for you to engage with your classmates about the material covered in Classwork 3.

Whether you are looking to delve deeper into the content, share insights, or have questions about the content, this is the perfect place for you.

If you have any specific questions for Byeong-Hak (@bcdanl) regarding the Classwork 3 materials or need clarification on any points, don’t hesitate to ask here.

All comments will be stored here.

Let’s collaborate and learn from each other!