Skip to content

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. Before you start make sure:
    • Setup your GitHub repository through Classroom
    • AND Accepted Membership in our Organization (more info on above link).
    • Have pushed your latest changes to GitHub (no changes showing as uncommitted in Codespace or local dev environment).
  2. Sign up for Netlify using your GitHub account
  3. After you complete your info it should ask you to Deploy your first project. Click on Import from Git
    • If you don’t see that and are on the Netlify start Page Click the “New site from Git” button
    • If you don’t see that either click Sites > Add New Site > Import Existing Project
  4. Select “Deploy with GitHub” button
    • screenshot of step 1 of netlify Deploy with Deploy with GitHub button circled.
  5. Authorize Netlify on Github (you should be taken there automatically)
  6. Select your Portfolio repository on stein-bmcc
    • Change to the Stein-BMCC organization. If you didn’t accept membership before on GitHub then this won’t be visible
    • netlify import: choose stein-bmcc option
    • Type in your GitHub username in the Search Repos box and press return/enter key
    • Select your eleventy-personal-site (note you won’t see this if you didn’t start the site in GitHub Classroom.
    • type github username in repo search box and select your eleventy personal site.
  7. Change the Publish Directory to Dist. Settings should look as follows (things in bold MUST be entered exactly):
    1. Site Name: Choose a name for your site. This has to be unique for ALL Netlify users so it may take a few tries. If you don’t put anything here then a random name will be chosen for you.
      • It will end up being https://sitename.netlify.app
    2. Branch to deploy: main
    3. Base Directory: leave this blank
    4. Build Command: npm run build
    5. Publish directory: _site
  8. Click the “Deploy” 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.

You may have to refresh your screen if nothing changes in a couple of minutes.

Optional – Change your site name

If you did not select a site name above, then your 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

Tags:

Leave a Reply