Want to create a deployment workflow that is as easy as
git push? By the end of this blog post you will have a deployment pipeline integrated with GitHub and Netlify. Your deployment pipeline will be triggered by every
git push to your
main branch. Netlify will see your update in GitHub and trigger your build process. Once the build completes successfully your site will be live. If you need to roll back to a previous deploy, you’ll be able to do so through Netlify.
To get started you need to create a new repository in GitHub.
- Start by naming and creating an empty repository.
git cloneto clone your new repository to your local computer in your terminal.
- Change into the new directory of your cloned repository.
The repository for this blog post can be found here. Reference this repository to compare your changes as you follow along.
In order to run a local development server, you’ll need to install
netlify-cli. The following instructions will install
netlify-cli locally, but you can install it globally if desired. Netlify CLI provides the
netlify dev command. You’ll define
netlify dev as 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 to it:
"devDependencies": "netlify-cli": "*" , "scripts": "build": "mkdir -p dist && cp -R src/* dist/", "start": "netlify dev"
package.json you defined your development dependency on
netlify-cli, configured the build script to copy files from
dist, and defined the
start script to run
netlify dev. When using a framework, use the build command provided by your framework instead.
Netlify uses a TOML configuration file define your build process and published content. Configure a
netlify.toml file to define your
Create a new file in the root of your repository called
netlify.toml and save the following content to it:
[build] command = "npm run build" publish = "dist" [dev] publish = "src"
package.json you implemented the
build script to copy files from
[build] section tells Netlify how to build your project. You can run your build by executing
npm run build in your terminal. Since you want Netlify to run your build, you set
npm run build. The value used in
command can be replaced by the build step for the framework you are using. The
publish setting defines where Netlify will serve static content from. You set
publish to the output directory of your build
[dev] section tells Netlify how to run your project for local development. Just like in the
[build] section, the
publish setting defines where Netlify will serve static content from. This section also has a
command setting that can be set to run the local development server for your framework. In this case you are only serving up static files and Netlify will handle that for you by default, so no
command setting is needed.
Since we configured Netlify to serve development content from the
src directory you can create that directory with the
mkdir src command in your terminal or through your code editor.
Next, create a new HTML document in
src/index.html and save the following content to 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’ve created a simple
Hello, world! webpage that you can deploy to Netlify.
Before installing your dependencies you should create a
.gitignore file in the root directory and save the following content to it:
This will prevent your
dist directories from being included in your
git commit next.
You now have all the files you need to deploy to Netlify. Take a moment to add, commit, and push your changes to GitHub with the following commands in 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 your dependencies. Once
npm install completes it will output a summary of the installation.
npm start in your terminal to start
netlify dev as defined in
package.json. Netlify Dev will detect that no framework was defined and serve static content from your
publish directory which is
src in this case. Netlify Dev will print out the local development URL, open your web browser with that URL, and continue running in 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 local development environment running, but have not yet connected your repository to Netlify. Terminate the local development server by holding the “control” key and pressing the “c” key (also referred to as
^C on a Mac).
- First, you’ll be asked to “Connect to your Git provider”. Click the “GitHub” button. This will open a new window to authorize the connection between Netlify and GitHub.
- When prompted select “Configure the Netlify app on GitHub” to authorize Netlify to read your repositories in GitHub.
- Once authorized, Netlify will ask you to “Pick a repository”. Find and select the repository you created for this project.
- Now you will be asked to configure the “Site settings, and deploy!”. Since you created a
netlify.tomlfile and pushed your changes to GitHub you’ll notice that this screen is already configured with your settings.
- Click the “Deploy site” button to trigger the first deploy of your new Netlify Site! This will bring you back to the Site overview and you’ll see a “Production deploys” section with your build
Starting Up. Click on your build from the “Production deploys” list which will take you to the Deploy log for that build.
Here you can watch the build output as Netlify runs your build command.
- If the build is successful, you’ll see “Site is live ✨” printed in the log and the deploy will be published.
- If there is an error, the deploy will fail and not be published. You can examine the log to determine the failure, make changes, and push those changes to GitHub to trigger a new build.
- Click the link to “< Deploys” near the top of the page. Here you will see that Netlify has generated a unique site name and URL for you in the “Deploys for” section.
- Click the link to your
https://<YOUR-SITE-NAME>.netlify.appsite on the Deploys page. This will open a new window where you will see the same “Hello, world!” page you saw in local development earlier now live in production on Netlify.
- Pat yourself on the back, you did it! 🎉
Well, you’d 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.htmland reload the page in your web browser. When you are satisfied with your changes in local development then add, commit, and push your changes to the
mainbranch to trigger a new deploy. Head over to Netlify to view the Deploy log. Once your site is live you can view the changes in production.
If you need to roll back to a previous version of the site for any reason, you can do so through Netlify. From the Deploys page, you’ll notice that the most recent deploy is at the top and is marked as
Click on a previous deploy. This will bring you to the deploy log where you will find a
Preview deploylink and a
Publish deploybutton. Use the
Preview deploylink to review the deploy and make sure it’s the one you want to roll back to. Use the
Publish deploybutton to make that deploy the live deploy.
Head back to the Deploys page and notice that your previous deploy is now marked as
You now can update your website with a
git pushand can instantly roll back to a previous deploy if you need to. There is a lot more Netlify has to offer. Stay tuned for more! 🙌