Folder Structure Here’s a rough overview of what’s what."><metaproperty="og:title"content="Editing Content in Quartz"><metaproperty="og:description"content="EditingQuartzrunsontopofHugosoallnotesarewritteninMarkdown.
Folder Structure Here’s a rough overview of what’s what."><metaproperty="og:type"content="website"><metaproperty="og:image"content="https://falsy.cat/icon.png"><metaproperty="og:url"content="https://falsy.cat/notes/editing/"><metaproperty="og:width"content="200"><metaproperty="og:height"content="200"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Editing Content in Quartz"><metaname=twitter:descriptioncontent="EditingQuartzrunsontopofHugosoallnotesarewritteninMarkdown.
Folder Structure Here’s a rough overview of what’s what."><metaname=twitter:imagecontent="https://falsy.cat/icon.png"><metaname=twitter:sitecontent="_jzhao"><title>Editing Content in Quartz</title><metaname=viewportcontent="width=device-width,initial-scale=1"><linkrel="shortcut icon"type=image/pnghref=https://falsy.cat//icon.png><linkhref=https://falsy.cat/styles.b369a84b3c6e6bfd686ad1f9da65641c.min.cssrel=stylesheet><linkhref=https://falsy.cat/styles/_light_syntax.86a48a52faebeaaf42158b72922b1c90.min.cssrel=stylesheetid=theme-link><scriptsrc=https://falsy.cat/js/darkmode.99648ef714ed1ed9c3633d3858f3741d.min.js></script>
<script>window.plausible=window.plausible||function(){(window.plausible.q=window.plausible.q||[]).push(arguments)}</script></head><body><divid=search-container><divid=search-space><inputautocomplete=offid=search-barname=searchtype=textaria-label=Searchplaceholder="Search for something..."><divid=results-container></div></div></div><scriptsrc=https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.jsintegrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE="crossorigin=anonymousdefer></script>
<scriptdefersrc=https://falsy.cat/js/full-text-search.e6e2e0c213187ca0c703d6e2c7a77fcd.min.js></script><divclass=singlePage><header><h1id=page-title><aclass=root-titlehref=https://falsy.cat/>🪴 Quartz 3.3</a></h1><divclass=spacer></div><divid=search-icon><p>Search</p><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 Icon</title><descid="desc">Icon to open search</desc><gclass="search-path"fill="none"><pathstroke-linecap="square"d="M18.5 18.3l-5.4-5.4"/><circlecx="8"cy="8"r="7"/></g></svg></div><divclass=darkmode><inputclass=toggleid=darkmode-toggletype=checkboxtabindex=-1>
<ahref=https://github.com/jackyzha0/quartz/tree/hugo/content/notes/editing.mdrel=noopener>Edit Source</a></p><ulclass=tags><li><ahref=https://falsy.cat/tags/setup/>Setup</a></li></ul><asideclass=mainTOC><details><summary>Table of Contents</summary><navid=TableOfContents><ol><li><ahref=#editing>Editing</a><ol><li><ahref=#folder-structure>Folder Structure</a></li><li><ahref=#front-matter>Front Matter</a></li><li><ahref=#obsidian>Obsidian</a></li></ol></li><li><ahref=#previewing-changes>Previewing Changes</a></li><li><ahref=#publishing-changes>Publishing Changes</a></li></ol></nav></details></aside><ahref=#editing><h2id=editing><spanclass=hanchorarialabel=Anchor># </span>Editing</h2></a><p>Quartz runs on top of
<ahref=https://gohugo.io/rel=noopener>Hugo</a> so all notes are written in
<ahref=https://www.markdownguide.org/getting-started/rel=noopener>Markdown</a>.</p><ahref=#folder-structure><h3id=folder-structure><spanclass=hanchorarialabel=Anchor># </span>Folder Structure</h3></a><p>Here’s a rough overview of what’s what.</p><p><strong>All content in your garden can found in the <code>/content</code> folder.</strong> To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you’d like.</p><p><strong>To edit the main home page, open <code>/content/_index.md</code>.</strong></p><p>To create a link between notes in your garden, just create a normal link using Markdown pointing to the document in question. Please note that <strong>all links should be relative to the root <code>/content</code> path</strong>.</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span><spanclass=lnt>2
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-markdowndata-lang=markdown><spanclass=line><spanclass=cl>For example, I want to link this current document to <spanclass=sb>`notes/config.md`</span>.
</span></span><spanclass=line><spanclass=cl>[<spanclass=nt>A link to the config page</span>](<spanclass=na>notes/config.md</span>)
</span></span></code></pre></td></tr></table></div></div><p>Similarly, you can put local images anywhere in the <code>/content</code> folder.</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span><spanclass=lnt>2
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-markdowndata-lang=markdown><spanclass=line><spanclass=cl>Example image (source is in content/notes/images/example.png)
</span></span></code></pre></td></tr></table></div></div><p>You can also use wikilinks if that is what you are more comfortable with!</p><ahref=#front-matter><h3id=front-matter><spanclass=hanchorarialabel=Anchor># </span>Front Matter</h3></a><p>Hugo is picky when it comes to metadata for files. Make sure that your title is double-quoted and that you have a title defined at the top of your file like so. You can also add tags here as well.</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=l>Rest of your content here...</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><ahref=#obsidian><h3id=obsidian><spanclass=hanchorarialabel=Anchor># </span>Obsidian</h3></a><p>I recommend using
<ahref=http://obsidian.md/rel=noopener>Obsidian</a> as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of your local files.</p><p>This step is <strong>highly recommended</strong>.</p><blockquote><p>🔗 Step 3:
<ahref=/notes/obsidian/rel=noopenerclass=internal-linkdata-src=/notes/obsidian/>How to setup your Obsidian Vault to work with Quartz</a></p></blockquote><ahref=#previewing-changes><h2id=previewing-changes><spanclass=hanchorarialabel=Anchor># </span>Previewing Changes</h2></a><p>This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. This is <em>highly recommended</em> but not required.</p><blockquote><p>👀 Step 4:
<ahref=/notes/preview-changes/rel=noopenerclass=internal-linkdata-src=/notes/preview-changes/>Preview Quartz Changes</a></p></blockquote><p>For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing.</p><ahref=#publishing-changes><h2id=publishing-changes><spanclass=hanchorarialabel=Anchor># </span>Publishing Changes</h2></a><p>Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet!</p><blockquote><p>🌍 Step 5:
