I&#8217;m writing this blog post as a follow up to my other post about deploying Frontity to Vercel with GitHub. After I had set up the GitHub deploy, I installed Dependabot in all my projects, so it updates packages automatically.



I had actually never heard of Dependabot, as I am still quite new to GitHub. But I managed to install it quite easily, and it works like a charm. The only thing I did not like about it, is that for each Dependabot PR, a branch was made. And with Vercel, every branch gets a preview build. That becomes a lot of builds.



So I wanted to see if it was a way I could stop this, and after reading on the Vercel GitHub, and documentation, I found a solution. Vercel has a field called &#8220;<a href="https://vercel.com/support/articles/how-do-i-use-the-ignored-build-step-field-on-vercel" target="_blank" rel="noreferrer noopener">Ignore build step</a>&#8221; in the git settings, which you should read more about. But what I did was make a Bash script that runs before every build is started. The script looks like this:



<pre class="wp-block-code"><code>#!/bin/bash

if &#91;&#91; $VERCEL_GIT_COMMIT_REF =~ "dependabot" ]] ; then
 echo "&gt;&gt; Skipping deploy!"
 exit 0;
else
 echo "&gt;&gt; Proceeding with deploy."
 exit 1; 
fi</code></pre>



My goal was to stop preview builds from Dependabot branches, so I made a regex that checks if the variable $VERCEL_GIT_COMMIT_REF contains the word dependabot. The variable is the name of the branch, and every branch that Dependabot makes contains the word Dependabot. I wrote the script in a file called vercel.sh, which I put in the root of my project.



As you can see, before I added the script, every PR triggered a preview build:



<figure class="wp-block-image size-large"><img loading="lazy" width="917" height="965" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.13.07.png" alt="" class="wp-image-305" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.13.07.png 917w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.13.07-285x300.png 285w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.13.07-768x808.png 768w" sizes="(max-width: 917px) 100vw, 917px" /></figure>



But now, after the script, it looks like this:



<figure class="wp-block-image size-large"><img loading="lazy" width="927" height="955" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.16.01.png" alt="" class="wp-image-306" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.16.01.png 927w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.16.01-291x300.png 291w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.16.01-768x791.png 768w" sizes="(max-width: 927px) 100vw, 927px" /></figure>



As you can see, the preview build is cancelled. Here is a quick guide on how to do it:



<h2>Make a Bash file</h2>



You need to create a bash file (.sh) with these commands, and place it in the project, make sure it is uploaded to the GitHub repo.



<pre class="wp-block-code"><code>#!/bin/bash

if &#91;&#91; $VERCEL_GIT_COMMIT_REF =~ "dependabot" ]] ; then
 echo "&gt;&gt; Skipping deploy!"
 exit 0;
else
 echo "&gt;&gt; Proceeding with deploy."
 exit 1; 
fi</code></pre>



You don&#8217;t have to use this to only stop dependabot, you can make a new regex if you want it to stop something else.



<h2>Define the script in Vercel settings</h2>



In the settings of your project in Vercel, you need to run the script. You do this at the bottom in the Git tab. 



<figure class="wp-block-image size-large"><img loading="lazy" width="1018" height="388" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.21.24.png" alt="" class="wp-image-307" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.21.24.png 1018w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.21.24-300x114.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-at-11.21.24-768x293.png 768w" sizes="(max-width: 1018px) 100vw, 1018px" /></figure>



My script is called vercel.sh, and it is placed at the root of the project. So I just write &#8220;bash vercel.sh&#8221;. If you want to, you can place the script in the folder in the project, but the you need to enter &#8220;bash relative-path/vercel.sh&#8221;.



So now, every time a branch is made that matches your regex, this script will stop it from making a preview build.

Vercel – ignore GitHub branches

I&#8217;m a big fan of Frontity, and one of the things I really like is the ease of hosting the frontend. I chose Vercel out of the options available, and could not be happier with the choice. But one thing that I could not find much information on was deploying the site to Vercel with GitHub.



That&#8217;s why I&#8217;m writing this article, so that you can learn to deploy Frontity to Vercel with GitHub. When I first tried it, I got an error that the build could not be completed because it did not find a public folder. So I gave up for a bit, and just went back to deploying with the CLI. But today I sat down and tried for real. 



After searching for a while in the community, I found nothing. So I decided to just try my luck. I have been messing around in the project settings for Vercel before, so I started there again. Under the general tab of the project settings, I found &#8220;Build &amp; Development Settings&#8221;. Here I entered the frontity build commands, instead of the default ones.&nbsp;



And that did the trick, when I added a new commit to my &#8220;main&#8221; branch, the Vercel system made a new production commit, and it was deployed successfully. So here are the steps you need to take to make it work:



<h2>Change the Build &amp; Development Settings</h2>



First, you need to change the Build &amp; Development Settings, you can do this in the project settings, under the general tab.&nbsp;Switch the button on the right of every field to override, and then enter the following for each field:



<ul><li>Under framework, select &#8220;other&#8221;</li><li>Build command -&gt; frontity build</li><li>Output directory -&gt; /</li><li>Install command -&gt; npm install</li><li>Development command -&gt; frontity dev</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="614" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1024x614.png" alt="" class="wp-image-302" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1024x614.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-300x180.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-768x461.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1536x922.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36.png 2030w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



When you have changed all the settings, click save.



<h2>Connect Vercel to Github</h2>



The next step is to connect Vercel to GitHub, you can do this in the project settings under the git tab. Just select GitHub, and go through the steps and connect your account.&nbsp;



Before you click, it should look something like this:



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="424" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1024x424.png" alt="" class="wp-image-301" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1024x424.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-300x124.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-768x318.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1536x636.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35.png 2032w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



And after you have gone through the steps and selected a repo, it should look like this:



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="421" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1024x421.png" alt="" class="wp-image-299" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1024x421.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-300x123.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-768x316.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1536x632.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



PS! If you want to deploy from a GitHub organization, you need Vercel Pro.&nbsp;



<h2>Make a commit to the repo</h2>



Now all that remains is to make a commit to the repo. By default, Vercel sets the production branch to &#8220;main&#8221;, so if you use something else, like for instance &#8220;master&#8221;, you need to change that in the project settings as well, under the git tab.&nbsp;



<figure class="wp-block-image size-large"><img loading="lazy" width="1016" height="404" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3.png" alt="" class="wp-image-296" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3.png 1016w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3-300x119.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3-768x305.png 768w" sizes="(max-width: 1016px) 100vw, 1016px" /></figure>



So now, every time you make a commit to the production branch, Vercel will automatically make a production deployment with that brach. And if you want to preview something that you have done, you can create a new branch, and commit it. Vercel will then automatically make a preview deployment of that brach.



PS! Make sure that you include the vercel.json file in the repo, the deployment won&#8217;t work without it.



<pre class="wp-block-code"><code>{
 "version": 2,
 "builds": &#91;
 {
 "src": "package.json",
 "use": "@frontity/now"
 }
 ]
}</code></pre>



So that&#8217;s it, that&#8217;s how you deploy Frontity to Vercel with GitHub. If you have any questions, feel free to reach out to me, either by <a href="mailto:kasper@aamodtgroup.com">email</a> or <a href="https://twitter.com/kasperaamodt" target="_blank" rel="noreferrer noopener">Twitter</a>.

Hosting

Hosting

Vercel – ignore GitHub branches

Deploying Frontity to Vercel with GitHub