https://github.com/agility/agility-nuxt-blog
Blog built using Nuxt and Agility CMS
https://github.com/agility/agility-nuxt-blog
agility-cms headless-cms jamstack nuxt
Last synced: 2 months ago
JSON representation
Blog built using Nuxt and Agility CMS
- Host: GitHub
- URL: https://github.com/agility/agility-nuxt-blog
- Owner: agility
- Created: 2021-02-26T23:07:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-23T18:44:41.000Z (about 4 years ago)
- Last Synced: 2025-02-14T04:51:15.035Z (4 months ago)
- Topics: agility-cms, headless-cms, jamstack, nuxt
- Language: Vue
- Homepage: https://agility-nuxt-blog.vercel.app
- Size: 1.21 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Agility CMS + Nuxt -> Blog
This is a sample blog with Nuxt and Agility CMS. You can use this as a starting point to build a fully-featured Nuxt website with Agility CMS.
## Builds:
- https://agility-nuxt-blog.netlify.app/
- [](https://app.netlify.com/sites/agility-nuxt-blog/deploys)
## Getting Started
Nuxt and Agility CMS? Oh ya, let's go!
### Agility CMS Account
The first thing you need is a free Agility CMS account. [You can get that here 👋](https://manager.agilitycms.com/org/subscriptions/instance-setup?template=jamstack-blog&plan=agility-free).
Once you create your Agility CMS account and ✨new✨ project name, come back here 🧐.
### Clone the Repo
Now that you've got the **content**, *you need the `code`!*
Go ahead and clone the repo from github: 👇
```shell
git clone https://github.com/agility/agility-nuxt-blog.git
```
### Install Dependencies
`npm install` or `yarn install`
Normally, this will create 9,999,999,999 files in your `node_modules` folder. Luckily, we're only gonna create 9,999,999 for this small demo.
YAY! 👏👏👏
### Environment Variables
You care about the environment don't you? 🌲🌳🌴🎋
Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the [API Keys page](https://manager.agilitycms.com/settings/apikeys) in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.
- Rename `.env.example` file to `.env`
- Edit `.env` and add your guid and api key
## Development server
Run `npm start` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
This will also load the latest (staging mode) content from Agility CMS. When you change content in the CMS, simply restart the dev server those changes updated in the site.
### KNOWN ISSUE IN DEVELOPMENT
The site is optimized for Static mode, and uses the Link tag as much as possible, however, when running in local dev mode, some of the Link tags (as are used on the blog post listing and the top header) don't work until you refresh the page.
We're waiting patiently for a version of Nuxt that avoids this problem...
### `$agilitycms` Service
Your Agility CMS content is loaded using the `$agilitycms.client`. This utilizes the `@agility/agilitycms-nuxt-module` package, and is only available on the server.
## Build
Run `npm run generate` or `yarn generate` to generate the static version of the site. The pages and data will be stored in the `dist/` directory.
## Further help
### Nuxt
To get more help with Nuxt, check out the docs [Nuxtjs.org](https://nuxtjs.org/).
### Agility CMS
To get help with Agility CMS, reach out to us on our website https://agilitycms.com