quartz-4-setup

Installation and setup

Use the provided GitHub template provided from
https://github.com/jackyzha0/quartz.git
once the templates created
clone the repository and initialise the project

git clone git@github.com:h4z-dev/h4zblog.git
cd h4zblog
npm i
npx quartz build --serve

That completes the installation procedure

Setting up the obsidian project

The way I did this is to open the obsidian vault on the provided content file of the quartz area.

Customising quartz

Publishing and hosting

Following from here https://quartz.jzhao.xyz/hosting

Cloudflare pages setup and hosting
Workers and pages > create application pages and connect to git then select the github repository

Configuration option	Value
Production branch	v4
Framework preset	None
Build command	git fetch --unshallow && npx quartz build
Root directory	-Blank-
Build output directory	public

Once this was configured and the repository was selected time to just wait and link DNS to cloudflare page using a CNAME record

Site configuration

Changing the defaults, parts that I have changed

	pageTitle: "H4Z-Blog", //updates the default url for the home page title
	baseUrl: "blog.h4z.dev", //ensures website functions correctly
    analytics: {
      provider: 'umami',
      host: 'https://cloud.umami.is',
      websiteId: '[do do do]'
    }, //google analytics was not working
    locale: "en-GB" //get the date in the correct order

Next in the site configuration is the plugin sections
Three different types of plugins:

• Transformers: Change the content by going through each md file and modifying page content
• Filters: removes pages and content
• Emitters: content reduction, reducing areas of the content into pages or rss feed etc

Setup of plugins I landed on

plugins: {
    transformers: [
      Plugin.FrontMatter(), //extracts properties and language from the settings
      Plugin.CreatedModifiedDate({ //date on each page, out of properties first, git dates second in case it fails
        priority: ["frontmatter", "git", "filesystem"],
      }),
      Plugin.SyntaxHighlighting({ //code block syntax highlighting
        theme: {
          light: "github-light",
          dark: "github-dark",
        },
        keepBackground: false,
      }),
      //Obsidian flavoured markdown supports markdown in quartz, must be used unless your not using obsidian for some reason
      //enableInHTMLEmbeded: swapped to true so I can directly embed html elements
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: true }),
      Plugin.GitHubFlavoredMarkdown(), //support for github markdown
      Plugin.TableOfContents(), //TOC, can be enabled through properties
	  //CrawlLinks, markdownlinkresolution is the same as what's configured in Obsidian. lazyLoad is false by default but will lazy load resource elements to improve page performance
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest", lazyLoad: false }),
	  //Generates descriptions for html head, rss feed and folder and tag listings   
      Plugin.Description({ descriptionLength: 300 }),
      Plugin.Latex({ renderEngine: "katex" }),//latex setup and support
	  Plugin.HardLineBreaks(), //line breaks as obsidian shows them
    ],
    filters: [Plugin.RemoveDrafts()],//remove drafts from being published
	//Required to setup project
	//No need to modify
    emitters: [
      Plugin.AliasRedirects(),
      Plugin.ComponentResources(),
      Plugin.ContentPage(),
      Plugin.FolderPage(),
      Plugin.TagPage(),
      Plugin.ContentIndex({
        enableSiteMap: true,
        enableRSS: true,
      }),
      Plugin.Assets(),
      Plugin.Static(),
      Plugin.Favicon(),
      Plugin.NotFoundPage(),
      // Comment out CustomOgImages to speed up build time
      Plugin.CustomOgImages(),
    ],
  },
 

Final thoughts

Will review once I have used the system for a while is too early to write thoughts

Initial thoughts is that I like the simplicity and feature set provided with very little setup required. Need to look into setting and embedding some three.js projects into here.