🪴 Raydon Liang's Blog

How I Host My Blog

3 min read

This is a simple collection of resources that I use for hosting the blog.

1. Hosting with Quartz

Please refer to How to publish Obsidian notes with Quartz on GitHub Pages - Fork My Brain.

Quartz Official Document

2. Image Uploading using Cloudflare R2

Please refer to (Chinese) 使用Cloudflare R2 + PicGo实现免费图床 - Indie Hacker Tool .

(Chinese) Manually install PicGo Plugins when plugin store can not load

(Chinese) GitHub repo of picgo-plugin-s3

3. Auto Redirect

When building GitHub Pages with Quartz, the default link is https://yourusername.github.io/my-notes, what we want is https://yourusername.github.io.

What you need is setting up a redirect page in https://yourusername.github.io, redirect the request to https://yourusername.github.io/my-notes.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirecting...</title>
    <script type="text/javascript">
        // Check if the current page is not already at the redirect URL
        if (window.location.pathname !== '/my-notes') {
            window.location.href = "https://yourusername.github.io/my-notes";
        }
    </script>
</head>
<body>
    <p>If you are not redirected automatically, <a href="https://yourusername.github.io/my-notes">click here</a>.</p>
</body>
</html>

generated by ChatGPT

4. Hosting in Cloudflare Pages

Viewers in certain countires/regions may not able to access GitHub Pages, hosting a mirror site in Cloudflare Pages may solve the problem.

Please refer to Quartz: Hosting.

5. Setting up Google Analytics

Setting up Google Analytics for One Site

  1. Create a Google Analytics account.

  2. Set up a data stream. image.png

  3. Copy Measurement ID (G-XXXXXXXXXX) to quartz.config.ts and sync the code using image.png

npx quartz sync

  1. Test installation. image.png

  2. If everything goes well, a checkmark shows in the bottom, and you are good to go. image.png

(Optional) Setting up Google Analytics for Multiple Sites

If you are hosting your blog on multiple platforms(e.g. GitHub Pages and Cloudflare Pages), you may need to track multiple domains with one Measurement ID.

  1. Go to Web stream details → Configure tag settings. image.png

  2. Go to Configure your domains. Screenshot 2025-02-12 155522.jpg sensitive info is masked

  3. Add domain(s) in Cross-domain Linking Configuration and save. Screenshot 2025-02-12 155522.jpg sensitive info is masked

(Optional) Filtering different sites in Google Analytics

Once you setup one Measurement ID with multiple sites, it is important to filter different sites to analyze traffic. The following tutorial shows how to do it.

  1. Go to Google Analytics Reports page and click Add comparison. image.png sensitive info is masked

  2. In Apply a comparison page, click Create new to create a new comparison. image.png

  3. Select Hostname in Dimension section, feel free to choose Match Type(for simplicity, contains is a good option since you only need to enter github if you are using GitHub Pages, instead of yourusername.github.io), and enter your domain(or a part of), and click Save (Apply is also okay but you are not able to save it as a preset, so you need to apply a comparison again next time). image.png

Info

The question mark says:

Match types are case sensitive, and regex is limited to 250 characters. To choose from a list of available dimension values, select “exactly matches”.

Since domain is not case sensitive, you need to enter it in lowercase and hostname is not from a list, we don’t have to select exactly matches.

  1. Name this comparison as whatever you like and Confirm. image.png

  2. Now we have created and enabled a comparison, you can create more comparisons and enable/disable them in Add comparison section as needed. image.png

Quartz: Configuration

Google Analytics

(Chinese) 博客接入 Google Analytics | Echo Blog

Reddit: One GA4 for multiple websites : r/GoogleAnalytics

[GA4] Apply comparisons to reports - Analytics Help

[GA4] Apply filters to detail reports - Analytics Help

Known issues

  • obsidian takes centuries to load (until the official sync plugin is on) image.png

Backlinks

Graph View