From 5dba6407961d3559597404f20df737ba19964177 Mon Sep 17 00:00:00 2001 From: Daniel Lautzenheiser Date: Tue, 25 Oct 2022 09:50:47 -0400 Subject: [PATCH] Clean up docusaurus docs markdown --- .gitignore | 2 + website/content/docs/docusaurus.mdx | 267 +++++++++++----------------- 2 files changed, 109 insertions(+), 160 deletions(-) diff --git a/.gitignore b/.gitignore index a20dab97..188492b9 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,5 @@ coverage/ .temp/ *.tgz old-website +website/public/sw.js +website/public/workbox*.js diff --git a/website/content/docs/docusaurus.mdx b/website/content/docs/docusaurus.mdx index 61f1bfe8..add6cba6 100644 --- a/website/content/docs/docusaurus.mdx +++ b/website/content/docs/docusaurus.mdx @@ -27,10 +27,6 @@ A browser window opens at `http://localhost:3000`. The development server now serves your website at `http://localhost:3000`. As you edit the source files in `/my-website/`, you can visit `http://localhost:3000` to preview your changes. - - - - ## Push your project to GitHub Static CMS requires a [backend](https://staticjscms.github.io/static-cms/docs/backends-overview/) to store content. Static CMS supports using Git hosts, like GitHub or GitLab, as backends. This guide uses GitHub. @@ -63,19 +59,14 @@ git push -u origin main ## Publish your project using Netlify CLI -
    -
  1. Connect Netlify CLI to your GitHub repository. - -```bash -netlify init -``` - -
    2. -
  2. Choose Create & configure a new site.
    3. -
  3. Choose your team and site name.
    4. -
  4. Choose yarn build for your build command.
    5. -
  5. Choose build for your deployment directory.
    6. -
+1. Connect Netlify CLI to your GitHub repository. + ```bash + netlify init + ``` +2. Choose `Create & configure a new site`. +3. Choose your team and site name. +4. Choose `yarn build` for your build command. +5. Choose `build` for your deployment directory. ![](/img/screen-shot-2021-11-16-at-1.34.18-PM.png) @@ -87,152 +78,108 @@ Your website is now deployed. Netlify provides you with a randomly generated dom ### Before you begin -
    - -
  1. Remove all existing posts from /blog. - -```bash -rm -rf ./blog/* -``` - -
    2. - -
  2. Create a new blog post post titled 2021-11-15-first-blog-post.md. - -```bash -touch ./blog/2021-11-15-first-blog-post.md -``` - -
    3. - -
  3. Edit 2021-11-15-first-blog-post.md to look like this: - -```yaml ---- -title: First Blog Post -slug: first-blog-post -tags: - - foo - - bar -authors: - - title: Garrison McMullen - title: Instruction Writer - url: https://github.com/garrison0 - image_url: https://avatars.githubusercontent.com/u/4089393?v=4 ---- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. -``` - -
    4. - -
