Repository files navigation

🛠️ SEO-friendly website starter backed by Netlify lambda functions in a simple, friendly repo

This is a basic starter project for a prerenderedVue.js +Nuxt.js frontend with aNetlify lambda function backend. The Nuxt.js app is pre-rendered for improved SEO.

• Home, About, and 404 Pages
• HelloWorld example Lambda function with associated frontend code
• Pre-rendered dynamic pages using a sampleItem datatype
• Integrates withHotJar,Mailchimp, andGoogle Analytics
• IncludesJSON-LD Structured Data for outstanding SEO
• Pre-configured withOpenGraph andTwitter Cards meta tags for beautifulunfurls when sharing on social media
• Customizable UI usingBootstrap &SASS variables

NOTE: this project can only be deployed via Netlify withcontinuous deployment enabled.

# Install dependencies$ yarn install# Serve with hot reload at localhost:3000 and serves Netlify Functions$ yarn run dev# Build for production$ yarn run build

Note thatPrettier will automatically clean up your code when you save. You can adjust this behavior in thebuild section at line127 innuxt.config.js.

This project includes a series of pre-rendered pages using a genericItem datatype. The data for these pages is maintained inassets/content/items.json and they're generated with a customgenerate field innuxt.config.js:

generate:{routes:items.map(g=>'/items/'+g.id)}

This ensures that each item has a page that's pre-renderd and SEO-optimized. You can clone, modify, or remove theItem datatype and associated pages to better suit your needs.

The following production environment variables are required for the respective plugins to work correctly:

# Google Analytics Tracking CodeGA_TRACKING_ID=UA-XXX-X# HotJar Site IdentifierHOTJAR_SITE_ID=1234567# Mailchimp Script VariablesMAILCHIMP_BASE_URL=mc.us19.list-manage.comMAILCHIMP_LID=abcde12345MAILCHIMP_UUID=aabbccddeeffgghhiijj12345

These variables can be configured in a variety of ways - please consult theNetlify Continuous Deployment Docs. You can deactivate any of these plugins by modifying theplugins field in thenuxt.config.js file.

TheJSON-LD Structured Data can be updated by modifying thejsonld() function in thelayouts/default.vue file. This feature shouldn't be used anywhere else - oneJSON-LD snippet should describe the entire site.

The<meta> tags forOpenGraph andTwitter Cards are located in thehead section ofnuxt.config.js.You should change these from their default values. You can validate your changes using theTwitter Card Validator and theFacebook Sharing Debugger.

You can modify theassets/sass/main.sass file to optionally include Bootstrap component styles as-needed.PROTIP - only include the Bootstrap components your app depends on - this will keep your CSS bundle nice and slim :)

You can also modify any ofBootstrap's SASS Variables inside theassets/sass/variables.sass file to customize the framework to your liking.

The repo includes a minimal subset of icons by default. When you need an additional icon, you must import it directly inplugins/fontawesome.js and register it with the FontAwesome plugin. You can learn more about the Vue-FontAwesome libraryhere.

• Vue.js
• Nuxt.js
• Netlify Functions
• Bootstrap-Vue
• Bootstrap Components
• FontAwesome Vue
• netlify.toml Docs