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:
- Install NodeJS on your machine.
- Create github repository and extract the link for later use.
- 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
- Run this to test local build:
> npx quartz build --serve
- Run this to commit files to github:
> npx quartz sync
- 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
- Production branch:
- Install some plugins on Obsidian:
Templater
- set default template notesLinter
- auto-populate some propertiesImage Converter
- convert image to webp formatS3 Image Uploader
- upload images to s3
- 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) - Set up s3 bucket (make sure to attach bucket policy that allows Public Read)
- 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!