<!doctype html><htmllang=en><head><metacharset=utf-8><metaname=descriptioncontent="If you’d like to preview what your Quartz site looks like before deploying it to the internet, the following instructions guide you through installing the proper dependencies to run it locally."><metaproperty="og:title"content="Preview Changes"><metaproperty="og:description"content="If you’d like to preview what your Quartz site looks like before deploying it to the internet, the following instructions guide you through installing the proper dependencies to run it locally."><metaproperty="og:type"content="website"><metaproperty="og:image"content="https://falsy.cat/icon.png"><metaproperty="og:url"content="https://falsy.cat/notes/preview-changes/"><metaproperty="og:width"content="200"><metaproperty="og:height"content="200"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Preview Changes"><metaname=twitter:descriptioncontent="If you’d like to preview what your Quartz site looks like before deploying it to the internet, the following instructions guide you through installing the proper dependencies to run it locally."><metaname=twitter:imagecontent="https://falsy.cat/icon.png"><metaname=twitter:sitecontent="_jzhao"><title>Preview Changes</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/preview%20changes.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=#install-hugo-obsidian>Install <code>hugo-obsidian</code></a></li><li><ahref=#installing-hugo>Installing Hugo</a></li></ol></nav></details></aside><p>If you’d like to preview what your Quartz site looks like before deploying it to the internet, the following
instructions guide you through installing the proper dependencies to run it locally.</p><ahref=#install-hugo-obsidian><h2id=install-hugo-obsidian><spanclass=hanchorarialabel=Anchor># </span>Install <code>hugo-obsidian</code></h2></a><p>This step will generate the list of backlinks for Hugo to parse. Ensure you have
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-bashdata-lang=bash><spanclass=line><spanclass=cl><spanclass=c1># Install and link `hugo-obsidian` locally</span>
</span></span></code></pre></td></tr></table></div></div><p>If you are running into an error saying that <code>command not found: hugo-obsidian</code>, make sure you set your <code>GOPATH</code> correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable.</p><p>Afterwards, start the Hugo server as shown above and your local backlinks and interactive graph should be populated!</p><ahref=#installing-hugo><h2id=installing-hugo><spanclass=hanchorarialabel=Anchor># </span>Installing Hugo</h2></a><p>Hugo is the static site generator that powers Quartz.
<ahref=https://gohugo.io/getting-started/installing/rel=noopener>Install Hugo with “extended” Sass/SCSS version</a> first. Then,</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span><spanclass=lnt>2
</span><spanclass=lnt>3
</span><spanclass=lnt>4
</span><spanclass=lnt>5
</span><spanclass=lnt>6
</span><spanclass=lnt>7
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-bashdata-lang=bash><spanclass=line><spanclass=cl><spanclass=c1># Navigate to your local Quartz folder</span>
</span></span><spanclass=line><spanclass=cl><spanclass=c1># View your site in a browser at http://localhost:1313/</span>
</span></span></code></pre></td></tr></table></div></div><blockquoteclass=info-callout><p>Docker Support</p><p>If you have Docker installed already, open your terminal, navigate to your folder with Quartz and run <code>make docker</code></p></blockquote><p>Now that you are happy with how your Quartz instance looks, let’s get it hosted!</p><blockquote><p>🌍 Step 5:
