Publishing with Quarto

Quarto is an open-source scientific and technical publishing system. It makes it easier to publish articles, books and websites for techincal content.

Installation

Install Quarto.

$ wget https://github.com/quarto-dev/quarto-cli/releases/download/v1.5.57/quarto-1.5.57-linux-amd64.deb
$ sudo dpkg -i quarto-1.5.57-linux-amd64.deb

Install librsvg2-bin package to work with svg.

$ sudo apt install librsvg2-bin

Install Latex.

$ sudo quarto install tinytex

Getting Started

Quarto .qmd files contain a combination of markdown and executable code cells. For the scope of this article, we’ll limit ourselves to Markdown.

Create a file with name demo.qmd with the following content.

# Quarto Demo

This is a demonstration of authoring articles with [Quarto](https://quarto.qmd).

## A Bit of Math

Markdown supports embedding LaTeX for writing mathematics.

For example, the area of a circle with radius $r$ is $\pi r^2$.

And:

$\Sigma_{x=1}^{n}{x} = \frac{n(n+1)}{2}$

## The Circle

Here is a sample C program using [csketch](https://gitub.com/anandology/csketch) library.

```c
#include <sketch.h>

int main()
{
    // draw a circle with center as (0, 0) and radius 100
    draw_circle(0, 0, 100);

    // save all the shapes draws to lesson2.svg
    save_sketch("circle.svg");
}
```

And that generates a `circle.svg` with the following image.

![](circle.svg)

Now convert this to HTML by running:

$ quarto render demo.qmd --to html
...

Output created: demo.html

Open demo.html in your browser to see the output.

You can also convert this to PDF by running:

$ quarto render demo.qmd --to pdf
...

Output created: demo.pdf

You can open demo.pdf to see how it looks like.

Creating a quarto book

Let’s see how to create a quarto book, manage it as a github repo and publish it as a website using github pages.

The steps:

  1. Create a github repository
  2. Create a quarto project for the book
  3. Quarto Preview and edit _quarto.yml to update title of the book
  4. Commit all the new files to git
  5. Deploy the quarto book to github pages to get a website for the book
  6. Setup a github workflow to automate the publishing
  7. Add new content to the book

Step 1: Create a github repository

Create a new github repository. You may call it fcp-practice or programming-practice or something else.

Once the repository is created, clone it on to your computer.

$ git clone https://github.com/<your-username>/<repo-name>

$ cd <repo-name>

Step 2: Create a quarto project

Run command quarto create.

$ quarto create
 ? Create
 ❯ project
   extension

Select project and press Enter.

$ quarto create
 ? Create › project
 ? Type
   default
   website
   blog
 ❯ book
   confluence

Select book and press Enter.

$ quarto create
 ? Create › project
 ? Type › book
 ? Directory › .

Enter . for directory and press Enter.

$ quarto create
 ? Create › project
 ? Type › book
 ? Directory › .
Creating project at /tmp/quarto2:
  - Created _quarto.yml
  - Created index.qmd
  - Created intro.qmd
  - Created summary.qmd
  - Created references.qmd
  - Created cover.png
  - Created references.bib
 ? Open With
 ❯ vscode
   (don't open)

Select Open With vscode and press Enter.

Step 3: Open preview

In the terminal, run quarto preview to open the preview in your browser.

You can edit and files in vscode and the preview will be updated live in the browser.

You can edit the _quarto.yml file to update the title and author fields. Once you save the file in vscode, the preview will also be updated.

Step 4: Commit all your changes to git

Edit the .gitignore file and add a new line _book/. This is to avoid adding the HTML generated by quarto to the repository.

Add all files to repository by running:

git add .

Commit all the changes:

git commit

Publishing the book

You can publish the book as a website to github.

TODO

Setting up github actions

See Publishing to github pages in quarto documentation.

Thu Sep 26 - Task

Clone the fcp-blog repo and start preview.

git clone https://github.com/anandology/fcp-blog
cd fcp-blog
quarto preview

Create a new post introducing yourself.

cd posts
cp anand.qmd your-name.qmd
wget -O images/your-name-cover.jpg 'https://any-image-url-from-web'

You should see your post appearing in the quarto preview.