🧗‍♂️Random Restart

Recent Notes

Quartz

4 min read

Intro

Quartz is a static site generator that turns markdown into html files.

Quartz Setup

Requirements

  • Ensure you have at least Node v22 and npm v10.9.2 to function correctly.
node -v && npm -v
  • Example output:
v20.11.1
10.2.4
  • Install NVM, then upgrade Node and npm if needed
nvm install 22
nvm use 22

Install Quartz

  • Clone the Quartz repo
git clone git@github.com:jackyzha0/quartz.git
cd quartz # Or whatever you rename it to
  • Install dependencies
npm i
  • Create a quartz site
    • Options: empty quartz, shortest paths (obsidian)
npx quartz create

Warning

  • If using Powershell, change Powershell profile to run with execution policy bypass
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Set up GitHub repo

  • 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 default origin
git remote rm origin
  • Add your repository as origin
git remote add origin <repo>
  • Add upstream Quartz repo (for updates)
# 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

Updating Quartz

  • fetch latest changes
git fetch upstream
  • merge them into your branch
git merge upstream/v4
  • If there are conflicts, you’ll need to resolve them.

Create Obsidian Vault

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

Create alias for building quartz

Bash (Linux, WSL)

  • Create alias
echo "alias quartz='npx quartz build --serve'" >> ~/.bashrc
source ~/.bashrc  # reload shell
  • Test
quartz

PowerShell (Windows)

  • Add alias and reload profile
echo "function quartz { npx quartz build --serve }" >> $PROFILE
. $PROFILE
  • Test
quartz

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”.

picture 10

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

Codespaces Integration

Auto-Run

  • Create/edit devcontainer/devcontainer.json
mkdir .devcontainer
nano .devcontainer/devcontainer.json
{
  "name": "Quartz Codespace",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:22-bullseye",
  // "postCreateCommand": "npm install",
  // "postAttachCommand": "echo 'Welcome to your Quartz Codespace!'", 
  "postAttachCommand": "npx quartz build --serve"
}
  • After editing, click “Rebuild” in Codespaces to apply the changes.

Other

  • Check files sizes in repo
git ls-files -s | awk '{print $4}' | xargs du -h | sort -h

Prevent Indexing

  • In Head.tsx add <meta name="robots" content="noindex, nofollow" /> (Tells search engines not to index any page and not to follow links [1])
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex, nofollow" />
<meta name="og:site_name" content={cfg.pageTitle}></meta>
<meta property="og:title" content={title} />
  • Create a quartz/static/robots.txt file (Tells all crawlers to not access any URL on your site 1)
User-agent: *
Disallow: /

Footnotes

  1. https://developers.google.com/crawling/docs/robots-txt/create-robots-txt ↩

Graph View

Backlinks