Feature/rebrand (#27)
This commit is contained in:
Daniel Lautzenheiser
committed by
GitHub
GitHub
parent
11a684f372
commit
8a59f850d1
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: >-
|
||||
Welcome to Simple CMS
|
||||
Welcome to Static CMS
|
||||
author: Daniel Lautzenheiser
|
||||
description: >-
|
||||
Announcing the release of Simple CMS v1.0.
|
||||
twitter_image: /img/simple-cms.png
|
||||
Announcing the release of Static CMS v1.0.
|
||||
twitter_image: /img/static-cms.png
|
||||
date: 2022-10-30T12:00:00.000Z
|
||||
---
|
||||
Today we’re releasing Simple CMS 1.0!
|
||||
Today we’re releasing Static CMS 1.0!
|
||||
@ -3,13 +3,13 @@ group: Intro
|
||||
weight: 3
|
||||
title: Add to Your Site
|
||||
---
|
||||
You can adapt Simple CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [Bitbucket](https://bitbucket.org). You can also create your own custom backend.
|
||||
You can adapt Static CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [Bitbucket](https://bitbucket.org). You can also create your own custom backend.
|
||||
|
||||
This tutorial guides you through the steps for adding Simple CMS to a site that's built with a common [static site generator](https://www.staticgen.com/), like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can [start from a template](../start-with-a-template) or dive right into [configuration options](../configuration-options).
|
||||
This tutorial guides you through the steps for adding Static CMS to a site that's built with a common [static site generator](https://www.staticgen.com/), like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can [start from a template](../start-with-a-template) or dive right into [configuration options](../configuration-options).
|
||||
|
||||
## App File Structure
|
||||
|
||||
A static `admin` folder contains all Simple CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the static file location for a few of the most popular static site generators:
|
||||
A static `admin` folder contains all Static CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the static file location for a few of the most popular static site generators:
|
||||
|
||||
| These generators | store static files in |
|
||||
| ------------------------------------------------------- | --------------------- |
|
||||
@ -26,7 +26,7 @@ A static `admin` folder contains all Simple CMS files, stored at the root of you
|
||||
| preact-cli | `/src/static` |
|
||||
| Docusaurus | `/static` |
|
||||
|
||||
If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a `css` or `images` folder. The contents of folders like that are usually processed as static files, so it's likely you can store your `admin` folder next to those. (When you've found the location, feel free to add it to these docs by [filing a pull request](https://github.com/SimpleCMS/simple-cms/blob/main/CONTRIBUTING.md#pull-requests)!)
|
||||
If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a `css` or `images` folder. The contents of folders like that are usually processed as static files, so it's likely you can store your `admin` folder next to those. (When you've found the location, feel free to add it to these docs by [filing a pull request](https://github.com/StaticJsCMS/static-cms/blob/main/CONTRIBUTING.md#pull-requests)!)
|
||||
|
||||
Inside the `admin` folder, you'll create two files:
|
||||
|
||||
@ -36,7 +36,7 @@ admin
|
||||
└ config.yml
|
||||
```
|
||||
|
||||
The first file, `admin/index.html`, is the entry point for the Simple CMS admin interface. This means that users navigate to `yoursite.com/admin/` to access it. On the code side, it's a basic HTML starter page that loads the Simple CMS JavaScript file. The second file, `admin/config.yml`, is the heart of your Simple CMS installation, and a bit more complex. The [Configuration](#configuration) section covers the details.
|
||||
The first file, `admin/index.html`, is the entry point for the Static CMS admin interface. This means that users navigate to `yoursite.com/admin/` to access it. On the code side, it's a basic HTML starter page that loads the Static CMS JavaScript file. The second file, `admin/config.yml`, is the heart of your Static CMS installation, and a bit more complex. The [Configuration](#configuration) section covers the details.
|
||||
|
||||
In this example, we pull the `admin/index.html` file from a public CDN.
|
||||
|
||||
@ -49,26 +49,26 @@ In this example, we pull the `admin/index.html` file from a public CDN.
|
||||
<title>Content Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
In the code above the `script` is loaded from the `unpkg` CDN. Should there be any issue, `jsDelivr` can be used as an alternative source. Simply set the `src` to `https://cdn.jsdelivr.net/npm/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js`
|
||||
In the code above the `script` is loaded from the `unpkg` CDN. Should there be any issue, `jsDelivr` can be used as an alternative source. Simply set the `src` to `https://cdn.jsdelivr.net/npm/@staticcms/core@%5E0.1.0/dist/static-cms-core.js`
|
||||
|
||||
### Installing with npm
|
||||
|
||||
You can also use Simple CMS as an npm module. Wherever you import Simple CMS, it automatically runs, taking over the current page. Make sure the script that imports it only runs on your CMS page. First install the package and save it to your project:
|
||||
You can also use Static CMS as an npm module. Wherever you import Static CMS, it automatically runs, taking over the current page. Make sure the script that imports it only runs on your CMS page. First install the package and save it to your project:
|
||||
|
||||
```bash
|
||||
npm install @simplecms/simple-cms-core --save
|
||||
npm install @staticcms/core --save
|
||||
```
|
||||
|
||||
Then import it (assuming your project has tooling for imports):
|
||||
|
||||
```js
|
||||
import CMS from '@simplecms/simple-cms-core'
|
||||
import CMS from '@staticcms/core'
|
||||
// Initialize the CMS object
|
||||
CMS.init()
|
||||
// Now the registry is available via the CMS object.
|
||||
@ -83,7 +83,7 @@ Configuration is different for every site, so we'll break it down into parts. A
|
||||
|
||||
We're using [Netlify](https://www.netlify.com) for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.
|
||||
|
||||
For GitHub and GitLab repositories, you can start your Simple CMS `config.yml` file with these lines:
|
||||
For GitHub and GitLab repositories, you can start your Static CMS `config.yml` file with these lines:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -97,7 +97,7 @@ The configuration above specifies your backend protocol and your publication bra
|
||||
|
||||
### Media and Public Folders
|
||||
|
||||
Simple CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example:
|
||||
Static CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example:
|
||||
|
||||
```yaml
|
||||
# This line should *not* be indented
|
||||
@ -116,7 +116,7 @@ public_folder: "/images/uploads" # The src attribute for uploaded media will beg
|
||||
|
||||
The configuration above adds a new setting, `public_folder`. While `media_folder` specifies where uploaded files are saved in the repo, `public_folder` indicates where they are found in the published site. Image `src` attributes use this path, which is relative to the file where it's called. For this reason, we usually start the path at the site root, using the opening `/`.
|
||||
|
||||
*If `public_folder` is not set, Simple CMS defaults to the same value as `media_folder`, adding an opening `/` if one is not included.*
|
||||
*If `public_folder` is not set, Static CMS defaults to the same value as `media_folder`, adding an opening `/` if one is not included.*
|
||||
|
||||
### Collections
|
||||
|
||||
@ -136,7 +136,7 @@ rating: 5
|
||||
This is the post body, where I write about our last chance to party before the Y2K bug destroys us all.
|
||||
```
|
||||
|
||||
Given this example, our `collections` settings would look like this in your Simple CMS `config.yml` file:
|
||||
Given this example, our `collections` settings would look like this in your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
collections:
|
||||
@ -194,7 +194,7 @@ Let's break that down:
|
||||
|
||||
As described above, the `widget` property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the `name` specified for that field. A full listing of available widgets can be found in the [Widgets doc](../widgets).
|
||||
|
||||
Based on this example, you can go through the post types in your site and add the appropriate settings to your Simple CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](../configuration-options/#collections) for more configuration options.
|
||||
Based on this example, you can go through the post types in your site and add the appropriate settings to your Static CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](../configuration-options/#collections) for more configuration options.
|
||||
|
||||
### Filter
|
||||
|
||||
@ -214,7 +214,7 @@ collections:
|
||||
|
||||
## Authentication
|
||||
|
||||
Now that you have your Simple CMS files in place and configured, all that's left is to enable authentication. We're using the [Netlify](https://www.netlify.com/) platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the [Backends](/docs/backends-overview) doc.
|
||||
Now that you have your Static CMS files in place and configured, all that's left is to enable authentication. We're using the [Netlify](https://www.netlify.com/) platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the [Backends](/docs/backends-overview) doc.
|
||||
|
||||
### Setup on Netlify
|
||||
|
||||
@ -265,6 +265,6 @@ If you set your registration preference to "Invite only," invite yourself (and a
|
||||
|
||||
If you left your site registration open, or for return visits after confirming an email invitation, access your site's CMS at `yoursite.com/admin/`.
|
||||
|
||||
**Note:** No matter where you access Simple CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Simple CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.
|
||||
**Note:** No matter where you access Static CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Static CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.
|
||||
|
||||
Happy posting!
|
||||
|
||||
@ -5,7 +5,7 @@ group: Contributing
|
||||
weight: 200
|
||||
---
|
||||
|
||||
Simple CMS is a React application, using Redux for state management with immutable data structures (immutable.js).
|
||||
Static CMS is a React application, using Redux for state management with immutable data structures (immutable.js).
|
||||
|
||||
The core abstractions for content editing are `collections`, `entries`, and `widgets`.
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ title: Azure
|
||||
|
||||
For repositories stored on Azure, the `azure` backend allows CMS users to log in directly with their Azure account. Note that all users must have write access to your content repository for this to work.
|
||||
|
||||
In order to get Simple CMS working with Azure DevOps, you need a Tenant Id and an Application Id.
|
||||
In order to get Static CMS working with Azure DevOps, you need a Tenant Id and an Application Id.
|
||||
|
||||
1. If you do not have an Azure account, [create one here](https://azure.microsoft.com/en-us/free/?WT.mc_id=A261C142F) and make sure to have a credit card linked to the account.
|
||||
2. If you do not have an Azure Active Directory Tenant Id, [set one up here](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-create-new-tenant).
|
||||
@ -15,7 +15,7 @@ In order to get Simple CMS working with Azure DevOps, you need a Tenant Id and a
|
||||
5. [Grant admin consent](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis#admin-consent-button) for the application.
|
||||
6. Under `Authentication->Implicit grant` enable [Access tokens](https://docs.microsoft.com/en-us/azure/active-directory/develop/access-tokens) for the application and click `Save`.
|
||||
7. Verify your Azure DevOps organization is connected to the same directory as your tenant under: `https://dev.azure.com/<organization>/_settings/organizationAad`
|
||||
8. Add the following lines to your Simple CMS `config.yml` file:
|
||||
8. Add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
|
||||
@ -4,7 +4,7 @@ weight: 1
|
||||
title: Overview
|
||||
---
|
||||
|
||||
A backend is JavaScript code that allows Simple CMS to communicate with a service that stores content - typically a Git host like GitHub or GitLab. It provides functions that Simple CMS can use to do things like read and update files using API's provided by the service.
|
||||
A backend is JavaScript code that allows Static CMS to communicate with a service that stores content - typically a Git host like GitHub or GitLab. It provides functions that Static CMS can use to do things like read and update files using API's provided by the service.
|
||||
|
||||
## Backend Configuration
|
||||
|
||||
@ -21,4 +21,4 @@ Individual backends should provide their own configuration documentation, but th
|
||||
|
||||
## Creating a New Backend
|
||||
|
||||
Anyone can write a backend, but we don't yet have a finalized and documented API. If you would like to write your own backend for a service that does not have one currently, we recommend using the [GitHub backend](https://github.com/SimpleCMS/simple-cms/tree/main/src/backends/github) as a reference for API and best practices.
|
||||
Anyone can write a backend, but we don't yet have a finalized and documented API. If you would like to write your own backend for a service that does not have one currently, we recommend using the [GitHub backend](https://github.com/StaticJsCMS/static-cms/tree/main/src/backends/github) as a reference for API and best practices.
|
||||
|
||||
@ -9,7 +9,7 @@ We run new functionality in an open beta format from time to time. That means th
|
||||
|
||||
## Working with a Local Git Repository
|
||||
|
||||
You can connect Simple CMS to a local Git repository, instead of working with a live repo.
|
||||
You can connect Static CMS to a local Git repository, instead of working with a live repo.
|
||||
|
||||
1. Navigate to a local Git repository configured with the CMS.
|
||||
2. Add the top-level property `local_backend` configuration to your `config.yml`:
|
||||
@ -30,7 +30,7 @@ local_backend: true
|
||||
|
||||
**Note:** `netlify-cms-proxy-server` runs an unauthenticated express server. As any client can send requests to the server, it should only be used for local development.
|
||||
|
||||
### Configure the Simple CMS proxy server port number
|
||||
### Configure the Static CMS proxy server port number
|
||||
|
||||
1. Create a `.env` file in the project's root folder and define the PORT you'd like the proxy server to use
|
||||
|
||||
@ -292,7 +292,7 @@ Supports all of the [`slug` templates](/docs/configuration-options#slug) and:
|
||||
|
||||
## List Widget: Variable Types
|
||||
|
||||
Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Simple CMS.
|
||||
Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Static CMS.
|
||||
|
||||
**Note: this feature does not yet support default previews and requires [registering a preview template](/docs/customization#registerpreviewtemplate) in order to show up in the preview pane.**
|
||||
|
||||
@ -372,13 +372,13 @@ sections:
|
||||
|
||||
## Custom Mount Element
|
||||
|
||||
Simple CMS always creates its own DOM element for mounting the application, which means it always takes over the entire page, and is generally inflexible if you're trying to do something creative, like injecting it into a shared context.
|
||||
Static CMS always creates its own DOM element for mounting the application, which means it always takes over the entire page, and is generally inflexible if you're trying to do something creative, like injecting it into a shared context.
|
||||
|
||||
You can now provide your own element for Simple CMS to mount in by setting the target element's ID as `nc-root`. If Simple CMS finds an element with this ID during initialization, it will mount within that element instead of creating its own.
|
||||
You can now provide your own element for Static CMS to mount in by setting the target element's ID as `nc-root`. If Static CMS finds an element with this ID during initialization, it will mount within that element instead of creating its own.
|
||||
|
||||
## Manual Initialization
|
||||
|
||||
Simple CMS can now be manually initialized, rather than automatically loading up the moment you import it. The whole point of this at the moment is to inject configuration into Simple CMS before it loads, bypassing need for an actual Simple CMS `config.yml`. This is important, for example, when creating tight integrations with static site generators.
|
||||
Static CMS can now be manually initialized, rather than automatically loading up the moment you import it. The whole point of this at the moment is to inject configuration into Static CMS before it loads, bypassing need for an actual Static CMS `config.yml`. This is important, for example, when creating tight integrations with static site generators.
|
||||
|
||||
Manual initialization works by setting `window.CMS_MANUAL_INIT = true` **before importing the CMS**:
|
||||
|
||||
@ -386,12 +386,12 @@ Manual initialization works by setting `window.CMS_MANUAL_INIT = true` **before
|
||||
// This global flag enables manual initialization.
|
||||
window.CMS_MANUAL_INIT = true
|
||||
// Usage with import from npm package
|
||||
import CMS, { init } from '@simplecms/simple-cms-core'
|
||||
import CMS, { init } from '@staticcms/core'
|
||||
// Usage with script tag
|
||||
const { CMS, initCMS: init } = window
|
||||
/**
|
||||
* Initialize without passing in config - equivalent to just importing
|
||||
* Simple CMS the old way.
|
||||
* Static CMS the old way.
|
||||
*/
|
||||
init()
|
||||
/**
|
||||
@ -451,18 +451,18 @@ CMS.registerPreviewTemplate(...);
|
||||
* Assumes a webpack project with `sass-loader` and `css-loader` installed.
|
||||
* Takes advantage of the `toString` method in the return value of `css-loader`.
|
||||
*/
|
||||
import CMS from '@simplecms/simple-cms-core';
|
||||
import CMS from '@staticcms/core';
|
||||
import styles from '!css-loader!sass-loader!../main.scss';
|
||||
CMS.registerPreviewStyle(styles.toString(), { raw: true });
|
||||
```
|
||||
|
||||
## Commit Message Templates
|
||||
|
||||
You can customize the templates used by Simple CMS to generate commit messages by setting the `commit_messages` option under `backend` in your Simple CMS `config.yml`.
|
||||
You can customize the templates used by Static CMS to generate commit messages by setting the `commit_messages` option under `backend` in your Static CMS `config.yml`.
|
||||
|
||||
Template tags wrapped in curly braces will be expanded to include information about the file changed by the commit. For example, `{{path}}` will include the full path to the file changed.
|
||||
|
||||
Setting up your Simple CMS `config.yml` to recreate the default values would look like this:
|
||||
Setting up your Static CMS `config.yml` to recreate the default values would look like this:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -474,7 +474,7 @@ backend:
|
||||
deleteMedia: Delete “{{path}}”
|
||||
```
|
||||
|
||||
Simple CMS generates the following commit types:
|
||||
Static CMS generates the following commit types:
|
||||
|
||||
| Commit type | When is it triggered? | Available template tags |
|
||||
| --------------- | ---------------------------------------- | ----------------------------------------------------------- |
|
||||
|
||||
@ -8,7 +8,7 @@ For repositories stored on Bitbucket, the `bitbucket` backend allows CMS users t
|
||||
To enable it:
|
||||
|
||||
1. Follow the authentication provider setup steps in the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider).
|
||||
2. Add the following lines to your Simple CMS `config.yml` file:
|
||||
2. Add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -20,8 +20,8 @@ To enable it:
|
||||
|
||||
With Bitbucket's Implicit Grant, users can authenticate with Bitbucket directly from the client. To do this:
|
||||
|
||||
1. Follow the [Atlassian docs](https://confluence.atlassian.com/bitbucket/oauth-on-bitbucket-cloud-238027431.html) to create an OAuth consumer. Make sure you allow `Account/Read` and `Repository/Write` permissions. For the **Callback URL**, enter the address where you access Simple CMS, for example, `https://www.mysite.com/admin/`.
|
||||
2. Bitbucket gives you a **Key**. Copy this Key and enter it in your Simple CMS `config.yml` file, along with the following settings:
|
||||
1. Follow the [Atlassian docs](https://confluence.atlassian.com/bitbucket/oauth-on-bitbucket-cloud-238027431.html) to create an OAuth consumer. Make sure you allow `Account/Read` and `Repository/Write` permissions. For the **Callback URL**, enter the address where you access Static CMS, for example, `https://www.mysite.com/admin/`.
|
||||
2. Bitbucket gives you a **Key**. Copy this Key and enter it in your Static CMS `config.yml` file, along with the following settings:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
|
||||
@ -5,7 +5,7 @@ weight: 10
|
||||
---
|
||||
Cloudinary is a digital asset management platform with a broad feature set, including support for responsive image generation and url based image transformation. They also provide a powerful media library UI for managing assets, and tools for organizing your assets into a hierarchy.
|
||||
|
||||
The Cloudinary media library integration for Simple CMS uses Cloudinary's own media library interface within Simple CMS. To get started, you'll need a Cloudinary account and Simple CMS 2.3.0 or greater.
|
||||
The Cloudinary media library integration for Static CMS uses Cloudinary's own media library interface within Static CMS. To get started, you'll need a Cloudinary account and Static CMS 2.3.0 or greater.
|
||||
|
||||
## Creating a Cloudinary Account
|
||||
|
||||
@ -13,9 +13,9 @@ You can [sign up for Cloudinary](https://cloudinary.com/users/register/free) for
|
||||
|
||||
|
||||
|
||||
## Connecting Cloudinary to Simple CMS
|
||||
## Connecting Cloudinary to Static CMS
|
||||
|
||||
To use the Cloudinary media library within Simple CMS, you'll need to update your Simple CMS configuration file with the information from your Cloudinary account:
|
||||
To use the Cloudinary media library within Static CMS, you'll need to update your Static CMS configuration file with the information from your Cloudinary account:
|
||||
|
||||
```yaml
|
||||
media_library:
|
||||
@ -25,14 +25,14 @@ media_library:
|
||||
api_key: your_api_key
|
||||
```
|
||||
|
||||
**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Simple CMS configuration.
|
||||
**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Static CMS configuration.
|
||||
|
||||
### Security Considerations
|
||||
Although this setup exposes the `cloud_name` and `api_key` publicly via the `/admin/config.yml` endpoint, this information is not sensitive. Any integration of the Cloudinary media library requires this information to be exposed publicly. To use this library or use the restricted Cloudinary API endpoints, the user must have access to the Cloudinary account login details or the `api_secret` associated with the `cloud_name` and `api_key`.
|
||||
|
||||
## Simple CMS configuration options
|
||||
## Static CMS configuration options
|
||||
|
||||
The following options are specific to the Simple CMS integration for Cloudinary:
|
||||
The following options are specific to the Static CMS integration for Cloudinary:
|
||||
|
||||
* **`output_filename_only`**: _(default: `false`)_\
|
||||
By default, the value provided for a selected image is a complete URL for the asset on Cloudinary's CDN. Setting `output_filename_only` to `true` will instead produce just the filename (e.g. `image.jpg`). This should be `true` if you will be directly embedding cloudinary transformation urls in page templates. Refer to [Inserting Cloudinary URL in page templates](#inserting-cloudinary-url-in-page-templates).
|
||||
@ -43,7 +43,7 @@ The following options are specific to the Simple CMS integration for Cloudinary:
|
||||
|
||||
## Cloudinary configuration options
|
||||
|
||||
The following options are used to configure the media library. All options are listed in Cloudinary's [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options), but only options listed below are available or recommended for the Simple CMS integration:
|
||||
The following options are used to configure the media library. All options are listed in Cloudinary's [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options), but only options listed below are available or recommended for the Static CMS integration:
|
||||
|
||||
### Authentication
|
||||
|
||||
@ -58,7 +58,7 @@ The following options are used to configure the media library. All options are l
|
||||
|
||||
## Image transformations
|
||||
|
||||
The Cloudinary integration allows images to be transformed in two ways: directly within Simple CMS via [Cloudinary's Media Library](#transforming-images-via-media-library), and separately from the CMS via Cloudinary's [dynamic URL's](https://cloudinary.com/documentation/image_transformations#delivering_media_assets_using_dynamic_urls) by [inserting cloudinary urls](#inserting-cloudinary-url-in-page-templates).
|
||||
The Cloudinary integration allows images to be transformed in two ways: directly within Static CMS via [Cloudinary's Media Library](#transforming-images-via-media-library), and separately from the CMS via Cloudinary's [dynamic URL's](https://cloudinary.com/documentation/image_transformations#delivering_media_assets_using_dynamic_urls) by [inserting cloudinary urls](#inserting-cloudinary-url-in-page-templates).
|
||||
|
||||
### Transforming images via Media Library
|
||||
If you transform and insert images from within the Cloudinary media library, the transformed image URL will be output by default. This gives the editor complete freedom to make changes to the image output.
|
||||
|
||||
@ -88,7 +88,7 @@ A `files` collection contains one or more uniquely configured files. Unlike item
|
||||
|
||||
When configuring a `files` collection, configure each file in the collection separately, and list them under the `files` field of the collection. Each file has its own list of `fields` and a unique filepath specified in the `file` field (relative to the base of the repo).
|
||||
|
||||
**Note:** Files listed in a file collection must already exist in the hosted repository branch set in your Simple CMS [backend configuration](/docs/backends-overview). Files must also have a valid value for the file type. For example, an empty file works as valid YAML, but a JSON file must have a non-empty value to be valid, such as an empty object.
|
||||
**Note:** Files listed in a file collection must already exist in the hosted repository branch set in your Static CMS [backend configuration](/docs/backends-overview). Files must also have a valid value for the file type. For example, an empty file works as valid YAML, but a JSON file must have a non-empty value to be valid, such as an empty object.
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: Configuration Options
|
||||
---
|
||||
## Configuration File
|
||||
|
||||
All configuration options for Simple CMS are specified in a `config.yml` file, in the folder where you access the editor UI (usually in the `/admin` folder).
|
||||
All configuration options for Static CMS are specified in a `config.yml` file, in the folder where you access the editor UI (usually in the `/admin` folder).
|
||||
|
||||
Alternatively, you can specify a custom config file using a link tag:
|
||||
|
||||
@ -14,7 +14,7 @@ Alternatively, you can specify a custom config file using a link tag:
|
||||
<link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">
|
||||
```
|
||||
|
||||
To see working configuration examples, you can [start from a template](../start-with-a-template) or check out the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/SimpleCMS/simple-cms/blob/master/dev-test/config.yml) to see how each option was configured.
|
||||
To see working configuration examples, you can [start from a template](../start-with-a-template) or check out the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/master/dev-test/config.yml) to see how each option was configured.
|
||||
|
||||
You can find details about all configuration options below. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
|
||||
|
||||
@ -24,11 +24,11 @@ You can find details about all configuration options below. Note that [YAML synt
|
||||
|
||||
The `backend` option specifies how to access the content for your site, including authentication. Full details and code samples can be found in [Backends](/docs/backends-overview).
|
||||
|
||||
**Note**: no matter where you access Simple CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Simple CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging. If you want to have your local CMS write to a local repository, try the `local_backend` setting, [currently in beta](/docs/beta-features/#working-with-a-local-git-repository).
|
||||
**Note**: no matter where you access Static CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Static CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging. If you want to have your local CMS write to a local repository, try the `local_backend` setting, [currently in beta](/docs/beta-features/#working-with-a-local-git-repository).
|
||||
|
||||
## Media and Public Folders
|
||||
|
||||
Simple CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site.
|
||||
Static CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site.
|
||||
|
||||
### Media Folder
|
||||
|
||||
@ -116,7 +116,7 @@ locale: 'de'
|
||||
And in your custom JavaScript code:
|
||||
|
||||
```js
|
||||
import CMS, { de } from '@simplecms/simple-cms-core';
|
||||
import CMS, { de } from '@staticcms/core';
|
||||
|
||||
CMS.registerLocale('de', de);
|
||||
```
|
||||
@ -165,7 +165,7 @@ slug:
|
||||
|
||||
*This setting is required.*
|
||||
|
||||
The `collections` setting is the heart of your Simple CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Simple CMS `config.yml` file.
|
||||
The `collections` setting is the heart of your Static CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Static CMS `config.yml` file.
|
||||
|
||||
`collections` accepts a list of collection objects, each with the following options:
|
||||
|
||||
@ -196,7 +196,7 @@ The last few options require more detailed information.
|
||||
|
||||
### `identifier_field`
|
||||
|
||||
Simple CMS expects every entry to provide a field named `"title"` that serves as an identifier for the entry. The identifier field serves as an entry's title when viewing a list of entries, and is used in [slug](#slug) creation. If you would like to use a field other than `"title"` as the identifier, you can set `identifier_field` to the name of the other field.
|
||||
Static CMS expects every entry to provide a field named `"title"` that serves as an identifier for the entry. The identifier field serves as an entry's title when viewing a list of entries, and is used in [slug](#slug) creation. If you would like to use a field other than `"title"` as the identifier, you can set `identifier_field` to the name of the other field.
|
||||
|
||||
**Example**
|
||||
|
||||
@ -208,7 +208,7 @@ collections:
|
||||
|
||||
### `extension` and `format`
|
||||
|
||||
These settings determine how collection files are parsed and saved. Both are optional—Simple CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you'd like more control, you can set these fields explicitly.
|
||||
These settings determine how collection files are parsed and saved. Both are optional—Static CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you'd like more control, you can set these fields explicitly.
|
||||
|
||||
`extension` determines the file extension searched for when finding existing entries in a folder collection and it determines the file extension used to save new collection items. It accepts the following values: `yml`, `yaml`, `toml`, `json`, `md`, `markdown`, `html`.
|
||||
|
||||
@ -265,7 +265,7 @@ slug: "{{year}}-{{month}}-{{day}}_{{fields.slug}}"
|
||||
|
||||
### `fields`
|
||||
|
||||
The `fields` option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Simple CMS `config.yml` file determines their order in the editor UI and in the saved file.
|
||||
The `fields` option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Static CMS `config.yml` file determines their order in the editor UI and in the saved file.
|
||||
|
||||
`fields` accepts a list of collection objects, each with the following options:
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@ weight: 20
|
||||
group: Contributing
|
||||
---
|
||||
|
||||
We're hoping that Simple CMS will do for the [Jamstack](https://www.jamstack.org) what WordPress did for dynamic sites back in the day. We know we can't do that without building a thriving community of contributors and users, and we'd love to have you join us.
|
||||
We're hoping that Static CMS will do for the [Jamstack](https://www.jamstack.org) what WordPress did for dynamic sites back in the day. We know we can't do that without building a thriving community of contributors and users, and we'd love to have you join us.
|
||||
|
||||
## Getting started with contributing
|
||||
Being a developer is not a requirement for contributing to Simple CMS, you only need the desire, a web browser, and a [GitHub account](https://github.com/join). The GitHub repo has a step-by-step [guide](https://github.com/SimpleCMS/simple-cms/blob/master/CONTRIBUTING.md) to get started with the code.
|
||||
Being a developer is not a requirement for contributing to Static CMS, you only need the desire, a web browser, and a [GitHub account](https://github.com/join). The GitHub repo has a step-by-step [guide](https://github.com/StaticJsCMS/static-cms/blob/master/CONTRIBUTING.md) to get started with the code.
|
||||
|
||||
## The basics of the Simple CMS docs
|
||||
The documentation for Simple CMS is written in [Markdown](http://daringfireball.net/projects/markdown/) (a good cheatsheet on Markdown is [here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)), with the source residing on [GitHub](https://github.com/SimpleCMS/simple-cms) in the `/website/content/docs` folder.
|
||||
## The basics of the Static CMS docs
|
||||
The documentation for Static CMS is written in [Markdown](http://daringfireball.net/projects/markdown/) (a good cheatsheet on Markdown is [here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)), with the source residing on [GitHub](https://github.com/StaticJsCMS/static-cms) in the `/website/content/docs` folder.
|
||||
|
||||
The GitHub website allows you to submit issues, work with files, search for content, and browse changes that have been submitted in the past and those that are being submitted now (aka Pull Requests).
|
||||
|
||||
@ -18,18 +18,18 @@ The GitHub website allows you to submit issues, work with files, search for cont
|
||||
A [style guide](/docs/writing-style-guide/) is available to help provide context around grammar, code styling, syntax, etc.
|
||||
|
||||
## Filing issues
|
||||
If you have a GitHub account, you can file an [issue](https://github.com/SimpleCMS/simple-cms/issues) (aka bug report) against the Simple CMS docs. Even if you're not able to, or don't know how to, fix the issue (see [Improve existing content](#improve-existing-content)), it helps to start the conversation.
|
||||
If you have a GitHub account, you can file an [issue](https://github.com/StaticJsCMS/static-cms/issues) (aka bug report) against the Static CMS docs. Even if you're not able to, or don't know how to, fix the issue (see [Improve existing content](#improve-existing-content)), it helps to start the conversation.
|
||||
|
||||
When filing an issue, it is important to remember the [Code of Conduct](https://github.com/SimpleCMS/simple-cms/blob/master/CODE_OF_CONDUCT.md).
|
||||
When filing an issue, it is important to remember the [Code of Conduct](https://github.com/StaticJsCMS/static-cms/blob/master/CODE_OF_CONDUCT.md).
|
||||
|
||||
## Improve existing content
|
||||
If you are able to offer up a change to existing content, we welcome this. Once you've forked the repo, and changed the content, you would file a pull request (PR). The repo [Contributing file](https://github.com/SimpleCMS/simple-cms/blob/master/CONTRIBUTING.md) lays out the correct format for PRs.
|
||||
If you are able to offer up a change to existing content, we welcome this. Once you've forked the repo, and changed the content, you would file a pull request (PR). The repo [Contributing file](https://github.com/StaticJsCMS/static-cms/blob/master/CONTRIBUTING.md) lays out the correct format for PRs.
|
||||
|
||||
## Other places to get involved
|
||||
While we work on building this page (and you can help!), here are some links with more information about getting involved:
|
||||
|
||||
* [Setup instructions and Contribution Guidelines](https://github.com/SimpleCMS/simple-cms/blob/master/CONTRIBUTING.md)
|
||||
* [Join our Community Chat](https://simplecms.github.io/simple-cms/chat)
|
||||
* [Code of Conduct](https://github.com/SimpleCMS/simple-cms/blob/master/CODE_OF_CONDUCT.md)
|
||||
* [Project Milestones](https://github.com/SimpleCMS/simple-cms/milestones)
|
||||
* [Good First Issues](https://github.com/SimpleCMS/simple-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22+-label%3Aclaimed)
|
||||
* [Setup instructions and Contribution Guidelines](https://github.com/StaticJsCMS/static-cms/blob/master/CONTRIBUTING.md)
|
||||
* [Join our Community Chat](https://staticjscms.github.io/static-cms/chat)
|
||||
* [Code of Conduct](https://github.com/StaticJsCMS/static-cms/blob/master/CODE_OF_CONDUCT.md)
|
||||
* [Project Milestones](https://github.com/StaticJsCMS/static-cms/milestones)
|
||||
* [Good First Issues](https://github.com/StaticJsCMS/static-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22+-label%3Aclaimed)
|
||||
|
||||
@ -3,7 +3,7 @@ group: Fields
|
||||
weight: 20
|
||||
title: Creating Custom Widgets
|
||||
---
|
||||
The Simple CMS exposes a `window.CMS` a global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Simple CMS as an npm module. The available widget extension methods are:
|
||||
The Static CMS exposes a `window.CMS` a global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Static CMS as an npm module. The available widget extension methods are:
|
||||
|
||||
* **registerWidget:** registers a custom widget.
|
||||
* **registerEditorComponent:** adds a block component to the Markdown editor.
|
||||
@ -12,7 +12,7 @@ The Simple CMS exposes a `window.CMS` a global object that you can use to regist
|
||||
|
||||
The `registerWidget` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
|
||||
|
||||
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Simple CMS exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
|
||||
## `registerWidget`
|
||||
|
||||
@ -23,7 +23,7 @@ Register a custom widget.
|
||||
CMS.registerWidget(name, control, [preview], [schema]);
|
||||
|
||||
// Using npm module import
|
||||
import CMS from '@simplecms/simple-cms-core';
|
||||
import CMS from '@staticcms/core';
|
||||
CMS.registerWidget(name, control, [preview], [schema]);
|
||||
```
|
||||
|
||||
@ -41,7 +41,7 @@ CMS.registerWidget(name, control, [preview], [schema]);
|
||||
`admin/index.html`
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
|
||||
<script>
|
||||
var CategoriesControl = createClass({
|
||||
handleChange: function(e) {
|
||||
@ -116,7 +116,7 @@ CMS.registerEditorComponent(definition)
|
||||
**Example:**
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
|
||||
<script>
|
||||
CMS.registerEditorComponent({
|
||||
// Internal id of the component
|
||||
@ -240,7 +240,7 @@ You can also return a promise from `isValid`. While the promise is pending, the
|
||||
|
||||
## Writing custom widgets as a separate package
|
||||
|
||||
Widgets are inputs for the Simple CMS editor interface. It's a React component that receives user input and outputs a serialized value. Those are the only rules - the component can be extremely simple, like text input, or extremely complicated, like a full-blown markdown editor. They can make calls to external services, and generally do anything that JavaScript can do.
|
||||
Widgets are inputs for the Static CMS editor interface. It's a React component that receives user input and outputs a serialized value. Those are the only rules - the component can be extremely simple, like text input, or extremely complicated, like a full-blown markdown editor. They can make calls to external services, and generally do anything that JavaScript can do.
|
||||
|
||||
For writing custom widgets as a separate package you should follow these steps:
|
||||
|
||||
@ -263,7 +263,7 @@ For writing custom widgets as a separate package you should follow these steps:
|
||||
5. In order to build React components, we need to set up a build step. We'll be using Webpack. Please run the following commands to install the required dependencies:
|
||||
|
||||
```javascript
|
||||
npm install --save-dev @simplecms/simple-cms-core babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader html-webpack-plugin react source-map-loader style-loader webpack webpack-cli webpack-serve
|
||||
npm install --save-dev @staticcms/core babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader html-webpack-plugin react source-map-loader style-loader webpack webpack-cli webpack-serve
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -276,23 +276,23 @@ Here is the content of `package.json` that you will have at the end:
|
||||
|
||||
```javascript
|
||||
{
|
||||
"name": "simple-cms-widget-starter",
|
||||
"description": "A boilerplate for creating Simple CMS widgets.",
|
||||
"name": "static-cms-widget-starter",
|
||||
"description": "A boilerplate for creating Static CMS widgets.",
|
||||
"author": "name of developer",
|
||||
"keywords": [
|
||||
"simple",
|
||||
"simple-cms",
|
||||
"static-cms",
|
||||
"cms",
|
||||
"widget",
|
||||
"starter",
|
||||
"boilerplate"
|
||||
],
|
||||
"version": "0.0.1",
|
||||
"homepage": "https://github.com/SimpleCMS/simple-cms-widget-starter",
|
||||
"homepage": "https://github.com/StaticJsCMS/static-cms-widget-starter",
|
||||
"license": "MIT",
|
||||
"main": "dist/main.js",
|
||||
"devDependencies": {
|
||||
"@simplecms/simple-cms-core": "^0.1.0",
|
||||
"@staticcms/core": "^0.1.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-export-extensions": "^6.22.0",
|
||||
@ -474,7 +474,7 @@ window.CMS_MANUAL_INIT = true
|
||||
|
||||
```javascript
|
||||
import './bootstrap.js'
|
||||
import CMS, { init } from '@simplecms/simple-cms-core'
|
||||
import CMS, { init } from '@staticcms/core'
|
||||
import { Control, Preview } from '../src'
|
||||
|
||||
const config = {
|
||||
@ -502,9 +502,9 @@ CMS.registerWidget('test', Control, Preview)
|
||||
init({ config })
|
||||
```
|
||||
|
||||
### [](https://github.com/SimpleCMS/simple-cms-widget-starter#development)Development
|
||||
### [](https://github.com/StaticJsCMS/static-cms-widget-starter#development)Development
|
||||
|
||||
To run a copy of Simple CMS with your widget for development, use the start script:
|
||||
To run a copy of Static CMS with your widget for development, use the start script:
|
||||
|
||||
```javascript
|
||||
npm start
|
||||
@ -512,7 +512,7 @@ npm start
|
||||
|
||||
Your widget source is in the `src` directory, where there are separate files for the `Control` and `Preview` components.
|
||||
|
||||
### [](https://github.com/SimpleCMS/simple-cms-widget-starter#production--publishing)Production & Publishing
|
||||
### [](https://github.com/StaticJsCMS/static-cms-widget-starter#production--publishing)Production & Publishing
|
||||
|
||||
You'll want to take a few steps before publishing a production built package to npm:
|
||||
|
||||
@ -520,12 +520,12 @@ You'll want to take a few steps before publishing a production built package to
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "simple-cms-widget-starter",
|
||||
"description": "A boilerplate for creating Simple CMS widgets.",
|
||||
"name": "static-cms-widget-starter",
|
||||
"description": "A boilerplate for creating Static CMS widgets.",
|
||||
"author": "name of developer",
|
||||
"keywords": [
|
||||
"simple",
|
||||
"simple-cms",
|
||||
"static-cms",
|
||||
"cms",
|
||||
"widget",
|
||||
"starter",
|
||||
@ -535,9 +535,9 @@ You'll want to take a few steps before publishing a production built package to
|
||||
// ... rest
|
||||
}
|
||||
```
|
||||
2. For discoverability, ensure that your package name follows the pattern `simple-cms-widget-<name>`.
|
||||
2. For discoverability, ensure that your package name follows the pattern `static-cms-widget-<name>`.
|
||||
3. Delete this `README.md`, rename `README_TEMPLATE.md` to `README.md`, and update the new file for your specific widget.
|
||||
4. Rename the exports in `src/index.js`. For example, if your widget is `simple-cms-widget-awesome`, you would do:
|
||||
4. Rename the exports in `src/index.js`. For example, if your widget is `static-cms-widget-awesome`, you would do:
|
||||
|
||||
```javascript
|
||||
if (typeof window !== 'undefined') {
|
||||
|
||||
@ -4,14 +4,14 @@ weight: 50
|
||||
group: Customization
|
||||
---
|
||||
|
||||
The Simple CMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
|
||||
The Static CMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
|
||||
|
||||
* **registerPreviewStyle:** Register a custom stylesheet to use on the preview pane.
|
||||
* **registerPreviewTemplate:** Registers a template for a collection.
|
||||
|
||||
### React Components inline interaction
|
||||
|
||||
Simple CMS is a collection of React components and exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
Static CMS is a collection of React components and exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
|
||||
## `registerPreviewStyle`
|
||||
|
||||
@ -29,7 +29,7 @@ CMS.registerPreviewStyle(file);
|
||||
|
||||
```html
|
||||
// index.html
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
|
||||
<script>
|
||||
CMS.registerPreviewStyle("/example.css");
|
||||
</script>
|
||||
@ -69,7 +69,7 @@ Registers a template for a folder collection or an individual file in a file col
|
||||
**Example:**
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
|
||||
<script>
|
||||
var PostPreview = createClass({
|
||||
render: function() {
|
||||
@ -92,7 +92,7 @@ Registers a template for a folder collection or an individual file in a file col
|
||||
|
||||
### Lists and Objects
|
||||
The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render.
|
||||
**Note**: as is often the case with the Simple CMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.
|
||||
**Note**: as is often the case with the Static CMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.
|
||||
**List Example:**
|
||||
```html
|
||||
<script>
|
||||
|
||||
@ -3,7 +3,7 @@ group: Guides
|
||||
weight: 80
|
||||
title: Docusaurus
|
||||
---
|
||||
This guide instructs you on how to integrate Simple CMS with Docusaurus.
|
||||
This guide instructs you on how to integrate Static CMS with Docusaurus.
|
||||
|
||||
### Before you begin
|
||||
|
||||
@ -33,7 +33,7 @@ The development server now serves your website at `http://localhost:3000`. As yo
|
||||
|
||||
## Push your project to GitHub
|
||||
|
||||
Simple CMS requires a [backend](https://www.simplecms.github.io/simple-cms/docs/backends-overview/) to store content. Simple CMS supports using Git hosts, like GitHub or GitLab, as backends. This guide uses GitHub.
|
||||
Static CMS requires a [backend](https://www.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.
|
||||
|
||||
```bash
|
||||
# 1. Initialize your local Git repository.
|
||||
@ -83,7 +83,7 @@ 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 Simple CMS to your project
|
||||
## Add Static CMS to your project
|
||||
|
||||
### Before you begin
|
||||
|
||||
@ -161,13 +161,13 @@ touch index.html
|
||||
<title>Content Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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 Simple CMS admin interface. You'll use the admin interface to edit your blog posts.
|
||||
`index.html` displays the Static CMS admin interface. You'll use the admin interface to edit your blog posts.
|
||||
|
||||
</li>
|
||||
|
||||
@ -209,7 +209,7 @@ collections:
|
||||
- { name: imageUrl, label: ImageURL, widget: string }
|
||||
```
|
||||
|
||||
`config.yml` specifies what kind of content your blog posts have. The content specification enables Simple CMS to edit existing posts and create new ones with the same format. To learn more, read about Simple CMS' [](https://www.simplecms.github.io/simple-cms/docs/configuration-options/)[Configuration options](https://www.simplecms.github.io/simple-cms/docs/configuration-options/).
|
||||
`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://www.staticjscms.github.io/static-cms/docs/configuration-options/)[Configuration options](https://www.staticjscms.github.io/static-cms/docs/configuration-options/).
|
||||
</li>
|
||||
|
||||
<li>
|
||||
@ -224,7 +224,7 @@ You can now view and edit `2021-11-15-first-blog-post.md` through the admin inte
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add Simple CMS"
|
||||
git commit -m "Add Static CMS"
|
||||
git push
|
||||
```
|
||||
|
||||
@ -236,7 +236,7 @@ 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 Simple CMS to determine whether users have read and write access to `/admin/`. This guide uses GitHub credentials for authentication.
|
||||
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
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ Do you have a great, open source example? Submit a pull request to this page!
|
||||
|
||||
Example | Tools | Type | Source | More info |
|
||||
--- | --- | --- | --- | ---
|
||||
[Gatsby & Simple CMS Meetup Group Template](https://github.com/robertcoopercode/gatsby-netlify-cms) | Gatsby | demo | [robertcoopercode/gatsby-netlify-cms](https://github.com/robertcoopercode/gatsby-netlify-cms) | [blog post](https://blog.logrocket.com/gatsby-netlify-cms-a-perfect-pairing-d50d59d16f67)
|
||||
[Gatsby & Static CMS Meetup Group Template](https://github.com/robertcoopercode/gatsby-netlify-cms) | Gatsby | demo | [robertcoopercode/gatsby-netlify-cms](https://github.com/robertcoopercode/gatsby-netlify-cms) | [blog post](https://blog.logrocket.com/gatsby-netlify-cms-a-perfect-pairing-d50d59d16f67)
|
||||
[This Developing Journey](https://briandouglas.me) | middleman | blog | [bdougie/blog](https://github.com/bdougie/blog) | [blog post](https://www.netlify.com/blog/2017/04/20/creating-a-blog-with-middleman-and-netlify-cms/)
|
||||
[Jamstack Recipes](https://jamstack-cms.netlify.com) | Hugo, Azure | demo | [hlaueriksson/jamstack-cms](https://github.com/hlaueriksson/jamstack-cms) | [blog post](http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/)
|
||||
[Bael](https://bael-theme.jake101.com/) | Vue, Nuxt | blog | [jake-101/bael-template](https://github.com/jake-101/bael-template) | [blog post](https://bael-theme.jake101.com/blog/2018-06-19-top-10-reasons-why)
|
||||
@ -24,12 +24,12 @@ Example | Tools | Type | Source | More info |
|
||||
[Jigsaw Blog Starter Template Demo](https://jigsaw-blog-netlify-netlifycms-template.netlify.com/) | Jigsaw | demo | [erickpatrick/jigsaw-blog-netlify-netlifycms-template](https://github.com/erickpatrick/jigsaw-blog-netlify-netlifycms-template) | [blog post](https://www.erickpatrick.net/blog/augmenting-tightenco-jigsaw-with-netlifycms/)
|
||||
[Nuxt & NetlifyCMS Boilerplate](https://nuxt-netlifycms-boilerplate.netlify.com/) | Vue, Nuxt | demo | [tylermercer/nuxt-netlifycms-boilerplate](https://github.com/tylermercer/nuxt-netlifycms-boilerplate) | [read me](https://github.com/tylermercer/nuxt-netlifycms-boilerplate)
|
||||
[Next.js demo](https://netlifycms-nextjs.netlify.com) | Next.js | blog | [masives/netlifycms-nextjs](https://github.com/masives/netlifycms-nextjs) | [read me](https://github.com/masives/netlifycms-nextjs)
|
||||
[Delog - Jamstack Blog with Simple CMS](https://delog-w3layouts.netlify.com/) | Gatsby, Netlify-CMS | demo | [W3Layouts/gatsby-starter-delog](https://github.com/W3Layouts/gatsby-starter-delog) | [blog post](https://w3layouts.com/articles/delog-gatsby-starter-netlify-cms/)
|
||||
[Simple CMS template for Gridsome](https://netlifycms-gridsome.suits.at/) | Gridsome, Vue | demo | [suits-at/netlifycms-gridsome](https://github.com/suits-at/netlifycms-gridsome) | [read me](https://github.com/suits-at/netlifycms-gridsome)
|
||||
[Delog - Jamstack Blog with Static CMS](https://delog-w3layouts.netlify.com/) | Gatsby, Netlify-CMS | demo | [W3Layouts/gatsby-starter-delog](https://github.com/W3Layouts/gatsby-starter-delog) | [blog post](https://w3layouts.com/articles/delog-gatsby-starter-netlify-cms/)
|
||||
[Static CMS template for Gridsome](https://netlifycms-gridsome.suits.at/) | Gridsome, Vue | demo | [suits-at/netlifycms-gridsome](https://github.com/suits-at/netlifycms-gridsome) | [read me](https://github.com/suits-at/netlifycms-gridsome)
|
||||
[Next.js blogging template for Netlify](https://nextjs-netlify-blog-template.netlify.app/) | Next.js, Netlify | blog | [wutali/nextjs-netlify-blog-template](https://github.com/wutali/nextjs-netlify-blog-template) | [read me](https://github.com/wutali/nextjs-netlify-blog-template)
|
||||
[Simple CMS and OAuth server on AWS](https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth) | Netlify, Pulumi, AWS | blog | [pulumi/examples/aws-ts-netlify-cms-and-oauth](https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth) | [blog post](https://www.pulumi.com/blog/deploying-the-infrastructure-of-oauth-server-for-cms-app/)
|
||||
[Static CMS and OAuth server on AWS](https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth) | Netlify, Pulumi, AWS | blog | [pulumi/examples/aws-ts-netlify-cms-and-oauth](https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth) | [blog post](https://www.pulumi.com/blog/deploying-the-infrastructure-of-oauth-server-for-cms-app/)
|
||||
[Eleventy Starter Boilerplate](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/eleventy-starter-boilerplate-presentation/) | Eleventy, Netlify | demo | [ixartz/Eleventy-Starter-Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate) | [read me](https://github.com/ixartz/Eleventy-Starter-Boilerplate)
|
||||
[Nuxt, Tailwind & NetlifyCMS Boilerplate](https://ntn-boilerplate.netlify.app/) | Vue, Nuxt | demo | [Knogobert/ntn-boilerplate](https://github.com/Knogobert/ntn-boilerplate) | [read me](https://github.com/Knogobert/ntn-boilerplate#readme)
|
||||
[Gatsby & Simple CMS Personal Portfolio](https://kind-mestorf-5a2bc0.netlify.com/) | Gatsby | portfolio | [EarlGeorge/React-Gatsby](https://github.com/EarlGeorge/React-Gatsby) | [read me](https://github.com/EarlGeorge/React-Gatsby/blob/master/README.md)
|
||||
[Gatsby & Static CMS Personal Portfolio](https://kind-mestorf-5a2bc0.netlify.com/) | Gatsby | portfolio | [EarlGeorge/React-Gatsby](https://github.com/EarlGeorge/React-Gatsby) | [read me](https://github.com/EarlGeorge/React-Gatsby/blob/master/README.md)
|
||||
[Gatsby, Tailwind CSS & NetlifyCMS Starter](https://infallible-varahamihira-058515.netlify.app/) | Gatsby v3, Netlify-CMS, Tailwind CSS | demo | [jimmybutton/gatsby-netlifycms-tailwind-starter](https://github.com/jimmybutton/gatsby-netlifycms-tailwind-starter) | [read me](https://github.com/jimmybutton/gatsby-netlifycms-tailwind-starter#readme)
|
||||
[Metalsmith NetlifyCMS Starter](https://metalsmith-netlify-starter.netlify.app/) | Metalsmith and Netlify-CMS | demo | [metalsmith-netlify-starter](https://github.com/wernerglinka/metalsmith-netlify-starter) | [read me](https://github.com/wernerglinka/metalsmith-netlify-starter#readme)
|
||||
@ -3,7 +3,7 @@ title: Gatsby
|
||||
group: Guides
|
||||
weight: 10
|
||||
---
|
||||
This guide will help you get started using Simple CMS and Gatsby.
|
||||
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.*
|
||||
|
||||
@ -34,14 +34,14 @@ 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 Simple CMS.
|
||||
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 Simple CMS to your site
|
||||
## Add Static CMS to your site
|
||||
|
||||
First let's install some dependencies. We'll need `@simplecms/simple-cms-core` and `gatsby-plugin-netlify-cms`. Run the following command in the terminal at the root of 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 @simplecms/simple-cms-core gatsby-plugin-netlify-cms
|
||||
npm install --save @staticcms/core gatsby-plugin-netlify-cms
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
@ -8,12 +8,12 @@ group: Accounts
|
||||
|
||||
## Git Gateway with Netlify
|
||||
|
||||
The [Netlify Identity](https://www.netlify.com/docs/identity/) service can handle the authentication and provides a simple interface for user management. The Simple CMS [featured templates](../start-with-a-template) are working examples of this backend.
|
||||
The [Netlify Identity](https://www.netlify.com/docs/identity/) service can handle the authentication and provides a simple interface for user management. The Static CMS [featured templates](../start-with-a-template) are working examples of this backend.
|
||||
|
||||
To use it in your own project stored on GitHub or GitLab, follow these steps:
|
||||
|
||||
1. Head over to the [Netlify Identity docs](https://www.netlify.com/docs/identity) and follow the steps to get started.
|
||||
2. Add the following lines to your Simple CMS `config.yml` file:
|
||||
2. Add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -28,4 +28,4 @@ If you change ownership on your repository, or convert a repository from public
|
||||
|
||||
You can use [Git Gateway](https://github.com/netlify/git-gateway) without Netlify by setting up your own Git Gateway server and connecting it with your own instance of [GoTrue](https://www.gotrueapi.org) (the open source microservice that powers Netlify Identity), or with any other identity service that can issue JSON Web Tokens (JWT).
|
||||
|
||||
To configure in Simple CMS, use the same `backend` settings in your Simple CMS `config.yml` file as described in Step 2 of the [Git Gateway with Netlify Identity](#git-gateway-with-netlify-identity) instructions above.
|
||||
To configure in Static CMS, use the same `backend` settings in your Static CMS `config.yml` file as described in Step 2 of the [Git Gateway with Netlify Identity](#git-gateway-with-netlify-identity) instructions above.
|
||||
|
||||
@ -5,12 +5,12 @@ title: GitHub
|
||||
---
|
||||
For repositories stored on GitHub, the `github` backend allows CMS users to log in directly with their GitHub account. Note that all users must have push access to your content repository for this to work.
|
||||
|
||||
Because Github [requires a server](https://github.com/SimpleCMS/simple-cms/issues/663#issuecomment-335023723) for authentication, Netlify facilitates basic GitHub authentication.
|
||||
Because Github [requires a server](https://github.com/StaticJsCMS/static-cms/issues/663#issuecomment-335023723) for authentication, Netlify facilitates basic GitHub authentication.
|
||||
|
||||
To enable basic GitHub authentication:
|
||||
|
||||
1. Follow the authentication provider setup steps in the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider).
|
||||
2. Add the following lines to your Simple CMS `config.yml` file:
|
||||
2. Add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -22,4 +22,4 @@ backend:
|
||||
|
||||
## Git Large File Storage (LFS)
|
||||
|
||||
Please note that the GitHub backend **does not** support [git-lfs](https://git-lfs.github.com/), see [this issue](https://github.com/SimpleCMS/simple-cms/issues/1206) for more information.
|
||||
Please note that the GitHub backend **does not** support [git-lfs](https://git-lfs.github.com/), see [this issue](https://github.com/StaticJsCMS/static-cms/issues/1206) for more information.
|
||||
|
||||
@ -19,9 +19,9 @@ When using GitLab's Authorization Code Flow for authentication, you can use Netl
|
||||
|
||||
To enable it:
|
||||
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Simple CMS instance as an OAuth application. For the **Redirect URI**, enter `https://api.netlify.com/auth/done`, and check the box for `api` scope.
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Static CMS instance as an OAuth application. For the **Redirect URI**, enter `https://api.netlify.com/auth/done`, and check the box for `api` scope.
|
||||
2. Follow the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider) to add your new GitLab Application ID and Secret to your Netlify site dashboard.
|
||||
3. In your repository, add the following lines to your Simple CMS `config.yml` file:
|
||||
3. In your repository, add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -34,8 +34,8 @@ backend:
|
||||
|
||||
With GitLab's PKCE authorization, users can authenticate with GitLab directly from the client. To do this:
|
||||
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Simple CMS instance as an OAuth application and uncheck the **Confidential** checkbox. For the **Redirect URI**, enter the address where you access Simple CMS, for example, `https://www.mysite.com/admin/`. For scope, select `api`.
|
||||
2. GitLab gives you an **Application ID**. Copy this ID and enter it in your Simple CMS `config.yml` file, along with the following settings:
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Static CMS instance as an OAuth application and uncheck the **Confidential** checkbox. For the **Redirect URI**, enter the address where you access Static CMS, for example, `https://www.mysite.com/admin/`. For scope, select `api`.
|
||||
2. GitLab gives you an **Application ID**. Copy this ID and enter it in your Static CMS `config.yml` file, along with the following settings:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
@ -64,8 +64,8 @@ With GitLab's PKCE authorization, users can authenticate with GitLab directly fr
|
||||
|
||||
With GitLab's Implicit Grant, users can authenticate with GitLab directly from the client. To do this:
|
||||
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Simple CMS instance as an OAuth application and uncheck the **Confidential** checkbox. For the **Redirect URI**, enter the address where you access Simple CMS, for example, `https://www.mysite.com/admin/`. For scope, select `api`.
|
||||
2. GitLab gives you an **Application ID**. Copy this ID and enter it in your Simple CMS `config.yml` file, along with the following settings:
|
||||
1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Static CMS instance as an OAuth application and uncheck the **Confidential** checkbox. For the **Redirect URI**, enter the address where you access Static CMS, for example, `https://www.mysite.com/admin/`. For scope, select `api`.
|
||||
2. GitLab gives you an **Application ID**. Copy this ID and enter it in your Static CMS `config.yml` file, along with the following settings:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
|
||||
@ -3,7 +3,7 @@ group: Guides
|
||||
weight: 70
|
||||
title: Gridsome
|
||||
---
|
||||
This guide will help you get started using Simple CMS and Gridsome.
|
||||
This guide will help you get started using Static CMS and Gridsome.
|
||||
|
||||
## How to install Gridsome
|
||||
### 1. Install Gridsome CLI tool
|
||||
@ -29,15 +29,15 @@ cd gridsome-netlify-blog
|
||||
gridsome develop
|
||||
```
|
||||
|
||||
### Install Simple CMS the required dependencies to your project
|
||||
### Install Static CMS the required dependencies to your project
|
||||
|
||||
```bash
|
||||
|
||||
# Using Yarn
|
||||
yarn add @simplecms/simple-cms-core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
|
||||
yarn add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
|
||||
|
||||
# Using NPM
|
||||
npm add @simplecms/simple-cms-core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
|
||||
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:
|
||||
@ -73,7 +73,7 @@ module.exports = {
|
||||
|
||||
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.
|
||||
|
||||
## Simple CMS setup
|
||||
## Static CMS setup
|
||||
|
||||
1. Create an `admin` directory inside the `src`
|
||||
2. Create an `uploads` directory inside the root of your project
|
||||
@ -87,7 +87,7 @@ Your `index.html` should look like this:
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Simple CMS</title>
|
||||
<title>Static CMS</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js" type="module"></script>
|
||||
@ -98,7 +98,7 @@ Your `index.html` should look like this:
|
||||
Your `index.js` should look like this:
|
||||
|
||||
```js
|
||||
import CMS from "@simplecms/simple-cms-core"
|
||||
import CMS from "@staticcms/core"
|
||||
```
|
||||
|
||||
Your `config.yml` for GitHub should look like this:
|
||||
|
||||
@ -5,7 +5,7 @@ weight: 20
|
||||
---
|
||||
## Introduction
|
||||
|
||||
This guide will walk you through how to integrate Simple 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/)!
|
||||
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
|
||||
|
||||
@ -56,13 +56,13 @@ You'll also add some files to the `content/` and `data/` directories to make sur
|
||||
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 Simple CMS.
|
||||
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 Simple CMS
|
||||
## Getting Started With Static CMS
|
||||
|
||||
### Add the Simple CMS files to Hugo
|
||||
### 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 Simple 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:
|
||||
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>
|
||||
@ -75,8 +75,8 @@ In Hugo, static files that don't need to be processed by the build commands live
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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>
|
||||
```
|
||||
@ -147,9 +147,9 @@ Back in your [Netlify dashboard](https://app.netlify.com/):
|
||||
|
||||
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 Simple CMS, feel free to check out the [Simple CMS configuration options documentation](/docs/configuration-options/).
|
||||
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 Simple CMS content in Hugo
|
||||
## Using Static CMS content in Hugo
|
||||
|
||||
### Creating a list of posts
|
||||
|
||||
@ -198,13 +198,13 @@ Create a file `layouts/blog/single.html`, and put the following content in there
|
||||
</html>
|
||||
```
|
||||
|
||||
You can see this basic template includes all the fields you've specified in your Simple CMS `config.yml` file. You can access any custom front-matter fields with `.Params.<field-name>`!
|
||||
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>`!
|
||||
|
||||
### Using Hugo shortcodes in the Markdown Editor
|
||||
|
||||
Using `registerEditorComponent` we can register a block level component for the Markdown editor. You can use it to add Hugo's inbuilt shortcodes like `gist`,`youtube` and others as block components to the markdown editor.
|
||||
|
||||
You can refer to [registering editor components](https://www.simplecms.github.io/simple-cms/docs/custom-widgets/#registereditorcomponent) for a getting started guide or for creating your own editor components.
|
||||
You can refer to [registering editor components](https://www.staticjscms.github.io/static-cms/docs/custom-widgets/#registereditorcomponent) for a getting started guide or for creating your own editor components.
|
||||
|
||||
**Example**
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@ group: Intro
|
||||
weight: 1
|
||||
---
|
||||
|
||||
Simple CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
|
||||
Static CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
|
||||
|
||||
At its core, Simple CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:
|
||||
At its core, Static CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:
|
||||
|
||||
* **Fast, web-based UI:** With rich-text editing, real-time preview, and drag-and-drop media uploads.
|
||||
* **Platform agnostic:** Works with most static site generators.
|
||||
@ -18,7 +18,7 @@ At its core, Simple CMS is an open-source React app that acts as a wrapper for t
|
||||
### Find out more
|
||||
|
||||
- Get a feel for the UI in the [demo site](https://cms-demo.netlify.com). (No login required. Click the login button to go straight to the CMS editor UI.)
|
||||
- [Start with a template](../start-with-a-template/) to make a Simple CMS-enabled site of your own.
|
||||
- [Start with a template](../start-with-a-template/) to make a Static CMS-enabled site of your own.
|
||||
- Configure your existing site by following a [tutorial](../add-to-your-site/) or checking [configuration options](../configuration-options).
|
||||
- Ask questions and share ideas in the Simple CMS [community chat](https://simplecms.github.io/simple-cms/chat).
|
||||
- Ask questions and share ideas in the Static CMS [community chat](https://staticjscms.github.io/static-cms/chat).
|
||||
- Get involved in new developments and become a [contributor](../contributor-guide/).
|
||||
|
||||
@ -5,19 +5,19 @@ title: Jekyll
|
||||
---
|
||||
## Introduction
|
||||
|
||||
This section will help you integrate Simple CMS with a new or existing Jekyll project.
|
||||
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 Simple CMS is to [deploy a template on Netlify](https://templates.netlify.com/).
|
||||
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 Simple CMS
|
||||
## Add Static CMS
|
||||
|
||||
### Add admin/index.html
|
||||
|
||||
@ -35,8 +35,8 @@ Create a file `admin/index.html` in the root of your repo - it should look like
|
||||
<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 Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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>
|
||||
```
|
||||
@ -62,15 +62,15 @@ collections:
|
||||
|
||||
### Enable authentication for CMS users
|
||||
|
||||
Simple 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.
|
||||
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](https://www.simplecms.github.io/simple-cms/docs/add-to-your-site/#enable-identity-and-git-gateway) for the backend, then [add the Identity widget](https://www.simplecms.github.io/simple-cms/docs/add-to-your-site/#add-the-netlify-identity-widget) to render a login portal on the frontend.
|
||||
Follow the directions in the Introduction section to [enable Netlify Identity and Git Gateway services](https://www.staticjscms.github.io/static-cms/docs/add-to-your-site/#enable-identity-and-git-gateway) for the backend, then [add the Identity widget](https://www.staticjscms.github.io/static-cms/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 Simple CMS. Copy and paste the following into your `config.yml`.
|
||||
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:
|
||||
@ -93,15 +93,15 @@ 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 Simple CMS does not pull date information from the filename and requires a frontmatter `date` field. **Note** Changing the `date` or `title` fields in Simple CMS will not update the filename. This has a few implications:
|
||||
* 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 Simple CMS, Jekyll won't notice
|
||||
* 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 Simple 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.
|
||||
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_name: jill
|
||||
@ -109,7 +109,7 @@ name: Jill Smith
|
||||
position: Chief Editor
|
||||
```
|
||||
|
||||
`name` has special meaning as a unique identifier in Simple 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.
|
||||
`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
|
||||
name: jill
|
||||
@ -190,7 +190,7 @@ Next, copy and paste the following into the collections array in `config.yml` be
|
||||
- { 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](https://www.simplecms.github.io/simple-cms/docs/widgets/#relation) to define the relationship between blog posts and authors.
|
||||
Now that we have the `authors` collection configured, we can add an `author` field to the `blog` collection. We'll use the [relation widget](https://www.staticjscms.github.io/static-cms/docs/widgets/#relation) to define the relationship between blog posts and authors.
|
||||
|
||||
```yaml
|
||||
# updated fields in blog collection configuration
|
||||
@ -214,7 +214,7 @@ With that configuration added, you should be able to select the author for a pos
|
||||
|
||||
### 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. Simple CMS provides [file collections](https://www.simplecms.github.io/simple-cms/docs/collection-types/#file-collections) to solve this problem.
|
||||
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](https://www.staticjscms.github.io/static-cms/docs/collection-types/#file-collections) to solve this problem.
|
||||
|
||||
Copy and paste the following into the collections array in `config.yml`
|
||||
|
||||
@ -235,7 +235,7 @@ Copy and paste the following into the collections array in `config.yml`
|
||||
|
||||
### Navigation
|
||||
|
||||
The last aspect of our Jekyll blog we might want to bring under the control of Simple 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.
|
||||
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
|
||||
@ -249,7 +249,7 @@ The last aspect of our Jekyll blog we might want to bring under the control of S
|
||||
link: /staff.html
|
||||
```
|
||||
|
||||
To make this file editable with Simple CMS, we'll need to make one minor tweak. The issue is this file contains a yaml array at the top level, but Simple CMS is designed to work with yaml objects. Update `_data/navigation.yml` so it looks like so.
|
||||
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
|
||||
|
||||
@ -3,7 +3,7 @@ title: Middleman
|
||||
group: Guides
|
||||
weight: 60
|
||||
---
|
||||
This guide will help you get started using Simple CMS and Middleman.
|
||||
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:
|
||||
@ -77,7 +77,7 @@ Time to load our articles in `index.html.erb`.
|
||||
```
|
||||
|
||||
### Add an article layout
|
||||
In the last step before we add Simple 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:
|
||||
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 %>
|
||||
@ -86,9 +86,9 @@ In the last step before we add Simple CMS, we add a layout for the article page.
|
||||
<%= yield %>
|
||||
```
|
||||
|
||||
Now that we have a functioning blog, let's get started with Simple CMS!
|
||||
Now that we have a functioning blog, let's get started with Static CMS!
|
||||
|
||||
## Add Simple CMS to your site
|
||||
## 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
|
||||
@ -102,7 +102,7 @@ Create two files in a new folder called `admin`, `index.html` and `config.yml`.
|
||||
```
|
||||
|
||||
|
||||
In the newly created `index.html` we add scripts for Simple CMS and the Netlify Identity Widget:
|
||||
In the newly created `index.html` we add scripts for Static CMS and the Netlify Identity Widget:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
@ -111,11 +111,11 @@ In the newly created `index.html` we add scripts for Simple CMS and the Netlify
|
||||
<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>Simple CMS</title>
|
||||
<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/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js" type="text/javascript"></script>
|
||||
<script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -6,17 +6,17 @@ weight: 20
|
||||
|
||||
[Netlify Large Media](https://www.netlify.com/features/large-media/) is a [Git LFS](https://git-lfs.github.com/) implementation for repositories connected to Netlify sites. This means that you can use Git to work with large asset files like images, audio, and video, without bloating your repository. It does this by replacing the asset files in your repository with text pointer files, then uploading the assets to the Netlify Large Media storage service.
|
||||
|
||||
If you have a Netlify site with Large Media enabled, Simple CMS (version 2.6.0 and above) will handle Large Media asset files seamlessly, in the same way as files stored directly in the repository.
|
||||
If you have a Netlify site with Large Media enabled, Static CMS (version 2.6.0 and above) will handle Large Media asset files seamlessly, in the same way as files stored directly in the repository.
|
||||
|
||||
## Requirements
|
||||
|
||||
To use Netlify Large Media with Simple CMS, you will need to do the following:
|
||||
To use Netlify Large Media with Static CMS, you will need to do the following:
|
||||
|
||||
- [Upgrade Simple CMS](/docs/update-the-cms-version/) to version 2.6.0 or above.
|
||||
- Configure Simple CMS to use the [Git Gateway backend with Netlify Identity](/docs/git-gateway-backend/#git-gateway-with-netlify-identity).
|
||||
- [Upgrade Static CMS](/docs/update-the-cms-version/) to version 2.6.0 or above.
|
||||
- Configure Static CMS to use the [Git Gateway backend with Netlify Identity](/docs/git-gateway-backend/#git-gateway-with-netlify-identity).
|
||||
- Configure the Netlify site and connected repository to use Large Media, following the [Large Media docs on Netlify](https://www.netlify.com/docs/large-media/).
|
||||
|
||||
When these are complete, you can use Simple CMS as normal, and the configured asset files will automatically be handled by Netlify Large Media.
|
||||
When these are complete, you can use Static CMS as normal, and the configured asset files will automatically be handled by Netlify Large Media.
|
||||
|
||||
## Image transformations
|
||||
|
||||
@ -26,7 +26,7 @@ You can learn more about this feature in [Netlify's image transformation docs](h
|
||||
|
||||
### Transformation control for media gallery thumbnails
|
||||
|
||||
In repositories enabled with Netlify Large Media, Simple CMS will use the image transformation query parameters to load thumbnail-sized images for the media gallery view. This makes images in the media gallery load significantly faster.
|
||||
In repositories enabled with Netlify Large Media, Static CMS will use the image transformation query parameters to load thumbnail-sized images for the media gallery view. This makes images in the media gallery load significantly faster.
|
||||
|
||||
**Note:** When using this option all tracked file types have to be imported into Large Media. For example if you track `*.jpg` but still have jpg-files that are not imported into Large Media the backend will throw an error. Check the [netlify docs](https://docs.netlify.com/large-media/setup/#migrate-files-from-git-history) on how to add previously committed files to Large Media.
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ group: Guides
|
||||
weight: 40
|
||||
title: NextJS
|
||||
---
|
||||
This guide will help you get started using Simple CMS with NextJS.
|
||||
This guide will help you get started using Static CMS with NextJS.
|
||||
|
||||
## Creating a new project
|
||||
|
||||
@ -69,7 +69,7 @@ cats:
|
||||
---
|
||||
Welcome to my awesome page about cats of the internet.
|
||||
|
||||
This page is built with NextJS, and content is managed in Simple CMS
|
||||
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:
|
||||
@ -128,9 +128,9 @@ Great! We now have a page that displays content from our Markdown file. Go ahead
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Adding Simple CMS
|
||||
## Adding Static CMS
|
||||
|
||||
There are many different ways to add Simple 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):
|
||||
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
|
||||
@ -142,7 +142,7 @@ touch index.html
|
||||
touch config.yml
|
||||
```
|
||||
|
||||
Paste HTML for Simple CMS into your `public/admin/index.html` file (check out the [Add Netlify To Your Site](https://www.simplecms.github.io/simple-cms/docs/add-to-your-site/) section for more information)
|
||||
Paste HTML for Static CMS into your `public/admin/index.html` file (check out the [Add Netlify To Your Site](https://www.staticjscms.github.io/static-cms/docs/add-to-your-site/) section for more information)
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
@ -154,8 +154,8 @@ Paste HTML for Simple CMS into your `public/admin/index.html` file (check out th
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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>
|
||||
```
|
||||
@ -189,9 +189,9 @@ collections:
|
||||
- { label: "Description", name: "description", widget: "text"}
|
||||
```
|
||||
|
||||
Awesome! Simple 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.
|
||||
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 Simple 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).
|
||||
**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
|
||||
|
||||
@ -229,6 +229,6 @@ Netlify's Identity and Git Gateway services allow you to manage CMS admin users
|
||||
|
||||
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](https://www.simplecms.github.io/simple-cms/docs/add-to-your-site) section.
|
||||
**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](https://www.staticjscms.github.io/static-cms/docs/add-to-your-site) section.
|
||||
|
||||
Congratulations - you can finally manage your new list of cats!
|
||||
|
||||
@ -3,7 +3,7 @@ group: Guides
|
||||
weight: 50
|
||||
title: Nuxt
|
||||
---
|
||||
This guide will walk you through how to integrate Simple CMS with Nuxt.
|
||||
This guide will walk you through how to integrate Static CMS with Nuxt.
|
||||
|
||||
## Starting With `create-nuxt-app`
|
||||
|
||||
@ -15,11 +15,11 @@ cd <name-of-your-new-project>
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Setting Up Simple CMS
|
||||
## Setting Up Static CMS
|
||||
|
||||
### Add the Simple CMS files to Nuxt
|
||||
### 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 [Simple CMS documentation](/docs/add-to-your-site/), we'll set the content of `static/admin/index.html` to the following:
|
||||
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>
|
||||
@ -32,8 +32,8 @@ In the `static/` directory, create a new directory `admin/`. Inside that directo
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Simple CMS -->
|
||||
<script src="https://unpkg.com/@simplecms/simple-cms-core@%5E0.1.0/dist/simple-cms-core.js"></script>
|
||||
<!-- 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>
|
||||
```
|
||||
@ -135,7 +135,7 @@ Once you've reached this point, you should be able to access the CMS in your bro
|
||||
|
||||
## Using nuxt/content
|
||||
|
||||
Simple 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.
|
||||
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
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ weight: 4
|
||||
|
||||
## Update the CMS Version
|
||||
|
||||
The update procedure for your CMS depends upon the method you used to install Simple CMS.
|
||||
The update procedure for your CMS depends upon the method you used to install Static CMS.
|
||||
|
||||
### Package Manager
|
||||
|
||||
|
||||
@ -4,31 +4,31 @@ group: Guides
|
||||
weight: 1
|
||||
---
|
||||
|
||||
The process for adding Simple CMS to a static site can be divided into four main steps:
|
||||
The process for adding Static CMS to a static site can be divided into four main steps:
|
||||
|
||||
### Install Simple CMS
|
||||
### 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 Simple 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/).
|
||||
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 Simple CMS using a configuration file
|
||||
### 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 Simple CMS as web pages
|
||||
### Render the content provided by Static CMS as web pages
|
||||
|
||||
Simple CMS manages your content, and provides admin features, but it doesn't deliver content. It only makes your content available through an API.
|
||||
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 Simple CMS and reformat them for delivery to end users, please refer the dedicated section for your site generator in the Table of Content.
|
||||
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 Simple 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/beta-features/#working-with-a-local-git-repository).
|
||||
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/beta-features/#working-with-a-local-git-repository).
|
||||
|
||||
@ -3,7 +3,7 @@ group: Intro
|
||||
weight: 2
|
||||
title: Start with a Template
|
||||
---
|
||||
You can add Simple CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Simple CMS to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
|
||||
You can add Static CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Static CMS to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
|
||||
|
||||
<div style="display: flex; justify-content: left; text-align: center; margin-bottom: 1.5em; flex-wrap: wrap;"stack=cms>
|
||||
<div style="flex-basis: 33%">
|
||||
@ -66,20 +66,20 @@ You can add Simple CMS [to an existing site](/docs/add-to-your-site/), but the q
|
||||
|
||||
After clicking one of those buttons, authenticate with GitHub or GitLab and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub or GitLab account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.
|
||||
|
||||
**Note for Bitbucket users:** Simple CMS supports Bitbucket repositories, but Bitbucket's permissions won't work with the Deploy to Netlify buttons above. You can still set up a repository manually, or follow the [tutorial](/docs/add-to-your-site) for adding Simple CMS to an existing site.
|
||||
**Note for Bitbucket users:** Static CMS supports Bitbucket repositories, but Bitbucket's permissions won't work with the Deploy to Netlify buttons above. You can still set up a repository manually, or follow the [tutorial](/docs/add-to-your-site) for adding Static CMS to an existing site.
|
||||
|
||||
## Access Simple CMS on your new site
|
||||
## Access Static CMS on your new site
|
||||
|
||||
1. The template deploy process sends you an invitation to your new site, sent from `no-reply@netlify.com`.
|
||||
|
||||
|
||||
2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
|
||||
|
||||
|
||||
3. Enter a password, sign in, and you’ll go to the CMS. (For future visits, you can go straight to `<yoursiteaddress.com>/admin/`.)
|
||||
|
||||
Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.
|
||||
|
||||
## More paths to explore
|
||||
|
||||
* To see how to integrate Simple CMS into an existing project, go to [Add to your site](/docs/add-to-your-site/).
|
||||
* Check out other sites using Simple CMS (or share your own!) on the [Examples](/docs/examples/) page.
|
||||
* To see how to integrate Static CMS into an existing project, go to [Add to your site](/docs/add-to-your-site/).
|
||||
* Check out other sites using Static CMS (or share your own!) on the [Examples](/docs/examples/) page.
|
||||
* If you’d like to add more CMS editors or change how they log in to your site, read up on [Netlify Identity service](https://www.netlify.com/docs/identity).
|
||||
@ -4,11 +4,11 @@ group: Accounts
|
||||
weight: 50
|
||||
---
|
||||
|
||||
You can use the `test-repo` backend to try out Simple CMS without connecting to a Git repo. With this backend, you can write and publish content normally, but any changes will disappear when you reload the page. This backend powers the Simple CMS [demo site](https://cms-demo.netlify.com/).
|
||||
You can use the `test-repo` backend to try out Static CMS without connecting to a Git repo. With this backend, you can write and publish content normally, but any changes will disappear when you reload the page. This backend powers the Static CMS [demo site](https://cms-demo.netlify.com/).
|
||||
|
||||
**Note:** The `test-repo` backend can't access your local file system, nor does it connect to a Git repo, thus you won't see any existing files while using it.
|
||||
|
||||
To enable this backend, add the following lines to your Simple CMS `config.yml` file:
|
||||
To enable this backend, add the following lines to your Static CMS `config.yml` file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
|
||||
@ -5,17 +5,17 @@ weight: 30
|
||||
---
|
||||
Uploadcare is a sleek service that allows you to upload files without worrying about maintaining a growing collection — more of an asset store than a library. Just upload when you need to, and the files are hosted on their CDN. They provide image processing controls from simple cropping and rotation to filters and face detection, and a lot more. You can check out Uploadcare's full feature set on their [website](https://uploadcare.com/).
|
||||
|
||||
The Uploadcare media library integration for Simple CMS allows you to use Uploadcare as your media handler within the CMS itself. It's available by default as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it only requires creating an Uploadcare account and updating your Simple CMS configuration.
|
||||
The Uploadcare media library integration for Static CMS allows you to use Uploadcare as your media handler within the CMS itself. It's available by default as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it only requires creating an Uploadcare account and updating your Static CMS configuration.
|
||||
|
||||
**Please make sure that Simple CMS is updated to 2.1.0 or greater before proceeding.**
|
||||
**Please make sure that Static CMS is updated to 2.1.0 or greater before proceeding.**
|
||||
|
||||
## Creating an Uploadcare Account
|
||||
|
||||
You can [sign up](https://uploadcare.com/accounts/signup/) for a free Uploadcare account to get started. Once you've signed up, go to your dashboard, select a project, and then select "API keys" from the menu on the left. The public key on the API keys page will be needed in your Simple CMS configuration. For more info on getting your API key, visit their [walkthrough](https://uploadcare.com/docs/keys/).
|
||||
You can [sign up](https://uploadcare.com/accounts/signup/) for a free Uploadcare account to get started. Once you've signed up, go to your dashboard, select a project, and then select "API keys" from the menu on the left. The public key on the API keys page will be needed in your Static CMS configuration. For more info on getting your API key, visit their [walkthrough](https://uploadcare.com/docs/keys/).
|
||||
|
||||
## Updating Simple CMS Configuration
|
||||
## Updating Static CMS Configuration
|
||||
|
||||
The next and final step is updating your Simple CMS configuration file:
|
||||
The next and final step is updating your Static CMS configuration file:
|
||||
|
||||
1. Add a `media_library` property at the same level as `media_folder`, with an object as it's value.
|
||||
2. In the `media_library` object, add the name of the media player under `name`.
|
||||
@ -30,15 +30,15 @@ media_library:
|
||||
publicKey: YOUR_UPLOADCARE_PUBLIC_KEY
|
||||
```
|
||||
|
||||
Once you've finished updating your Simple CMS configuration, the Uploadcare widget will appear when using the image or file widgets.
|
||||
Once you've finished updating your Static CMS configuration, the Uploadcare widget will appear when using the image or file widgets.
|
||||
|
||||
**Note:** You'll need to [register the media libraries yourself](https://www.simplecms.github.io/simple-cms/blog/2019/07/netlify-cms-gatsby-plugin-4-0-0#using-media-libraries-with-netlify-cms-app).
|
||||
**Note:** You'll need to [register the media libraries yourself](https://www.staticjscms.github.io/static-cms/blog/2019/07/netlify-cms-gatsby-plugin-4-0-0#using-media-libraries-with-netlify-cms-app).
|
||||
|
||||
## Configuring the Uploadcare Widget
|
||||
|
||||
The Uploadcare widget can be configured with settings that are outlined [in their docs](https://uploadcare.com/docs/file_uploads/widget/options/). The widget itself accepts configuration through global variables and data properties on HTML elements, but with Simple CMS you can pass configuration options directly through your `config.yml`.
|
||||
The Uploadcare widget can be configured with settings that are outlined [in their docs](https://uploadcare.com/docs/file_uploads/widget/options/). The widget itself accepts configuration through global variables and data properties on HTML elements, but with Static CMS you can pass configuration options directly through your `config.yml`.
|
||||
|
||||
**Note:** all default values described in Uploadcare's documentation also apply in the Simple CMS integration, except for `previewStep`, which is set to `true`. This was done because the preview step provides helpful information like upload status, and provides access to image editing controls. This option can be disabled through the configuration options below.
|
||||
**Note:** all default values described in Uploadcare's documentation also apply in the Static CMS integration, except for `previewStep`, which is set to `true`. This was done because the preview step provides helpful information like upload status, and provides access to image editing controls. This option can be disabled through the configuration options below.
|
||||
|
||||
### Global configuration
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@ group: Fields
|
||||
weight: 10
|
||||
---
|
||||
|
||||
Widgets define the data type and interface for entry fields. Simple CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. We’re always adding new widgets, and you can also [create your own](../custom-widgets)!
|
||||
Widgets define the data type and interface for entry fields. Static CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. We’re always adding new widgets, and you can also [create your own](../custom-widgets)!
|
||||
|
||||
Widgets are specified as collection fields in the Simple CMS `config.yml` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
|
||||
Widgets are specified as collection fields in the Static CMS `config.yml` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
|
||||
|
||||
To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/SimpleCMS/simple-cms/blob/master/dev-test/config.yml) to see how each field was configured.
|
||||
To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/master/dev-test/config.yml) to see how each field was configured.
|
||||
|
||||
## Common widget options
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ The markdown widget provides a full fledged text editor allowing users to format
|
||||
* `default`: accepts markdown content
|
||||
* `minimal`: accepts a boolean value, `false` by default. Sets the widget height to minimum possible.
|
||||
* `buttons`: an array of strings representing the formatting buttons to display (all shown by default). Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `heading-three`, `heading-four`, `heading-five`, `heading-six`, `quote`, `bulleted-list`, and `numbered-list`.
|
||||
* `editor_components`: an array of strings representing the names of editor components to display (all shown by default). Simple CMS includes `image` and `code-block` editor components by default, and custom components may be [created and registered](/docs/custom-widgets/#registereditorcomponent).
|
||||
* `editor_components`: an array of strings representing the names of editor components to display (all shown by default). Static CMS includes `image` and `code-block` editor components by default, and custom components may be [created and registered](/docs/custom-widgets/#registereditorcomponent).
|
||||
* `modes`: an array of strings representing the names of allowed editor modes. Possible modes are `raw` and `rich_text`. A toggle button appears in the toolbar when more than one mode is available.
|
||||
* `sanitize_preview`: accepts a boolean value, `false` by default. Sanitizes markdown preview to prevent XSS attacks - might alter the preview content.
|
||||
* **Example:**
|
||||
|
||||
@ -4,7 +4,7 @@ weight: 30
|
||||
group: Contributing
|
||||
---
|
||||
|
||||
# Simple CMS Style Guide
|
||||
# Static CMS Style Guide
|
||||
_Adapted from the [Kubernetes Style Guide](https://kubernetes.io/docs/contribute/style/style-guide)_
|
||||
|
||||
## Documentation Formatting Standards
|
||||
@ -217,7 +217,7 @@ Do: Version 1.4 includes …
|
||||
Don't: In version 1.4, we have added …
|
||||
_____
|
||||
|
||||
Do: Simple CMS provides a new feature for …
|
||||
Do: Static CMS provides a new feature for …
|
||||
|
||||
Don't: We provide a new feature …
|
||||
_____
|
||||
|
||||
@ -5,18 +5,18 @@ subhead: Get support, give support, and find out what's new through the channels
|
||||
sections:
|
||||
- title: support
|
||||
channels:
|
||||
- title: Simple CMS Slack
|
||||
description: Live community chat for all things Simple CMS.
|
||||
- title: Static CMS Slack
|
||||
description: Live community chat for all things Static CMS.
|
||||
url: /chat
|
||||
- title: Simple CMS Community
|
||||
- title: Static CMS Community
|
||||
description: Ask and answer questions on GitHub discussions tab.
|
||||
url: https://github.com/SimpleCMS/simple-cms/discussions
|
||||
url: https://github.com/StaticJsCMS/static-cms/discussions
|
||||
- title: GitHub Issues
|
||||
description: Report bugs, request features, and comment on existing issues.
|
||||
url: https://github.com/SimpleCMS/simple-cms/issues
|
||||
url: https://github.com/StaticJsCMS/static-cms/issues
|
||||
- title: development
|
||||
channels:
|
||||
- title: Planning
|
||||
description: Issues board on the Simple CMS GitHub repo.
|
||||
url: https://github.com/orgs/SimpleCMS/projects/1
|
||||
description: Issues board on the Static CMS GitHub repo.
|
||||
url: https://github.com/orgs/StaticJsCMS/projects/1
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user