قالب وردپرس درنا توس
Home / Tips and Tricks / How to implement a static site for free using the DigitalOcean app platform – CloudSavvy IT

How to implement a static site for free using the DigitalOcean app platform – CloudSavvy IT



DigitalOcean logo

App Platform is a new Platform-as-a-Service (PaaS) offering from DigitalOcean. It allows you to push code to production without configuring any infrastructure. App Platform connects to GitHub and GitLab repositories to automatically build and deploy your projects.

DigitalOcean launched the App Platform in October 2020 and said it wanted to ̵

6;reimagine’ the PaaS concept. App Platform is a fully managed solution that supports most popular languages, provides an automatic HTTPS certificate and offers horizontal and vertical scaling.

Create your site

In this guide, we’ll show you how to use the free starter plan to build and deploy a static website without worrying about infrastructure. You can start up to three sites for free. Additional sites can be purchased by upgrading to a higher tier or by paying a flat fee of $ 3 / month per site.

The first step is simple: you have to create your static site! App Platform supports most popular static generators such as Gatsby, Hugo and Jekyll. You can also use plain HTML and CSS, without a build process.

We are using a barebones Jekyll site for this tutorial. If you just want to go along, you can use one of DigitalOcean’s sample applications. Once you’ve created your site, make sure to push your code to a Git repository in your GitHub or GitLab account.

Connecting DigitalOcean to your repository

Once you are ready to deploy, log in to your DigitalOcean account. Click on the “Apps” link in the left sidebar. Then click on the blue “Start your app” button.

Screenshot showing the location of the app platform in the DigitalOcean cloud user interface

You now need to connect App Platform to your GitHub or GitLab account. Click on the button that applies to you. Follow the instructions to authenticate and allow DigitalOcean access to your repositories. You will then be returned to DigitalOcean.

Screenshot of creating an app in DigitalOcean App Platform

You should now see that your account is connected. Select the repository you want to deploy from the drop-down menu. If your repository is not listed, make sure that the permission settings allow DigitalOcean access. To check this, follow the help link at the bottom of the screen.

Screenshot of creating an app in DigitalOcean App Platform

Configure your app

On the next screen, start by giving your app a name. This is shown in the DigitalOcean UI. It’s usually a good idea to match the name of your Git repository.

Use the drop-down menu to choose which DigitalOcean data center region to deploy to. At the time of writing, only the New York, Amsterdam and Frankfurt regions supported App Platform. You should usually choose the data center that is geographically closest to your users.

Screenshot of creating an app in DigitalOcean App Platform

You now need to select the branch you want to deploy from. The default value of master should be correct for most projects. You can change this to easily deploy a pre-release version of your project, such as a staging or test Department.

Screenshot of creating an app in DigitalOcean App Platform

The last option, “Autodeploy Code Changes”, determines whether DigitalOcean should automatically update your app. When enabled, App Platform monitors your Git repository. It will automatically start a new implementation when new code is merged into your selected branch. You must manually start each new deployment if you do not enable this setting.

When you click “Next”, DigitalOcean scans your repository to find out how it is structured. In our case, App Platform has detected that we are implementing a Jekyll site. The build command has been filled in automatically.

Screenshot of creating an app in DigitalOcean App Platform

You can edit the build command if you want to customize how your site is built. You can also set environment variables that are made available for the build process.

Deploy your app

Click the Next button to complete the implementation of your app. You need to confirm the App Platform layer to which you want to deploy. Make sure the free starter plan is selected (or switch to a paid plan if you prefer) and check out the monthly app charges shown. Finally, click on the blue “Launch Starter App” button to start your deployment.

Screenshot of the DigitalOcean App Platform plan selection screen

Deployment can take a few minutes. App Platform needs to build your site, with the Jekyll compiler in our case, before pushing it onto DigitalOcean’s infrastructure. Progress is displayed in the project dashboard.

Eventually you will see a green message ‘Successfully implemented’. Your app is now deployed in the DigitalOcean cloud! Click on the “Live App” link to view your implementation. You have a random one ondigitalocean.app subdomain. In our case, we can now see the default Jekyll homepage.

Screenshot of an example Jekyll site

Manage your app

Now that your app is live, you can use the dashboard to monitor and manage it. The ‘Overview’ tab allows you to view the latest implementation time and health statistics at a glance.

Screenshot of the DigitalOcean App Platform dashboard

Click on the “Insights” tab for more detailed information. This displays metric graphs that record your app’s CDN throughput. Use the “Deployments” tab to view the implementation history. This shows a single “first implementation” event to begin with. It is populated with new logs as you run additional deployments.

Screenshot of the DigitalOcean App Platform dashboard

You can now try to update your app. Change a file in your repository, make a Git commit, and push it to the branch you’re deploying from. If you have automatic deployments enabled, DigitalOcean will detect the push event and automatically redeploy it. Your change will be live in minutes!

Add a domain

App Platform has built-in support for custom domains. The “ondigitalocean.app” environment that you are assigned by default will probably not be used much after the first experiments.

Click the ‘Settings’ tab in your app’s dashboard. Then click the “Edit” link next to the Domains heading. Press the “Add Domain” button and type the domain you want to use.

Screenshot showing DigitalOcean App Platform settings page

On the next screen, follow the guidelines to associate your domain with your App Platform implementation. When using the DigitalOcean name servers, the relevant DNS records will be added automatically. Otherwise, you will have to manually copy the displayed DNS records to your registrar’s DNS settings interface.

Screenshot of the DigitalOcean App Platform dashboard

Click on “Add domain” to link the domain to your app. You can use it to access your implementation once the DNS resolution is set correctly. DigitalOcean automatically obtains an SSL certificate for your site.

Conclusion

DigitalOcean’s App Platform is a new contender in the PaaS space. It allows you to deploy apps from a Git repository without having to think about infrastructure. You connect your account, select your repository and follow the prompts to get your code live on the web.

We only looked at the simplest implementation, a static site with no external dependencies. App Platform can also be used to host back-end services and databases with comparable ease of use. Each app can contain several components, such as a PHP API, a static frontend and a database. Using the dashboard, you can view the logs of your services and get interactive console access to your active components.

Behind the scenes, your code is automatically containerized with Docker. It is then deployed in DigitalOcean managed Kubernetes clusters. By using App Platform, you can focus on your code and keep building functions, without worrying about infrastructure and deployments.


Source link