Quartz Setup

Intro

• Quartz turns markdown into html files (the middle step- static site generation)

• A possible workflow:

Getting Started

https://quartz.jzhao.xyz/

• Ensure you have at least Node v20 and npm v9.3.1 for Quartz to function correctly

node -v && npm -v

v20.11.1
10.2.4

• Clone the quartz repo

git clone git@github.com:jackyzha0/quartz.git
cd quartz # Or whatever you rename it to

• Go through quartz and install all dependencies

npm i

• Create quartz
  • Options: empty quartz, shortest paths (obsidian)

npx quartz create

Set up GitHub repo

https://quartz.jzhao.xyz/setting-up-your-GitHub-repository

• Create a new repo on github ( Do not initialize the new repository with README, license, or gitignore files)

# list all the repositories that are tracked
git remote -v

• Check remote branches

origin  https://github.com/jackyzha0/quartz.git (fetch)
origin  https://github.com/jackyzha0/quartz.git (push)
upstream        https://github.com/jackyzha0/quartz.git (fetch)
upstream        https://github.com/jackyzha0/quartz.git (push)

• Remove remotes

git remote rm origin

• Add your repository as origin

git remote add origin <repo> 

# if the origin doesn't match your own repository, set your repository as the origin
git remote set-url origin REMOTE-URL
 
# if you don't have upstream as a remote, add it so updates work
git remote add upstream https://github.com/jackyzha0/quartz.git

• For the first time, run command for initial push of your content to your repo

npx quartz sync --no-pull

• To push future updates to the repo:

npx quartz sync

Create Obsidian Vault

https://quartz.jzhao.xyz/features/Obsidian-compatibility

• Open Obsidian, and click open folder as a vault

• settings:
  • appearance: theme → typomagicical
  • community plugins:
    • install longform

Create Longform project

https://quartz.jzhao.xyz/authoring-content

• Click files icon → Right click content folder → create Longform project

• Name project and add a Readme

Create a templates folder

• Install Templater plugin
• Create a templates folder
  • Add a new node titled “Chapter”
  • Add properties

---
"title:": <%tp.file.title%>
draft: false
tags:
---

• Click Longform → Project → Scene template → templates/chapter.md

• Add sample scene (chapter)

  • Click longform → Scenese → Type “Introduction” in New Scene box

Sync to GitHub

https://quartz.jzhao.xyz/setting-up-your-GitHub-repository

• Sync changes to GitHub

npx quartz sync

Build and Preview Quartz

https://quartz.jzhao.xyz/build

• Build Quartz

npx quartz build --serve

• This will start a local web server to run your Quartz on your computer. Open a web browser and visit

http://localhost:8080/

Flags and options

For full help options, you can run npx quartz build --help.

Most of these have sensible defaults but you can override them if you have a custom setup:

• -d or --directory: the content folder. This is normally just content
• -v or --verbose: print out extra logging information
• -o or --output: the output folder. This is normally just public
• --serve: run a local hot-reloading server to preview your Quartz
• --port: what port to run the local preview server on
• --concurrency: how many threads to use to parse notes

Host your notes on GitHub Pages

https://quartz.jzhao.xyz/hosting#github-pages

• Right now, people can see it on github but not rendered, its not visitable online

• Create workflows/deploy.yaml file

• Head to “Settings” tab of your forked repository and in the sidebar, click “Pages”. Under “Source”, select “GitHub Actions”.

• Commit these changes by doing npx quartz sync. This should deploy your site to .github.io/.