Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ninest/nuxt-content-example
📓 A blog example/boilerplate made with Nuxt Content
https://github.com/ninest/nuxt-content-example
blog boilerplate markdown nuxt nuxt-demo nuxt-template
Last synced: 6 days ago
JSON representation
📓 A blog example/boilerplate made with Nuxt Content
- Host: GitHub
- URL: https://github.com/ninest/nuxt-content-example
- Owner: ninest
- License: mit
- Created: 2020-05-27T03:49:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T20:38:09.000Z (over 1 year ago)
- Last Synced: 2024-05-18T03:49:31.875Z (6 months ago)
- Topics: blog, boilerplate, markdown, nuxt, nuxt-demo, nuxt-template
- Language: Vue
- Homepage: https://nuxt-content-example.surge.sh/
- Size: 1.9 MB
- Stars: 16
- Watchers: 1
- Forks: 14
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Nuxt Content Example](https://nuxt-content-example.surge.sh/)
> A quick and easy example of the new Nuxt Content and Components library
[](http://makeapullrequest.com)
[](https://www.buymeacoffee.com/ninest)
Check out the live demo at [nuxt-content-example.surge.sh](https://nuxt-content-example.surge.sh/) and the [tutorial here](https://neutrinone.now.sh/creating-a-static-website-with-nuxt-content).
**Relevant documentation:**
- [Nuxt components](https://github.com/nuxt/components)
- [Nuxt content](http://content.nuxtjs.org/)
## 🚀 Features
- [x] Using Nuxt content
- [x] Using Nuxt components
- [x] Index and about pages
- [x] Posts page, which lists out posts
- [x] Separate page for each post
- [x] Custom components for page layouts
- [x] Style with normalize.css and custom styles
- [x] SEO with meta tags
- [ ] Include components in markdown
## 🛠 Build setup
Clone or fork this repository then download it, then run this command to start the development server:
```bash
npm run dev
```
Make changes in components and markdown files and see them reflected live in your website.
To generate a full static site, run
```bash
npm run generate
```
This will generate the static site in the `dist/` directory
### Pages
Any markdown file in the `content/` folder directory will create a new page. For example, try creating the page `privacy-policy.md` with the following content:
```markdown
---
title: Privacy policy
description: How our services value your privacy
---
This is the privacy policy for my company.
```
Save the file, and head over to [localhost:3000/privacy-policy](http://localhost:3000/privacy-policy) to view the page.
This page is being generated by `pages/_slug.vue`:
```vue
export default {
...,
async asyncData({$content, params}) {
// getting document based on URL
// if you're on localhost:300/abc, params.slug is "abc"
const doc = await $content(params.slug).fetch();
return { doc }
}
}
```
View the tutorial for pages and posts [here](https://neutrinone.now.sh/creating-a-static-website-with-nuxt-content).
### Hosting
Statically generate the site by running
```bash
npm run generate
```
This will create a `dist/` folder with the site. I decided to host the site using [Surge.sh](surge.sh). Install surge with
```bash
npm install --global surge
```
(Mac users may have to run `sudo npm install --global surge`)
To host the `dist/` folder, run
```bash
surge dist
```
If you haven't yet created an account, the CLI will guide you through the steps. You can choose a custom `*.surge.sh` domain.
Check out the live demo for this site at [nuxt-content-example.surge.sh](https://nuxt-content-example.surge.sh/).
## ♥️ Support
If you liked this project, consider supporting by
- ⭐️ Starring the repository
- 🎒 Checking out my other [projects](https://github.com/ninest)
- ☕️ Buying me [coffee](https://www.buymeacoffee.com/ninest)
## 📜 License
MIT