🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS

← replace with your own

Live Demo

An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!

🔋 Batteries included

Nuxt.js (in "universal mode", where both SEO and speed is great)
Vue 2
Vuex (supported by adding to /store, but not implemented)
PostCSS (no SCSS)
Tailwind
PurgeCSS (removes unused CSS-selectors)
Dark mode & ColorModePicker (Set to "dark mode first")
PWA (install website as standalone app)
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.

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.

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.

Install git-lfs on your computer and remove the # in the project's .gitattributes
Setup Netlify LM by following these steps. (In short: netlify plugins:install netlify-lm-plugin → netlify lm:install → netlify login → netlify link → netlify lm:setup → commit the .lfsconfig file.)

Project commands

📦 Install dependencies.

npm install

🏗 Run the project for local dev. This will start a hot-reloading server at localhost:3000.

npm run dev

🌌 Build the app for server-side rendered deployment. See more about Universal SSR in the Nuxt.js docs.

npm run build

# And to serve that deployment...
npm run start

⚡️ Generate a fully pre-rendered static site. See more in the docs.

npm run generate

Personalize setup

Copy and change the .env-file
- cp .env-example .env
- Then change the values
Change the value on these lines
- static/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!
Change colors, favicon, content & content collections
- Colors are managed in assets/scss/_vars.scss & tailwind.config.js
- Favicon is generated by @nuxt/pwa. 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. Replace the preview.jpg as well.
- Content is managed mainly in local Netlify CMS by going to your /admin, in development mode by double-clicking on a post or by hand in /content
- Content collections are managed in static/admin/config.yml
Change font
1. Add/change your font link in nuxt.config.js under head.link. You can add a <link rel="stylesheet" href="font.css"> as link: [{ rel: 'stylesheet', href: 'font.css' }], like this
2. Then append your font name in tailwind.config.js under theme.extend.fontFamily.sans (or other). Like sans: ['Inter', ...defaultTheme.fontFamily.sans]
3. Then if you've uncommented the included netlify plugin "Subfont" 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.

Netlify Identity

Make sure to set to "registration invite only" here 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. Or enable the fixed and included email-templates’ paths in Netlify, under Site Settings > Identity > Emails and there you can set /static/emails/THE_TEMPLATE_NAME.html for each template.

Originally based on Henry Desroches' nuxt-netlify-cms-starter.

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 or setup the Git Gateway correctly, check the docs
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 or enable the included email-templates’ paths in Netlify, under Site Settings > Identity > Emails and there you can set /static/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.
"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, set the environment variable GIT_LFS_ENABLED : true. Then also make sure that Netlify LM is setup as their docs specify.

verellino/bh303