Skeleton project for creating a blog with Nuxt-Content and Netlify CMS.
Examples:
- Project Site: https://nuxt-static-skeleton.netlify.app/
- greg on data - personal site of the developer
- Home Page (custom)
- nuxt-content powered:
- About Page (markdown)
- Contact Page (markdown)
- Blog Post List Page(s) (with pagination - default to 5 posts per page)
- Blog Post Single Page
- Google Fonts (Header / Body Text can be defined separately)
- Flexbox Grid
- Modified Skeleton CSS
- Google Analytics (Turned on by default, you can add your id in the
nuxt.config.jsfile) - Netlify CMS for in-browser editing (at /admin) once the site is deployed
- Interactive Editor from nuxt-content when running the dev server
- SEO Title / Description separation for better SEO control
- Sitemap Generation via Netlify
- Contact form via Netlify
To Do
- Fork the Repository
- Run
npm installto install the current dependencies- Optional: Run
npm run devto start a local development server
- Optional: Run
- Link to Github. Create a new empty repo (in browser or CLI). Run
git initto initiate a new project. Add a remote connection (whatever URL github gave you).git remote add origin https://github.com/[your-username]/[your-repo-name].git.- To add all files to the project, run
git add *andgit add .env - Commit files with
git commit -m '[your message here] - To push files to github, run
git push -u origin master
- To add all files to the project, run
- Sign up for Netlify, link to your github.
- In netlify options, define:
- build command:
npm run generate - publish directory:
dist
- build command:
- In Netlify Settings, go to the Identity Tab and click the 'Enable Identity' button.
- You should now be able to sign up / log in with an email. I've had issues with that configuration so I update to a Github sign-in. You have to configure that in the 'External Providers' option. You then have to go down to 'Git Gateway' services and enable that.
- Configure Registration - would recommend changing Registration Preferences to 'Invite Only'. You can change that once you log in yourself.
If you don't want dark mode, you can remove these lines from the layouts/default.vue file
head: {
htmlAttrs: {
class: 'dark-mode'
}
},
Built with:
- Vue
- Nuxt
- nuxt-content
- nuxt-dotenv
- vue-moment - For Date formatting
- Skeleton CSS
- Adapted CSS from Skeleton and renamed it to pile-of-bones.css. Mainly because it's a mess. :)
- Netlify
- illlustrations
- A few other packages