<html><head><title>Migrating from Quartz 3</title><metacharSet="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaproperty="og:title"content="Migrating from Quartz 3"/><metaproperty="og:description"content="As you already have Quartz locally, you don’t need to fork or clone it again. Simply just checkout the alpha branch, install the dependencies, and import your old vault."/><metaproperty="og:image"content="https://roadmap.logos.co/static/og-image.png"/><metaproperty="og:width"content="1200"/><metaproperty="og:height"content="675"/><linkrel="icon"href="./static/icon.png"/><metaname="description"content="As you already have Quartz locally, you don’t need to fork or clone it again. Simply just checkout the alpha branch, install the dependencies, and import your old vault."/><metaname="generator"content="Logos Roadmaps"/><linkrel="preconnect"href="https://fonts.googleapis.com"/><linkrel="preconnect"href="https://fonts.gstatic.com"/><linkhref="./index.css"rel="stylesheet"type="text/css"spa-preserve/><linkhref="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"rel="stylesheet"type="text/css"spa-preserve/><linkhref="https://fonts.googleapis.com/css2?family=IBM Plex Mono&family=Schibsted Grotesk:wght@400;700&family=Source Sans Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap"rel="stylesheet"type="text/css"spa-preserve/><scriptsrc="./prescript.js"type="application/javascript"spa-preserve></script><scripttype="application/javascript"spa-preserve>constfetchData=fetch(`./static/contentIndex.json`).then(data=>data.json())</script></head><bodydata-slug="migrating-from-Quartz-3"><divid="quartz-root"class="page"><divid="quartz-body"><divclass="left sidebar"><h1class="page-title"><ahref=".">Logos Collective Project Roadmaps</a></h1><divclass="spacer mobile-only"></div><divclass="search"><divid="search-icon"><p>Search</p><div></div><svgtabIndex="0"aria-labelledby="title desc"role="img"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 19.9 19.7"><titleid="title">Search</title><descid="desc">Search</desc><gclass="search-path"fill="none"><pathstroke-linecap="square"d="M18.5 18.3l-5.4-5.4"></path><circlecx="8"cy="8"r="7"></circle></g></svg></div><divid="search-container"><divid="search-space"><inputautocomplete="off"id="search-bar"name="search"type="text"aria-label="Search for something"placeholder="Search for something"/><divid="results-container"></div></div></div></div><divclass="darkmode"><inputclass="toggle"id="darkmode-toggle"type="checkbox"tabIndex="-1"/><labelid="toggle-label-light"for="darkmode-toggle"tabIndex="-1"><svgxmlns="http://www.w3.org/2000/svg"xmlnsXlink="http://www.w3.org/1999/xlink"version="1.1"id="dayIcon"x="0px"y="0px"viewBox="0 0 35 35"style="enable-background:new 0 0 35 35;"xmlSpace="preserve"><title>Light mode</title><pathd="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5zM7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26zM17.5,6C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6zM27.5,9c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9zM6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06L6.439,8.561zM33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16zM28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439zM17.5,29c-0.829,0-1.5,0.6
<p>If you get an error like <code>fatal: 'upstream' does not appear to be a git repository</code>, make sure you add <code>upstream</code> as a remote origin:</p>
<p>When running <code>npx quartz create</code>, you will be prompted as to how to initialize your content folder. Here, you can choose to import or link your previous content folder and Quartz should work just as you expect it to.</p>
<p>If the existing content folder you’d like to use is at the <em>same</em> path on a different branch, clone the repo again somewhere at a <em>different</em> path in order to use it.</p>
<li><strong>Removing Hugo and <code>hugo-obsidian</code></strong>: Hugo worked well for earlier versions of Quartz but it also made it hard for people outside of the Golang and Hugo communities to fully understand what Quartz was doing under the hood and be able to properly customize it to their needs. Quartz 4 now uses a Node-based static-site generation process which should lead to a much more helpful error messages and an overall smoother user experience.</li>
<li><strong>Full-hot reload</strong>: The many rough edges of how <code>hugo-obsidian</code> integrated with Hugo meant that watch mode didn’t re-trigger <code>hugo-obsidian</code> to update the content index. This lead to a lot of weird cases where the watch mode output wasn’t accurate. Quartz 4 now uses a cohesive parse, filter, and emit pipeline which gets run on every change so hot-reloads are always accurate.</li>
<li><strong>Replacing Go template syntax with JSX</strong>: Quartz 3 used <ahref="https://pkg.go.dev/text/template"class="external">Go templates</a> to create layouts for pages. However, the syntax isn’t great for doing any sort of complex rendering (like <ahref="https://github.com/jackyzha0/quartz/blob/hugo/layouts/partials/textprocessing.html"class="external">text processing</a>) and it got very difficult to make any meaningful layout changes to Quartz 3. Quartz 4 uses an extension of JavaScript syntax called JSX which allows you to write layout code that looks like HTML in JavaScript which is significantly easier to understand and maintain.</li>
<li><strong>A new extensible <ahref="./configuration"class="internal">configuration</a> and <ahref="./configuration#plugins"class="internal">plugin</a> system</strong>: Quartz 3 was hard to configure without technical knowledge of how Hugo’s partials worked. Extensions were even hard to make. Quartz 4’s configuration and plugin system is designed to be extended by users while making updating to new versions of Quartz easy.</li>
</ol>
<h2id="things-to-update">Things to update<aaria-hidden="true"tabindex="-1"href="#things-to-update"class="internal"> §</a></h2>
<ul>
<li>You will need to update your deploy scripts. See the <ahref="./hosting"class="internal">hosting</a> guide for more details.</li>
<li>Ensure that your default branch on GitHub is updated from <code>hugo</code> to <code>v4</code>.</li>
<li><ahref="./folder-and-tag-listings"class="internal">Folder and tag listings</a> have also changed.
<ul>
<li>Folder descriptions should go under <code>content/<folder-name>/index.md</code> where <code><folder-name></code> is the name of the folder.</li>
<li>Tag descriptions should go under <code>content/tags/<tag-name>.md</code> where <code><tag-name></code> is the name of the tag.</li>
</ul>
</li>
<li>Some HTML layout may not be the same between Quartz 3 and Quartz 4. If you depended on a particular HTML hierarchy or class names, you may need to update your custom CSS to reflect these changes.</li>
<li>If you customized the layout of Quartz 3, you may need to translate these changes from Go templates back to JSX as Quartz 4 no longer uses Hugo. For components, check out the guide on <ahref="./creating-components"class="internal">creating components</a> for more details on this.</li>
