note formatting

This commit is contained in:
Jacky Zhao 2023-08-06 19:54:11 -07:00
parent 3adc73a703
commit 075ac33474
5 changed files with 35 additions and 33 deletions

View file

@ -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`

View file

@ -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.

View file

@ -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.
> >