Skip to content

Commit

Permalink
Readme updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@lfades
lfades committed Aug 24, 2020
1 parent 4d40464 commit 906672e
Showing 1 changed file with 29 additions and 34 deletions.
63 changes: 29 additions & 34 deletions examples/cms-kontent/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas

## Deploy your own

Once you have access to [the environment variables you'll need](#step-4-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent&env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Kontent)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent&env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Kontent&envLink=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent%23step-3-set-up-environment-variables)

### Related examples

Expand All @@ -35,18 +35,9 @@ Once you have access to [the environment variables you'll need](#step-4-set-up-e
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
npx create-next-app --example blog-kontent cms-kontent-app
npx create-next-app --example cms-kontent cms-kontent-app
# or
yarn create next-app --example blog-kontent cms-kontent-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-kontent
cd cms-kontent
yarn create next-app --example cms-kontent cms-kontent-app
```

## Configuration
Expand All @@ -55,17 +46,17 @@ cd cms-kontent

First, [create an account on Kontent.ai](https://app.kontent.ai/sign-up?utm_source=nextjs_docs_example&utm_medium=devrel&utm_campaign=extended_trial).

> The link above will provide you with the 90-days trial. Once you finish the trial, or even during the trial period, you could switch to the [**developer plan**](https://kontent.ai/blog/a-new-developer-plan) which is **free of charge** and offers all features you need to test out the example capabilities.
> The link above will provide you with the 90-days trial. Once you finish the trial, or even during the trial period, you could switch to the [**developer plan**](https://kontent.ai/blog/a-new-developer-plan) which is **free of charge** and offers all the features you'll need to test out the example capabilities.
After signing up, [create an empty project](https://docs.kontent.ai/tutorials/set-up-kontent/projects/manage-projects#a-creating-projects).

### Step 2. Create a content models and fill them with data
### Step 2. Create the content models and fill them with data

The [content model](https://docs.kontent.ai/tutorials/set-up-kontent/content-modeling/what-is-content-modeling) defines the data structures of your application/websites. The structures are flexible and you can tailor them to your needs.

For this example you need to create a content model that defines an `author` and a `post` content type. **You can import these automatically or by doing it manually** to familiarize yourself with the Kontent user interface.

#### Import content models and it's data
To import the content models with their data follow the next steps:

1. Enter [Kontent application](https://app.kontent.ai)
1. Go to "Project Settings", select API keys
Expand All @@ -83,32 +74,35 @@ For this example you need to create a content model that defines an `author` and
1. Go to your Kontent project and publish all the imported items.
> You could deactivate Management API key, it is not necessary any more.
#### Create the content models and it's data manually
### Step 2.1. Optionally create the content models manually

You can safely ignore this step if you already imported the content models in Step 2.

##### Create an `Author` content type
#### Create an `Author` content type

From your Kontent project, go to **Content models** and add a new `Content type`:

> you don't have to modify the element configuration unless specified
- Content type name: `Author`
- Add following content elements
- Add the following content elements
- `Name` - **Text** element
- `Picture` - **Asset** element - configure to allow to select `At most 1` asset and `Limit file types` only to `Adjustable images`

Save the content type and continue.

The content type should looks like that:
The content type should look like this:

![Content type Author](./docs/author-content-type.png)

##### Create an `Post` content type
#### Create a `Post` content type

From your Kontent project, go to **Content models** and add a new content type:

> you don't have to modify the element configuration unless specified
- Content type name: `Post`
- Add following content elements
- Add the following content elements
- `Title` - **Text** element
- `Date` - **Date & time** element
- `Excerpt` - **Text** element
Expand All @@ -118,10 +112,11 @@ From your Kontent project, go to **Content models** and add a new content type:

Save the content type and continue.

The content type should looks like that:
The content type should look like this:

![Content type Author](./docs/post-content-type.png)

##### Fill content models with data
#### Fill content models with data

Go to `Content & Assets` section in your project and click `Create new` on the `Content` tab and select `Author` content type.

Expand All @@ -140,21 +135,21 @@ Next, create another item based on **Post** content type:

![Published post item overview](./docs/publish-post-overview.png)

### Step 4. Set up environment variables
### Step 3. Set up environment variables

Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):

```bash
cp .env.local.example .env.local
```

Then set each variable on `.env.local` from `Project settings` > `API keys`:
Then set each variable on `.env.local` using the keys `Project settings` > `API keys`:

- `KONTENT_PROJECT_ID` - Project ID from the `API keys` section.
- `KONTENT_PROJECT_ID` - Should be the Project ID in `Project settings` > `API keys`.
- `KONTENT_PREVIEW_API_KEY` - One of the Preview API keys in `Project settings` > `API keys`.
- `KONTENT_PREVIEW_SECRET` - Can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
- `KONTENT_PREVIEW_API_KEY` - one of the Preview API keys from the `API keys` section.

### Step 5. Run Next.js in development mode
### Step 4. Run Next.js in development mode

```bash
npm install
Expand All @@ -168,15 +163,15 @@ yarn dev

Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).

### Step 6. Try preview mode
### Step 5. Try preview mode

In your Kontent project, go to **Project Settings > Preview URLs** and set a new preview URL for `Post` content type to:
In your Kontent project, go to **Project Settings > Preview URLs** and set a new preview URL for the `Post` content type to:

```plain
http://localhost:3000/api/preview?secret=<KONTENT_PREVIEW_SECRET>&slug={URLslug}
```

Replace `<KONTENT_PREVIEW_SECRET>` with its respective value in `.env.local`.
Replace `<KONTENT_PREVIEW_SECRET>` with its respective value in `.env.local`:

![Preview URL setup](./docs/preview-URLs-setup.png)

Expand All @@ -192,7 +187,7 @@ Once saved, go to one of the posts you've created and:

You will now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page.

### Step 7. Deploy on Vercel
### Step 6. Deploy on Vercel

You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

Expand All @@ -206,4 +201,4 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [

Alternatively, you can deploy using our template by clicking on the Deploy button below.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent&env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Kontent)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent&env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Kontent&envLink=https://github.com/vercel/next.js/tree/canary/examples/cms-kontent%23step-3-set-up-environment-variables)

0 comments on commit 906672e

Please sign in to comment.