Deploy to Netlify

This post covers how to get your site in the web using Netlify’s servers.

Terminology

Some words you might not know

  • Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator and GitHub).
    • They have a generous free pricing tier that is great for the kind of personal projects we’re doing in class.
  • Deploy: This is the process of moving your files from your local dev environment (your computer and GitHub Repository) to a web site everyone in the world can see.

Steps to Deploy to Netlify

  1. Make sure you have a GitHub repository and have pushed your latest changes.
  2. You will need to have a build script in your package.json. If you used my eleventy basic template then you have the script. It’s this line
    1. “build”: “npx @11ty/eleventy”
  3. Sign up for Netlify using your GitHub account
  4. Click the “New site from Git” button
  5. Select “Github” as your Git provider
  6. Select your repository (username/my-eleventy-project)
  7. Check the following settings:
    1. Branch to deploy: main
    2. Base Directory: leave this blank
    3. Build Command: npm run build
    4. Publish directory: public
  8. Click the “Deploy site” button

It will go to a new screen and show that your site deploy is in process. When it’s done you will see a check mark next to step 1 on that screen.

If you get an error on your deploy, let me know and we’ll work through it.

Optional – Change your site name

by default your url will be something like https://wierd-words-12dsfdds.netlify.app You can change the front part so it is more like my-project.netlify.app.

  1. Click the “Site settings” button
  2. Click the “Change site name” button
  3. Enter the name you want (it will be the part before .netlify.app). Remember that it can not have spaces in the name.
  4. Click the “Save” button

Other Tutorials

Here are links to some other people going over Deploying to Netlify

very quick video walkthrough by Netlify

Deploy a Site to Netlify by Mike Aparicio