Lab#MD01-1: Create and publish by Quarto

Lab

Lab, publish your Quarto webn

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)

💻 Lab#MD01-1: Publishing website by Quarto engine

---

Before

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

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.

Tasks

The tasks involved in this project include:

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

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:

1. markdown-callouts
2. Callout Blocks Quarto
3. Getting Started with RDMD
4. Divs and spans
5. codepen.io HTML+CSS
6. 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

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

Basic Quarto Project

fig 1

Initialize Repository and Publish

fig 2

You may use another Extensions

fig 3

let s do a commit but .. first

fig 4

we need to publish branch

fig 5

Permission 1/2

fig 6

Permission 2/2

fig 7

publish in public repository: name

fig 8

repository name: wiki is better! :-)

fig 9

repository name: publishing

fig 10

this tree folder is publised

fig 11

tree folder in github

fig 12

gh-pages activation

fig 13

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

fig 14

master is our branch: root

fig 15

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

fig 16

render

fig 17

quarto publish

fig 18

yes

fig 19

now: brach created

fig 20

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

fig 21

we may check all is right: commit

fig 22

we may check all is right: deploy

fig 23

we may check all is right: actions

fig 24

web deployed: live

fig 25

log publising terminal 1/4

fig 26

log publising terminal 2/4

fig 27

log publising terminal 3/4

fig 28

log publising terminal 4/4

fig 29

CSS: W3.css

top

MarkUp Languages Resources

Step-by-step guide to create and publish a Quarto website fig 1 fig 2 fig 3 fig 4 fig 5 fig 6 fig 7 fig 8 fig 9 fig 10 fig 11 fig 12 fig 13 fig 14 fig 15 fig 16 fig 17 fig 18 fig 19 fig 20 fig 21 fig 22 fig 23 fig 24 fig 25 fig 26 fig 27 fig 28 fig 29