Now what?

Next steps

Once you've deployed your own copy of this site, here are five things to try as you explore Netlify,

1. Add your name

This site is generated with a static site generator. And now that you have deployed it, Netlify has set up an automated continuous deployment system for you. To deploy changes, all you need to do is push your changes to this site's git repository.

Try making a small change. Perhaps by editing the details.js file to add your name. You can do it directly on Github if you like. Netlify will notice the change and deploy up update in a minute or so.

// src/data/details.js

module.exports = {

  // Your twitter handle
  twitter: null,

  // Your name
  name: null,

  ...
}

You can watch the progress of your deploys in the Netlify Admin for this site. From there you'll also be able to instantly roll back to any previous deploy if you wanted to.

2. Create a deploy preview

When you push changes to your master branch (as you did above), Netlify builds and deploys those right away. What if you'd like to stage those changes in a preview? With Netlify's deploy previews, you can see in advance what the effects of a pull request will be.

Try making another change in the git repository. Once again, you can do this directly on GitHub. Then, instead of committing this to the master branch, ask GitHub to make a new pull request of your changes.

Hmmm, but what to change. It's your site now. Go bananas. Or you could just amend this page to show your progress by adding a suitably gleeful emoji to the section headings of each of these steps that you've done.

 // Hmmm, what best suggests "done"?

 👍 | 😎 | 👏 | ✅ | 🤘

3. Add a form

Although Netlify is deploying your site directly to our global Application Delivery Network (ADN), meaning that you don't have a server to maintain, you might still wish to accept form submissions. We can help with that. By adding a standard form element to your site, and giving it a netlify attribute, we will automatically create the back end for you, and let you access all form submissions via the Admin UI or via an API.

Try adding the following HTML to a page on this site. After deploying your change, you will find all submissions to your form right there in your Netlify Admin.

<form name="contact" action="/thanks" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

4. Define redirect rules

The Netlify ADN supports redirect rules. That means that your redirect rules don't run on some an server somewhere (there is no origin server!). Instead, they run directly on the edge nodes located closest to your site users. This makes them blazing fast. But thankfully, not complicated to define.

You can read all about them in the docs. But first, why not try creating some yourself by adding a few lines to the netlify.toml file in this repo. This file defines various configurations for Netlify. In addition to defining redirects, proxies, custom 404s, and language redirection rules, you can use it to configure custom headers, set build contexts and lots more.

For now, just add these few lines to your netlify.toml to create a new redirect rule.

# netlify.toml

...

[[redirects]]
  from = "/next"
  to = "/next-steps"
  status = 302

...

Once this has been deployed, you'll be able to access this page via a handy redirect at /next and save yourself those extra keystrokes.

5. Deploy a serverless function

To save you from needing to set up accounts and configurations with a cloud provider like AWS, Netlify can manage this for you. This brings all of the deployment workflows available in your site to your serverless functions too.

Let's add a function that Netlify will deploy to AWS Lambda and configure for you. Add this code into a file in your lambdas folder.

// src/lambda/hello.js
exports.handler = async (event, context) => {
  const name = event.queryStringParameters.name || "World";

  return {
    statusCode: 200,
    body: `Hello, ${name}`
  };
};

When Netlify deploys your site, it will package this file up with any dependencies and push them to AWS for you. It will then give you a URL to access that serverless function which is relative to the root of your project.

Once deployed, you'll be able to access it at /.netlify/functions/hello?name=You

Try it. Perhaps you might even want to clean up that URL be adding another redirects rule to your netlify.toml which also supports wildcards, splats and proxying.

# netlify.toml

...

[[redirects]]
  from = "/hello/*"
  to = "/.netlify/functions/hello?name=:splat"
  status = 200

...

More?

You can get more inspiration for using Functions by taking a look at our Functions Playground