Verbaland website using 🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS

Live Demo

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

Project commands

1. 📦 Install dependencies.

npm install

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

npm run dev

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

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

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

---

Originally based on Henry Desroches' 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 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 /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.

Handle russian filenames in Git

git config --global core.quotePath false