From 632c27b7ec133d15d890eb28c98eb9716ca01407 Mon Sep 17 00:00:00 2001 From: Zane Helton Date: Wed, 23 Aug 2023 18:14:23 -0400 Subject: [PATCH] docs: update `hosting.md` with Vercel hosting instructions (#406) * Update hosting.md with Vercel hosting instructions * Update docs/hosting.md Co-authored-by: Jacky Zhao * Update docs/hosting.md Co-authored-by: Jacky Zhao * Run npm run format --------- Co-authored-by: Jacky Zhao --- docs/hosting.md | 50 +++++++++++++++++++++++++++ docs/showcase.md | 2 +- quartz/components/styles/popover.scss | 4 +-- quartz/components/styles/search.scss | 4 +-- quartz/components/styles/toc.scss | 4 +-- 5 files changed, 54 insertions(+), 10 deletions(-) diff --git a/docs/hosting.md b/docs/hosting.md index d648f55..01d130f 100644 --- a/docs/hosting.md +++ b/docs/hosting.md @@ -116,3 +116,53 @@ See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-cu > 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. + +## Vercel + +### Fix URLs + +Before deploying to Vercel, a `vercel.json` file is required at the root of the project directory. It needs to contain the following configuration so that URLs don't require the `.html` extension: + +```json title="vercel.json" +{ + "cleanUrls": true +} +``` + +### Deploy to Vercel + +1. Log in to the [Vercel Dashboard](https://vercel.com/dashboard) and click "Add New..." > Project +2. Import the Git repository containing your Quartz project. +3. Give the project a name (lowercase characters and hyphens only) +4. Check that these configuration options are set: + +| Configuration option | Value | +| ----------------------------------------- | ------------------ | +| Framework Preset | `Other` | +| Root Directory | `./` | +| Build and Output Settings > Build Command | `npx quartz build` | + +5. Press Deploy. Once it's live, you'll have 2 `*.vercel.app` URLs to view the page. + +### Custom Domain + +> [!note] +> If there is something already hosted on the domain, these steps will not work without replacing the previous content. As a workaround, you could use Next.js rewrites or use the next section to create a subdomain. + +1. Update the `baseUrl` in `quartz.config.js` if necessary. +2. Go to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel. +3. Connect the domain to Vercel +4. Press "Add" to connect a custom domain to Vercel. +5. Select your Quartz repository and press Continue. +6. Enter the domain you want to connect it to. +7. Follow the instructions to update your DNS records until you see "Valid Configuration" + +### Use a Subdomain + +Using `docs.example.com` is an example of a subdomain. They're a simple way of connecting multiple deployments to one domain. + +1. Update the `baseUrl` in `quartz.config.js` if necessary. +2. Ensure your domain has been added to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel. +3. Go to the [Vercel Dashboard](https://vercel.com/dashboard) and select your Quartz project. +4. Go to the Settings tab and then click Domains in the sidebar +5. Enter your subdomain into the field and press Add diff --git a/docs/showcase.md b/docs/showcase.md index ef8afb8..d4a9da2 100644 --- a/docs/showcase.md +++ b/docs/showcase.md @@ -12,7 +12,7 @@ Want to see what Quartz can do? Here are some cool community gardens: - [Course notes for Information Technology Advanced Theory](https://a2itnotes.github.io/quartz/) - [Data Dictionary 🧠](https://glossary.airbyte.com/) - [sspaeti.com's Second Brain](https://brain.sspaeti.com/) -- [oldwinterの数字花园](https://garden.oldwinter.top/) +- [oldwinter の数字花园](https://garden.oldwinter.top/) - [Abhijeet's Math Wiki](https://abhmul.github.io/quartz/Math-Wiki/) - [Mike's AI Garden 🤖🪴](https://mwalton.me/) - [Matt Dunn's Second Brain](https://mattdunn.info/) diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index fae0e12..55d38c9 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -43,9 +43,7 @@ visibility: hidden; opacity: 0; - transition: - opacity 0.3s ease, - visibility 0.3s ease; + transition: opacity 0.3s ease, visibility 0.3s ease; @media all and (max-width: $mobileBreakpoint) { display: none !important; diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 4d5ad95..a77c630 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -67,9 +67,7 @@ width: 100%; border-radius: 5px; background: var(--light); - box-shadow: - 0 14px 50px rgba(27, 33, 48, 0.12), - 0 10px 30px rgba(27, 33, 48, 0.16); + box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16); margin-bottom: 2em; } diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss index 3fac443..e696864 100644 --- a/quartz/components/styles/toc.scss +++ b/quartz/components/styles/toc.scss @@ -42,9 +42,7 @@ button#toc { & > li > a { color: var(--dark); opacity: 0.35; - transition: - 0.5s ease opacity, - 0.3s ease color; + transition: 0.5s ease opacity, 0.3s ease color; &.in-view { opacity: 0.75; }