Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/watheia/blog
Watheia Labs Blog
https://github.com/watheia/blog
Last synced: 1 day ago
JSON representation
Watheia Labs Blog
- Host: GitHub
- URL: https://github.com/watheia/blog
- Owner: watheia
- Created: 2021-05-21T16:16:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-05-23T00:35:54.000Z (over 3 years ago)
- Last Synced: 2024-04-17T04:27:04.893Z (9 months ago)
- Language: JavaScript
- Homepage: https://watheia-blog.vercel.app
- Size: 580 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://gitpod.io/#https://github.com/watheia/blog)
# A Blog example using Next.js and DatoCMS
This example showcases a Next.js Blog using [DatoCMS](https://www.datocms.com/) as the data source. It fully supports [Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode) with [DatoCMS real-time updates](https://www.datocms.com/docs/next-js/real-time-updates).
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://nextjs-demo-bay.vercel.app/](https://nextjs-demo-bay.vercel.app/)
## 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 Vercel](https://vercel.com/docs/git/vercel-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`:
- `WATHEIA_BLOG_DATOCMS_API_TOKEN` should be the API token you just copied.
- `WATHEIA_BLOG_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for the Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode).
Your `.env` file should look like this:
```bash
WATHEIA_BLOG_DATOCMS_API_TOKEN=...
WATHEIA_BLOG_DATOCMS_PREVIEW_SECRET=...
```
#### Run your project locally
```bash
npm install
npm run 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](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode)).
To enable the Preview Mode, go to this URL:
```
http://localhost:3000/api/preview?secret=
```
- `` should be the string you entered for `WATHEIA_BLOG_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.