Migrating my blog from fastpages to Quarto
Tags: meta, quarto
Published: 2023-09-05 21:34:49

---
title: Migrating my blog from fastpages to Quarto
published: true
date: 2023-07-17 03:00:00 UTC
tags: meta,quarto
canonical_url: https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/index.html
---

<section id="why-migrate">
<h2 data-anchor-id="why-migrate">Why migrate?</h2>
<p>In a <a href="https://forums.fast.ai/t/fastpages-deprecating-fastpages-in-favor-of-quarto/99095" target="_blank">post published on September 3, 2022</a>, <a href="https://hamel.dev/" target="_blank">Hamel Husain</a> announced that he has rebuilt <a href="https://nbdev.fast.ai/" target="_blank">nbdev</a> on top of <a href="https://quarto.org" target="_blank">Quarto</a>. In the blog post, he explained that there have been new pieces of technology like <a href="https://jupyterbook.org/" target="_blank">Jupyter Book</a> and <a href="https://quarto.org" target="_blank">Quarto</a>, which are both fabulous. Husain explained that he ended up using Quarto for nbdev, because of its shared vision with nbdev and the fantastic ongoing support from <a href="https://www.rstudio.com/authors/j.j.-allaire/" target="_blank">JJ Allaire</a> and the rest of the <a href="https://posit.co/" target="_blank">Posit</a> team. He also recommended that people trying to blog with notebooks should be using Quarto, instead of <a href="https://github.com/fastai/fastpages" target="_blank">Fastpages</a>.</p>
</section><section id="what-is-quarto">
<h2 data-anchor-id="what-is-quarto">What is Quarto?</h2>
<p><a href="https://quarto.org" target="_blank">Quarto</a> is an open-source, web-based platform designed to simplify the creation and publication of scientific documents, including data-driven reports, technical articles, and more, with features such as:</p>
<ul>
<li>Compatibility with a wide range of programming languages, including R, Python, and Julia;</li>
<li>Integration with popular web publishing platforms such as GitHub pages, Netlify among <a href="https://quarto.org/docs/publishing/" target="_blank">others</a>;</li>
<li>Support for a broad range of document outputs, including LaTeX, PDF, and HTML;</li>
<li>Extensive customizability with built-in templates and reusable components; and</li>
<li>Built-in support for code snippets and data visualizations.</li>
</ul>
</section><section id="installing-quarto">
<h2 data-anchor-id="installing-quarto">Installing Quarto</h2>
<p>Go to the <a href="https://quarto.org/docs/get-started/">get started</a> page on the quarto website to download the installer file. I’m on Ubuntu, so for me that’s a .deb file. I install it from the command line:</p>
<div id="cb1" style="background: #f1f3f5;"><pre><code><span id="cb1-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">sudo</span> dpkg <span style="color: #657422;
background-color: null;
font-style: inherit;">-i</span> quarto-1.3.433-linux-amd64.deb</span></code></pre></div>
<p>Create my blog project, called <code>quarto-blog</code>:</p>
<div id="cb2" style="background: #f1f3f5;"><pre><code><span id="cb2-1"><span style="color: null;
background-color: null;
font-style: inherit;">quarto</span> create-project quarto-blog <span style="color: #657422;
background-color: null;
font-style: inherit;">--type</span> website:blog</span></code></pre></div>
<p>then enter the project and preview it:</p>
<div id="cb3" style="background: #f1f3f5;"><pre><code><span id="cb3-1"><span style="color: null;
background-color: null;
font-style: inherit;">cd</span> quarto-blog/</span>
<span id="cb3-2"><span style="color: null;
background-color: null;
font-style: inherit;">quarto</span> preview quarto-blog</span></code></pre></div>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/default-quarto-screen.png"></p>
<figcaption>Generated quarto blog preview</figcaption>

