/empty-blog-tpl

Primary LanguageVueMIT LicenseMIT

🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS

Netlify Status ← 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!

ntn-boilerplate-preview-dark

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

Deploy to Netlify

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.

  1. Install git-lfs on your computer and remove the # in the project's .gitattributes

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

  1. 📦 Install dependencies.
npm install
  1. 🏗 Run the project for local dev. This will start a hot-reloading server at localhost:3000.
npm run dev
  1. 🌌 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
  1. ⚡️ 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

    • 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!

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

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

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

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