Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Knogobert/ntn-boilerplate
🏗️ An opinionated base template for a quick start with Nuxt, Tailwind & Netlify CMS. Up on a site after only 5 minutes!
https://github.com/Knogobert/ntn-boilerplate
boilerplate boilerplate-front-end git-lfs netlify-cms nuxt tailwind vuex
Last synced: 18 days ago
JSON representation
🏗️ An opinionated base template for a quick start with Nuxt, Tailwind & Netlify CMS. Up on a site after only 5 minutes!
- Host: GitHub
- URL: https://github.com/Knogobert/ntn-boilerplate
- Owner: Knogobert
- License: mit
- Created: 2020-09-08T20:59:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-11T23:02:15.000Z (9 months ago)
- Last Synced: 2024-11-29T08:46:23.797Z (25 days ago)
- Topics: boilerplate, boilerplate-front-end, git-lfs, netlify-cms, nuxt, tailwind, vuex
- Language: Vue
- Homepage: https://ntn-boilerplate.netlify.app/
- Size: 5.04 MB
- Stars: 77
- Watchers: 5
- Forks: 13
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS
[](https://app.netlify.com/sites/ntn-boilerplate/deploys) ← replace with [your own](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/general#deploy-status-badge)
**[Live Demo](https://ntn-boilerplate.netlify.app/)**
An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!
## 🔋 Batteries included
- Nuxt 3 (in "universal mode", where both SEO and speed is great)
- Vue 3
- Vuex (supported by adding to `/store`, but not implemented)
- PostCSS (no SCSS)
- Tailwind 3
- Dark mode & ColorModePicker (Set to "dark mode first")
- Netlify CMS (no need for a separate server)
- Prettier
- Nuxt-content (w/ exensible support for markdown and code-blocks)
##### Optional extra setup
- Git LFS (store uploaded images outside the main repo)
- Netlify LM (Netlify’s Git LFS support)
## 🎉 Getting Started
Use the deploy button to get your own copy of the repository.
[](https://app.netlify.com/start/deploy?repository=https://github.com/Knogobert/ntn-boilerplate&stack=cms)
This will setup everything needed for running the CMS:
- A new repository in your GitHub account with the code
- Full Continuous Deployment to Netlify's global CDN network
- Control users and access with Netlify Identity
- Manage content with Netlify CMS and Nuxt-content
Once the initial build finishes, you can invite yourself as a user. Go to the Identity tab in your new site, click "Invite" and send yourself an invite. Start with by registering a regular email-account (not OAuth yet!) with a [generated password](https://passwordwolf.com/).
You should be up and running, ready for personalization!
### These extra steps are only necessary if you want to upload large media in Netlify CMS:
This way it doesn't clutter up your repo with large unmanageable files. But *do know* that it is easier to add later than undoing it later.
1. **[Install git-lfs](https://git-lfs.github.com/)** on your computer and remove the `#` in the project's `.gitattributes`
2. **Setup Netlify LM** by following [these steps](https://docs.netlify.com/large-media/setup/). (In short: `netlify plugins:install netlify-lm-plugin` → `netlify lm:install` → `netlify login` → `netlify link` → `netlify lm:setup` → commit the `.lfsconfig` file.)
---
## Project commands
1. 📦 Install dependencies.
```bash
npm install
```
2. 🏗 Run the project for local dev. This will start a hot-reloading server at `localhost:3000`.
```bash
npm run dev
```
3. 🌌 Build the app for server-side rendered deployment. See more about **Universal SSR** in the [Nuxt.js docs](https://nuxtjs.org/guide#server-rendered-universal-ssr-).
```bash
npm run build
# And to serve that deployment...
npm run start
```
4. ⚡️ Generate a fully pre-rendered static site. See more [in the docs](https://nuxtjs.org/guide#static-generated-pre-rendering-).
```bash
npm run generate
```
### Personalize setup
1. Copy and change the .env-file
- `cp .env-example .env`
- Then change the values
2. Change the value on these lines
- `public/admin/config.yml` — `site_url` & `logo_url`
- `content/site/info.json` — `sitename`, `sitedescription` & `sitelang`
- `package.json` — `name`, `description`, `author` & `repository.url`
- `pages/index.vue` — The start page of your new website!
3. Change colors, favicon, content & content collections
- Colors are managed in `assets/css/_vars.pcss` & `tailwind.config.js`
- Favicon is generated by [@vite-pwa/assets-generator](https://vite-pwa-org.netlify.app/assets-generator/). You should change the `public/icon.png` to something new, and then `npm run generate-pwa-assets`. Replace the preview.jpg as well.
- Content is managed mainly in [local Netlify CMS](http://localhost:3000/admin) by going to your `/admin`, in development mode by double-clicking on a post or by hand in `/content`
- Content collections are managed in `public/admin/config.yml`
4. Change font
1. Add/change your font link in `nuxt.config.js` under `head.link`. You can add a `` as `link: [{ rel: 'stylesheet', href: 'font.css' }]`, like [this](https://vue-meta.nuxtjs.org/api/#link)
2. Then append your font name in `tailwind.config.js` under `theme.extend.fontFamily.sans` (or other).
3. Then if you've uncommented the included netlify plugin "[Subfont](https://github.com/Munter/netlify-plugin-subfont#readme)" in `netlify.toml`, it will automatically post-processes your web page to use an optimal font loading strategy.
## More info
> This project was bootstrapped with `create-nuxt-app`. There are more detailed explanations of how everything works in the [Nuxt.js docs](https://nuxtjs.org).
### Netlify Identity
Make sure to set to "registration invite only" [here](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/identity#registration-preferences) if you don't want spam.
When you create your first account, _don’t_ sign up using OAuth, generate a new password and sign in that way locally, otherwise a successful login will send you to the URL you typed in instead of keeping you on localhost.
If you want the Netlify signup emails to work with this boilerplate, you need to either add the 'netlify-identity-widget' to `nuxt.config.js` under `head`, [Follow the advice here](https://answers.netlify.com/t/common-issue-netlify-cms-git-gateway-email-not-confirmed/10690). Or enable the fixed and included email-templates’ paths in Netlify, under [Site Settings > Identity > Emails](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/identity) and there you can set `/public/emails/THE_TEMPLATE_NAME.html` for each template.
---
Originally based on [Henry Desroches' nuxt-netlify-cms-starter](https://github.com/xdesro/nuxt-netlify-cms-starter).
---
## Troubleshooting
- > I can’t log in to `/admin` on localhost and use my local git as CMS
- Open up a new terminal and run `npx netlify-cms-proxy-server`, the login again.
- > I tried logging into/saving in Netlify CMS, but I can't
- It may be that you haven't [enabled Netlify Identity](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/identity) or [setup the Git Gateway](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/identity#services) correctly, [check the docs](https://www.netlifycms.org/docs/git-gateway-backend/)
- > I get Netlify emails but can't use them to login etc.
- It is probably because the 'netlify-identity-widget' is only included in the `/admin`-page. [Follow the advice here](https://answers.netlify.com/t/common-issue-netlify-cms-git-gateway-email-not-confirmed/10690) or enable the included email-templates’ paths in Netlify, under [Site Settings > Identity > Emails](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/identity) and there you can set `/public/emails/THE_TEMPLATE_NAME.html` for each template. This will make sure to use the correct links inside the emails. Look at @audetcameron’s [screenshot here](https://github.com/Knogobert/ntn-boilerplate/issues/8#issuecomment-841469850).
- > "This repository is configured for Git LFS but 'git-lfs' was not found on your path."
- Install git-lfs then run `git lfs install` in project root. Then to download the images, run `git lfs pull`. Or if you don't want to download the files/can't login to the lfs server, run `git lfs install --skip-smudge` instead.
- > I can’t get Git LFS to run correctly on Netlify
- Make sure that you have in your [Netlify build settings](https://app.netlify.com/sites/YOUR_NETLIFY_SITE_SLUG/settings/deploys#environment-variables), set the environment variable `GIT_LFS_ENABLED` : `true`. Then also make sure that Netlify LM is setup as [their docs](https://docs.netlify.com/large-media/setup/) specify.