note formatting
This commit is contained in:
		
							parent
							
								
									3adc73a703
								
							
						
					
					
						commit
						075ac33474
					
				
					 5 changed files with 35 additions and 33 deletions
				
			
		| 
						 | 
					@ -18,6 +18,7 @@ Once you're happy with it, let's see how to [[hosting|deploy Quartz to the web]]
 | 
				
			||||||
> For full help options, you can run `npx quartz build --help`.
 | 
					> For full help options, you can run `npx quartz build --help`.
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
> Most of these have sensible defaults but you can override them if you have a custom setup:
 | 
					> Most of these have sensible defaults but you can override them if you have a custom setup:
 | 
				
			||||||
 | 
					>
 | 
				
			||||||
> - `-d` or `--directory`: the content folder. This is normally just `content`
 | 
					> - `-d` or `--directory`: the content folder. This is normally just `content`
 | 
				
			||||||
> - `-v` or `--verbose`: print out extra logging information
 | 
					> - `-v` or `--verbose`: print out extra logging information
 | 
				
			||||||
> - `-o` or `--output`: the output folder. This is normally just `public`
 | 
					> - `-o` or `--output`: the output folder. This is normally just `public`
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -101,15 +101,17 @@ These correspond to following parts of the page:
 | 
				
			||||||
![[quartz-layout.png|800]]
 | 
					![[quartz-layout.png|800]]
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> [!note]
 | 
					> [!note]
 | 
				
			||||||
> There are two additional layout fields that are *not* shown in the above diagram.
 | 
					> There are two additional layout fields that are _not_ shown in the above diagram.
 | 
				
			||||||
 | 
					>
 | 
				
			||||||
> 1. `head` is a single component that renders the `<head>` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles.
 | 
					> 1. `head` is a single component that renders the `<head>` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles.
 | 
				
			||||||
> 2. `header` is a set of components that are laid out horizontally and appears *before* the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.
 | 
					> 2. `header` is a set of components that are laid out horizontally and appears _before_ the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
 | 
					Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
See [a list of all the components](./tags/component) for all available components along with their configuration options.
 | 
					See [a list of all the components](./tags/component) for all available components along with their configuration options.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Style
 | 
					### Style
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
 | 
					Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
 | 
					However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -12,12 +12,12 @@ However, if you'd like to publish your site to the world, you need a way to host
 | 
				
			||||||
2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
 | 
					2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
 | 
				
			||||||
3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
 | 
					3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
|Configuration option|Value|
 | 
					| Configuration option   | Value              |
 | 
				
			||||||
|---|---|
 | 
					| ---------------------- | ------------------ |
 | 
				
			||||||
|Production branch|`v4-alpha`|
 | 
					| Production branch      | `v4-alpha`         |
 | 
				
			||||||
|Framework preset|`None`|
 | 
					| Framework preset       | `None`             |
 | 
				
			||||||
|Build command|`npx quartz build`|
 | 
					| Build command          | `npx quartz build` |
 | 
				
			||||||
|Build output directory|`public`|
 | 
					| Build output directory | `public`           |
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Press "Save and deploy" and Cloudflare should have a deployed version of your site in about a minute. Then, every time you sync your Quartz changes to GitHub, your site should be updated.
 | 
					Press "Save and deploy" and Cloudflare should have a deployed version of your site in about a minute. Then, every time you sync your Quartz changes to GitHub, your site should be updated.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -80,6 +80,7 @@ jobs:
 | 
				
			||||||
Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`.
 | 
					Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Custom Domain
 | 
					### Custom Domain
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Here's how to add a custom domain to your GitHub pages deployment.
 | 
					Here's how to add a custom domain to your GitHub pages deployment.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
1. Head to the "Settings" tab of your forked repository.
 | 
					1. Head to the "Settings" tab of your forked repository.
 | 
				
			||||||
| 
						 | 
					@ -93,12 +94,10 @@ Here's how to add a custom domain to your GitHub pages deployment.
 | 
				
			||||||
     - `185.199.111.153`
 | 
					     - `185.199.111.153`
 | 
				
			||||||
   - If you are using a subdomain, navigate to your DNS provider and create a `CNAME` record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain `quartz.example.com` for your user site, create a `CNAME` record that points `quartz.example.com` to `<github-username>.github.io`.
 | 
					   - If you are using a subdomain, navigate to your DNS provider and create a `CNAME` record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain `quartz.example.com` for your user site, create a `CNAME` record that points `quartz.example.com` to `<github-username>.github.io`.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					![[dns-records.png]]_The above shows a screenshot of Google Domains configured for both `jzhao.xyz` (an apex domain) and `quartz.jzhao.xyz` (a subdomain)._
 | 
				
			||||||
![[dns-records.png]]*The above shows a screenshot of Google Domains configured for both `jzhao.xyz` (an apex domain) and `quartz.jzhao.xyz` (a subdomain).*
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain) for more detail about how to setup your own custom domain with GitHub Pages.
 | 
					See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain) for more detail about how to setup your own custom domain with GitHub Pages.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
> [!question] Why aren't my changes showing up?
 | 
					> [!question] Why aren't my changes showing up?
 | 
				
			||||||
> There could be many different reasons why your changes aren't showing up but the most likely reason is that you forgot to push your changes to GitHub.
 | 
					> There could be many different reasons why your changes aren't showing up but the most likely reason is that you forgot to push your changes to GitHub.
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue