<!doctype html><htmllang=en><head><metacharset=utf-8><metaname=descriptioncontent="Hosting on GitHub Pages Quartz is designed to be effortless to deploy. If you forked and cloned Quartz directly from the repository, everything should already be good to go!"><metaproperty="og:title"content="Deploying Quartz to the Web"><metaproperty="og:description"content="Hosting on GitHub Pages Quartz is designed to be effortless to deploy. If you forked and cloned Quartz directly from the repository, everything should already be good to go!"><metaproperty="og:type"content="website"><metaproperty="og:image"content="https://ar.falsy.cat/icon.png"><metaproperty="og:url"content="https://ar.falsy.cat/notes/hosting/"><metaproperty="og:width"content="200"><metaproperty="og:height"content="200"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Deploying Quartz to the Web"><metaname=twitter:descriptioncontent="Hosting on GitHub Pages Quartz is designed to be effortless to deploy. If you forked and cloned Quartz directly from the repository, everything should already be good to go!"><metaname=twitter:imagecontent="https://ar.falsy.cat/icon.png"><metaname=twitter:sitecontent="_jzhao"><title>Deploying Quartz to the Web</title><metaname=viewportcontent="width=device-width,initial-scale=1"><linkrel="shortcut icon"type=image/pnghref=https://ar.falsy.cat//icon.png><linkhref=https://ar.falsy.cat/styles.b369a84b3c6e6bfd686ad1f9da65641c.min.cssrel=stylesheet><linkhref=https://ar.falsy.cat/styles/_light_syntax.86a48a52faebeaaf42158b72922b1c90.min.cssrel=stylesheetid=theme-link><scriptsrc=https://ar.falsy.cat/js/darkmode.557cde7fcc3511a3d7ca8545ecd46d77.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>
<ahref=https://github.com/jackyzha0/quartz/tree/hugo/content/notes/hosting.mdrel=noopener>Edit Source</a></p><ulclass=tags><li><ahref=https://ar.falsy.cat/tags/setup/>Setup</a></li></ul><asideclass=mainTOC><details><summary>Table of Contents</summary><navid=TableOfContents><ol><li><ahref=#hosting-on-github-pages>Hosting on GitHub Pages</a><ol><li><ahref=#enable-github-actions>Enable GitHub Actions</a></li><li><ahref=#enable-github-pages>Enable GitHub Pages</a></li><li><ahref=#pushing-changes>Pushing Changes</a></li><li><ahref=#setting-up-the-site>Setting up the Site</a></li><li><ahref=#ignoring-files>Ignoring Files</a></li></ol></li><li><ahref=#docker-support>Docker Support</a></li></ol></nav></details></aside><ahref=#hosting-on-github-pages><h2id=hosting-on-github-pages><spanclass=hanchorarialabel=Anchor># </span>Hosting on GitHub Pages</h2></a><p>Quartz is designed to be effortless to deploy. If you forked and cloned Quartz directly from the repository, everything should already be good to go! Follow the steps below.</p><ahref=#enable-github-actions><h3id=enable-github-actions><spanclass=hanchorarialabel=Anchor># </span>Enable GitHub Actions</h3></a><p>By default, GitHub disables workflows from running automatically on Forked Repostories. Head to the ‘Actions’ tab of your forked repository and Enable Workflows to setup deploying your Quartz site!</p><p><imgsrc=https://ar.falsy.cat//notes/images/github-actions.pngwidth=autoalt="Enable GitHub Actions"><em>Enable GitHub Actions</em></p><ahref=#enable-github-pages><h3id=enable-github-pages><spanclass=hanchorarialabel=Anchor># </span>Enable GitHub Pages</h3></a><p>Head to the ‘Settings’ tab of your forked repository and go to the ‘Pages’ tab.</p><ol><li>(IMPORTANT) Set the source to deploy from <code>master</code> (and not <code>hugo</code>) using <code>/ (root)</code></li><li>Set a custom domain here if you have one!</li></ol><p><imgsrc=https://ar.falsy.cat//notes/images/github-pages.pngwidth=autoalt="Enable GitHub Pages"><em>Enable GitHub Pages</em></p><ahref=#pushing-changes><h3id=pushing-changes><spanclass=hanchorarialabel=Anchor># </span>Pushing Changes</h3></a><p>To see your changes on the internet, we need to push it them to GitHub. Quartz is a <code>git</code> repository so updating it is the same workflow as you would follow as if it were just a regular software project.</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl><spanclass=c1># Navigate to Quartz folder</span>
</span></span><spanclass=line><spanclass=cl><spanclass=c1># Push to GitHub to update site</span>
</span></span><spanclass=line><spanclass=cl>git push origin hugo
</span></span></code></pre></td></tr></table></div></div><p>Note: we specifically push to the <code>hugo</code> branch here. Our GitHub action automatically runs everytime a push to is detected to that branch and then updates the <code>master</code> branch for redeployment.</p><ahref=#setting-up-the-site><h3id=setting-up-the-site><spanclass=hanchorarialabel=Anchor># </span>Setting up the Site</h3></a><p>Now let’s get this site up and running. Never hosted a site before? No problem. Have a fancy custom domain you already own or want to subdomain your Quartz? That’s easy too.</p><p>Here, we take advantage of GitHub’s free page hosting to deploy our site. Change <code>baseURL</code> in <code>/config.toml</code>.</p><p>Make sure that your <code>baseURL</code> has a trailing <code>/</code>!</p><p><ahref=https://github.com/jackyzha0/quartz/blob/hugo/config.tomlrel=noopener>Reference <code>config.toml</code> here</a></p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span></span></code></pre></td></tr></table></div></div><p>If you are using this under a subdomain (e.g. <code><YOUR-GITHUB-USERNAME>.github.io/quartz</code>), include the trailing <code>/</code>. <strong>You need to do this especially if you are using GitHub!</strong></p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
</span></span></code></pre></td></tr></table></div></div><p>Change <code>cname</code> in <code>/.github/workflows/deploy.yaml</code>. Again, if you don’t have a custom domain to use, you can use <code><YOUR-USERNAME>.github.io</code>.</p><p>Please note that the <code>cname</code> field should <em>not</em> have any path <code>e.g. end with /quartz</code> or have a trailing <code>/</code>.</p><p><ahref=https://github.com/jackyzha0/quartz/blob/hugo/.github/workflows/deploy.yamlrel=noopener>Reference <code>deploy.yaml</code> here</a></p><divclass=highlighttitle=.github/workflows/deploy.yaml><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=nt>github_token</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>${{ secrets.GITHUB_TOKEN }}</span><spanclass=w></span><spanclass=c># this can stay as is, GitHub fills this in for us!</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><p>Have a custom domain?
<ahref=/notes/custom-Domain/rel=noopenerclass=internal-linkdata-src=/notes/custom-Domain/>Learn how to set it up with Quartz </a>.</p><ahref=#ignoring-files><h3id=ignoring-files><spanclass=hanchorarialabel=Anchor># </span>Ignoring Files</h3></a><p>Only want to publish a subset of all of your notes? Don’t worry, Quartz makes this a simple two-step process.</p><p>❌
<ahref=/notes/ignore-notes/rel=noopenerclass=internal-linkdata-src=/notes/ignore-notes/>Excluding pages from being published</a></p><ahref=#docker-support><h2id=docker-support><spanclass=hanchorarialabel=Anchor># </span>Docker Support</h2></a><p>If you don’t want to use a hosting service, you can host using
I would <em>not use this method</em> unless you know what you are doing.</p><hr><p>Now that your Quartz is live, let’s figure out how to make Quartz really <em>yours</em>!</p><blockquote><p>Step 6: 🎨
