| | Framework Preset | Other | | Root Directory | ./ | | Build and Output Settings > Build Command | npx quartz build |

5. Press Deploy. Once it’s live, you’ll have 2 *.vercel.app URLs to view the page.

Custom Domain

[!note] If there is something already hosted on the domain, these steps will not work without replacing the previous content. As a workaround, you could use Next.js rewrites or use the next section to create a subdomain.

1. Update the baseUrl in quartz.config.js if necessary.
2. Go to the Domains - Dashboard page in Vercel.
3. Connect the domain to Vercel
4. Press "Add" to connect a custom domain to Vercel.
5. Select your Quartz repository and press Continue.
6. Enter the domain you want to connect it to.
7. Follow the instructions to update your DNS records until you see "Valid Configuration"

Use a Subdomain

Using docs.example.com is an example of a subdomain. They’re a simple way of connecting multiple deployments to one domain.

1. Update the baseUrl in quartz.config.js if necessary.
2. Ensure your domain has been added to the Domains - Dashboard page in Vercel.
3. Go to the Vercel Dashboard and select your Quartz project.
4. Go to the Settings tab and then click Domains in the sidebar
5. Enter your subdomain into the field and press Add

Netlify

1. Log in to the Netlify dashboard and click "Add new site".
2. Select your Git provider and repository containing your Quartz project.
3. Under "Build command", enter npx quartz build.
4. Under "Publish directory", enter public.
5. Press Deploy. Once it’s live, you’ll have a *.netlify.app URL to view the page.
6. To add a custom domain, check "Domain management" in the left sidebar, just like with Vercel.

GitLab Pages

In your local Quartz, create a new file .gitlab-ci.yml.

stages:
  - build
  - deploy

image: node:22
cache: # Cache modules in between jobs
  key: $CI_COMMIT_REF_SLUG
  paths:
    - .npm/

build:
  stage: build
  rules:
    - if: '$CI_COMMIT_REF_NAME == "v4"'
  before_script:
    - hash -r
    - npm ci --cache .npm --prefer-offline
  script:
    - npx quartz build
  artifacts:
    paths:
      - public
  tags:
    - gitlab-org-docker

pages:
  stage: deploy
  rules:
    - if: '$CI_COMMIT_REF_NAME == "v4"'
  script:
    - echo "Deploying to GitLab Pages..."
  artifacts:
    paths:
      - public

When .gitlab-ci.yaml is committed, GitLab will build and deploy the website as a GitLab Page. You can find the url under Deploy > Pages in the sidebar.

By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under Deploy -> Pages.

Self-Hosting

Copy the public directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the .html extension, you need to let your web server know how to deal with it.

Using Nginx

Here’s an example of how to do this with Nginx:

server {
    listen 80;
    server_name example.com;
    root /path/to/quartz/public;
    index index.html;
    error_page 404 /404.html;

    location / {
        try_files $uri $uri.html $uri/ =404;
    }
}

Using Apache

Here’s an example of how to do this with Apache:

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]

Don’t forget to activate brotli / gzip compression.

Using Caddy

Here’s and example of how to do this with Caddy:

example.com {
    root * /path/to/quartz/public
    try_files {path} {path}.html {path}/ =404
    file_server
    encode gzip

    handle_errors {
        rewrite * /{err.status_code}.html
        file_server
    }
}