A Nuxt.js static website with animations, transitions and a serverless Contact Form
- Nuxt.js Static Site Generation for easy hosting.
- Netlify's lambda for Contact Form.
- SendGrid mailing for Contact Form.
- Netlify compilation on each commit, with automatic deployment to their CDN (once you finish all the steps).
Check out this guide for a more thorough reading on Nuxt and Netlify, or jump straight ahead for more concise instructions.
- Github account
- Netlify account
- Vue/Nuxt understanding
Using your Github account, go ahead and fork the repo or just clone it.
- Go to Sign Up and create an account.
- Then, go to the 'API Keys' page inside of 'Settings', and click 'Create API Key'.
- Give your API key a name.
- Select 'Restricted Access' and then choose the 'Mail Send' permission.
- Click 'Create and View'.
- Copy your API Key to
.envexample
and rename te file to.env
.- This will let you do local testing.
- Change the email that will receive the Contact Form info on
MAIL_TO
.
- Go to the Netlify's project 'Setting' page.
- Choose 'Build & deploy > Environment' and copy the API Key there as well.
- This will let you work on production.
Install all the dependencies
npm i
Now, you can run the code in development with:
npm run dev
This will serve your page in localhost:3000
with hot reload.
It will also run a netlify-lambda
server with the function for local testing.
It works through @nuxt/proxy
that is configured on nuxt.config.js
.
Once you're ready to generate your static assets for production:
npm run generate
This will create a /dist
folder with the assets. This folder is not committed.
This is what Netlify will be building on their server, and then uploading the results to their CDN.
- Besides what was mentioned, it's just a regular Vue + Nuxt app.
- The code is commented to try to assist anyone in modifying the views.
- Configure Nuxt in:
nuxt.config.js
. - Check the Vue.js and Nuxt.js documentation.
If you run npm run dev
and you like what you see, you're ready to deploy to Netlify!
- Go to Netlify
- Choose Github and authorize Netlify, if you haven't already
- Choose this repo
- Leave the settings as they are and click on Deploy Site
Now, with every commit you do, Netlify will compile your site with npm run generate
and deploy it on their CDN.
If you have any problems implementing this, please don't hesitate and create a Github Issue or send me a tweet.