Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ryanweal/vtest-netlify-cms

Last synced: about 5 hours ago
JSON representation

Host: GitHub
URL: https://github.com/ryanweal/vtest-netlify-cms
Owner: ryanweal
License: mit
Created: 2020-12-11T22:30:16.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2021-01-22T17:14:22.000Z (almost 4 years ago)
Last Synced: 2024-04-19T09:55:39.742Z (7 months ago)
Language: CSS
Size: 2.38 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS

[![Netlify Status](https://api.netlify.com/api/v1/badges/cb2d4cc5-8a65-4940-81ce-4456ff96e6db/deploy-status)](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!

![NTN Boilerplate Screenshot](https://user-images.githubusercontent.com/770560/92640923-4a36fa80-f2de-11ea-8f96-a7bca7b1e0cc.png)

## 🔋 Batteries included

- Vue 2
- Vuex
- Nuxt.js (in "universal mode", where both SEO and speed is great)
- PostCSS (no SCSS)
- Tailwind
- PurgeCSS (removes unused CSS-selectors)
- Dark mode & custom ColorModePicker (Set to "dark mode first")
- PWA (install website as standalone app)
- Netlify CMS (no need for a separate server)
- Prettier
- Subfont

##### 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.

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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

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

- `static/admin/config.yml:1` — `site_url`
- `static/admin/config.yml:2` — `logo_url`
- `assets/content/site/info.json` — `sitename`, `sitedescription` & `sitelang`
- `package.json:1` — `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/scss/_vars.scss` & `tailwind.config.js`
- Favicon is generated by [@nuxt/pwa](https://pwa.nuxtjs.org/). You should change the `static/icon.png` to something new, and then match the new filename and source in `nuxt.config.js` under `pwa.icon`
- Content is managed mainly in [local Netlify CMS](http://localhost:3000/admin) by going to your `/admin` or by hand in `assets/content`
- Content collections are managed in `static/admin/config.yml`, then added to vuex store in `store/index.js`

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). Like `sans: ['Europa', ...defaultTheme.fontFamily.sans]`
3. Then if you've installed the included netlify plugin "[Subfont](https://github.com/Munter/netlify-plugin-subfont#readme)", 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.

---

Originally based on [Henry Desroches' nuxt-netlify-cms-starter](https://github.com/xdesro/nuxt-netlify-cms-starter).

Deployed easily with their boilerplate via:
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/xdesro/nuxt-netlify-cms-starter&stack=cms)

---

## Troubleshooting

- > I added a CSS class, but it doesn't show

- It is most likely purged by PurgeCSS, make sure it is whitelisted in `purgeCSS` in `nuxt.config.js`

- > 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/)

- > This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.

- Install git-lfs then run `git lfs install` in project root

- > 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.