Set Up this Website

The Quartz website template was made to be used with the Obsidian note taking application. If you had never heard of Obsidian before you should try it, its great. If you want to get into note taking and as the productivity gurus call it; “Building your Second Brain”, read this article Molecular Notes: Principles · Reasonable Deviations and its continuation Molecular Notes: Practice · Reasonable Deviations.

Use Quartz’s GitHub repository as the template for your own and follow the official Quartz documentation if there’s anything missing here.

Requirements §

• Installed git
• Installed npm
• Installed npx
• Github account
• Cloudflare account
• (Recommended) Domain. You can buy it from a registrar like GoDaddy or Namecheap.

Set up §

1. Create a new repo using Quartz as a template.
2. Clone your newly created repo into your computer with git clone + the link to your repository.
3. Open the folder in a code editor like VSCode.
4. Open the terminal and run:
   • npm i
   • npx quartz create

Now you have your own local repository for your website. You will put your Obsidian notes in the “content” folder.

After making changes to your website or blogposts run npx quartz sync to apply them.

To test that the website works:

• Run npx quartz build --serve
• Wait for the process to complete
• Visit http://localhost:8080/

If everything is working you should see your website.

Hosting §

We want to make our website accessible to anyone.

1. Open Cloudflare and add your domain
2. Go to your domain registrar and set the DNS to what Cloudflare tells you to
3. Create a new Cloudflare Page and link it to your GitHub repository
4. Settings
   • Build command: npx quartz build
   • Build output directory: public
5. Wait for Cloudflare to build your website
6. Add your custom domain to your website

Your website should be up and running and accessible by visiting its domain in any browser.

Customization §

Changing the website name:

• Go into quartz/quartz.config.ts
• Find pageTitle and change its value
• Also change baseUrl with your domain

Changing the website icon:

• Go to quartz/quartz/static
• Inside you will find two files, icon.png and og-image.png
• Replace these two files with your preferred icon. The new icons need to use the same names as the previous files Note: you might need to hard reset your browser for the new icons to show up

Adding Content §

Inside the content folder you will find a file named index.md. This is the home page for your website.

You could just start creating posts inside the content folder, but if you’re going to use images it may get messy quickly. To fix this you can make a new folder inside content for each new post. Then inside create a new post.md file.

To make your posts appear in your home page you need to link to them by using double brackets like [[folder/post.md|Displayed Post Name]] if you use folders as I recommend. Make sure that the post path doesn’t include the /content directory, only the post folder and post file.