One place for hosting & domains

      Platform

      How To Build and Deploy a Hugo Site to DigitalOcean App Platform


      Hugo is a static site generator and framework for building websites. With Hugo, you define your themes using HTML and build your content using Markdown or other text processors. Hugo generates HTML that you can host anywhere.

      In this tutorial, you’ll use Hugo to build a small static website and deploy the site to DigitalOcean’s App Platform by using GitHub. Then you’ll make changes to your site and see those changes deployed automatically.

      Prerequisites

      To complete this tutorial, you’ll need:

      Step 1 — Installing Hugo

      To build your Hugo site, you’ll install the hugo command-line tool on your local machine. You’ll use this tool to generate your site, create content pages, and launch a small server you’ll use to test your site before you deploy it.

      Hugo is available as a single binary, so the installation process involves downloading the file to your machine and placing it on your path.

      Download Hugo from the releases page on GitHub. Hugo comes in two versions: the regular version and the extended version. Download the extended version so you have support for asset management and support for CSS preprocessing. Save the file to your Downloads directory.

      Once you’ve downloaded the file, you’ll need to uncompress the file and place it somewhere on your system PATH so you can run the file from any directory.

      On Windows, create the directory C:Hugo, unzip the file you’ve downloaded, and place it in C:hugo. Then add that folder to your PATH environment variable. To do this, use Windows Search and type “environment”. Select Edit Environment Variables for My Account. On the screen that appears, press the Environment Variables button, locate PATH in the System Variables section, and press the Edit button. Add c:hugobin in the text area and press OK to save the settings. Press OK on the rest of the dialogs to close them.

      On macOS or Linux, copy the executable to /usr/local/bin, as this is already included in your PATH environment variable by default.

      First, switch to the Downloads directory:

      Uncompress the file:

      • tar zxvf hugo_extended_0.75.1*.gz

      Then move the file to /usr/local/bin:

      Ensure that Hugo is configured by switching to your home directory and typing the hugo command:

      You’ll see the version number printed to the screen:

      Output

      Hugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z

      Now that Hugo is installed, you can create your site.

      Step 2 — Creating the Hugo Project

      Let’s create a small site about sharks. We’ll call it “Sharkopedia”, and it will have pages about different kinds of sharks.

      To create a site, use the hugo new site command. From your home directory, execute the following command:

      • hugo new site sharkopedia

      This creates the directory sharkopedia and displays a welcome message that tells you how to install a theme for your site:

      Output

      Congratulations! Your new Hugo site is created in /Users/your_username/sharkopedia. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.

      Instead of installing an existing theme, you’ll add a small amount of HTML and CSS to your site to define how it looks. Existing themes can often require a lot of configuration, and that’s outside of the scope of this tutorial.

      Switch to the sharkopedia directory:

      Your Hugo site has the following structure:

      Output

      ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── resources ├── static └── themes
      • archetypes are your content templates. You can use the hugo command to create new Markdown pages, and it’ll use the files in the archetypes directory as the template for those pages.
      • config.toml is the configuration file for the site, where you specify the site’s domain, title, and the theme you want to use.
      • content is the directory that holds your site’s content.
      • data is where you can store JSON files you can use when generating your site.
      • layouts is where you place the HTML files that define your site’s look and feel, or override the templates from a theme.
      • resources is where Hugo places files it generates, like optimized images.
      • static holds static assets, like files, stylesheets, scripts, or other assets that you don’t need Hugo to manage for you.
      • themes contains themes you create or download.

      You won’t use a theme in this tutorial; you’ll define HTML files in the layouts directory to define the way your site looks.

      Before moving on, open the file config.toml in your editor. Change the baseURL field to an empty string, and modify the title so it says “Sharkopedia”:

      config.toml

      baseURL = ""
      languageCode = "en-us"
      title = "Sharkopedia"
      

      Save the file.

      Next, you’ll create the layout and content for the site. The site will have a home page and a section called “Sharks”. To display your content, Hugo needs three types of template files:

      • A template for the home page.
      • A template for a page of content, like a page about a single shark.
      • A template that shows a list of pages, such as a page that lists all the sharks, or all of the tags or categories on the site.

      Let’s start by creating the home page template. Create the file layouts/index.html and open it in your editor. Add the following code to the file to define the site:

      layouts/index.html

      <!DOCTYPE html>
      <html lang="en-US">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title><^>{{ .Site.Title }}</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/style.css">
        </head>
        <body>
      
          <header>
            <h1>{{ .Site.Title }}</h1>
          </header>
      
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
          </main>
      
          <footer>
            <small>Made with love and Hugo</small>
          </footer>
        </body>
      </html>
      

      The {{ .Site.Title }} lines grab the title from the config.toml file. The {{ .Title }} line and {{ .Content }} line grab the title and content from the document associated with the home page, which you’ll create next.

      Save your file.

      By default, Hugo creates all new pages in draft mode. Open the file archetypes/default.md in your editor and modify it so that draft is false. This way all new pages you create won’t be in draft mode.

      archetypes/default.md

      ---
      title: "{{ replace .Name "-" " " | title }}"
      date: {{ .Date }}
      draft: false
      ---
      

      The replace line in the title field tells Hugo to generate the page’s title based on the filename.

      Save the file.

      Now use Hugo to generate a content file for your home page. From the terminal, in the directory of your project, type this command:

      This generates the file content/index.md:

      Output

      /Users/your_username/sharkopedia/content/_index.md created

      The underscore in the filename tells Hugo that this is the content page for either a listing page or the home page, as opposed to a regular piece of content.

      Open the content/_index.md file in your editor and add some text and change the title:

      content/_index.md

      ---
      title: "Welcome"
      date: 2020-10-07T14:07:35-05:00
      draft: false
      ---
      This is a site all about sharks! Select a shark from the list to learn more:
      

      The content in this file will be placed on the home page. Let’s test it out.

      From the terminal, launch Hugo’s development server with the following command:

      Visit http://localhost:1313 in your web browser and you’ll see your home page:

      The home page

      Once you’ve verified that the site is working, press CTRL+C to stop the server.

      Next you’ll need a template for single pieces of content, and for this project, you can duplicate the home page, although you’ll have to place it in a specific directory.

      Create the directory layouts/_default:

      Then create the file layouts/_default/single.html and copy the contents of your layouts/index.html file into the new file. You can do this from the command line with this command:

      • cp layouts/index.html layouts/_default/single.html

      Next, you’ll create a sharks content section of the site. To do so, you’ll use the hugo command to create new Markdown files in the content directory under a sharks subdirectory. Execute this command to create a content page for Hammerhead sharks:

      • hugo new sharks/hammerhead.md

      Note that you don’t specify the content directory when using the hugo new command.

      Now launch Hugo’s development server:

      Visit http://localhost:1313/sharks/hammerhead.md to see your page for Hammerhead sharks:

      Hammerhead page

      If you visit http://localhost:1313/sharks, you won’t see anything because you haven’t defined the final template you need: the template that Hugo uses to display lists of content. Let’s do that now.

      Stop the server by pressing CTRL+C.

      Create the file layouts/_default/list.html and open it in your editor. Inside the file, place the same content as your other templates:

      layouts/_default/list.html

      <!DOCTYPE html>
      <html lang="en-US">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title><^>{{ .Site.Title }}</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/style.css">
        </head>
        <body>
      
          <header>
            <h1>{{ .Site.Title }}</h1>
          </header>
      
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
          </main>
      
          <footer>
            <small>Made with love and Hugo</small>
          </footer>
        </body>
      </html>
      

      Inside the <main> tag, after the title and content, place the following code which generates a bulleted list of pages to display:

          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
      
            <ul>
            {{ range .Pages }}
              <li><a href="https://www.digitalocean.com/community/tutorials/{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
            </ul>
          </main>
      
      

      The range function iterates over all of the pages for the section of the site. The actual value of .Pages is determined when Hugo generates your site. This list template you created will be used as the default template for any lists, including tag pages, category pages, and your “sharks” section. You can make more specific templates for your sections, but this gives you a default layout that works everywhere. Save the file.

      Finally, create pages for Mako sharks and whale sharks so there’s more content to display:

      • hugo new sharks/mako.md
      • hugo new sharks/whale.md

      Start the server again with hugo serve and visit http://localhost:1313/sharks and you’ll see the three Shark pages listed:

      The sharks page with all three pages listed

      Stop the server with CTRL+C.

      Your site is ready. Next you’ll push your code to GitHub so you can deploy it.

      Step 3 — Pushing the Site to GitHub

      DigitalOcean App Platform deploys your code from GitHub repositories, so the first thing you’ll need to do is get your site in a Git repository and push that repository to GitHub.

      First, initialize your Sharkopedia project as a Git repository:

      When you generate your site, Hugo will place files in a directory called public. Let’s exclude that directory by adding it to Git’s ignore list. Create a new file called .gitignore and add the following code to the file:

      .gitignore

      public
      

      Save the file.

      Now execute the following command to add files to your repository:

      • git add archetypes/ config.toml content/ .gitignore layouts/

      You’ll notice that the data, themes, resources, static, and themes aren’t included in this command; those directories are empty and Git only stores files, not directories. If you add your own data, themes, or static content later, you’ll add those directories later.

      Make your initial commit:

      • git commit -m "Initial version of the site"

      Your files will commit:

      Output

      [master (root-commit) b045f24] First version of the site 10 files changed, 114 insertions(+) create mode 100644 .gitignore create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/_index.md create mode 100644 content/sharks/hammerhead.md create mode 100644 content/sharks/mako.md create mode 100644 content/sharks/whale.md create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.html

      Open your browser and navigate to GitHub, log in with your profile, and create a new repository called sharkopedia. Create an empty repository without a README or license file.

      Once you’ve created the repository, return to the command line to push your local files to GitHub.

      First, add GitHub as a remote repository:

      • git remote add https://github.com/your_username/sharkopedia

      Next, rename the default branch main, to match what GitHub expects:

      Finally, push your main branch to GitHub’s main branch:

      Your files will transfer:

      Output

      Enumerating objects: 16, done. Counting objects: 100% (16/16), done. Delta compression using up to 6 threads Compressing objects: 100% (14/14), done. Writing objects: 100% (16/16), 1.58 KiB | 1.58 MiB/s, done. Total 16 (delta 1), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (1/1), done. To https://github.com/your_username/sharkopedia * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.

      Enter your GitHub credentials when prompted to push your code.

      You’re ready to deploy your site to DigitalOcean’s App Platform.

      Step 4 — Deploying to DigitalOcean with App Platform

      Once the code is pushed, visit https://cloud.digitalocean.com/apps and click Launch Your App. You’ll be prompted to connect your GitHub account:

      Connect GitHub account

      Connect your account and allow DigitalOcean to access your repositories. You can choose to let DigitalOcean have access to all of your repositories, or just to the ones you wish to deploy.

      Allow repository access

      Press Install and Authorize. You’ll be returned to your DigitalOcean dashboard to continue creating your app.

      Once your GitHub account is connected, select the your_account/sharkopedia repository and click Next.

      Choose your repository

      Next, provide your app’s name, choose a region, and ensure the main branch is selected. Then ensure that Autodeploy code changes is checked. Press Next to continue.

      Choose name, region, and branch

      DigitalOcean will detect that your project is a Hugo site and will automatically populate the command to build your site.

      Hugo site detected and build command populated

      Press Next and you’ll be directed to the Finalize and Launch screen where you’ll choose your plan. Static sites are free, so choose Starter App and press Launch Starter App at the bottom. Your site will build:

      Site building and deploying

      Once the build process completes, the interface will show you a healthy site and provide a link for you to visit the site:

      [The deployed site in the dashboard](blob:https://imgur.com/874b4f40-5163-4ef3-82c3-4602a1ec0912)

      Now that your site is deployed, you can make changes by pushing your code to GitHub.

      Step 5 — Deploying Changes

      To ensure that changes get deployed, let’s add the list of sharks to the home page of the site. When you commit the changes to your repository and push them to GitHub, they’ll deploy automatically.

      Open the file layouts/index.html in your editor and add the following code to iterate over all the pages of your site that are sharks and display them:

      layouts/index.html

      ...
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
      
            <ul>
            {{ range (where site.RegularPages "Type" "in" "sharks") }}
              <li><a href="https://www.digitalocean.com/community/tutorials/{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
            </ul>
          </main>
      

      This version uses (where site.RegularPages "Type" "in" "sharks") to find only the content pages for sharks. Unlike your default list template, your home page needs more direction about what kind of content to display.

      Save the file. Run the server with hugo serve and visit http://localhost:1313 to see your sharks listed:

      Sharks on the home page

      Press CTRL+C to stop the server.

      Now add the updated file to your repository:

      • git add layouts/index.html

      Make a commit:

      • git commit -m "Add sharks to home page"

      Finally, push your code to GitHub:

      Within a few moments, your changes will be deployed. If you switch back to your DigitalOcean App status page, you’ll see the progress bar deploying your app again:

      Redeploy progress

      Once it finishes, visit your site to see your changes live.

      Conclusion

      In this tutorial you built a basic Hugo website and deployed using DigitalOcean’s App Platform. Any changes you commit and push to your repository will be redeployed, so you can now expand your site. You can find the example code for this tutorial in the DigitalOcean Community Repository

      The example in this tutorial is a minimal Hugo site. Your own site may have more complex themes and features, but the deployment process will be the same.



      Source link

      How To Deploy a Static Website to the Cloud with DigitalOcean App Platform


      Introduction

      If you’ve built a static website in a local environment, the next step is to decide how to publish it to the web. One way to publish your site is to deploy it as an application through DigitalOcean App Platform, which offers free hosting for three static sites. Deploying applications often requires setting up underlying server infrastructure. App Platform automates this work, allowing you to deploy your static website to the cloud from a GitHub repository.

      This tutorial will guide you through all the steps of deploying a static website to the cloud using App Platform, GitHub (a software development platform), and GitHub’s Desktop Application. The instructions here should work for any static website you’ve built in a local environment, including websites created with our tutorial series How To Build a Website With HTML. We will also walk you through how to use our sample HTML website for this tutorial if you don’t have a website ready to deploy, or would just like to test out App Platform. By the end of this tutorial, you should have a published website and an understanding of how to deploy websites to the cloud from a GitHub repository with App Platform.

      Note: If you already have a GitHub account and a GitHub repository for your website project, you can skip to Step 6 for instructions on getting started with App Platform.

      Prerequisites

      • Files for a static website, such as created in the tutorial series How To Build a Website With HTML or on your own. Make sure your website files work locally before proceeding with this tutorial.
      • An email address to register for a free GitHub account.
      • A credit card or Paypal account for signing up with DigitalOcean’s cloud service. You will not be charged for your first three sites.

      Step 1 — Create a GitHub Account

      If you don’t already have a GitHub account, you’ll need to register for one so that you can create a GitHub repository for your project. GitHub is a software development platform that allows developers to host, share, and collaborate on coding projects. To create a free account, sign up on GitHub’s homepage.

      GitHub Sign Up page

      Once you have confirmed your account, you are ready to proceed to the next step. Remember your login credentials, as you’ll need them in Step 3.

      Step 2 — Download and Install the GitHub Desktop App

      Many developers use the command-line interface (CLI) tool Git to interact with GitHub, but you can also use the GitHub Desktop app if you are not familiar with using your computer’s terminal. (If you’d like to learn more about using the CLI tool Git, you can visit our guide How To Contribute To Open Source: Getting Started With Git. This tutorial will proceed with instructions for using the GitHub Desktop app.

      Download the GitHub Desktop app by following the instructions on the GitHub Desktop homepage. Next, open the downloaded application file and complete the installation process as instructed.

      After the installation is complete, you are ready to proceed to the next step.

      Step 3 — Create a GitHub Repository for your Website Project

      In this step, we’ll use the GitHub Desktop app to create a local repository on your machine for your website project.

      First, open the GitHub Desktop app. Click the “Sign in to GitHub.com” blue button :

      Image of GitHub Desktop sign in window

      Follow the prompts to connect the GitHub Desktop app with your GitHub account. Once the Desktop app is connected with your account, a window should appear with options for getting started. Click on the “Create a New Repository on Your Hard Drive” button (third large button from the top):

      Image of GitHub Desktop window with options for creating GitHub project

      Next, you will be prompted to fill out the details of your new repository:

      Image of New Repository window on Github Desktop

      In this window, enter the following information:

      • The name of your repository. For this tutorial, we’ll call it “my-static-site.”
      • A description of your repository for reference.

      You can leave the automatically-generated Local Path as it is. This is where GitHub Desktop will store your project on your local machine.

      You can leave the option to initialize the repository with a README blank. You can also keep “none” as the selection for “Git Ignore” and “Licence” for now.

      Click “Create Repository.” The Desktop app should now show the details of your newly-created repository. We’ll go over what these different panels display in the next step.

      Image of newly-created repository on GitHub Desktop app

      Once your repository is created, you should be ready to proceed to the next step.

      Step 4 — Copy Website Files to GitHub Repository

      In this step, we’ll copy the files of your website project and place them in the newly-created GitHub repository folder.

      Note: If you want to use our sample website to explore App Platform, download the zip file from the GitHub repository by clicking the green “Code” button in the upper right and selecting the option to “Download ZIP”:

      Arrow pointing to “Code” button on GitHub repository page

      Once the ZIP file has finished downloading, unzip the file to access the folder that contains the website files. This folder will serve as your website project’s working folder in the steps below.

      First, on your desktop, open your website project’s working folder, or the folder that is currently storing all of your website project’s files and folders. In this example, the working folder is called “html-site”.

      Next, find and open the newly created repository folder that you named in Step 3. In this example, the repository folder is called “my-static-site”.

      Copy the files from your working folder to your repository folder. To copy the files you can select all of your website files and simultaneously click Right Click (on Windows) or CTRL + Left Click (on Mac) and select “Copy X items”. Then, to paste copies of your files into the repository folder, click into the repository folder, click Right Click (on Windows) or CTRL + Left Click (on Mac), and select “Paste X items”:

      Gif of copying and pasting website files into repository folder

      After pasting the files into your repository folder, the GitHub Desktop app should display the files in the “Changes” panel on the left side of the app window:

      Image of Desktop App with newly-added files

      If you are using a macOS operating system, don’t be alarmed if you see the addition of a .DS_STORE file in the “Changes” panel. This is an automatically-generated file that stores information about the folder and should not affect your project.

      Once your folders are in your local repository folder, you are ready to save your changes to the repository. On GitHub, saved changes are called commits. Each time you commit changes, you must make a comment describing your changes.

      To commit your changes, add a comment in the field that says “Summary (required)” and any additional info you’d like to include in the field “Description” in the bottom left corner of the Desktop app:

      Image of where to add comment when committing files via the GitHub Desktop app

      Then click the blue button “Commit to master” located below the text fields, This action will save your changes to the “main” branch of your project. Note that GitHub previously used the word “master” instead of “main” for the primary branch of users’ repositories. Please see their information on renaming these conventions, and refer to GitHub on their timeline for rolling these changes out. On GitHub, the main or master branch is the definitive branch of the project, which can be copied to work on different versions of the same repository simultaneously. To learn more about branches, you can visit our tutorial How To Use Git Branches or GitHub’s documentation.

      Once you have committed your changes to the main branch, your files in the left hand panel will disappear as this panel only displays files that contain uncommitted changes. You should receive a message in the bottom left corner noting that your commit was successful.

      Step 5 — Pushing Committed Files to GitHub

      In the last step, you committed your changes to the repository on your local machine. This repository, however, has not yet been pushed to your GitHub account. In this step, we will push this commit to your repository on GitHub, which will add your website files to your GitHub repository.

      To publish your local repository to your GitHub repository, click on the blue “Publish repository” button:

      Image of publish to GitHub option on GitHub Desktop App

      Once you click the button, a modal will appear asking you to fill out the name and description of your repository. Fill out your details. You may keep the repository private if you wish.

      Image of details for publishing the repo

      After filling out your details, click the blue “Publish repository” button. Once your files finish uploading, your repository should be available on your account on GitHub. To check, visit the relevant URL, which will have the following format:

      https://github.com/your_github_account_name/your_repository_name
      

      Be sure to replace the highlighted text with your account name and repository name. You should receive a webpage that shows your repository’s files:

      Image of repository on GitHub.com

      Now that your website files are hosted on GitHub, we can use them with App Platform. First, however, we’ll need to create a DigitalOcean account.

      Step 6 — Create Your DigitalOcean Account

      To create a DigitalOcean account, visit the sign up page and choose among the following options:

      • Entering an email address and password
      • Using Google Single Sign On
      • Using GitHub Single Sign On

      If you choose to use an email address and password, you will need to verify your email address using the email automatically sent to you.

      Note that you will need to enter a payment method to verify your identity and keep spammers out. You will not be charged. You may see a temporary pre-authorization charge to verify the card, which will be reversed within a week.

      Once you have verified your account, you should be able to access App Platform. For complete documentation about signing up for a DigitalOcean account, please visit our guide Sign up for a DigitalOcean Account

      You are now ready to proceed to the next step.

      Step 7 — Deploy Your Website with DigitalOcean App Platform

      In this step we’ll deploy our static website with App Platform.

      First, visit the DigitalOcean App Platform portal and click on the blue “Launch Your App” button:

      App Platform Portal

      On the next page, you will be prompted to select your GitHub repository. Since you have not yet connected your App Platform account to your GitHub account, you’ll need to click on the “Link Your GitHub Account” button:

      App Platform webpage with first step of deloying an app

      You will then be prompted to sign into your GitHub account (if you aren’t already signed in) and select the account that you want to connect to App Platform. Once selected, you will be directed to a page where you can select which repositories to permit App Platform to access. Click the “Only select repositories” button and select the repository that you pushed to your GitHub account in Step 5:

      GitHub webpage where users select repository to connect to the App Platform

      When you are done, click the “Save” button at the bottom of the webpage. You will now be directed back to App Platform, where you should now be able to select your repository in the dropdown menu:

      App Platform webpage displaying menu for selecting repository

      After selecting your repository, click “Next.” You will then be prompted to choose the name, branch, and options for Autodeploy. If the Autodeploy box is checked, any future changes you make to your repository files will be immediately pushed to your live site. Make your selections and click “Next”:

      Choosing name and branch of repository window on the App Platform

      Next, you will be taken to a page where you can configure your App. This page should automatically detect your component type as a “Static Site”:

      App Platform webpage for configuring your app

      You should not need to make any changes on this page. Scroll down and click the blue button “Next” at the bottom of the page. You will be directed to a new window where you can select the “Starter” plan if you’d like to deploy this site as one of your free three static sites:

      App Platform page for selecting payment plan

      Select your desired plan and click the “Launch Your Starter App” button. You will be directed to your app’s admin page. When your app is finished deploying, you will see the “Deployed Successfully!” message:

      Admin page for app on App Platform.

      You will also see a link under your app’s name at the top of the page. Click on the link to make sure your site is working properly. You should be directed to a new web page with your published website. If your site is not appearing, go back and check for errors.

      Your static site should now be published to the web through App Platform. Anyone with the app link will be able to access your site. If you’d like to add a custom domain to your site, please visit our How To Manage Custom Domains guide in App Platform product documentation.

      Conclusion

      In this tutorial, you have learned how to deploy a static site using App Platform, with a GitHub account, and the GitHub Desktop app. If you wish to make changes to your website, edit your files on your local machine and commit and push changes to your GitHub repository as instructed in Steps 4 and 5. Once your changes are pushed to your GitHub repository, they should automatically update on your site if you kept the “Automatically deploy on push” option selected in Step 7.

      For further information about App Platform, please visit the official App Platform product documentation. Remember, you can host up to three free static sites. If you wish to delete your app, please follow the instructions in the section Destroy an App in the product documentation.



      Source link

      How To Deploy a Static Site from GitHub with DigitalOcean App Platform [Quickstart]


      Introduction

      If you’ve built a static website in a local environment, the next step is to decide how to publish it to the web. One way to publish your site is to deploy it as an application through DigitalOcean App Platform, which allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure. App Platform offers free hosting for your first three static sites.

      In this tutorial, you will deploy a static website with App Platform from a GitHub repository. To follow along, you should have your website files hosted in a GitHub repository that you own. If you need instructions for hosting files in a GitHub repository and creating a GitHub account, please visit our our more in-depth tutorial How To Deploy a Static Website to the Cloud with DigitalOcean App Platform. By the end of this tutorial, you should have a published website and an understanding of how to deploy websites to the cloud from a GitHub repository with App Platform.

      Prerequisites

      • A GitHub account.
      • Files for a static website in a GitHub repository that you own. You may also clone our sample static website repository for testing purposes.
      • A credit card or Paypal account for signing up with DigitalOcean’s cloud service. You will not be charged for your first three sites.

      Step 1 — Create Your DigitalOcean Account

      To create a DigitalOcean account, visit the sign up page and choose among the following options:

      • Entering an email address and password
      • Using Google Single Sign On
      • Using GitHub Single Sign On

      If you choose to use an email address and password, you will need to verify your email address using the link included in the email that is automatically sent to you after registration.

      Note that you will need to enter a payment method to verify your identity. This is a required step that helps to keep spammers out. You will not be charged. You may see a temporary pre-authorization charge to verify the card, which will be reversed within a week.

      Once you have verified your account, you should be able to access the DigitalOcean App Platform. For complete documentation about signing up for a DigitalOcean account, please visit our guide Sign up for a DigitalOcean Account.

      You are now ready to proceed to the next step.

      Step 2 — Deploy Your Website with DigitalOcean App Platform

      In this step we’ll deploy our static website with App Platform.

      First, visit the DigitalOcean App Platform portal and click on the blue “Launch Your App” button:

      App Platform Portal

      On the next page, you will be prompted to select your GitHub repository. Since you have not yet connected your App Platform account to your GitHub account, you’ll need to click on the “Link Your GitHub Account” button:

      App Platform webpage with first step of deloying an app

      You will then be prompted to sign into your GitHub account (if you aren’t already signed in) and select the account that you want to connect to App Platform. Once selected, you will be directed to a page where you can select which repositories to permit App Platform to access. Click the “Only select repositories” button and select the repository that you wish to push to App Platform.

      GitHub webpage where users select repository to connect to the App Platform

      When you are done, click the “Save” button at the bottom of the webpage. You will now be directed back to App Platform, where you should now be able to select your repository in the dropdown menu:

      App Platform webpage displaying menu for selecting repository

      After selecting your repository, click “Next.” You will then be prompted to choose the name, branch, and options for Autodeploy. If the Autodeploy box is checked, any future changes you make to your repository files will be immediately pushed to your live site. Make your selections and click “Next”:

      Choosing name and branch of repository window on the App Platform

      Next, you will be taken to a page where you can configure your App. This page should automatically detect your component type as a “Static Site”:

      App Platform webpage for configuring your app

      You should not need to make any changes on this page. Scroll down and click the blue button “Next” at the bottom of the page. You will be directed to a new window where you can select the “Starter” plan if you’d like to deploy this site as one of your free three static sites:

      App Platform page for selecting payment plan

      Select your desired plan and click the “Launch Your Starter App” button. You will be directed to your app’s admin page. When your app is finished deploying, you will see the “Deployed Successfully!” message:

      Admin page for app on App Platform.

      You will also see a link under your app’s name at the top of the page. Click on the link to make sure your site is working properly. You should be directed to a new web page with your published website. If your site is not appearing, go back and check for errors.

      Your static site should now be published to the web through App Platform. Anyone with the app link will be able to access your site. If you’d like to add a custom domain to your site, please visit our How To Manage Custom Domains guide in App Platform product documentation.

      Conclusion

      In this tutorial, you have learned how to deploy a static site from GitHub to the DigitalOcean App Platform. If you kept the “Automatically deploy on push” option selected in Step 2, any changes you make to your GitHub repository will be automatically pushed to your site. If you did not select that option, you can deploy your changes by returning to your App’s admin page and clicking the “Deploy” button in the upper right hand corner.

      For further information about App Platform, please visit the official App Platform product documentation and App Platform How To Manage Static Sites. Remember, you can host up to three free static sites. If you wish to delete your app, follow the instructions in the section Destroy an App in the product documentation.



      Source link