๐๏ธ Boilerplate for Nuxt, Tailwind & NetlifyCMS
โ replace with your own
An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!
๐ 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.
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.
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: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!
-
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 innuxt.config.js
underpwa.icon
- Content is managed mainly in local Netlify CMS by going to your
/admin
or by hand inassets/content
- Content collections are managed in
static/admin/config.yml
, then added to vuex store instore/index.js
- Colors are managed in
-
Change font
- Add/change your font link in
nuxt.config.js
underhead.link
. You can add a<link rel="stylesheet" href="font.css">
aslink: [{ rel: 'stylesheet', href: 'font.css' }]
, like this - Then append your font name in
tailwind.config.js
undertheme.extend.fontFamily.sans
(or other). Likesans: ['Europa', ...defaultTheme.fontFamily.sans]
- Then if you've installed the included netlify plugin "Subfont", it will automatically post-processes your web page to use an optimal font loading strategy.
- Add/change your font link in
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.
Originally based on Henry Desroches' nuxt-netlify-cms-starter.
Deployed easily with their boilerplate via:
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
innuxt.config.js
- It is most likely purged by PurgeCSS, make sure it is whitelisted in
-
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
-
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
- Install git-lfs then run
-
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.
- Make sure that you have in your Netlify build settings, set the environment variable