Lab#MD01-1: Create and publish by Quarto

Lab

Publish your Quarto web

1 Overview

Create and publish a website on GitHub pages (Git on cloud and deploy pipeline) with Visual (IDE) Code and Quarto (publishing system/engine)

1.1 Before

• Students will need to have a basic understanding of web development, including HTML, CSS, and JavaScript.

1.2 Goal

• In this project, students will be required to create a web application using basically Markdown, flavour Quarto, and when it is necessary HTML, JS and CSS.
• Additionally, they will need to use GitHub and Visual Code to manage their project’s code and collaborate with their peers.

1.3 Tasks

The tasks involved in this project include: - In the first part of the project, students will create a basic web page using markdown and publish it on Github repository using Visual Code. This will involve creating a new repository on Github and learning how to use markdown to format text and create links. - In the second part of the project, students will learn how to publish their website on gh-pages, a service provided by Github for hosting static websites. This will involve learning how to use the gh-pages service and how to deploy their website to the internet. - You should check your website on user/github.io/repo.

1.4 Optional

As an optional study, students may also want to learn about using callouts in their markdown documentation. The following links provide useful information on the topic: - markdown-callouts - Callout Blocks Quarto - Getting Started with RDMD - Divs and spans - codepen.io HTML+CSS - How TO - Tabs W3.CSS HTML+CSS+JS

Using callouts, links, tabs and CSS can help to improve the readability and organization of a markdown document, making it easier for readers to understand and navigate the content.

To take their project to the next level, students may also choose to connect to an API (Application Programming Interface) to retrieve data and render charts using JavaScript. This will require an understanding of how to make HTTP requests and how to manipulate data in JavaScript.

Quarto data sources

1.5 After

• The Quarto website project is a great opportunity for students to develop their skills in web development, markdown, and version control using GitHub and Visual Code.

2 Step-by-step

Step-by-step guide to create and publish a Quarto website

1. Install some software and Sign in:
   1. Install Visual Code
      • Install GitHub Extension and Source Control if they don’t come with new installation
      • Install Quarto Extension in Visual Code
   2. Sign in GitHub from Visual Code (wizard)
   3. Install Quarto in your OS (download from Quarto site - Get started)
2. Create Quarto Project
3. GitHub tasks:
   1. Create repository, commit and push files to repository with Sync tool. To write our repository you need to:

      • Create Token on GitHub.com: Creating a personal access token

      • Use this token on your Visual Code - Git, link:

        $git config --global user.name "Mona Lisa"
        $git config --global user.mail "monalisa@davinci.com"
        $git config --global user.paasword "4WTVEG43_Q34WG435GAWER4_Q4vsrsrggr_3D44"

   2. Activate gh-pages service
4. quarto render and quarto publish gh-pages / quarto publish on Visual Code’s terminal
   1. Publish Quarto Project
   2. Improve your Quarto Project
5. Go to published web:user/github.io/repo

3 Screen-shoots (2022-12-12): installing Quarto and cloning project from GitHub.com

Step-by-step Quarto Creation project (install Quarto) in Visual Code (and Quarto Extension) and publishing to gh-pages (log in to GitHub, Sync tool)

Log in to GitHub and Quarto Creation: Sync GUI

4 Screen-shoots (2022-12-08): pushing Quarto project to GitHub and publishing on gh-pages

NoteBasic Quarto Project

fig 1

NoteInitialize Repository and Publish

fig 2

NoteYou may use another Extensions

fig 3

Notelet s do a commit but .. first

fig 4

Notewe need to publish branch

fig 5

NotePermission 1/2

fig 6

NotePermission 2/2

fig 7

Notepublish in public repository: name

fig 8

Noterepository name: wiki is better! :-)

fig 9

Noterepository name: publishing

fig 10

Notethis tree folder is publised

fig 11

Notetree folder in github

fig 12

Notegh-pages activation

fig 13

Noteat first gh-pages branck doesn’t exist: don’t worry, quarto will create later

fig 14

Notemaster is our branch: root

fig 15

Notethere is just one brach: master (brach gh-pages NOT YET)

fig 16

Noterender

fig 17

Notequarto publish

fig 18

Noteyes

fig 19

Notenow: brach created

fig 20

Noteand … gh pages now has got the gh-pages branch selected

fig 21

Notewe may check all is right: commit

fig 22

Notewe may check all is right: deploy

fig 23

Notewe may check all is right: actions

fig 24

Noteweb deployed: live

fig 25

Notelog publising terminal 1/4

fig 26

Notelog publising terminal 2/4

fig 27

Notelog publising terminal 3/4

fig 28

Notelog publising terminal 4/4

fig 29