<!doctype html><htmllang=en><head><metacharset=utf-8><metaname=descriptioncontent="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!"><title>Deploying Quartz to the Web</title><metaname=viewportcontent="width=device-width,initial-scale=1"><linkrel="shortcut icon"type=image/pnghref=https://quartz.jzhao.xyz//icon.png><linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap"rel=stylesheet><linkhref=https://quartz.jzhao.xyz/styles.cd61336c89ed6e03702366ce4a492b75.min.cssrel=stylesheet><scriptsrc=https://quartz.jzhao.xyz/js/darkmode.46b07878b7f5d9e26ad7a3c40f8a0605.min.js></script>
<script>vardoNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];functiongtag(){dataLayer.push(arguments)}gtag("js",newDate),gtag("config","G-XYFD95KB4J",{anonymize_ip:!1})}</script><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://quartz.jzhao.xyz/js/search.bc849b857f2c1b822264d40635bb67b6.min.js></script><divclass=singlePage><header><h1id=page-title><ahref=https://quartz.jzhao.xyz/>🪴 Quartz 3.2</a></h1><svgtabindex="0"id="search-icon"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><divclass=spacer></div><divclass=darkmode><inputclass=toggleid=darkmode-toggletype=checkboxtabindex=-1>
<labelid=toggle-label-lightfor=darkmode-toggletabindex=-1><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"id="dayIcon"viewBox="0 0 35 35"style="enable-background:new 0 0 35 35"><title>Light Mode</title><pathd="M6 17.5C6 16.672 5.328 16 4.5 16h-3C.672 16 0 16.672.0 17.5S.672 19 1.5 19h3C5.328 19 6 18.328 6 17.5zM7.5 26c-.414.0-.789.168-1.061.439l-2 2C4.168 28.711 4 29.086 4 29.5 4 30.328 4.671 31 5.5 31c.414.0.789-.168 1.06-.44l2-2C8.832 28.289 9 27.914 9 27.5 9 26.672 8.329 26 7.5 26zm10-20C18.329 6 19 5.328 19 4.5v-3C19 .672 18.329.0 17.5.0S16 .672 16 1.5v3C16 5.328 16.671 6 17.5 6zm10 3c.414.0.789-.168 1.06-.439l2-2C30.832 6.289 31 5.914 31 5.5 31 4.672 30.329 4 29.5 4c-.414.0-.789.168-1.061.44l-2 2C26.168 6.711 26 7.086 26 7.5 26 8.328 26.671 9 27.5 9zM6.439 8.561C6.711 8.832 7.086 9 7.5 9 8.328 9 9 8.328 9 7.5c0-.414-.168-.789-.439-1.061l-2-2C6.289 4.168 5.914 4 5.5 4 4.672 4 4 4.672 4 5.5c0 .414.168.789.439 1.06l2 2.001zM33.5 16h-3c-.828.0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5h3c.828.0 1.5-.672 1.5-1.5S34.328 16 33.5 16zM28.561 26.439C28.289 26.168 27.914 26 27.5 26c-.828.0-1.5.672-1.5 1.5.0.414.168.789.439 1.06l2 2C28.711 30.832 29.086 31 29.5 31c.828.0 1.5-.672 1.5-1.5.0-.414-.168-.789-.439-1.061l-2-2zM17.5 29c-.829.0-1.5.672-1.5 1.5v3c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5v-3C19 29.672 18.329 29 17.5 29zm0-22C11.71 7 7 11.71 7 17.5S11.71 28 17.5 28 28 23.29 28 17.5 23.29 7 17.5 7zm0 18c-4.136.0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5 3.364 7.5 7.5S21.636 25 17.5 25z"/></svg></label><labelid=toggle-label-darkfor=darkmode-toggletabindex=-1><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"id="nightIcon"viewBox="0 0 100 100"style="enable-background='new 0 0 100 100'"><title>Dark Mode</title><pathd="M96.76 66.458c-.853-.852-2.15-1.064-3.23-.534-6.063 2.991-12.858 4.571-19.655 4.571C62.022 70.495 50.88 65.88 42.5 57.5 29.043 44.043 25.658 23.536 34.076 6.47c.532-1.08.318-2.379-.534-3.23-.851-.852-2.15-1.064-3.23-.534-4.918 2.427-9.375 5.619-13.246 9.491-9.447 9.447-14.65 22.008-14.65 35.369.0 13.36 5.203 25.921 14.65 35.368s22.008 14.65 35.368 14.65c13.361.0 25.921-5.203 35.369-14.65 3.872-3.871 7.064-8.328 9.491-13.246C97.826 68.608 97.611 67.309 96.76 66.458z"/></svg></label></div></header><article><h1>Deploying Quartz to the Web</h1><pclass=meta>Last updated April 10, 2022</p><ulclass=tags><li><ahref=https://quartz.jzhao.xyz/tags/setup/>Setup</a></li></ul><asideclass=mainTOC><details><summary>Table of Contents</summary><navid=TableOfContents><ol><li><ahref=#github-pages>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></ol></li></ol></nav></details></aside><h2id=github-pages>GitHub Pages</h2><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><h3id=enable-github-actions>Enable GitHub Actions</h3><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=/notes/images/github-actions.pngalt="Enable GitHub Actions"><em>Enable GitHub Actions</em></p><h3id=enable-github-pages>Enable GitHub Pages</h3><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=/notes/images/github-pages.pngalt="Enable GitHub Pages"><em>Enable GitHub Pages</em></p><h3id=pushing-changes>Pushing Changes</h3><p>To see your changes on the internet, we need to push it them to GitHub. Quartz is a <code>git</code> repo
</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><spanclass=lnt>8
</span><spanclass=lnt>9
</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><h3id=setting-up-the-site>Setting up the Site</h3><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>.</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=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=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-Domainrel=noopenerclass=internal-linkdata-src=/notes/custom-Domain>Learn how to set it up with Quartz </a>.</p><hr><p>Now that your Quartz is live, let’s figure out how to make Quartz really <em>yours</em>!</p><p>🎨
<ahref=/notes/troubleshootingrel=noopenerclass=internal-linkdata-src=/notes/troubleshooting>FAQ and Troubleshooting guide</a>.</p></article><hr><divclass=page-end><divclass=backlinks-container><h3>Backlinks</h3><ulclass=backlinks><li><ahref=/notes/editing>Editing Content in Quartz</a></li><li><ahref=/notes/troubleshooting>Troubleshooting and FAQ</a></li></ul></div><div><scriptsrc=https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.jsintegrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="crossorigin=anonymous></script><h3>Interactive Graph</h3><divid=graph-container></div><style>:root{--g-node:var(--secondary);--g-node-active:var(--primary);--g-node-inactive:var(--visited);--g-link:var(--outlinegray);--g-link-active:#5a7282}</style><scriptsrc=https://quartz.jzhao.xyz/js/graph.27e8521c25c27c79dea35f434c486167.js></script>
