Quartz Website Setup

Quick Reference

• Frontmatter

Install

• Building your Quartz

# install npm on Arch
paru -S npm
 
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create
 

rsync markdown files

• sync files from workstation to vm hosting quartz and then run the deploy script to push changes live

rsync --delete -av --exclude='*.edtz' /home/yuriy/Syncthing/Obsidian/ master@quartz.dmz.zinchuk.home:/home/master/quartz/content/ && ssh master@quartz.dmz.zinchuk.home "/home/master/quartz/deploy.sh"

Configuration Changes

nano quartz.config.ts

import { QuartzConfig } from "./quartz/cfg"  
import * as Plugin from "./quartz/plugins"  
  
/**  
* Quartz 4 Configuration  
*  
* See https://quartz.jzhao.xyz/configuration for more information.  
*/  
const config: QuartzConfig = {  
 configuration: {  
   pageTitle: "Yuriy's Notes",  
   pageTitleSuffix: "",  
   enableSPA: true,  
   enablePopovers: true,  
   analytics: {  
     provider: "plausible",  
   },  
   locale: "en-US",  
   baseUrl: "zinchuk.xyz",  
   ignorePatterns: ["private", "templates", ".obsidian"],  
   defaultDateType: "modified",  
   theme: {  
     fontOrigin: "googleFonts",  
     cdnCaching: false,  
     typography: {  
       header: "Schibsted Grotesk",  
       body: "Source Sans Pro",  
       code: "IBM Plex Mono",  
     },  
     colors: {  
       lightMode: {  
         light: "#faf8f8",  
         lightgray: "#e5e5e5",  
         gray: "#b8b8b8",  
         darkgray: "#4e4e4e",  
         dark: "#2b2b2b",  
         secondary: "#284b63",  
         tertiary: "#84a59d",  
         highlight: "rgba(143, 159, 169, 0.15)",  
         textHighlight: "#fff23688",  
       },  
       darkMode: {  
         light: "#161618",  
         lightgray: "#393639",  
         gray: "#646464",  
         darkgray: "#d4d4d4",  
         dark: "#ebebec",  
         secondary: "#7b97aa",  
         tertiary: "#84a59d",  
         highlight: "rgba(143, 159, 169, 0.15)",  
         textHighlight: "#b3aa0288",  
       },  
     },  
   },  
 },  
 plugins: {  
   transformers: [  
     Plugin.FrontMatter(),  
     Plugin.CreatedModifiedDate({  
       priority: ["frontmatter", "git", "filesystem"],  
     }),  
     Plugin.SyntaxHighlighting({  
       theme: {  
         light: "github-light",  
         dark: "github-dark",  
       },  
       keepBackground: false,  
     }),  
     Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),  
     Plugin.GitHubFlavoredMarkdown(),  
     Plugin.TableOfContents(),  
     Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),  
     Plugin.Description(),  
     Plugin.Latex({ renderEngine: "katex" }),  
   ],  
   filters: [Plugin.RemoveDrafts()],  
   emitters: [  
     Plugin.AliasRedirects(),  
     Plugin.ComponentResources(),  
     Plugin.ContentPage(),  
     Plugin.FolderPage(),  
     Plugin.TagPage(),  
     Plugin.ContentIndex({  
       enableSiteMap: true,  
       enableRSS: true,  
     }),  
     Plugin.Assets(),  
     Plugin.Static(),  
     Plugin.Favicon(),  
     Plugin.NotFoundPage(),  
     // Comment out CustomOgImages to speed up build time  
     Plugin.CustomOgImages(),  
   ],  
 },  
}  
  
export default config

Deploying

#!/bin/bash  
# Define the directory to search in  
BUILD_DIR="$HOME/quartz/"  
CONTENT_DIR="$HOME/quartz/content"  
  
# Find all .md files in the directory and remove all instances of `` to fix pathing  
# Needed since all my articles are in the /Blog folder and it's subolfers in Obsidian instread of the base directory  
find "$CONTENT_DIR" -type f -name "*.md" -print0 | while IFS= read -r -d $'\0' file; do  
  # Replace '' with nothing in each file  
  sed -i 's|||g' "$file"  
  echo "Processed: $file"  
done  
  
echo "All .md files have been processed."  
  
cd "${BUILD_DIR}"  
  
# build the html files  
npx quartz build  
  
# copy the files to the apache serve directory using a script  
sudo /usr/local/bin/sync-quartz-site

# create/edit the bash script that will copy files from /quartz/public/ to /srv/http/
sudo /usr/local/bin/sync-quartz-site

#!/bin/sh  
# Sync changes and remove removed webpages, ignore .htaccess file
rsync -av --delete --exclude='.htaccess' --chown=http:http /home/master/quartz/public/ /srv/http/

Allow rsync script to be run privileged without asking for a sudo password

sudo visudo

• Add the following to the very bottom

master ALL=(ALL) NOPASSWD: /usr/local/bin/sync-quartz-site

Serving pages with Apache

Install apache and brotli and

sudo pacman -S apache brotli
 
 
# Enable and Start Apache
sudo systemctl enable httpd
sudo systemctl start httpd

Configure Apache for Quartz

Edit the main Apache configuration file directly:

sudo nano /etc/httpd/conf/httpd.conf

Make sure these modules are uncommented (remove the # if present):

LoadModule rewrite_module modules/mod_rewrite.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule brotli_module modules/mod_brotli.so

Modify the Default Site Configuration

In the httpd.conf file, find the <Directory "/srv/http"> section and modify it to the following:

• AllowOverride All is what allows .htaccess files to work.

<Directory "/srv/http">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Set the landing page html

• Have apache check for a Welcome.html file first and then fall back to index.html

<IfModule dir_module>  
   DirectoryIndex Welcome.html index.html  
</IfModule>

Add Compression Settings

Add these lines to the httpd.conf file (anywhere after the module loading sections):

# Brotli compression
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json application/xml
    BrotliCompressionQuality 11
</IfModule>
 
# Gzip compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json application/xml
</IfModule>

Create the Website Directory

sudo mkdir -p /srv/http
sudo chown -R http:http /srv/http

Create the .htaccess File

sudo nano /srv/http/.htaccess

And add the content from the Quartz Apache instructions:

RewriteEngine On
ErrorDocument 404 /404.html
 
# Rewrite rule for .html extension removal (with directory check)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI}.html -f
RewriteRule ^(.*)$ $1.html [L]
 
# Handle directory requests explicitly
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)/$ $1/index.html [L]

Deploy Quartz

Copy your Quartz site files to the document root:

# Assuming your quartz site files are in a directory called "quartz-site"
sudo cp -r /path/to/your/quartz-site/* /srv/http/
sudo chown -R http:http /srv/http

9. Adjust Permissions

sudo find /srv/http -type d -exec chmod 755 {} \;
sudo find /srv/http -type f -exec chmod 644 {} \;

10. Restart Apache to Apply Changes

sudo systemctl restart httpd

Allow http through firewalld

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

Checking the apache logs

sudo tail -f /var/log/httpd/error_log