Deploy to Netlify

Here is the process to deploy your project to Netlify.

STEP 1: Create GitHub Repository

You should already have this, but you will need a GitHub repository with all of the Eleventy files

STEP 2: Ready Your Project

Install Eleventy in Your Project

You haven’t had to do this before because most of us installed 11ty as a global package. But netlify may not build it properly unless it is defined in the project dependencies. To do that

1. Open Terminal
2. Type: npm install @11ty/eleventy

You should see it installing and then in package.json it should add some lines to show it in the dependencies

Add or change the following in the package.json file

• make sure name has
  • no spaces
  • no capitals
• Add the line below to your scripts
  • “build”: “eleventy”,

Here is what your package.json should look like after the changes

STEP 3: Push Changes to GitHub

After you have made the changes they need to go on GitHub. To do that you will

ONE: Save the package.json file

TWO: Commit the changes

THREE: Make sure you’re on the main branch

If you did your work on the main branch, skip to FOUR. If you did the work on another branch then you will need to merge that branch into the main branch. First checkout the main branch

git checkout main

then merge changes. replace your-branch-name with the actual branch.

git merge your-branch-name

FOUR: Push your changes to GitHub

git push

After this you should visit your site on GitHub in order to make sure the changes were pushed. If you can’t see the changes on the GitHub website then Netlify won’t see them either.

STEP 4: Netlify Setup

Here are the steps

1. Go to netlify.com
2. Click the Sign up link
3. Click the GitHub Button to sign up with your GitHub account
4. Follow the steps to authenicate GitHub and complete signup process

STEP 4: Create a New Netlify Site

1. In the Team Overview or Sites page, Click the New Site from Git button.
2. Click on GitHub button to select it as your provider
3. Install Netlify on account if prompted
   1. You should now see a list of your repositories
4. Choose the final project repository you want to deploy
5. Enter the following settings
   1. Branch to deploy: main
   2. Build Command: npm run build
   3. Publish Directory: dist
6. Click Deploy Site
7. You should see a screen that shows the site being deployed. YOu can click the message to watch the build process
8. Hopefully it will be successful. If not, watch the Long Video Walkthrough below where I make a number of mistakes and failed builds. If it is not successful the site will not be live.

There are other optional settings you can do in the Advanced Settings of the New Site form. Also, you can change the site name later after you create the site.

• Click on site (from Team Over view or Site page)
• Click on Site Settings
• Click Change Site Name
• Enter your new name. It will be in the form:
  name-you-enter.netlify.app for the full main URL.

Long Video Walkthrough

This is a longer video walkthrough where I go through the process and make a number of mistakes and show some different ways your deployment can fail.