gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up docusaurus docs markdown

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2022-10-25 09:50:47 -04:00
parent 18c366b87c
commit 5dba640796
2 changed files with 109 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -20,3 +20,5 @@ coverage/
.temp/ .temp/
*.tgz *.tgz
old-website old-website
website/public/sw.js
website/public/workbox*.js

267
website/content/docs/docusaurus.mdx
View File

@ -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. 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.
</li>
</ol>
## Push your project to GitHub ## 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. 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 ## Publish your project using Netlify CLI
<ol> 1. Connect Netlify CLI to your GitHub repository.
<li> Connect Netlify CLI to your GitHub repository. ```bash
netlify init
```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.
</li> 5. Choose `build` for your deployment directory.
<li> Choose <code>Create & configure a new site</code>. </li>
<li> Choose your team and site name. </li>
<li> Choose <code>yarn build</code> for your build command. </li>
<li> Choose <code>build</code> for your deployment directory. </li>
</ol>
![](/img/screen-shot-2021-11-16-at-1.34.18-PM.png) ![](/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 ### Before you begin
<ol> 1. Remove all existing posts from `/blog`.
```bash
<li> Remove all existing posts from <code>/blog</code>. rm -rf ./blog/*
```
```bash 2. Create a new blog post post titled `2021-11-15-first-blog-post.md`.
rm -rf ./blog/* ```bash
``` touch ./blog/2021-11-15-first-blog-post.md
```
</li> 3. Edit `2021-11-15-first-blog-post.md` to look like this:
```yaml
<li> Create a new blog post post titled <code>2021-11-15-first-blog-post.md</code>. ---
title: First Blog Post
```bash slug: first-blog-post
touch ./blog/2021-11-15-first-blog-post.md tags:
``` - foo
- bar
</li> authors:
- title: Garrison McMullen
<li> Edit <code>2021-11-15-first-blog-post.md</code> to look like this: title: Instruction Writer
url: https://github.com/garrison0
```yaml image_url: https://avatars.githubusercontent.com/u/4089393?v=4
--- ---
title: First Blog Post Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat.
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.
```
</li>
</ol>
### Procedure ### Procedure
<ol> 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Static CMS -->
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
</body>
</html>
```
`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: <your-github>/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 }
```
<li> Create an <code>admin</code> directory inside <code>static</code>. `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`
```bash You can now view and edit `2021-11-15-first-blog-post.md` through the admin interface. You can also create new blog posts.
cd static **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.
mkdir admin 6. Commit and push your new changes to your remote repository.
``` ```bash
git add .
</li> git commit -m "Add Static CMS"
git push
<li> In the <code>admin</code> directory, create a <code>config.yml</code> file and an <code>index.html</code> file. ```
Netlify builds and deploys your new changes.
```bash
cd admin
touch config.yml
touch index.html
```
</li>
<li> Edit <code>index.html</code> to look like this:
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Static CMS -->
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
</body>
</html>
```
`index.html` displays the Static CMS admin interface. You'll use the admin interface to edit your blog posts.
</li>
<li> Edit <code>config.yml</code> to look like this:
```yaml
backend:
title: github
branch: main
repo: <your-github>/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/).
</li>
<li>
Visit <code>localhost:3000/admin</code>
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.
</li>
<li> 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.
</li>
</ol>
## Add GitHub as an authentication provider ## 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). 1. Create a new [GitHub OAuth application](https://github.com/settings/applications/new).
2. Enter your Netlify domain as the **Homepage URL**. 2. Enter your Netlify domain as the **Homepage URL**.
3. Enter <code>https://api.netlify.com/auth/done</code> as the **Authorization callback URL**. 3. Enter `https://api.netlify.com/auth/done` as the **Authorization callback URL**.
4. Click **Register application.** 4. Click **Register application.**
5. Click **Generate a new client secret.** 5. Click **Generate a new client secret.**
6. Copy the provided client secret and client ID. 6. Copy the provided client secret and client ID.