Steps to set up free website hosting for your Obsidian notes using Quartz . Quartz transforms your Obsidian notes into fully functional website, and then you can host your website on Cloudflare for FREE!

Here’s the steps:

  1. Install NodeJS on your machine.
  2. Create github repository and extract the link for later use.
  3. Open GitBash and run command:
   > git clone https://github.com/jackyzha0/quartz.git my-custom-vault
   > cd my-custom-vault
   > npm i
   > npx quartz create
   > git remote rm origin
   > git remote add origin https://github.com/username/my-custom-vault.git
   > npx quartz sync --no-pull
  1. Run this to test local build:
> npx quartz build --serve
  1. Run this to commit files to github:
> npx quartz sync
  1. Go to Cloudflare and navigate to Workers & Pages, select Pages and then choose Import an existing Git repository. Set the following configuration:
    • Production branch: v4
    • Framework preset: None
    • Build command: npx quartz build
    • Build output directory: public
  2. Install some plugins on Obsidian:
    • Templater - set default template notes
    • Linter - auto-populate some properties
    • Image Converter - convert image to webp format
    • S3 Image Uploader - upload images to s3
  3. Update .gitignore to ignore attachments folder (Github Pages has 1GB storage limit, try not to include it in the repo, rather offload attachments to s3)
  4. Set up s3 bucket (make sure to attach bucket policy that allows Public Read)
  5. Set up IAM for accessing s3 bucket (make sure create custom policy that allows s3 related permission on specific s3 bucket)

Voila! There you have it!