From 3adc73a703142b3c0475570e4de16701b2797524 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 07 Aug 2023 02:52:30 +0000
Subject: [PATCH] docs upgrade, ci changes
---
content/upgrading.md | 6 +++
quartz/styles/base.scss | 21 ++++++++--
content/images/dns-records.png | 0
content/hosting.md | 85 +++++++++++++++++++++++++++++++++++-------
content/images/quartz-transform-pipeline.png | 0
.github/workflows/ci.yaml | 1
content/build.md | 2
content/images/quartz-layout.png | 0
8 files changed, 95 insertions(+), 20 deletions(-)
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 4a7a9f7..a544156 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -7,6 +7,7 @@
jobs:
build-and-test:
+ if: ${{ github.repository == 'jackyzha0/quartz' }}
strategy:
matrix:
os: [windows-latest, macos-latest, ubuntu-latest]
diff --git a/content/build.md b/content/build.md
index ac6a410..cce9b22 100644
--- a/content/build.md
+++ b/content/build.md
@@ -8,7 +8,7 @@
npx quartz build --serve
```
-Then, open a web browser and visit `http://localhost:8080/` to view it!
+Then, open a web browser and visit `http://localhost:8080/` to view it.
Want to change how Quartz looks? You can edit `quartz.config.ts` to customize and configure your Quartz, including styles, layout, and more. Read the [[configuration]] page for more information on what each field in the configuration does.
diff --git a/content/hosting.md b/content/hosting.md
index f644e4d..23c43ec 100644
--- a/content/hosting.md
+++ b/content/hosting.md
@@ -5,46 +5,101 @@
Quartz effectively turns your Markdown files and other resources into a bundle of HTML, JS, and CSS files (a website!).
However, if you'd like to publish your site to the world, you need a way to host it online. This guide will detail how to deploy with either GitHub Pages or Cloudflare pages but any service that allows you to deploy static HTML should work as well (e.g. Netlify, Replit, etc.)
+
+## Cloudflare Pages
+
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
+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:
+
+|Configuration option|Value|
+|---|---|
+|Production branch|`v4-alpha`|
+|Framework preset|`None`|
+|Build command|`npx quartz build`|
+|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.
+
+To add a custom domain, check our [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/).
+
## GitHub Pages
Like Quartz 3, you can deploy the site generated by Quartz 4 via GitHub Pages.
-In your local Quartz, create a new file `quartz/.github/workflows/deploy.yaml`:
+In your local Quartz, create a new file `quartz/.github/workflows/deploy.yaml`.
```yaml title="quartz/.github/workflows/deploy.yaml"
-name: Deploy to GitHub Pages
+name: Deploy Quartz site to GitHub Pages
on:
push:
branches:
- v4-alpha
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
jobs:
- deploy:
+ build:
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0 # Fetch all history for git info
-
- uses: actions/setup-node@v3
with:
node-version: 18.14
-
- name: Install Dependencies
run: npm ci
-
- name: Build Quartz
run: npx quartz build
-
- - name: Deploy
- uses: peaceiris/actions-gh-pages@v3
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v2
with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./public
- publish_branch: master # deploying branch
- cname: quartz.jzhao.xyz
+ path: public
+
+ deploy:
+ needs: build
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v2
```
-Then, the next time you
-## Cloudflare Pages
+Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`.
+
+### Custom Domain
+Here's how to add a custom domain to your GitHub pages deployment.
+
+1. Head to the "Settings" tab of your forked repository.
+2. In the "Code and automation" section of the sidebar, click "Pages".
+3. Under "Custom Domain", type your custom domain and click "Save".
+4. This next step depends on whether you are using an apex domain (`example.com`) or a subdomain (`subdomain.example.com`).
+ - If you are using an apex domain, navigate to your DNS provider and create an `A` record that points your apex domain to GitHub's name servers which have the following IP addresses:
+ - `185.199.108.153`
+ - `185.199.109.153`
+ - `185.199.110.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`.
+
+
+![[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.
+
+
+> [!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.
+>
+> Make sure you save your changes to Git and sync it to GitHub by doing `npx quartz sync`. This will also make sure to pull any updates you may have made from other devices so you have them locally.
diff --git a/content/images/dns-records.png b/content/images/dns-records.png
new file mode 100644
index 0000000..bf9f854
--- /dev/null
+++ b/content/images/dns-records.png
Binary files differ
diff --git a/content/quartz-layout.png b/content/images/quartz-layout.png
similarity index 100%
rename from content/quartz-layout.png
rename to content/images/quartz-layout.png
Binary files differ
diff --git a/content/quartz-transform-pipeline.png b/content/images/quartz-transform-pipeline.png
similarity index 100%
rename from content/quartz-transform-pipeline.png
rename to content/images/quartz-transform-pipeline.png
Binary files differ
diff --git a/content/upgrading.md b/content/upgrading.md
new file mode 100644
index 0000000..5a265aa
--- /dev/null
+++ b/content/upgrading.md
@@ -0,0 +1,6 @@
+---
+title: "Upgrading Quartz"
+---
+
+> [!note]
+> This is specifically a guide for upgrading Quartz 4 version to a more recent update. If you are coming from Quartz 3, check out the [[migrating from Quartz 3|migration guide]] for more info.
\ No newline at end of file
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 6bed7ca..2f064c5 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -375,16 +375,29 @@
}
table {
- margin: 1rem 0;
- border: 1px solid var(--gray);
+ margin: 1rem;
padding: 1.5rem;
border-collapse: collapse;
+ & > * {
+ line-height: 2rem;
+ }
}
-td,
th {
+ text-align: left;
+ padding: 0.4rem 1rem;
+ border-bottom: 2px solid var(--gray);
+}
+
+td {
padding: 0.2rem 1rem;
- border: 1px solid var(--gray);
+}
+
+tr {
+ border-bottom: 1px solid var(--lightgray);
+ &:last-child {
+ border-bottom: none;
+ }
}
img {
--
Gitblit v1.10.0