Deploy Websites to Netlify

Use Netlify API to deploy a brand new, or an existing website. With this approach, users have more control over the deploy process and don't have to bind to a code repository like Github.

Comment

Inspiration

As a developer who's very keen on blogging, I'm always looking for better ways to make static site deployment as fast and friction-free as possible.

Traditionally, with static sites, users need to push their codes to a Git provider like Github, Bitbucket to trigger deployment. The workflow is primarily done via the terminal. However, Netlify, a premier hosting solution for static sites, provider another way to deploy: use its API.

With this approach, users won't have to give Netlify access to their Git provider account, they can deploy from the user-friendly interface of Postman, and they have more control over the deploy process.

What it does

This collection contains three requests:

  • The first request is a POST request to create a new site in the user's Netlify account.
  • The second request is a POST request which contains a list of files that will be included in the deploy.
  • The last request is a PUT request to upload the required files to Netlify. Each PUT request corresponds to a file required to upload to Netlify.

How we built it

Once the first request returns successfully, I save the site ID in the response body as an environment variable so that it can be reused in the subsequent request.

For the second request, I construct the URL from the site ID saved in the previous request. {{netlify_base_url}}/sites/{{site_id}}/deploys.

The request body takes the following format:

{
    "files":{
       "index.html":"bbc833bfbb64ec792f262d940fe27ebaebae01a4",
       "first.html": "c5045de396718f8bed7d275a5db66889f8ba8fcb",
       "second.html": "60a485665b50c25c0ac83b23417ac588421c6bb6",
       "third.html": "9b780b93bf552555404bc5b13951fa568a005904"
    }
}

The request body is a nested object which contains a property named files, and value is another object. This object contains multiple key-value pairs, with the key being the file path relative to the root directory and value being the respective SHA1.

The SHA1 value is generated by cd into the project directory and run the shasum command. Example:

shasum index.html
shasum first.html
shasum second.html
shasum third.html

The response from Netlify should contain information about the deploy, and the fields that I'm most interested in are:

  • the deploy ID, which I save to the environment.
  • the required field whose value is an array of SHA1 of files expected by Netlify.

Challenges we ran into

The trickiest part of this workflow is testing the list of required SHA1 returned by Netlify.

This list is not necessarily the same as the list in the request body, because Netlify only requires users to upload files whose SHA1 have changed from the last deploy.

For example, you may include four files in the request body, but if none of your files have been changed from the last deploy, the required field will be an empty array. If only one file has changed, the required field will be an array with a length of 1.

That sounds straightforward, but how do I test for that?

This is when I learned about the concept of cache. I created an environment variable named uploaded_files. After a successful PUT request, I store the file name and its SHA1 to this variable.

When I run the POST request to send a list of files to be included in a deploy, I retrieve the uploaded_files variable from the environment. I loop through each file and check if the SHA1 stored in the environment is different from the SHA1 in the request body. If they are different, that means the file has changed from the last deploy.

At this point, I create a new environment variable named sha_list which is an array object. I push the new SHA1 into this array, then save this variable to the environment. Then I test if this array is the same as the required array returned by Netlify.

Besides, there is another challenge that I never could have imagined. I don't know how to make create a public workspace. The instruction on the Postman documentation makes it look so easy, but I couldn't find the option to change a workspace visibility from Team to Public on the desktop app.

At one point, I felt so desperate. I've come this far, and it would be insane if my workspace can't be made public.

After much hair pulling, I discovered that the setting is only available on the web app. Phew.

Accomplishments that we're proud of

  • Write a helper function to check if two arrays contain the same elements.
  • Work with JSON data, namely JSON.parse() and JSON.stringify().

What we learned

I have a lot of questions during the building of this collection, such as:

  • How to store and reuse values in my requests and scripts?
  • How to make sure that anyone else can run this collection successfully?

Thanks to this challenge, I've learned about using variables and testing. I believe they have increased my ability to work efficiently and minimize the likelihood of error.

What's next for Deploy Websites to Netlify

On a large, complex site, this collection won't cut it. Thus, I will find a way to integrate it into other systems to build out a more robust deploy pipeline.

Built With

Share this project:

Updates