Bridgetown2024-03-18T21:16:39+00:00https://www.stefanvermaas.com/feed.xmlStefan VermaasRuby EngineerStefan VermaasDeploy a Bridgetown site on Digital Ocean’s App Platform2022-06-11T00:00:00+00:002022-06-11T00:00:00+00:00repo://posts.collection/_posts/2022-06-11-bridgetown-and-digital-ocean-apps.md<p>Nowadays, many cloud providers will automatically build and deploy your static site for you. While Digital Ocean supports many of the popular static site frameworks, it doesn’t support automatically deploying your <a href="https://www.bridgetownrb.com">Bridgetown</a> site.</p>
<p>However, Digital Ocean allows the use of Docker to create a custom build process. In this post, I’ll walk you through the process of automatically building and deploying our Bridgetown site on Digital Ocean’s App Platform.</p>
<h2 id="using-docker-for-the-build-process">Using Docker for the build process</h2>
<p>Digital Ocean currently doesn’t support building static sites that use multiple programming languages. To fix this, we’re going to add a <code class="highlighter-rouge">Dockerfile</code> that will handle the build process of your Bridgetown site for you.</p>
<p>Add <a href="https://gist.github.com/stefanvermaas/99806f010ed918fcc8b0c3913f48bf04">this Dockerfile</a> to your app and push it to your main branch. Now, we’re ready to connect our Bridgetown site to the Digital Ocean App Platform.</p>
<h2 id="connecting-to-digital-ocean">Connecting to Digital Ocean</h2>
<p>To connect your Bridgetown site to Digital Ocean, you’ll need to create an app on their App Platform first.</p>
<ol>
<li>Add a new app by going to “Apps” > “Create App” in your Digital Ocean account.</li>
<li>Select your “Service Provider” (e.g. Github, Gitlab, etc.).</li>
<li>Select your repository, and branch, and keep the source dir as <code class="highlighter-rouge">/</code>.</li>
<li>Select the “auto-deploy” feature.</li>
<li>Click “Next” to review your app.</li>
</ol>
<h2 id="finetuning-docker-for-the-app-platform">Finetuning Docker for the App Platform</h2>
<p>Now, Digital Ocean will automatically try to guess what type of app you’re adding. As we’re both adding a <code class="highlighter-rouge">Dockerfile</code> and a Ruby application, Digital Ocean added two services.</p>
<p>To address this, edit the app and make the following changes:</p>
<ol>
<li>Remove the “Ruby service” that was added.</li>
<li>Edit the “Docker service”.</li>
<li>Change the “Resource Type” of the Docker service to “Static Site”.</li>
<li>Change the “Output Dir” of the Docker service to <code class="highlighter-rouge">/app/output</code>.</li>
</ol>
<p>Now, click on “Back” and finish the process of setting up your app. After completion, Digital Ocean will deploy your Bridgetown site to their App Platform (for free).</p>
<p><strong>NOTE:</strong> If you’ve decided to name your Dockerfile <code class="highlighter-rouge">Dockerfile.deploy</code>, the initial deployment will fail. You’ll have to update the “App Spec” for your app on Digital Ocean.</p>
<p>Go to “Apps” > “your-static-site” > “Settings”, and change the <code class="highlighter-rouge">dockerfile_path</code> to <code class="highlighter-rouge">Dockerfile.deploy</code>. Now, trigger a rebuild of your website and you’re good to go.</p>Stefan Vermaas