Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mxck/datocms-next-js-blog-demo-4597
https://github.com/mxck/datocms-next-js-blog-demo-4597
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mxck/datocms-next-js-blog-demo-4597
- Owner: mxck
- Created: 2020-04-14T07:57:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:57:15.000Z (almost 2 years ago)
- Last Synced: 2024-11-02T15:10:11.545Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://datocms-next-js-blog-demo-4597.now.sh
- Size: 2.29 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A statically generated blog example using Next.js and DatoCMS
This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [DatoCMS](https://www.datocms.com/) as the data source.
The author of this example is [chibicode](https://github.com/chibicode) and you can find the latest version of this example in the official [Next.js repo](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms).
The purpose of this repo is to have a quick start reference that can be set up with the "one-click" button below.
## Demo
Have a look at the end result live:
### [https://next-blog-datocms.now.sh/](https://next-blog-datocms.now.sh/)
## How to use
### Quick start
1. [Create an account on DatoCMS](https://datocms.com).
2. Make sure that you have set up the [Github integration on ZEIT](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github).
3. Let DatoCMS set everything up for you clicking this button:
[](https://dashboard.datocms.com/deploy?repo=datocms/nextjs-demo)
### Local setup
Once the setup of the project and repo is done, clone the repo locally.
#### Set up environment variables
In your DatoCMS' project, go to the **Settings** menu at the top and click **API tokens**.
Then click **Read-only API token** and copy the token.
Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
```bash
cp .env.example .env
```
Then set each variable on `.env`:
- `NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN` should be the API token you just copied.
- `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
Your `.env` file should look like this:
```bash
NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN=...
NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET=...
```
#### Run your project locally
```bash
npm install
npm run dev
# or
yarn install
yarn dev
```
Your blog should be up and running on [http://localhost:3000](http://localhost:3000)!
#### Try preview mode
On DatoCMS, go to one of the posts you've created and:
- **Update the title**. For example, you can add `[Draft]` in front of the title.
- Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
(If it doesn't become draft, you need to go to the model settings for `Post`, go to **Additional Settings**, and turn on **Enable draft/published system**.)
Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)).
To enable the Preview Mode, go to this URL:
```
http://localhost:3000/api/preview?secret=&slug=
```
- `` should be the string you entered for `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET`.
- `` should be the post's `slug` attribute (you can check on DatoCMS).
You should now be able to see the updated title. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
#### Full guide
To read all the details and a long form guide, please check the original example on the [Next.js repo](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)