Getting Started with Netlify: Creating your first Netlify Site

Want to create a deployment workflow that’s as easy as git push? By the end of this blog post, you’ll have an integrated deployment pipeline with GitHub and Netlify. Your deployment pipeline will be triggered by each git push for your main branch. Netlify will see your update on GitHub and trigger your build process. Once the build is successfully completed, your site will be live. If you need to revert to a previous deployment, you can do so through Netlify.

To follow up on this post, sign up for free GitHub and Netlify accounts or have your credentials ready. For detailed installation instructions git see GitHub’s Git setup documentation.

To get started, you need to create a new repository on GitHub.

Start by naming and creating an empty repository.
To use git clone to clone your new repository to your local computer on your terminal.
Change to your cloned repository’s new directory.

The repository for this blog post can be found here. Consult this repository to compare your changes as you go.

For detailed instructions, see the Create a repository and Clone a GitHub repository documentation.

To run a local development server, you will need to install netlify-cli. The following instructions will install netlify-cli locally, but you can install it globally if you wish. Netlify CLI provides the netlify dev command. you will define netlify dev With your start command to run a local development server.

Create a new file in your empty repository called package.json and save the following content in it:

{
  "devDependencies": {
    "netlify-cli": "*"
  },
  "scripts": {
    "build": "mkdir -p dist && cp -R src/* dist/",
    "start": "netlify dev"
  }
}

At the package.json you defined your development dependency on netlify-cli, configured the build script to copy files from src for dist, and defined the start script to run netlify dev. When using a framework, use the build command provided by your framework.

Netlify uses a TOML configuration file to define its build process and published content. Configure a netlify.toml file to define your build and dev Definitions.

Create a new file at the root of your repository called netlify.toml and save the following content in it:

[build]
command = "npm run build"
publish = "dist"

[dev]
publish = "src"

At the package.json you implemented the build script to copy files from src for dist. O [build] section tells Netlify how to build your project. You can run your build by running npm run build on your terminal. Since you want Netlify to run your build, you define command for npm run build. The value used in command can be replaced by the construction step of the structure you are using. O publish The configuration defines where Netlify will serve static content from. you define publish to your build output directory command (dist)

O [dev] section tells Netlify how to run your project for local development. just like in the [build] section, the publish The configuration defines where Netlify will serve static content from. This section also has a command configuration that can be set to run the local development server for your framework. In this case, you are only serving static files and Netlify will handle this for you by default, so don’t command configuration is required.

Once we’ve configured Netlify to serve development content from src directory you can create this directory with the mkdir src command in your terminal or through your code editor.

Then create a new HTML document in src/index.html and save the following content in it:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Getting Started with Netlify: Creating your first Netlify Site</title>
</head>

<body>
  <h1>Getting Started with Netlify: Creating your first Netlify Site</h1>
  <p>Hello, world!</p>
</body>

</html>

In this step, you created a simple Hello, world! webpage that you can deploy to Netlify.

Before installing your dependencies, you must create a .gitignore file in the root directory and save the following content in it:

node_modules
dist

This will prevent your node_modules, and dist directories to be included in your git commit next.

You now have all the files you need to deploy to Netlify. Take a moment to add, confirm and push your changes to GitHub with the following commands on your terminal:

git add -A
git commit -m "My first Netlify Site"
git push origin main

Now you are ready to run npm install to install netlify-cli locally. This step will create the node_modules directory for its dependencies. One time npm install completes, it will generate an installation summary.

Run npm start on your terminal to start netlify dev as defined in package.json. Netlify Dev will detect that no structure has been defined and will serve static content from your publish directory that is src in this case. Netlify Dev will print the local development URL, open your web browser with that URL, and continue running on your terminal. You should now see the rendered version of your index.html file in your browser with your “Hello world!” message.

At this point, you have a running local development environment, but you haven’t connected your repository to Netlify yet. Shut down the local development server by holding the “control” key and pressing the “c” key (also known as ^C on a Mac).

On the Netlify Team Overview screen, click New Git Site and follow the instructions.

1. 1. First, you will be asked to “Connect to your Git provider”. Click on the “GitHub” button. This will open a new window to authorize the connection between Netlify and GitHub.
  2. When prompted, select “Configure Netlify App on GitHub” to authorize Netlify to read your repositories on GitHub.
  3. Once authorized, Netlify will prompt you to “Choose a repository”. Find and select the repository you created for this project.
  4. You will now be asked to set the “Site Settings and Deploy!”. Since you created a netlify.toml and upload your changes to GitHub, you’ll notice that this screen is already configured with your settings.
  5. Click on the “Deploy Website” button to trigger the first implementation of your new Netlify website! This will take you back to the site overview and you will see a “Production implementations” section with your build Starting Up. Click on your build in the “Production deployments” list which will take you to the deployment log for that build.
    Here you can watch the build output as Netlify executes its build command.
    - If the build is successful, you will see “Site is up ✨” printed in the log and the deployment will be published.
    - If there is an error, the deployment will fail and will not be published. You can review the log to determine the failure, make changes, and send those changes to GitHub to trigger a new build.
  6. Click on the link for “
  7. Click on the link for your https://<YOUR-SITE-NAME>.netlify.app site on the Implementations page. This will open a new window where you will see the same “Hello world!” the page you saw in local development earlier is now in production on Netlify.
  8. Pat yourself on the back, you did it! 🎉
Well, you would probably like to update your site, so go ahead and get the development server running again with npm start. Now make some changes to your src/index.html and reload the page in your browser. Once you are satisfied with your changes to local development, add, confirm and submit your changes to main branch to trigger a new deployment. Go to Netlify to see the deployment log. Once your site is live, you can see production changes.

If you need to revert to a previous version of the site for any reason, you can do so through Netlify. On the Deployments page, you’ll notice that the latest deployment is at the top and is marked as Published.

Click on a previous deployment. This will take you to the deployment log, where you will find a Preview deploy link and one Publish deploy button. Use the Preview deploy link to review the deployment and make sure it is the one you want to revert to. Use the Publish deploy button to do this deploy live deployment.

Go back to the deployments page and notice that your previous deployment is now marked as Published.

Now you can update your website with a git push and can instantly revert to a previous deployment if necessary. Netlify has so much more to offer. Stay tuned for more! 🙌