+1. Remove all existing posts from `/blog`. + ```bash + rm -rf ./blog/* + ``` +2. Create a new blog post post titled `2021-11-15-first-blog-post.md`. + ```bash + touch ./blog/2021-11-15-first-blog-post.md + ``` +3. Edit `2021-11-15-first-blog-post.md` to look like this: + ```yaml + --- + title: First Blog Post + slug: first-blog-post + tags: + - foo + - bar + authors: + - title: Garrison McMullen + title: Instruction Writer + url: https://github.com/garrison0 + image_url: https://avatars.githubusercontent.com/u/4089393?v=4 + --- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. + ``` ### Procedure -
    +1. Create an `admin` directory inside `static`. + ```bash + cd static + mkdir admin + ``` +2. In the `admin` directory, create a `config.yml` file and an `index.html` file. + ```bash + cd admin + touch config.yml + touch index.html + ``` +3. Edit `index.html` to look like this: + ```html + + + + + + Content Manager + + + + + + + ``` + `index.html` displays the Static CMS admin interface. You'll use the admin interface to edit your blog posts. +4. Edit `config.yml` to look like this: + ```yaml + backend: + title: github + branch: main + repo: /my-website + + # These lines should *not* be indented + media_folder: "static/img" # Media files will be stored in the repo under static/images/uploads + public_folder: "/img/" # The src attribute for uploaded media will begin with /images/uploads + + collections: + - title: blog + label: "blog" + folder: blog + identifier_field: title + extension: md + widget: "list" + create: true + slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md + fields: + - { title: title, label: Title, widget: string } + - { title: body, label: Body, widget: markdown } + - { title: slug, label: Slug, widget: string } + - label: "Tags" + title: "tags" + widget: "list" + - label: "Authors" + title: "authors" + widget: "list" + fields: + - { title: name, label: Name, widget: string } + - { title: title, label: Title, widget: string } + - { title: url, label: URL, widget: string } + - { title: imageUrl, label: ImageURL, widget: string } + ``` -
  1. Create an admin directory inside static. - -```bash -cd static -mkdir admin -``` - -
    2. - -
  2. In the admin directory, create a config.yml file and an index.html file. - -```bash -cd admin -touch config.yml -touch index.html -``` - -
    3. - -
  3. Edit index.html to look like this: - -```html - - - - - - Content Manager - - - - - - -``` - -`index.html` displays the Static CMS admin interface. You'll use the admin interface to edit your blog posts. - -
    4. - -
  4. Edit config.yml to look like this: - -```yaml -backend: - title: github - branch: main - repo: /my-website - -# These lines should *not* be indented -media_folder: "static/img" # Media files will be stored in the repo under static/images/uploads -public_folder: "/img/" # The src attribute for uploaded media will begin with /images/uploads - -collections: -- title: blog - label: "blog" - folder: blog - identifier_field: title - extension: md - widget: "list" - create: true - slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md - fields: - - { title: title, label: Title, widget: string } - - { title: body, label: Body, widget: markdown } - - { title: slug, label: Slug, widget: string } - - label: "Tags" - title: "tags" - widget: "list" - - label: "Authors" - title: "authors" - widget: "list" - fields: - - { title: name, label: Name, widget: string } - - { title: title, label: Title, widget: string } - - { title: url, label: URL, widget: string } - - { title: imageUrl, label: ImageURL, widget: string } -``` - -`config.yml` specifies what kind of content your blog posts have. The content specification enables Static CMS to edit existing posts and create new ones with the same format. To learn more, read about Static CMS' [](https://staticjscms.github.io/static-cms/docs/configuration-options/)[Configuration options](https://staticjscms.github.io/static-cms/docs/configuration-options/). -
    5. - -
  5. -Visit localhost:3000/admin - -You can now view and edit `2021-11-15-first-blog-post.md` through the admin interface. You can also create new blog posts. - -**Warning:** Any changes you publish through the admin interface will only effect your *remote GitHub repository*. To retrieve these changes locally, `git pull` from your local repository. -
    6. - -
  6. Commit and push your new changes to your remote repository. - -```bash -git add . -git commit -m "Add Static CMS" -git push -``` - -Netlify builds and deploys your new changes. - -
    7. - -
+ `config.yml` specifies what kind of content your blog posts have. The content specification enables Static CMS to edit existing posts and create new ones with the same format. To learn more, read about Static CMS' [](https://staticjscms.github.io/static-cms/docs/configuration-options/)[Configuration options](https://staticjscms.github.io/static-cms/docs/configuration-options/). +5. Visit `localhost:3000/admin` + You can now view and edit `2021-11-15-first-blog-post.md` through the admin interface. You can also create new blog posts. + **Warning:** Any changes you publish through the admin interface will only effect your *remote GitHub repository*. To retrieve these changes locally, `git pull` from your local repository. +6. Commit and push your new changes to your remote repository. + ```bash + git add . + git commit -m "Add Static CMS" + git push + ``` + Netlify builds and deploys your new changes. ## Add GitHub as an authentication provider @@ -242,7 +189,7 @@ Before you can access `/admin/` through your Netlify domain, you need to set up 1. Create a new [GitHub OAuth application](https://github.com/settings/applications/new). 2. Enter your Netlify domain as the **Homepage URL**. -3. Enter https://api.netlify.com/auth/done as the **Authorization callback URL**. +3. Enter `https://api.netlify.com/auth/done` as the **Authorization callback URL**. 4. Click **Register application.** 5. Click **Generate a new client secret.** 6. Copy the provided client secret and client ID.