doc: remove platform guides
This commit is contained in:
Daniel Lautzenheiser
parent
48e158aa5d
commit
2c57bc7076
@ -1,206 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Docusaurus
|
||||
weight: 80
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide instructs you on how to integrate Static CMS with Docusaurus.
|
||||
|
||||
### Before you begin
|
||||
|
||||
* Sign up for [GitHub](www.github.com) and [Netlify](www.netlify.com).
|
||||
* Download [Node.js](https://nodejs.org/en/download/) version 14 or above.
|
||||
* Install the [GitHub CLI](https://cli.github.com/).
|
||||
* Install and authenticate the [Netlify CLI](https://docs.netlify.com/cli/get-started/).
|
||||
|
||||
## Create a new Docusaurus project
|
||||
|
||||
```bash
|
||||
# 1. Use Docusaurus to create a site scaffold.
|
||||
npx create-docusaurus@latest my-website classic
|
||||
|
||||
# 2. Run the development server.
|
||||
cd my-website
|
||||
npm run start
|
||||
```
|
||||
|
||||
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](/docs/backends-overview/) to store content. Static CMS supports using Git hosts, like GitHub or GitLab, as backends. This guide uses GitHub.
|
||||
|
||||
```bash
|
||||
# 1. Initialize your local Git repository.
|
||||
git init
|
||||
|
||||
# 2. Rename your initial branch to match GitHub.
|
||||
git branch -m main
|
||||
|
||||
# 3. Stage all your local files to your repository.
|
||||
git add .
|
||||
|
||||
# 4. Commit your staged changes.
|
||||
git commit -m 'Initial commit'
|
||||
|
||||
# 5. Create a remote repository on GitHub using the GitHub CLI.
|
||||
gh repo create my-website
|
||||
```
|
||||
|
||||
Don't add a license or a .gitignore. Do add an "origin" git remote.
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
# 6. Update your remote repository with your staged changes.
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
## Publish your project using Netlify CLI
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
Choose the default option for everything else.
|
||||
|
||||
Your website is now deployed. Netlify provides you with a randomly generated domain name. Run `netlify open --site` to view your deployed site.
|
||||
|
||||
## Add Static CMS to your project
|
||||
|
||||
### Before you begin
|
||||
|
||||
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:
|
||||
- name: 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
|
||||
<!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/app@%5E1.0.0/dist/static-cms-app.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:
|
||||
name: 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:
|
||||
- name: 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:
|
||||
- { name: title, label: Title, widget: string }
|
||||
- { name: body, label: Body, widget: markdown }
|
||||
- { name: slug, label: Slug, widget: string }
|
||||
- label: "Tags"
|
||||
name: "tags"
|
||||
widget: "list"
|
||||
- label: "Authors"
|
||||
name: "authors"
|
||||
widget: "list"
|
||||
fields:
|
||||
- { name: name, label: Name, widget: string }
|
||||
- { name: title, label: Title, widget: string }
|
||||
- { name: url, label: URL, widget: string }
|
||||
- { name: 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' [](/docs/configuration-options/)[Configuration options](/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
|
||||
|
||||
Before you can access `/admin/` through your Netlify domain, you need to set up an authentication provider. The authentication provider allows Static CMS to determine whether users have read and write access to `/admin/`. This guide uses GitHub credentials for authentication.
|
||||
|
||||
### Configure GitHub
|
||||
|
||||
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**.
|
||||
4. Click **Register application.**
|
||||
5. Click **Generate a new client secret.**
|
||||
6. Copy the provided client secret and client ID.
|
||||
|
||||
### Configure Netlify
|
||||
|
||||
1. On Netlify, under `Site Settings > Access control > OAuth > Authentication Providers`, click **Install provider**.
|
||||
2. Enter your client secret and client ID from GitHub.
|
||||
3. Click **Install**.
|
||||
|
||||
🎉 All done! Now you can access the admin interface through your Netlify URL.
|
||||
@ -1,140 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Gatsby
|
||||
weight: 10
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will help you get started using Static CMS and Gatsby.
|
||||
|
||||
To get up and running with Gatsby, you'll need to have [Node.js](https://nodejs.org/) installed on your computer. _Note: Gatsby's minimum supported Node.js version is Node 8._
|
||||
|
||||
## Create a new Gatsby site
|
||||
|
||||
Let's create a new site using the default Gatsby Starter Blog. Run the following commands in the terminal, in the folder where you'd like to create the blog:
|
||||
|
||||
```bash
|
||||
npm install -g gatsby-cli
|
||||
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
|
||||
cd blog
|
||||
```
|
||||
|
||||
## Get to know Gatsby
|
||||
|
||||
In your favorite code editor, open up the code generated for your "Gatsby Starter Blog" site, and take a look at the `content` directory.
|
||||
|
||||
You will see that there are multiple Markdown files that represent blog posts. Open one `.md` file and you will see something like this:
|
||||
|
||||
```yml
|
||||
---
|
||||
title: New Beginnings
|
||||
date: '2015-05-28T22:40:32.169Z'
|
||||
description: This is an optional description for SEO and Open Graph purposes, rather than the default generated excerpt.
|
||||
---
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and
|
||||
Consonantia, there live the blind texts.
|
||||
```
|
||||
|
||||
We can see above that each blog post has a title, a date, a description and a body. Now, let's recreate this using Static CMS.
|
||||
|
||||
## Add Static CMS to your site
|
||||
|
||||
First let's install some dependencies. We'll need `@staticcms/core` and `gatsby-plugin-netlify-cms`. Run the following command in the terminal at the root of your site:
|
||||
|
||||
```bash
|
||||
npm install --save @staticcms/core gatsby-plugin-netlify-cms
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration.
|
||||
|
||||
Create a `config.yml` file in the directory structure you see below:
|
||||
|
||||
```bash
|
||||
├── static
|
||||
│ ├── admin
|
||||
│ │ ├── config.yml
|
||||
```
|
||||
|
||||
In your `config.yml` file paste the following configuration:
|
||||
|
||||
```yml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
|
||||
media_folder: static/img
|
||||
public_folder: /img
|
||||
|
||||
collections:
|
||||
- name: 'blog'
|
||||
label: 'Blog'
|
||||
folder: 'content/blog'
|
||||
create: true
|
||||
slug: 'index'
|
||||
media_folder: ''
|
||||
public_folder: ''
|
||||
path: '{{title}}/index'
|
||||
editor:
|
||||
preview: false
|
||||
fields:
|
||||
- { label: 'Title', name: 'title', widget: 'string' }
|
||||
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
|
||||
- { label: 'Description', name: 'description', widget: 'string' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
**Note:** The above configuration allows assets to be stored relative to their content. Therefore posts would be stored in the format below as it is in `gatsby-starter-blog`.
|
||||
|
||||
```bash
|
||||
content/
|
||||
├── blog
|
||||
│ ├── first-post-title
|
||||
│ │ ├── index.md
|
||||
│ │ └── post-image.jpg
|
||||
└── └── second-post-title
|
||||
├── index.md
|
||||
└── post-image.jpg
|
||||
```
|
||||
|
||||
Finally, add the plugin to your `gatsby-config.js`.
|
||||
|
||||
```javascript
|
||||
plugins: [`gatsby-plugin-netlify-cms`];
|
||||
```
|
||||
|
||||
### Push to GitHub
|
||||
|
||||
It's now time to commit your changes and push to GitHub. The Gatsby starter initializes Git automatically for you, so you only need to do:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Initial Commit"
|
||||
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Add your repo to Netlify
|
||||
|
||||
Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.
|
||||
|
||||
### Enable Identity and Git Gateway
|
||||
|
||||
Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
|
||||
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**.
|
||||
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).
|
||||
|
||||
## Start publishing
|
||||
|
||||
It's time to create your first blog post. Login to your site's `/admin/` page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format `Create Blog "year-month-date-title"`.
|
||||
|
||||
Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.
|
||||
|
||||
### Cleanup
|
||||
|
||||
It is now safe to remove the default Gatsby blog posts.
|
||||
@ -1,162 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Gridsome
|
||||
weight: 70
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will help you get started using Static CMS and Gridsome.
|
||||
|
||||
## How to install Gridsome
|
||||
### 1. Install Gridsome CLI tool
|
||||
|
||||
```bash
|
||||
# Using Yarn
|
||||
yarn global add @gridsome/cli
|
||||
|
||||
# Using NPM
|
||||
npm install --global @gridsome/cli
|
||||
```
|
||||
|
||||
## Create a new Gridsome website
|
||||
|
||||
```bash
|
||||
# To create a new project run
|
||||
gridsome create gridsome-netlify-blog
|
||||
|
||||
# Then navigate to the project folder
|
||||
cd gridsome-netlify-blog
|
||||
|
||||
# To start local dev server at http://localhost:8080
|
||||
gridsome develop
|
||||
```
|
||||
|
||||
### Install Static CMS the required dependencies to your project
|
||||
|
||||
```bash
|
||||
|
||||
# Using Yarn
|
||||
yarn add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
|
||||
|
||||
# Using NPM
|
||||
npm add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
|
||||
```
|
||||
|
||||
Now that the plugins are installed, it's time to setup the configuration. Open the `gridsome.config.js` file and update its content to:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
sitetitle: 'Gridsome',
|
||||
transformers: {
|
||||
remark: {
|
||||
externalLinksTarget: '_blank',
|
||||
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
|
||||
anchorClasstitle: 'icon icon-link'
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
{
|
||||
use: '@gridsome/source-filesystem',
|
||||
options: {
|
||||
path: 'posts/**/*.md',
|
||||
typetitle: 'Post'
|
||||
}
|
||||
},
|
||||
{
|
||||
use: `gridsome-plugin-netlify-cms`,
|
||||
options: {
|
||||
publicPath: `/admin`
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Please read [gridsome-plugin-netlify-cms](https://gridsome.org/plugins/gridsome-plugin-netlify-cms), [transformer-remark](https://gridsome.org/plugins/@gridsome/transformer-remark) for more information.
|
||||
|
||||
## Static CMS setup
|
||||
|
||||
1. Create an `admin` directory inside the `src`
|
||||
2. Create an `uploads` directory inside the root of your project
|
||||
3. Add `index.html`, `index.js` and a `config.yml` file to your `admin` directory
|
||||
|
||||
Your `index.html` should look like this:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Static CMS</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Your `index.js` should look like this:
|
||||
|
||||
```js
|
||||
import CMS from "@staticcms/core"
|
||||
```
|
||||
|
||||
Your `config.yml` for GitHub should look like this:
|
||||
|
||||
```yml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
|
||||
media_folder: "static/uploads"
|
||||
public_folder: "/uploads"
|
||||
|
||||
collections:
|
||||
- name: "posts"
|
||||
label: "Posts"
|
||||
folder: "posts"
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields:
|
||||
- {label: "Title", name: "title", widget: "string"}
|
||||
- {label: "Excerpt", name: "excerpt", widget: "string"}
|
||||
- {label: "Publish Date", name: "date", widget: "datetime"}
|
||||
- {label: "Body", name: "body", widget: "markdown"}
|
||||
```
|
||||
|
||||
## Push to GitHub
|
||||
|
||||
It's now time to commit your changes and push to GitHub.
|
||||
|
||||
```bash
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial Commit"
|
||||
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Add your repo to Netlify
|
||||
|
||||
Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.
|
||||
|
||||
### Enable Identity and Git Gateway
|
||||
|
||||
Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
|
||||
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**.
|
||||
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).
|
||||
|
||||
|
||||
## Start publishing
|
||||
|
||||
It's time to create your first blog post. Login to your site's `/admin/` page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format `Create Blog "year-month-date-title"`.
|
||||
|
||||
Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.
|
||||
|
||||
Your basic blog scaffold is done, now you can query data from the GraphQL server just like you're working with the filesystem. For more info read [querying data](https://gridsome.org/docs/querying-data).
|
||||
@ -1,202 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Hugo
|
||||
weight: 20
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will walk you through how to integrate Static CMS with Hugo. This is a good place to start if you want to learn from the ground up how these two tools work together. If you want to get up-and-running quicker, you can use one of the pre-existing and amazing [starter templates](/docs/start-with-a-template/)!
|
||||
|
||||
## Getting started with Hugo
|
||||
|
||||
### Installation
|
||||
|
||||
To get started with Hugo, you should first install the command line tool. If you've already got it installed, you can [skip this step](#creating-a-new-site). On MacOS and Linux you can do this with:
|
||||
|
||||
```bash
|
||||
brew install hugo
|
||||
```
|
||||
|
||||
To test that it's successfully installed, you can try this command, to get a list of Hugo's options:
|
||||
|
||||
```bash
|
||||
hugo help
|
||||
```
|
||||
|
||||
### Creating a new site
|
||||
|
||||
Create a new Hugo project and start it up using the following commands.
|
||||
|
||||
```bash
|
||||
hugo new site <name-of-your-new-project>
|
||||
cd <name-of-your-new-project>
|
||||
hugo server
|
||||
```
|
||||
|
||||
You won't actually see anything, just yet, and that's because you don't have any template files. That's easily resolved. In the `layouts/` directory, create a file `index.html` and put a basic HTML structure in there:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Nice. It's looking good already.</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You'll also add some files to the `content/` and `data/` directories to make sure git tracks them.
|
||||
|
||||
```bash
|
||||
touch content/.keep data/.keep
|
||||
```
|
||||
|
||||
This is as basic as you can get with a Hugo project. There's just enough here now for us to install Static CMS.
|
||||
|
||||
## Getting Started With Static CMS
|
||||
|
||||
### Add the Static CMS files to Hugo
|
||||
|
||||
In Hugo, static files that don't need to be processed by the build commands live in the `static/` directory. You'll install the Static CMS admin and config files there. Create a directory `admin/` and within it, create two files `index.html` and `config.yml`. In the `index.html`, add the following content:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
<!-- Include the script that enables Netlify Identity on this page. -->
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Static CMS -->
|
||||
<script src="https://unpkg.com/@staticcms/app@%5E1.0.0/dist/static-cms-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
In the `config.yml` file, you can add this basic configuration — you can customize as you see fit, this sample file is just to get you started.
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
media_folder: static/img
|
||||
public_folder: /img
|
||||
collections:
|
||||
- name: 'blog'
|
||||
label: 'Blog'
|
||||
folder: 'content/blog'
|
||||
create: true
|
||||
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
|
||||
editor:
|
||||
preview: false
|
||||
fields:
|
||||
- { label: 'Title', name: 'title', widget: 'string' }
|
||||
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
|
||||
- { label: 'Description', name: 'description', widget: 'string' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
**Note:** You won't be able to access the CMS just yet — you still need to deploy the project with **Netlify** and authenticate with **Netlify Identity**. You'll handle this in the next few steps of this guide.
|
||||
|
||||
### Pushing to GitHub
|
||||
|
||||
It's now time to commit your changes and push to GitHub. You can run the following commands to initialize a git repository and push the changes so far.
|
||||
|
||||
```bash
|
||||
git init # Initialize a git repository
|
||||
git add . # Add every file
|
||||
git commit -m "Initial Commit" # Commit every file with the message 'Initial Commit'
|
||||
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git # Create a new repo on GitHub and add it to this project as a remote repository.
|
||||
git push -u origin main # Push your changes
|
||||
```
|
||||
|
||||
### Deploying With Netlify
|
||||
|
||||
Now you can go ahead and deploy to Netlify. Go to your Netlify dashboard and click **[New site from Git](https://app.netlify.com/start)**. Select the repo you just created. Under **Basic build settings**, you can set the build command to `hugo` and the publish directory to `public`. Click **Deploy site** to get the process going.
|
||||
|
||||
### Authenticating with Netlify Identity
|
||||
|
||||
**Add the Netlify Identity Widget**
|
||||
|
||||
You've already added the Netlify Identity widget to our `admin/index.html`. The next thing to do is add the Netlify Identity widget to our site's index page. In `layouts/index.html`, we can add the following to the `<head>` tag on the page:
|
||||
|
||||
```html
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
```
|
||||
|
||||
Once you've added this, make sure to push your changes to GitHub!
|
||||
|
||||
### Enable Identity & Git Gateway in Netlify
|
||||
|
||||
Back in your [Netlify dashboard](https://app.netlify.com/):
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Once enabled, select **Settings and usage**, and scroll down to **Registration preferences**. You can set this to either **Open** or **Invite only**, but usually **Invite only** is your best bet for a personal site.
|
||||
3. If you don't want to create an account, or would like to use an external provider such as GitHub or Google, you can enable those services under **External providers**.
|
||||
4. Scroll down to **Services** and click **Enable Git Gateway**.
|
||||
|
||||
### Accessing the CMS
|
||||
|
||||
Once you've reached this point, you should be able to access the CMS in your browser at `http://localhost:1313/admin`. You'll be prompted to add the URL of your Netlify site. Once you've added that URL, you can log in with an Identity account or with one of the External Providers you enabled in step 3 above. For the sake of this tutorial, you can create a blog post in the CMS, and publish it! Once you `git pull` in your project, the blog post will show up in the project at `content/blog/<slugified-blog-post-title>.md`.
|
||||
|
||||
And that's it! From this point on, it's just a matter of following [the Hugo documentation](https://gohugo.io/templates/) for outputting the content from your `content/` directory into templates! For more information on configuring Static CMS, feel free to check out the [Static CMS configuration options documentation](/docs/configuration-options/).
|
||||
|
||||
## Using Static CMS content in Hugo
|
||||
|
||||
### Creating a list of posts
|
||||
|
||||
In your `layouts/index.html` file, you'll create an unordered list element and use a Hugo `range` to output all posts. Inside that range, you can add a list item element with each post title and a link to the post inside it.
|
||||
|
||||
**Note:** To learn more about Hugo's `range` function, check out [the Hugo documentation](https://gohugo.io/functions/range).
|
||||
|
||||
```html
|
||||
<body>
|
||||
<h1>Nice. It's looking good already.</h1>
|
||||
<ul>
|
||||
{{ range (where .Pages "Section" "blog") }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</body>
|
||||
```
|
||||
|
||||
That link won't work just right just yet. You'll need to make a single page layout for blog posts, so Hugo can create a page for the `.RelPermalink` to link to.
|
||||
|
||||
### Creating a single page post layout
|
||||
|
||||
Create a file `layouts/blog/single.html`, and put the following content in there:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>{{ .Title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p class="date">{{ .Date }}</p>
|
||||
<p class="description">{{ .Params.description }}</p>
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You can see this basic template includes all the fields you've specified in your Static CMS `config.yml` file. You can access any custom front-matter fields with `.Params.<field-name>`!
|
||||
@ -1,300 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Jekyll
|
||||
weight: 30
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This section will help you integrate Static CMS with a new or existing Jekyll project.
|
||||
|
||||
[Jekyll](https://jekyllrb.com/) is a blog-aware static site generator built with Ruby. [Github Pages](https://pages.github.com/) are powered by Jekyll, making it a popular choice for developer blogs and project pages.
|
||||
|
||||
If you're starting a new project, the fastest route to publishing on a Jekyll website with Static CMS is to [deploy a template on Netlify](https://templates.netlify.com/).
|
||||
|
||||
## Setup
|
||||
|
||||
This guide will use the blog you get if you follow the [really excellent official Jekyll step by step tutorial](https://jekyllrb.com/docs/step-by-step/01-setup/) as a starting point. If you're new to Jekyll - I recommended you start by following the tutorial so you know your way around your new blog. Otherwise [you can clone this repo](https://github.com/adamwatters/jekyll-tutorial-with-netlify-cms/tree/without-cms) and checkout the `without-cms` branch.
|
||||
|
||||
|
||||
|
||||
## Add Static CMS
|
||||
|
||||
### Add admin/index.html
|
||||
|
||||
Create a file `admin/index.html` in the root of your repo - it should look like this:
|
||||
|
||||
```html
|
||||
<!-- admin/index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
<!-- Include the identity widget -->
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Static CMS -->
|
||||
<script src="https://unpkg.com/@staticcms/app@%5E1.0.0/dist/static-cms-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Add admin/config.yml
|
||||
|
||||
Create a file `admin/config.yml` in the root of your repo - it should look like this:
|
||||
|
||||
```yml
|
||||
# config.yml
|
||||
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
media_folder: 'assets/uploads'
|
||||
collections:
|
||||
- name: 'blog'
|
||||
label: 'Blog'
|
||||
folder: '_posts/'
|
||||
fields:
|
||||
- { name: Title }
|
||||
```
|
||||
|
||||
### Enable authentication for CMS users
|
||||
|
||||
Static CMS stores content in your online Git repository. Therefore, to make content changes, users need to authenticate with the corresponding Git provider to prove that they have read and write access to that content.
|
||||
|
||||
Follow the directions in the Introduction section to [enable Netlify Identity and Git Gateway services](/docs/add-to-your-site/#enable-identity-and-git-gateway) for the backend, then [add the Identity widget](/docs/add-to-your-site/#add-the-netlify-identity-widget) to render a login portal on the frontend.
|
||||
|
||||
## CMS Configuration
|
||||
|
||||
### Blog Collection
|
||||
|
||||
We'll start by updating the `blog` collection. Blogging is baked into Jekyll, and the `_posts/` directory uses [some special conventions](https://jekyllrb.com/docs/posts/) we'll need to keep in mind as we configure Static CMS. Copy and paste the following into your `config.yml`.
|
||||
|
||||
```yaml
|
||||
collections:
|
||||
- name: 'blog'
|
||||
label: 'Blog'
|
||||
folder: '_posts/'
|
||||
create: true
|
||||
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
|
||||
editor:
|
||||
preview: false
|
||||
fields:
|
||||
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
|
||||
- { label: 'Title', name: 'title', widget: 'string' }
|
||||
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
A few things to note.
|
||||
|
||||
* We set the `slug` to `'{{year}}-{{month}}-{{day}}-{{slug}}'` because [Jekyll requires this format for blog posts](https://jekyllrb.com/docs/posts/#creating-posts). `year`, `month`, and `day` will be extracted from the `date` field, and `slug` will be generated from the `title` field.
|
||||
* We added `editor` configuration with a field `preview: false`. This will eliminate the preview pane. Because Jekyll uses Liquid templates, there currently isn't a good way to provide a preview of pages as you update the content.
|
||||
* The `layout` field default is set to `post` so Jekyll knows to use `_layouts/post.html` when it renders a post. This field is hidden because we want all posts to use the same layout.
|
||||
* The `date` and `title` field will be used by the `slug` - as noted above, Jekyll relies on the filename to determine a post's publish date, but Static CMS does not pull date information from the filename and requires a frontmatter `date` field. **Note** Changing the `date` or `title` fields in Static CMS will not update the filename. This has a few implications:
|
||||
|
||||
* If you change the `date` or `title` fields in Static CMS, Jekyll won't notice
|
||||
* You don't necessarily need to change the `date` and `title` fields for existing posts, but if you don't the filenames and frontmatter will disagree in a way that might be confusing
|
||||
* If you want to avoid these issues, use a regular Jekyll collection instead of the special `_posts` directory
|
||||
|
||||
### Author Collection
|
||||
|
||||
In addition to `_posts`, the Jekyll tutorial blog includes a collection of authors in the `_authors` directory. Before we can configure Static CMS to work with the `authors` collection, we'll need to make a couple tweaks to our Jekyll blog. Here's the front matter for one of the authors.
|
||||
|
||||
```yaml
|
||||
short_title: jill
|
||||
title: Jill Smith
|
||||
position: Chief Editor
|
||||
```
|
||||
|
||||
`name` has special meaning as a unique identifier in Static CMS, but as set up now our Jekyll blog is using `short_name` as the unique identifier for authors. For each author, update the frontmatter like so.
|
||||
|
||||
```yaml
|
||||
title: jill
|
||||
display_title: Jill Smith
|
||||
position: Chief Editor
|
||||
```
|
||||
|
||||
then update `_layouts/author.html`, `_layouts/post.html` and `staff.html` accordingly.
|
||||
|
||||
```html
|
||||
<!-- _layouts/author.html -->
|
||||
--- layout: default ---
|
||||
|
||||
<h1>{{ page.display_name }}</h1>
|
||||
<h2>{{ page.position }}</h2>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<h2>Posts</h2>
|
||||
<ul>
|
||||
{% assign filtered_posts = site.posts | where: 'author', page.name %} {% for post in
|
||||
filtered_posts %}
|
||||
<li>
|
||||
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- _layouts/post.html -->
|
||||
--- layout: default ---
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<p>
|
||||
{{ page.date | date_to_string }} {% assign author = site.authors | where: 'name', page.author |
|
||||
first %} {% if author %} - <a href="{{ author.url }}">{{ author.display_name }}</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{{ content }}
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- staff.html -->
|
||||
--- layout: default ---
|
||||
|
||||
<h1>Staff</h1>
|
||||
|
||||
<ul>
|
||||
{% for author in site.authors %}
|
||||
<li>
|
||||
<h2>
|
||||
<a href="{{ site.baseurl }}{{ author.url }}">{{ author.display_name }}</a>
|
||||
</h2>
|
||||
<h3>{{ author.position }}</h3>
|
||||
<p>{{ author.content | markdownify }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
```
|
||||
|
||||
Next, copy and paste the following into the collections array in `config.yml` below the `blog` collection.
|
||||
|
||||
```yaml
|
||||
- name: 'authors'
|
||||
label: 'Authors'
|
||||
folder: '_authors/'
|
||||
create: true
|
||||
editor:
|
||||
preview: false
|
||||
fields:
|
||||
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'author' }
|
||||
- { label: 'Short Name', name: 'name', widget: 'string' }
|
||||
- { label: 'Display Name', name: 'display_name', widget: 'string' }
|
||||
- { label: 'Position', name: 'position', widget: 'string' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
Now that we have the `authors` collection configured, we can add an `author` field to the `blog` collection. We'll use the [relation widget](/docs/widgets/#relation) to define the relationship between blog posts and authors.
|
||||
|
||||
```yaml
|
||||
# updated fields in blog collection configuration
|
||||
fields:
|
||||
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
|
||||
- { label: 'Title', name: 'title', widget: 'string' }
|
||||
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
|
||||
- {
|
||||
label: 'Author',
|
||||
name: 'author',
|
||||
widget: 'relation',
|
||||
collection: 'authors',
|
||||
display_fields: [display_name],
|
||||
search_fields: [display_name],
|
||||
value_field: 'name',
|
||||
}
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
With that configuration added, you should be able to select the author for a post from a dropdown.
|
||||
|
||||
### About Page
|
||||
|
||||
Our Jekyll blog includes an About page. It would nice to be able to edit that page just like we can edit our blog and author pages. Static CMS provides [file collections](/docs/collection-types/#file-collections) to solve this problem.
|
||||
|
||||
Copy and paste the following into the collections array in `config.yml`
|
||||
|
||||
```yaml
|
||||
- name: 'pages'
|
||||
label: 'Pages'
|
||||
editor:
|
||||
preview: false
|
||||
files:
|
||||
- label: 'About Page'
|
||||
name: 'about'
|
||||
file: 'about.md'
|
||||
fields:
|
||||
- { label: 'Title', name: 'title', widget: 'hidden', default: 'about' }
|
||||
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'about' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
### Navigation
|
||||
|
||||
The last aspect of our Jekyll blog we might want to bring under the control of Static CMS is our Navigation menu. Our Jekyll tutorial blog has a file `_data/navigation.yml` that defines the links rendered by `_includes/navigation.html`. It looks like this.
|
||||
|
||||
```yaml
|
||||
# _data/navigation.yml
|
||||
- title: Home
|
||||
link: /
|
||||
- title: About
|
||||
link: /about.html
|
||||
- title: Blog
|
||||
link: /blog.html
|
||||
- title: Staff
|
||||
link: /staff.html
|
||||
```
|
||||
|
||||
To make this file editable with Static CMS, we'll need to make one minor tweak. The issue is this file contains a yaml array at the top level, but Static CMS is designed to work with yaml objects. Update `_data/navigation.yml` so it looks like so.
|
||||
|
||||
```yaml
|
||||
# _data/navigation.yml
|
||||
items:
|
||||
- title: Home
|
||||
link: /
|
||||
- title: About
|
||||
link: /about.html
|
||||
- title: Blog
|
||||
link: /blog.html
|
||||
- title: Staff
|
||||
link: /staff.html
|
||||
```
|
||||
|
||||
You'll need to update `_includes/navigation.html` accordingly. `{% for item in site.data.navigation %}` should be changed to `{% for item in site.data.navigation.items %}`. When you're done, the nav html should look like this.
|
||||
|
||||
```html
|
||||
<nav>
|
||||
{% for item in site.data.navigation.items %}
|
||||
<a href="{{ site.baseurl }}{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
```
|
||||
|
||||
Finally, add the following to the collections array in `config.yml`
|
||||
|
||||
```yaml
|
||||
- name: 'config'
|
||||
label: 'Config'
|
||||
editor:
|
||||
preview: false
|
||||
files:
|
||||
- label: 'Navigation'
|
||||
name: 'navigation'
|
||||
file: '_data/navigation.yml'
|
||||
fields:
|
||||
- label: 'Navigation Items'
|
||||
name: 'items'
|
||||
widget: 'list'
|
||||
fields:
|
||||
- { label: Name, name: name, widget: string }
|
||||
- { label: Link, name: link, widget: string }
|
||||
```
|
||||
|
||||
Now you can add, rename, and rearrange the navigation items on your blog.
|
||||
@ -1,183 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Middleman
|
||||
weight: 60
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will help you get started using Static CMS and Middleman.
|
||||
|
||||
## Installation
|
||||
To get up and running with Middleman, you need both the Ruby language runtime and RubyGems installed on your computer. Check out the [Middleman installation docs](https://middlemanapp.com/basics/install/) for more details. If you already have your environment set up, use the following command to install Middleman:
|
||||
|
||||
```bash
|
||||
gem install middleman
|
||||
```
|
||||
|
||||
## Create a new Middleman site
|
||||
Let's create a new site from scratch. Run the following commands in the terminal, in the folder where you'd like to create the blog:
|
||||
|
||||
```bash
|
||||
middleman init blog
|
||||
cd blog
|
||||
```
|
||||
|
||||
### Add the Middleman blog extension
|
||||
Middleman has an official extension to support blogging, articles and tagging. `middleman-blog` ships as an extension and must be installed to use. Simply specify the gem in your Gemfile:
|
||||
|
||||
```bash
|
||||
gem "middleman-blog"
|
||||
```
|
||||
Install the dependencies and run Middleman with the following commands:
|
||||
|
||||
```bash
|
||||
bundle install
|
||||
middleman server
|
||||
```
|
||||
|
||||
## Get started with Middleman
|
||||
|
||||
Now we have our site up and running let's open up a code editor and create a new folder `source/posts` and add your first article named `2019-01-01-example-article.html.md` with the following content:
|
||||
|
||||
|
||||
```yml
|
||||
---
|
||||
title: Example Article
|
||||
date: 2019-01-01
|
||||
---
|
||||
|
||||
This is an example article. You probably want to delete it and write your own articles once you finished this guide!
|
||||
```
|
||||
|
||||
### Activate the blog extension
|
||||
We can then activate the blog in `config.rb`. Be sure to check out the [Middleman blogging docs](https://middlemanapp.com/basics/blogging/) for all the configuration options.
|
||||
|
||||
```bash
|
||||
activate :blog do | blog |
|
||||
blog.permalink = "blog/{title}.html"
|
||||
blog.sources = "posts/{year}-{month}-{day}-{title}.html"
|
||||
blog.layout = "blog-layout"
|
||||
end
|
||||
```
|
||||
|
||||
### Load the articles
|
||||
Time to load our articles in `index.html.erb`.
|
||||
|
||||
```ruby
|
||||
<h1>Recent articles</h1>
|
||||
|
||||
<% blog.articles.each do | article | %>
|
||||
<article>
|
||||
<h2>
|
||||
<%= article.title %>
|
||||
</h2>
|
||||
|
||||
<%= link_to 'Read more', article %>
|
||||
</article>
|
||||
|
||||
<% end %>
|
||||
```
|
||||
|
||||
### Add an article layout
|
||||
In the last step before we add Static CMS, we add a layout for the article page. Create a new layout `source/layouts/blog-layout.html.erb`. For now we will get the title and the content:
|
||||
```ruby
|
||||
<h1>
|
||||
<%= current_page.data.title %>
|
||||
</h1>
|
||||
|
||||
<%= yield %>
|
||||
```
|
||||
|
||||
Now that we have a functioning blog, let's get started with Static CMS!
|
||||
|
||||
## Add Static CMS to your site
|
||||
|
||||
Create two files in a new folder called `admin`, `index.html` and `config.yml`. Also add an `upload` folder in the images directory that will function as our `media_folder`.
|
||||
```bash
|
||||
├── source
|
||||
│ ├── admin
|
||||
│ │ ├── index.html
|
||||
│ │ ├── config.yml
|
||||
│ │
|
||||
│ ├── images
|
||||
│ │ ├── uploads
|
||||
```
|
||||
|
||||
|
||||
In the newly created `index.html` we add scripts for Static CMS and the Netlify Identity Widget:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Static CMS</title>
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://unpkg.com/@staticcms/app@%5E1.0.0/dist/static-cms-app.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration. In `config.yml` file paste the following code:
|
||||
|
||||
```yml
|
||||
backend:
|
||||
title: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
|
||||
media_folder: source/images/uploads
|
||||
public_folder: /images/uploads
|
||||
|
||||
collections:
|
||||
- name: blog
|
||||
label: Blog
|
||||
folder: source/posts/
|
||||
extension: .html.md
|
||||
format: frontmatter
|
||||
create: true
|
||||
slug: '{{year}}-{{month}}-{{day}}-{{title}}'
|
||||
fields:
|
||||
- {label: Title, name: title, widget: string}
|
||||
- {label: Publish Date, name: date, widget: datetime}
|
||||
- {label: Body, name: body, widget: markdown}
|
||||
```
|
||||
|
||||
### Push to GitHub
|
||||
It's now time to commit your changes and push to GitHub.
|
||||
|
||||
```bash
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial Commit"
|
||||
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Add your repo to Netlify
|
||||
|
||||
Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.
|
||||
|
||||
### Enable Identity and Git Gateway
|
||||
|
||||
Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
|
||||
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**.
|
||||
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).
|
||||
|
||||
## Start publishing
|
||||
|
||||
It's time to create your first blog post. Login to your site's `/admin/` page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format `Create Blog "year-month-date-title"`.
|
||||
|
||||
Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.
|
||||
|
||||
Be sure to checkout the official [Middleman Starter](https://github.com/tomrutgers/middleman-starter-netlify-cms) for more examples.
|
||||
@ -1,237 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: NextJS
|
||||
weight: 40
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will help you get started using Static CMS with NextJS.
|
||||
|
||||
## Creating a new project
|
||||
|
||||
Let's repeat some of the basics of setting up a simple NextJS project (check out [nextjs.org/learn](http://nextjs.org/learn) for a more detailed version).
|
||||
|
||||
```bash
|
||||
# Create new directory and navigate into it
|
||||
mkdir awesome-kitties
|
||||
cd awesome-kitties
|
||||
|
||||
# Initialize a new project
|
||||
npm init -y
|
||||
|
||||
# Install required dependencies
|
||||
npm install --save react react-dom next
|
||||
|
||||
# Install webpack loader for Markdown (Use version 3+)
|
||||
npm install --save-dev frontmatter-markdown-loader
|
||||
|
||||
# If using NextJS v11.0.0 or above, @babel/core and @babel/preset-react has to be installed as dependencies of frontmatter-markdown-loader
|
||||
npm install --save-dev @babel/core @babel/preset-react
|
||||
|
||||
# Create folder for pages (default for NextJS), and add a index file
|
||||
mkdir pages
|
||||
touch pages/index.js
|
||||
|
||||
# Create a folder for content, and a markdown file:
|
||||
mkdir content
|
||||
touch content/home.md
|
||||
|
||||
# Create a folder for static assets
|
||||
mkdir public
|
||||
```
|
||||
|
||||
Next, we need to add some modifications to our `package.json` file to make it easier to run and deploy our new site:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "npm run build && next export"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
There is a lot of different ways to create and display Markdown content, but to make this as easy as possible we'll be using a webpack-loader that enables us to load markdown files directly in our React components ([frontmatter-markdown-loader](https://www.npmjs.com/package/frontmatter-markdown-loader)).
|
||||
|
||||
Add the following content to your `content/home.md` file:
|
||||
|
||||
```md
|
||||
---
|
||||
title: Awesome kitties
|
||||
date: 2019-03-17T19:31:20.591Z
|
||||
cats:
|
||||
- description: 'Maru is a Scottish Fold from Japan, and he loves boxes.'
|
||||
title: Maru (まる)
|
||||
- description: Lil Bub is an American celebrity cat known for her unique appearance.
|
||||
title: Lil Bub
|
||||
- description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance.'
|
||||
title: Grumpy cat (Tardar Sauce)
|
||||
---
|
||||
Welcome to my awesome page about cats of the internet.
|
||||
|
||||
This page is built with NextJS, and content is managed in Static CMS
|
||||
```
|
||||
|
||||
Next, we need to tell webpack how to load Markdown files. Create a new `next.config.js` file at the root of your project with the following content:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
webpack: (cfg) => {
|
||||
cfg.module.rules.push(
|
||||
{
|
||||
test: /\.md$/,
|
||||
loader: 'frontmatter-markdown-loader',
|
||||
options: { mode: ['react-component'] }
|
||||
}
|
||||
)
|
||||
return cfg;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Almost there! The last thing we need to do is to add some content to our `pages/index.js` file. With a little help of our webpack loader, we can now easily import Markdown files:
|
||||
|
||||
```js
|
||||
import Head from "next/head"
|
||||
import { Component } from 'react'
|
||||
import { attributes, react as HomeContent } from '/docs/content/home.md';
|
||||
|
||||
export default class Home extends Component {
|
||||
render() {
|
||||
let { title, cats } = attributes;
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</Head>
|
||||
<article>
|
||||
<h1>{title}</h1>
|
||||
<HomeContent />
|
||||
<ul>
|
||||
{cats.map((cat, k) => (
|
||||
<li key={k}>
|
||||
<h2>{cat.name}</h2>
|
||||
<p>{cat.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Great! We now have a page that displays content from our Markdown file. Go ahead and start your development server to test if everything is working:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Adding Static CMS
|
||||
|
||||
There are many different ways to add Static CMS to your project. The easiest is probably just to embed it from a CDN, and that's exactly what we're gonna do. To avoid making this guide too complicated, we're just going to add Netlify into a subfolder inside the `/public` directory (which is just served as static files by Next):
|
||||
|
||||
```bash
|
||||
# Create and navigate into public/admin folder
|
||||
mkdir -p public/admin
|
||||
cd public/admin
|
||||
|
||||
# Create index.html and config.yml file
|
||||
touch index.html
|
||||
touch config.yml
|
||||
```
|
||||
|
||||
Paste HTML for Static CMS into your `public/admin/index.html` file (check out the [Add Netlify To Your Site](/docs/add-to-your-site/) section for more information)
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Static CMS -->
|
||||
<script src="https://unpkg.com/@staticcms/app@%5E1.0.0/dist/static-cms-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Notice that we also added the identity widget. This allows sign up when the project is hosted at Netlify.
|
||||
|
||||
Paste the following configuration into your `public/admin/config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
media_folder: public/img
|
||||
public_folder: img
|
||||
collections:
|
||||
- name: "pages"
|
||||
label: "Pages"
|
||||
files:
|
||||
- label: "Home"
|
||||
name: "home"
|
||||
file: "content/home.md"
|
||||
fields:
|
||||
- { label: "Title", name: "title", widget: "string"}
|
||||
- { label: "Publish Date", name: "date", widget: "datetime" }
|
||||
- { label: "Body", name: "body", widget: "markdown"}
|
||||
- label: 'Cats'
|
||||
name: "cats"
|
||||
widget: list
|
||||
fields:
|
||||
- { label: "Name", name: "name", widget: "string"}
|
||||
- { label: "Description", name: "description", widget: "text"}
|
||||
```
|
||||
|
||||
Awesome! Static CMS should now be available at `localhost:3000/admin/index.html`. Unfortunately we can't edit our content just yet. First we need to move our code into a git repository, and create a new Netlify site.
|
||||
|
||||
**Tip:** If you want to test changes made to your config.yml file locally, swap out "git-gateway" with "test-repo" and navigate to `localhost:3000/admin/index.html` to view Static CMS locally (you can't make changes or read actual content from Git this way, but it's great to verify how things will look).
|
||||
|
||||
## Publishing to GitHub and Netlify
|
||||
|
||||
Create a new repository at GitHub (or one of the other supported git services) and follow the instructions on how to push existing files into your new repository.
|
||||
|
||||
Now is probably also a good time to add a `.gitignore` file:
|
||||
|
||||
```bash
|
||||
.next/
|
||||
node_modules/
|
||||
/npm-debug.log
|
||||
.DS_Store
|
||||
out/
|
||||
```
|
||||
|
||||
When your project is under version control, go to Netlify and select "New Site from Git". Select GitHub (or whatever service you used in the previous step), and the repository you just pushed to.
|
||||
|
||||
Under the final step (Build options, and deploy!), make sure you enter the following:
|
||||
|
||||
| Field | Value |
|
||||
| ----------------- | ------------------ |
|
||||
| Build command | **npm run export** |
|
||||
| Publish directory | **out** |
|
||||
|
||||
### Enable Identity and Git Gateway
|
||||
|
||||
Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
|
||||
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**.
|
||||
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).
|
||||
|
||||
### Celebrate!
|
||||
|
||||
Great job - you did it! Open your new page via the new Netlify URL, and navigate to `/admin`. If you did everything correct in the previous step, you should now be able to sign up for an account, and log in.
|
||||
|
||||
**Tip:** Signing up with an external provider is the easiest. If you want to sign up by email, you'll have to set up a redirect in your index.js page (which we won't be covering in this guide). For more information, have a look at the [Add To Your Site](/docs/add-to-your-site) section.
|
||||
|
||||
Congratulations - you can finally manage your new list of cats!
|
||||
@ -1,272 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Nuxt
|
||||
weight: 50
|
||||
---
|
||||
|
||||
<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>
|
||||
|
||||
This guide will walk you through how to integrate Static CMS with Nuxt.
|
||||
|
||||
## Starting With `create-nuxt-app`
|
||||
|
||||
Follow the instructions on the [Nuxt documentation](https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-) for creating a new project, or run:
|
||||
|
||||
```bash
|
||||
npx create-nuxt-app <name-of-your-new-project>
|
||||
cd <name-of-your-new-project>
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Setting Up Static CMS
|
||||
|
||||
### Add the Static CMS files to Nuxt
|
||||
|
||||
In the `static/` directory, create a new directory `admin/`. Inside that directory you'll create two files, your `index.html` and a `config.yml`. Per the [Static CMS documentation](/docs/add-to-your-site/), we'll set the content of `static/admin/index.html` to the following:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
<!-- Include the script that enables Netlify Identity on this page. -->
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Static CMS -->
|
||||
<script src="https://unpkg.com/@staticcms/app@%5E1.0.0/dist/static-cms-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
For your `static/admin/config.yml` file, you can put in a basic starter config:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: main # Branch to update (optional; defaults to main)
|
||||
|
||||
media_folder: static/img
|
||||
public_folder: /img
|
||||
|
||||
collections:
|
||||
- name: 'blog'
|
||||
label: 'Blog'
|
||||
folder: 'content/blog'
|
||||
format: 'frontmatter'
|
||||
create: true
|
||||
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
|
||||
editor:
|
||||
preview: false
|
||||
fields:
|
||||
- { label: 'Title', name: 'title', widget: 'string' }
|
||||
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
|
||||
- { label: 'Description', name: 'description', widget: 'string' }
|
||||
- { label: 'Body', name: 'body', widget: 'markdown' }
|
||||
```
|
||||
|
||||
You can build whatever collections and content modeling you want. The important thing to note is the `format: 'frontmatter'` value on each collection. This is important for consuming content in Nuxt with the [nuxt/content](https://content.nuxtjs.org) module.
|
||||
|
||||
### Add the `content/` directory to Nuxt
|
||||
|
||||
In your root directory, you can create a new directory `content/`. As you might guess, this is where our content will live. Your filesystem should look about like this, so far:
|
||||
|
||||
```bash
|
||||
root/
|
||||
├ content/
|
||||
├ components/
|
||||
├ layouts/
|
||||
├ middleware/
|
||||
├ pages/
|
||||
├ plugins/
|
||||
├ static/
|
||||
│ └ admin/
|
||||
│ ├ index.html
|
||||
│ └ config.yml
|
||||
├ store/
|
||||
└ // .editorconfig, .gitignore, nuxt.config.js, etc...
|
||||
```
|
||||
|
||||
### Pushing to GitHub
|
||||
|
||||
It's now time to commit your changes and push to GitHub. `create-nuxt-app` initializes Git automatically for you, so you only need to do:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Initial Commit"
|
||||
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Deploying With Netlify
|
||||
|
||||
Now you can go ahead and deploy to Netlify. Go to your Netlify dashboard and click **[New site from Git](https://app.netlify.com/start)**. Select the repo you just created. Under **Basic build settings**, you can set the build command to `npm run generate` . Set the publish directory to `dist`. Click **Deploy site** to get the process going.
|
||||
|
||||
### Authenticating with Netlify Identity
|
||||
|
||||
**Add the Netlify Identity Widget**
|
||||
|
||||
You've already added the Netlify Identity widget to our `admin/index.html`. The next thing to do is add the Netlify Identity widget to our site's index page. In `pages/index.vue`, we can add the following to the page `<script>` tag:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
script: [{ src: 'https://identity.netlify.com/v1/netlify-identity-widget.js' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Once you've added this, make sure to push your changes to GitHub!
|
||||
|
||||
*More on adding `<script>` tags to `<head>` [here](https://nuxtjs.org/faq/#local-settings).*
|
||||
|
||||
**Enable Identity & Git Gateway in Netlify**
|
||||
|
||||
Back in your [Netlify dashboard](https://app.netlify.com/):
|
||||
|
||||
1. Go to **Settings > Identity**, and select **Enable Identity service**.
|
||||
2. Once enabled, select **Settings and usage**, and scroll down to **Registration preferences**. You can set this to either **Open** or **Invite only**, but usually **Invite only** is your best bet for a personal site.
|
||||
3. If you don't want to create an account, or would like to use an external provider such as GitHub or Google, you can enable those services under **External providers**.
|
||||
4. Scroll down to **Services** and click **Enable Git Gateway**.
|
||||
|
||||
**Accessing the CMS**
|
||||
Once you've reached this point, you should be able to access the CMS in your browser at `http://localhost:3000/admin`. You'll be prompted to add the URL of your Netlify site. Once you've added that URL, you can log in with an Identity account or with one of the External Providers you enabled in step 3 above. For the sake of this tutorial, you can create a blog post in the CMS, and publish it! Once you `git pull` in your project, the blog post will show up in the project at `content/blog/<slugified-blog-post-title>.md`.
|
||||
|
||||
## Using nuxt/content
|
||||
|
||||
Static CMS and [nuxt/content](https://content.nuxtjs.org) module click together and complement each other to give you best authoring experience and developer experience respectively.
|
||||
|
||||
Adding nuxt/content dependency
|
||||
|
||||
```javascript
|
||||
yarn add @nuxt/content
|
||||
or
|
||||
npm i @nuxt/content
|
||||
```
|
||||
|
||||
Then, add @nuxt/content to the modules section of nuxt.config.js:
|
||||
|
||||
```javascript
|
||||
{
|
||||
modules: [
|
||||
'@nuxt/content'
|
||||
],
|
||||
content: {
|
||||
// Options
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
By adding nuxt content module you get `$content` injected into your whole app which you can use to fetch content from your content folder using `simple fetch api` or `nuxt asyncData` option.
|
||||
<br />
|
||||
This also gives a `<nuxt-content>` component which helps you display markdown content with ease and also gives option of live editing in dev mode.
|
||||
|
||||
### Example Blog Post List
|
||||
|
||||
`nuxt/content` module gives us `$content` which we can use to fetch the list of blog posts in `content/blog` directory.
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div>
|
||||
<li v-for="post of posts" :key="post.slug">
|
||||
<NuxtLink :to="post.slug">{{ post.title }}</NuxtLink>
|
||||
</li>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async asyncData({ $content }) {
|
||||
const posts = await $content("blog").fetch();
|
||||
|
||||
return {
|
||||
posts,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example Blog Post
|
||||
|
||||
To generate blog posts create a `_slug.vue` file in the pages folder. By using `$content` you would get a json which you can use to display. But if you are using `markdown` to write and store your posts you can use `<nuxt-content>` module which gives you option to edit content on page in dev mode and many more [features](https://content.nuxtjs.org/).
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div>
|
||||
<h2>{{ post.title }}</h2>
|
||||
<nuxt-content :document="post" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async asyncData({ $content, params, error }) {
|
||||
let post;
|
||||
try {
|
||||
post = await $content("blog", params.slug).fetch();
|
||||
// OR const article = await $content(`articles/${params.slug}`).fetch()
|
||||
} catch (e) {
|
||||
error({ message: "Blog Post not found" });
|
||||
}
|
||||
|
||||
return {
|
||||
post,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Generating pages with the `generate` property
|
||||
|
||||
Since Nuxt 2.13+, nuxt export has a crawler feature integrated which will crawl all your links and generate your routes based on those links. Therefore you do not need to do anything in order for your dynamic routes to be crawled. i.e, if you are on version of nuxt above 2.14 add target as static in nuxt.config.js and use `nuxt generate` to build your static site.
|
||||
|
||||
```javascript
|
||||
// nuxt.config.js
|
||||
target: 'static'
|
||||
```
|
||||
|
||||
If you are using **nuxt version below 2.14** you have to use generate option in nuxt/content module to generate pages
|
||||
|
||||
```javascript
|
||||
//nuxt.config.js
|
||||
export default {
|
||||
modules: [,
|
||||
'@nuxt/content'
|
||||
],
|
||||
generate: {
|
||||
async routes () {
|
||||
const { $content } = require('@nuxt/content')
|
||||
const files = await $content().only(['path']).fetch()
|
||||
|
||||
return files.map(file => file.path === '/index' ? '/' : file.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To render your site as a static site, you'll need to create or update the `generate` property in `nuxt.config.js` to create dynamic routes and provide their content as a `payload`. In `generate`, make your `routes` entry a function:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
generate: {
|
||||
routes: function() {
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
return fs.readdirSync('./content/blog').map(file => {
|
||||
return {
|
||||
route: `/blog/${path.parse(file).name}`, // Return the slug
|
||||
payload: require(`./content/blog/${file}`),
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
To see the generated site, navigate to name-of-your-website.netlify.app/blog
|
||||
@ -1,34 +0,0 @@
|
||||
---
|
||||
group: Guides
|
||||
title: Overview
|
||||
weight: 1
|
||||
---
|
||||
|
||||
The process for adding Static CMS to a static site can be divided into four main steps:
|
||||
|
||||
## Install Static CMS
|
||||
|
||||
This is a single page app available at the `/admin` route of your website.
|
||||
Check out the [general overview](/docs/intro/) to see what the installation process entails.
|
||||
|
||||
## Set up a backend
|
||||
|
||||
This serves two purpose: Secure access to your website's Static CMS and allows it to read and update content files in your repo. More information about configuring the backend can be found [here](/docs/backends-overview/).
|
||||
|
||||
## Configure Static CMS using a configuration file
|
||||
|
||||
For starters, you can get by with a basic configuration that includes required information like Git provider, branch and folders to save files to.
|
||||
|
||||
Once you've gotten the hang of it, you can use the file to build whatever collections and content modeling you want. Check out the [this section](/docs/configuration-options/#configuration-file) for full details about all available configuration options.
|
||||
|
||||
## Render the content provided by Static CMS as web pages
|
||||
|
||||
Static CMS manages your content, and provides admin features, but it doesn't deliver content. It only makes your content available through an API.
|
||||
|
||||
It is up to developers to determine how to build the raw content into something useful and delightful on the frontend.
|
||||
|
||||
To learn how to query raw content managed by Static CMS and reformat them for delivery to end users, please refer the dedicated section for your site generator in the Table of Content.
|
||||
|
||||
## Local development
|
||||
|
||||
If you are experimenting with Static CMS or testing things out, you can connect it to a local Git repository instead of a live one. Learn how to do it [here](/docs/local-backend).
|
||||
@ -25,10 +25,6 @@
|
||||
"name": "Media",
|
||||
"title": "Media"
|
||||
},
|
||||
{
|
||||
"name": "Guides",
|
||||
"title": "Platform Guides"
|
||||
},
|
||||
{
|
||||
"name": "Customization",
|
||||
"title": "Customizing Static CMS"
|
||||
|
||||
@ -188,12 +188,12 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
|
||||
</StyledSuggestionSection>
|
||||
<StyledSuggestionSection>
|
||||
<Typography variant="h3" sx={{ marginBottom: '4px' }}>
|
||||
Platform Guides
|
||||
Customize Your CMS
|
||||
</Typography>
|
||||
<SuggestionLink href="/docs/nextjs">Next</SuggestionLink>
|
||||
<SuggestionLink href="/docs/gatsby">Gatsby</SuggestionLink>
|
||||
<SuggestionLink href="/docs/jekyll">Jekyll</SuggestionLink>
|
||||
<SuggestionLink href="/docs/hugo">Hugo</SuggestionLink>
|
||||
<SuggestionLink href="/docs/custom-previews">Custom Previews</SuggestionLink>
|
||||
<SuggestionLink href="/docs/custom-widgets">Custom Widgets</SuggestionLink>
|
||||
<SuggestionLink href="/docs/custom-icons">Custom Icons</SuggestionLink>
|
||||
<SuggestionLink href="/docs/additional-links">Custom Pages / Links</SuggestionLink>
|
||||
</StyledSuggestionSection>
|
||||
<StyledSuggestionSection>
|
||||
<Typography variant="h3" sx={{ marginBottom: '4px' }}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user