</div>
</section><section id="migrating-fastpagess-posts-to-quarto">
<h2 data-anchor-id="migrating-fastpagess-posts-to-quarto">Migrating fastpages’s posts to Quarto</h2>
<p>Follow instructions in nbdev’s <a href="https://nbdev.fast.ai/tutorials/blogging.html#migrating-from-fastpages" target="_blank">Migrating from Fastpages</a> tutorial.</p>
<p>In my case:</p>
<div id="cb4" style="background: #f1f3f5;"><pre><code><span id="cb4-1"><span style="color: null;
background-color: null;
font-style: inherit;">cd</span> quarto-blog</span>
<span id="cb4-2"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">cp</span> <span style="color: #657422;
background-color: null;
font-style: inherit;">-r</span> ../fastpages-blog/_notebooks/<span style="color: #AD0000;
background-color: null;
font-style: inherit;">*</span> posts</span>
<span id="cb4-3"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">cp</span> <span style="color: #657422;
background-color: null;
font-style: inherit;">-r</span> ../fastpages-blog/_posts/<span style="color: #AD0000;
background-color: null;
font-style: inherit;">*</span> posts</span>
<span id="cb4-4"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">cp</span> ../fastpages-blog/images/<span style="color: #AD0000;
background-color: null;
font-style: inherit;">*</span> posts</span>
<span id="cb4-5"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">cp</span> <span style="color: #657422;
background-color: null;
font-style: inherit;">-r</span> ../fastpages-blog/images/copied_from_nb/<span style="color: #AD0000;
background-color: null;
font-style: inherit;">*</span> posts</span>
<span id="cb4-6"><span style="color: null;
background-color: null;
font-style: inherit;">nbdev_migrate</span> <span style="color: #657422;
background-color: null;
font-style: inherit;">--path</span> posts</span></code></pre></div>
</section><section id="setup-general-blog-configuration">
<h2 data-anchor-id="setup-general-blog-configuration">Setup general blog configuration</h2>
<p>Rename blog title, description and add <code>favicon</code></p>
<p>Edited section website in file <code>_quarto.yml</code> updating title and description and then adding site-url, favicon and google analytics configuration:</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb5" style="background: #f1f3f5;"><pre><code><span id="cb5-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">website</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb5-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">title</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">"xboard.dev"</span></span>
<span id="cb5-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">favicon</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> favicon.ico</span></span>
<span id="cb5-4"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">site-url</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> https://xboard.dev</span></span>
<span id="cb5-5"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">description</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">"Everything data and programming."</span></span>
<span id="cb5-6"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">google-analytics</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">"G-5FL5R0TTQ6"</span></span></code></pre></div>
</div>
<section id="setup-navigation-menu-and-footer">
<h3 data-anchor-id="setup-navigation-menu-and-footer">Setup navigation menu and footer</h3>
<p>Maintained About page and added github, twitter and rss buttons in the right section of the navigation bar and centered content license in the footer.</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb6" style="background: #f1f3f5;"><pre><code><span id="cb6-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">website</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb6-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">navbar</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb6-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">right</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb6-4"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> about.qmd</span></span>
<span id="cb6-5"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">icon</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> github</span></span>
<span id="cb6-6"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">href</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> https://github.com/xboard</span></span>
<span id="cb6-7"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">icon</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> twitter</span></span>
<span id="cb6-8"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">href</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> https://twitter.com/xboard_</span></span>
<span id="cb6-9"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">icon</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> rss</span></span>
<span id="cb6-10"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">href</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> index.xml</span></span>
<span id="cb6-11"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">page-footer</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb6-12"><span style="color: #4758AB;
background-color: null;
font-style: inherit;"> center</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">: </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">|</span></span>
<span id="cb6-13"> Made with Data, ❤️, 🐍 and [Quarto](https://quarto.org). License: [CC BY-SA 2.0](https://creativecommons.org/licenses/by-sa/2.0/).</span></code></pre></div>
</div>
</section>
<section id="setup-social-metadata">
<h3 data-anchor-id="setup-social-metadata">Setup social metadata</h3>
<p>To enables richer sharing of links to articles on the web improving the previews of my content when a link to it is pasted into applications like Twitter, Slack, Discord, Facebook, Linkedin, and more.</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb7" style="background: #f1f3f5;"><pre><code><span id="cb7-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">website</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb7-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">twitter-card</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb7-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">creator</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">"@xboard_"</span></span>
<span id="cb7-4"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">card-style</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> summary_large_image</span></span>
<span id="cb7-5"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">open-graph</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">true</span></span></code></pre></div>
</div>
</section>
</section><section id="setup-themes-for-light-and-dark-mode">
<h2 data-anchor-id="setup-themes-for-light-and-dark-mode">Setup themes for light and dark mode</h2>
<p>After playing a bit with some of the default themes available I have chosen litera and superhero for light and dark modes respectively.</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb8" style="background: #f1f3f5;"><pre><code><span id="cb8-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb8-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">light</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> litera</span></span>
<span id="cb8-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">dark</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> superhero</span></span>
<span id="cb8-4"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">css</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> styles.css</span></span></code></pre></div>
</div>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/themed-screen-part1.png"></p>
<figcaption>Light mode with litera theme</figcaption>

</div>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/themed-screen-dark_mode.png"></p>
<figcaption>Dark mode with superhero theme</figcaption>

</div>
</section><section id="adding-canonical-tag-into-the-head-section">
<h2 data-anchor-id="adding-canonical-tag-into-the-head-section">Adding <code>canonical</code> tag into the <code>&lt;head&gt;</code> section</h2>
<p>I have followed <a href="https://github.com/quarto-dev/quarto-cli/discussions/3976#discussioncomment-6376014" target="_blank">this post</a> from <a href="https://github.com/mcb00" target="_blank">Matt Bowers</a> adding the following python script:</p>
<div>
<div>
<pre><strong>add-canonicals.py</strong></pre>
</div>
<div id="cb9" style="background: #f1f3f5;"><pre><code><span id="cb9-1"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">"""</span></span>
<span id="cb9-2"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">This script adds canonical url tags to pages in a Quarto website.</span></span>
<span id="cb9-3"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">Place the script in the root of the project and run it post render.</span></span>
<span id="cb9-4"></span>
<span id="cb9-5"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">author: Matt Bowers - https://github.com/mcb00</span></span>
<span id="cb9-6"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">from https://github.com/quarto-dev/quarto-cli/discussions/3976#discussioncomment-6376014</span></span>
<span id="cb9-7"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">"""</span></span>
<span id="cb9-8"></span>
<span id="cb9-9"><span style="color: #00769E;
background-color: null;
font-style: inherit;">from</span> xml.dom.minidom <span style="color: #00769E;
background-color: null;
font-style: inherit;">import</span> parse</span>
<span id="cb9-10"><span style="color: #00769E;
background-color: null;
font-style: inherit;">from</span> urllib.parse <span style="color: #00769E;
background-color: null;
font-style: inherit;">import</span> urlparse</span>
<span id="cb9-11"><span style="color: #00769E;
background-color: null;
font-style: inherit;">import</span> warnings</span>
<span id="cb9-12"></span>
<span id="cb9-13">site_dir <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">'_site'</span></span>
<span id="cb9-14">sitemap_file <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">'sitemap.xml'</span></span>
<span id="cb9-15"></span>
<span id="cb9-16">document <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> parse(site_dir <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">'/'</span> <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> sitemap_file)</span>
<span id="cb9-17">locs <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> document.getElementsByTagName(<span style="color: #20794D;
background-color: null;
font-style: inherit;">'loc'</span>)</span>
<span id="cb9-18">urls <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> [l.firstChild.nodeValue <span style="color: #003B4F;
background-color: null;
font-style: inherit;">for</span> l <span style="color: #003B4F;
background-color: null;
font-style: inherit;">in</span> locs]</span>
<span id="cb9-19"></span>
<span id="cb9-20"><span style="color: #003B4F;
background-color: null;
font-style: inherit;">for</span> url <span style="color: #003B4F;
background-color: null;
font-style: inherit;">in</span> urls:</span>
<span id="cb9-21"> </span>
<span id="cb9-22"> path <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> site_dir <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> urlparse(url).path</span>
<span id="cb9-23"> canonical_tag <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">f'&lt;link rel="canonical" href="</span><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">{</span>url<span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">}</span><span style="color: #20794D;
background-color: null;
font-style: inherit;">" /&gt;'</span></span>
<span id="cb9-24"></span>
<span id="cb9-25"> <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Read in the file</span></span>
<span id="cb9-26"> <span style="color: #003B4F;
background-color: null;
font-style: inherit;">with</span> <span style="color: null;
background-color: null;
font-style: inherit;">open</span>(path, <span style="color: #20794D;
background-color: null;
font-style: inherit;">'r'</span>) <span style="color: #00769E;
background-color: null;
font-style: inherit;">as</span> <span style="color: null;
background-color: null;
font-style: inherit;">file</span> :</span>
<span id="cb9-27"> filedata <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> <span style="color: null;
background-color: null;
font-style: inherit;">file</span>.read()</span>
<span id="cb9-28"></span>
<span id="cb9-29"> <span style="color: #003B4F;
background-color: null;
font-style: inherit;">if</span> filedata.<span style="color: #4758AB;
background-color: null;
font-style: inherit;"> __contains__ </span>(<span style="color: #20794D;
background-color: null;
font-style: inherit;">'&lt;link rel="canonical"'</span>):</span>
<span id="cb9-30"> warnings.warn(<span style="color: #20794D;
background-color: null;
font-style: inherit;">f'</span><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">{</span>path<span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">}</span><span style="color: #20794D;
background-color: null;
font-style: inherit;"> already contains canonical tag. Skipping this file.'</span>)</span>
<span id="cb9-31"> <span style="color: #003B4F;
background-color: null;
font-style: inherit;">else</span>:</span>
<span id="cb9-32"> <span style="color: null;
background-color: null;
font-style: inherit;">print</span>(<span style="color: #20794D;
background-color: null;
font-style: inherit;">f'</span><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">{</span>path<span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">}</span><span style="color: #20794D;
background-color: null;
font-style: inherit;"> adding canonical tag.'</span>)</span>
<span id="cb9-33"> <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Replace the target string</span></span>
<span id="cb9-34"> filedata <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> filedata.replace(<span style="color: #20794D;
background-color: null;
font-style: inherit;">'&lt;/head&gt;'</span>, canonical_tag <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span><span style="color: #20794D;
background-color: null;
font-style: inherit;">'</span><span style="color: #20794D;
background-color: null;
font-style: inherit;">\n</span><span style="color: #20794D;
background-color: null;
font-style: inherit;">&lt;/head&gt;'</span>)</span>
<span id="cb9-35"></span>
<span id="cb9-36"> <span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Write the file out again</span></span>
<span id="cb9-37"> <span style="color: #003B4F;
background-color: null;
font-style: inherit;">with</span> <span style="color: null;
background-color: null;
font-style: inherit;">open</span>(path, <span style="color: #20794D;
background-color: null;
font-style: inherit;">'w'</span>) <span style="color: #00769E;
background-color: null;
font-style: inherit;">as</span> <span style="color: null;
background-color: null;
font-style: inherit;">file</span>:</span>
<span id="cb9-38"> <span style="color: null;
background-color: null;
font-style: inherit;">file</span>.write(filedata)</span></code></pre></div>
</div>
<p>and them add a <code>post-render</code> configuration pointing to this script in my project:</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb10" style="background: #f1f3f5;"><pre><code><span id="cb10-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">project</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb10-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">post-render</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb10-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">"python add-canonicals.py"</span></span></code></pre></div>
</div>
</section><section id="gitgithub">
<h2 data-anchor-id="gitgithub">Git/Github</h2>
<section id="create-.gitignore-file">
<h3 data-anchor-id="create-.gitignore-file">Create <code>.gitignore</code> file</h3>
<p>Created <code>.gitignore</code> file with the following content:</p>
<div>
<div>
<pre><strong>.gitignore</strong></pre>
</div>
<div id="cb11" style="background: #f1f3f5;"><pre><code><span id="cb11-1">/.quarto/</span>
<span id="cb11-2">/_site/</span>
<span id="cb11-3">/_freeze/s</span></code></pre></div>
</div>
</section>
<section id="initialize-git-and-upload-to-repository-in-github">
<h3 data-anchor-id="initialize-git-and-upload-to-repository-in-github">Initialize Git and upload to repository in Github</h3>
<p>Initialize local repository:</p>
<div id="cb12" style="background: #f1f3f5;"><pre><code><span id="cb12-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> init</span>
<span id="cb12-2"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> add .</span>
<span id="cb12-3"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> commit <span style="color: #657422;
background-color: null;
font-style: inherit;">-m</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">"Migrated blog: first commit"</span></span></code></pre></div>
<p>Then go to <a href="https://github.com/" target="_blank">Github</a> and create a new public repository named <code>quarto-blog</code> and in your local repository directory type in the terminal:</p>
<div id="cb13" style="background: #f1f3f5;"><pre><code><span id="cb13-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> remote add origin https://github.com/xboard/quarto-blog.git</span>
<span id="cb13-2"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> push <span style="color: #657422;
background-color: null;
font-style: inherit;">-u</span> <span style="color: #657422;
background-color: null;
font-style: inherit;">-f</span> origin master</span></code></pre></div>
</section>
<section id="setup-github-pages">
<h3 data-anchor-id="setup-github-pages">Setup github pages</h3>
<p>I have followed this <a href="hhttps://quarto.org/docs/publishing/github-pages.html#publish-command" target="_blank">article</a> from the official quarto documentation on how to publish you content to a gh-pages branch.</p>

<div><div>
<p>My old blog was running in github-pages and I want to keep using it.</p>
</div></div></section>
<section id="add-custom-domain-to-github-pages">
<h3 data-anchor-id="add-custom-domain-to-github-pages">Add custom domain to github pages</h3>
<p>First remove the domain in repository <a href="https://github.com/xboard/fastpages-blog" target="_blank">fastpages-blog</a></p>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/remove_domain_from_old_repo.png"></p>
<figcaption>Remove domain from old blog repository</figcaption>

</div>
<p>then add domain to <a href="https://github.com/xboard/quarto-blog" target="_blank">quarto-blog repository</a> github page.</p>
</section>
</section><section id="creating-condas-environment">
<h2 data-anchor-id="creating-condas-environment">Creating Conda’s environment</h2>
<p>Quarto supports executable Python code blocks within markdown. This allows you to create fully reproducible documents and reports—the Python code required to produce your output is part of the document itself, and is automatically re-run whenever the document is rendered.</p>
<p>Therefore it is crucial to have a reproducible Python execution environment and for such I have chosen <a href="https://docs.conda.io/en/latest/miniconda.html" target="_blank">Miniconda</a>. This are the steps I did to create my virtual environment and to save its configuration in github.</p>
<ol type="1">
<li>Create and activate the environment</li>
</ol>
<div id="cb14" style="background: #f1f3f5;"><pre><code><span id="cb14-1"><span style="color: null;
background-color: null;
font-style: inherit;">conda</span> create <span style="color: #657422;
background-color: null;
font-style: inherit;">-n</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">'quarto_env'</span></span>
<span id="cb14-2"><span style="color: null;
background-color: null;
font-style: inherit;">conda</span> activate quarto_env</span></code></pre></div>
<ol start="2" type="1">
<li>Install data-science libraries</li>
</ol>
<div id="cb15" style="background: #f1f3f5;"><pre><code><span id="cb15-1"><span style="color: null;
background-color: null;
font-style: inherit;">conda</span> install pandas seaborn matplotlib plotly pip scrapy statsmodels jupyter jupyterlab xgboost scikit-learn seaborn lightgbm <span style="color: #20794D;
background-color: null;
font-style: inherit;">"pymc&gt;=5"</span> jax<span style="color: #AD0000;
background-color: null;
font-style: inherit;">[</span><span style="color: #20794D;
background-color: null;
font-style: inherit;">cpu</span><span style="color: #AD0000;
background-color: null;
font-style: inherit;">]</span> tsfresh sktime prophet gradio plotly scipy statsmodels arviz xarray pytorch fastai streamlit lime shap interpret yellowbrick pypdf langchain accelerate bitsandbytes transformers scrapy </span></code></pre></div>
<ol start="3" type="1">
<li>Export all libraries installed in environment to <code>environment.yml</code> file</li>
</ol>
<div id="cb16" style="background: #f1f3f5;"><pre><code><span id="cb16-1"><span style="color: null;
background-color: null;
font-style: inherit;">conda</span> env export <span style="color: #657422;
background-color: null;
font-style: inherit;">--name</span> quarto_env <span style="color: #657422;
background-color: null;
font-style: inherit;">--file</span> environment.yml</span></code></pre></div>
<ol start="4" type="1">
<li>Add and push to github</li>
</ol>
<div id="cb17" style="background: #f1f3f5;"><pre><code><span id="cb17-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> add environment.yml</span>
<span id="cb17-2"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> commit <span style="color: #657422;
background-color: null;
font-style: inherit;">-m</span> <span style="color: #20794D;
background-color: null;
font-style: inherit;">'Add conda environment.yml'</span></span></code></pre></div>
<p>You can see the generated <code>environment.yml</code> file in github <a href="https://github.com/xboard/quarto-blog/blob/main/environment.yml" target="_blank">here</a>.</p>
</section><section id="default-configuration-for-blog-posts">
<h2 data-anchor-id="default-configuration-for-blog-posts">Default configuration for blog posts</h2>
<p>This setup properties that will be inherited by all posts.</p>
<div>
<div>
<pre><strong>posts/_metadata.yml</strong></pre>
</div>
<div id="annotated-cell-18" style="background: #f1f3f5;"><pre><code><span id="annotated-cell-18-1"></span>
<span id="annotated-cell-18-2"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># options specified here will apply to all posts in this folder</span></span>
<span id="annotated-cell-18-3"></span>
<span id="annotated-cell-18-4"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># freeze computational output</span></span>
<span id="annotated-cell-18-5"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># (see https://quarto.org/docs/projects/code-execution.html#freeze)</span></span>
<a data-target-cell="annotated-cell-18" data-target-annotation="1" onclick="event.preventDefault();">1</a><span id="annotated-cell-18-6"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">freeze</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">true</span></span>
<span id="annotated-cell-18-7"></span>
<span id="annotated-cell-18-8"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Enable banner style title blocks</span></span>
<a data-target-cell="annotated-cell-18" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-18-9"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">title-block-banner</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">true</span></span>
<span id="annotated-cell-18-10"></span>
<span id="annotated-cell-18-11"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Default for table of contents</span></span>
<span id="annotated-cell-18-12"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">toc</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">true</span></span>
<a data-target-cell="annotated-cell-18" data-target-annotation="3" onclick="event.preventDefault();">3</a><span id="annotated-cell-18-13"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">toc-title</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> Contents</span></span>
<span id="annotated-cell-18-14"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">toc-location</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> left</span></span>
<span id="annotated-cell-18-15"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">toc-expand</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span></span>
<span id="annotated-cell-18-16"></span>
<span id="annotated-cell-18-17"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Default author</span></span>
<span id="annotated-cell-18-18"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">author</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="annotated-cell-18-19"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">-</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">name</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> Flavio Regis de Arruda</span></span>
<span id="annotated-cell-18-20"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">url</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> https://xboard.dev</span></span>
<span id="annotated-cell-18-21"></span>
<span id="annotated-cell-18-22"><span style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Default fields for citation</span></span>
<a data-target-cell="annotated-cell-18" data-target-annotation="4" onclick="event.preventDefault();">4</a><span id="annotated-cell-18-23"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">citation</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">false</span></span><div></div>
<div></div></code></pre></div>
</div>
<dl>
<dt data-target-cell="annotated-cell-18" data-target-annotation="1">1</dt>
<dd>
<span data-code-annotation="1" data-code-cell="annotated-cell-18" data-code-lines="6">computational documents should never be re-rendered during a global project render</span>
</dd>
<dt data-target-cell="annotated-cell-18" data-target-annotation="2">2</dt>
<dd>
<span data-code-annotation="2" data-code-cell="annotated-cell-18" data-code-lines="9">create a banner style <a href="https://quarto.org/docs/authoring/title-blocks.html#title-banners" target="_blank">title block</a></span>
</dd>
<dt data-target-cell="annotated-cell-18" data-target-annotation="3">3</dt>
<dd>
<span data-code-annotation="3" data-code-cell="annotated-cell-18" data-code-lines="13">table of content title</span>
</dd>
<dt data-target-cell="annotated-cell-18" data-target-annotation="4">4</dt>
<dd>
<span data-code-annotation="4" data-code-cell="annotated-cell-18" data-code-lines="23">do not show <a href="https://quarto.org/docs/reference/metadata/citation.html" target="_blank">citation metadata</a>.</span>
</dd>
</dl>
</section><section id="enabling-commenting">
<h2 data-anchor-id="enabling-commenting">Enabling commenting</h2>
<p>I have chosen <a href="https://quarto.org/docs/reference/projects/websites.html#giscus" target="_blank">Giscus app</a> to leverage <a href="https://docs.github.com/en/discussions" target="_blank">Github Discussions</a> as commenting platform in my posts.</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="annotated-cell-19" style="background: #f1f3f5;"><pre><code><span id="annotated-cell-19-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">website</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="annotated-cell-19-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">comments</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="annotated-cell-19-3"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">giscus</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<a data-target-cell="annotated-cell-19" data-target-annotation="1" onclick="event.preventDefault();">1</a><span id="annotated-cell-19-4"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">repo</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> xboard/quarto-blog</span></span>
<a data-target-cell="annotated-cell-19" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-19-5"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">repo-id</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> R_kgDOJ7r2SQ</span></span>
<a data-target-cell="annotated-cell-19" data-target-annotation="3" onclick="event.preventDefault();">3</a><span id="annotated-cell-19-6"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">category</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> Announcements</span></span>
<a data-target-cell="annotated-cell-19" data-target-annotation="4" onclick="event.preventDefault();">4</a><span id="annotated-cell-19-7"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">category-id</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> DIC_kwDOJ7r2Sc4CX95f</span></span>
<span id="annotated-cell-19-8"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">loading</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span style="color: #657422;
background-color: null;
font-style: inherit;"> lazy</span></span><div></div>
<div></div></code></pre></div>
</div>
<dl>
<dt data-target-cell="annotated-cell-19" data-target-annotation="1">1</dt>
<dd>
<span data-code-annotation="1" data-code-cell="annotated-cell-19" data-code-lines="4">the Github repo that will be used to store comments.</span>
</dd>
<dt data-target-cell="annotated-cell-19" data-target-annotation="2">2</dt>
<dd>
<span data-code-annotation="2" data-code-cell="annotated-cell-19" data-code-lines="5">found using <a href="https://giscus.app/" target="_blank">https://giscus.app/</a></span>
</dd>
<dt data-target-cell="annotated-cell-19" data-target-annotation="3">3</dt>
<dd>
<span data-code-annotation="3" data-code-cell="annotated-cell-19" data-code-lines="6">discussion category in Github Discussions</span>
</dd>
<dt data-target-cell="annotated-cell-19" data-target-annotation="4">4</dt>
<dd>
<span data-code-annotation="4" data-code-cell="annotated-cell-19" data-code-lines="7">found using <a href="https://giscus.app/" target="_blank">https://giscus.app/</a></span>
</dd>
</dl>
<p>after this at the bottom of every post you will see the Giscus integration in action:</p>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/post_comments.png"></p>
<figcaption>Giscus widget for commenting and reactions</figcaption>

</div>
</section><section id="setup-footer">
<h2 data-anchor-id="setup-footer">Setup footer</h2>
<p>Footer message to be displayed (centered) in all my pages:</p>
<div>
<div>
<pre><strong>_quarto.yml</strong></pre>
</div>
<div id="cb18" style="background: #f1f3f5;"><pre><code><span id="cb18-1"><span style="color: #4758AB;
background-color: null;
font-style: inherit;">website</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb18-2"><span style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span style="color: #4758AB;
background-color: null;
font-style: inherit;">page-footer</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb18-3"><span style="color: #4758AB;
background-color: null;
font-style: inherit;"> center</span><span style="color: #003B4F;
background-color: null;
font-style: inherit;">: </span><span style="color: #20794D;
background-color: null;
font-style: inherit;">|</span></span>
<span id="cb18-4"> Made with Data, ❤️, 🐍 and [Quarto](https://quarto.org). License: [CC BY-SA 2.0](https://creativecommons.org/licenses/by-sa/2.0/).</span></code></pre></div>
</div>
</section><section id="vscode">
<h2 data-anchor-id="vscode">VSCode</h2>
<p>I love to use <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a> to write my blogs posts and I was very pleased to discover it has an excellent <a href="https://quarto.org/docs/tools/vscode.html" target="_blank">Quarto extension</a>.</p>
<section id="installing-vs-code-quarto-extension">
<h3 data-anchor-id="installing-vs-code-quarto-extension">Installing VS Code Quarto extension</h3>
<p>To install the <a href="https://marketplace.visualstudio.com/items?itemName=quarto.quarto" target="_blank">Quarto extension</a> type (Ctrl+P), type:</p>
<div id="cb19" style="background: #f1f3f5;"><pre><code><span id="cb19-1">ext install quarto.quarto</span></code></pre></div>
<p>and press enter.</p>
<p>Some of the features this extensions includes:</p>
<ul>
<li>Integrated render and preview for Quarto documents.</li>
<li>Syntax highlighting for markdown and embedded languages</li>
<li>Completion and diagnostics for YAML options</li>
<li>Completion for embedded languages (e.g. Python, R, Julia, etc.)</li>
<li>Commands and key-bindings for running cells and selected lines.</li>
<li>Live preview for LaTeX math as well as Mermaid and Graphviz diagrams</li>
</ul>
</section>
<section id="adding-snippet">
<h3 data-anchor-id="adding-snippet">Adding snippet</h3>
</section>
<section id="enabling-inline-suggestion">
<h3 data-anchor-id="enabling-inline-suggestion">Enabling inline suggestion</h3>
<p>Set <code>Snippet suggestions</code> to <code>inline</code> as recommended <a href="https://stackoverflow.com/a/74339599/483157" target="_blank">here</a>.</p>
</section>
<section id="adding-spell-checker">
<h3 data-anchor-id="adding-spell-checker">Adding spell checker</h3>
<p>Installed <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank">Code Spell checker</a>.</p>
<p>and them after clicking the spell button at the button at the editor bottom right I enabled its support to Quarto on my workspace.</p>
<div>
<p>
</p>
<p><img src="https://www.xboard.dev/posts/2023_07_17_migrating_from_fastpages_to_quarto/images/code_spell_checker_quarto.png"></p>
<figcaption>Enabling Quarto for Code Spell Checker</figcaption>

</div>
</section>
</section><section id="conclusion">
<h2 data-anchor-id="conclusion">Conclusion</h2>
<p>In summary, Quarto provides me with a powerful and versatile platform to write my technical blog posts as a Data Scientist and Python programmer. Its integration with Jupyter notebooks, support for multiple programming languages, customization options, collaboration features, and rendering capabilities make it the ideal choice for me to create high-quality, detailed, and engaging technical articles. With Quarto, I can focus on delivering content while enjoying a seamless and efficient writing experience.</p>
<p>In this post I have described in details all the steps that I did to migrated my posts from fastpages and how I configured Quarto to support the blog you are reading now.</p>
<p>If you were also using fastpages and intend to migrate, I hope it not only helps you in your decision process but also speeds up the setup of your new Quarto blog.</p>

</section>