One place for hosting & domains

      Static

      How To Deploy a Static HTML Website with Ansible on Ubuntu 20.04 (Nginx)



      Part of the Series:
      How To Write Ansible Playbooks

      Ansible is a modern configuration management tool that doesn’t require the use of an agent software on remote nodes, using only SSH and Python to communicate and execute commands on managed servers. This series will walk you through the main Ansible features that you can use to write playbooks for server automation. At the end, we’ll see a practical example of how to create a playbook to automate setting up a remote Nginx web server and deploy a static HTML website to it.

      If you were following along with all parts of this series, at this point you should be familiar with installing system packages, applying templates, and using handlers in Ansible playbooks. In this part of the series, you’ll use what you’ve seen so far to create a playbook that automates setting up a remote Nginx server to host a static HTML website on Ubuntu 20.04.

      Start by creating a new directory on your Ansible control node where you’ll set up the Ansible files and a demo static HTML website to be deployed to your remote server. This could be in any location of your choice within your home folder. In this example we’ll use ~/ansible-nginx-demo.

      • mkdir ~/ansible-nginx-demo
      • cd ~/ansible-nginx-demo

      Next, copy your existing inventory file into the new directory. In this example, we’ll use the same inventory you set up at the beginning of this series:

      • cp ~/ansible-practice/inventory .

      This will copy a file named inventory from a folder named ansible-practice in your home directory, and save it to the current directory.

      Obtaining the Demo Website

      For this demonstration, we’ll use a static HTML website that is the subject of our How To Code in HTML series. Start by downloading the demo website files by running the following command:

      • curl -L https://github.com/do-community/html_demo_site/archive/refs/heads/main.zip -o html_demo.zip

      You’ll need unzip to unpack the contents of this download. To make sure you have this tool installed, run:

      Then, unpack the demo website files with:

      This will create a new directory called html_demo_site-main on your current working directory. You can check the contents of the directory with an ls -la command:

      • ls -la html_demo_site-main

      Output

      total 28 drwxrwxr-x 3 sammy sammy 4096 sep 18 2020 . drwxrwxr-x 5 sammy sammy 4096 mrt 25 15:03 .. -rw-rw-r-- 1 sammy sammy 1289 sep 18 2020 about.html drwxrwxr-x 2 sammy sammy 4096 sep 18 2020 images -rw-rw-r-- 1 sammy sammy 2455 sep 18 2020 index.html -rw-rw-r-- 1 sammy sammy 1079 sep 18 2020 LICENSE -rw-rw-r-- 1 sammy sammy 675 sep 18 2020 README.md

      Creating a Template for Nginx’s Configuration

      You’ll now set up the Nginx template that is necessary to configure the remote web server. Create a new folder within your ansible-demo directory to hold non-playbook files:

      Then, open a new file called nginx.conf.j2:

      This template file contains an Nginx server block configuration for a static HTML website. It uses three variables: document_root, app_root, and server_name. We’ll define these variables later on when creating the playbook. Copy the following content to your template file:

      ~/ansible-nginx-demo/files/nginx.conf.j2

      server {
        listen 80;
      
        root {{ document_root }}/{{ app_root }};
        index index.html index.htm;
      
        server_name {{ server_name }};
      
        location / {
         default_type "text/html";
         try_files $uri.html $uri $uri/ =404;
        }
      }
      

      Save and close the file when you’re done.

      Creating a New Ansible Playbook

      Next, we’ll create a new Ansible playbook and set up the variables that we’ve used in the previous section of this guide. Open a new file named playbook.yml:

      This playbook starts with the hosts definition set to all and a become directive that tells Ansible to run all tasks as the root user by default (the same as manually running commands with sudo). Within this playbook’s var section, we’ll create three variables: server_name, document_root, and app_root. These variables are used in the Nginx configuration template to set up the domain name or IP address that this web server will respond to, and the full path to where the website files are located on the server. For this demo, we’ll use the ansible_default_ipv4.address fact variable because it contains the remote server’s public IP address, but you can replace this value with your server’s hostname in case it has a domain name properly configured within a DNS service to point to this server:

      ~/ansible-nginx-demo/playbook.yml

      ---
      - hosts: all
        become: yes
        vars:
          server_name: "{{ ansible_default_ipv4.address }}"
          document_root: /var/www/html
          app_root: html_demo_site-main
        tasks:
      

      You can keep this file open for now. The next sections will walk you through all tasks that you’ll need to include in this playbook to make it fully functional.

      Installing Required Packages

      The following task will update the apt cache and then install the nginx package on remote nodes:

      ~/ansible-nginx-demo/playbook.yml

      . . .
          - name: Update apt cache and install Nginx
            apt:
              name: nginx
              state: latest
              update_cache: yes
      

      Uploading Website Files to Remote Nodes

      The next task will use the copy built-in module to upload the website files to the remote document root. We’ll use the document_root variable to set the destination on the server where the application folder should be created.

      ~/ansible-nginx-demo/playbook.yml

      . . .
          - name: Copy website files to the server's document root
            copy:
              src: "{{ app_root }}"
              dest: "{{ document_root }}"
              mode: preserve
      

      Applying and Enabling the Custom Nginx Configuration

      We’ll now apply the Nginx template that will configure the web server to host your static HTML file. After the configuration file is set at /etc/nginx/sites-available, we’ll create a symbolic link to that file inside /etc/nginx-sites-enabled and notify the Nginx service for a posterior restart. The entire process will require two separate tasks:

      ~/ansible-nginx-demo/playbook.yml

      . . .
          - name: Apply Nginx template
            template:
              src: files/nginx.conf.j2
              dest: /etc/nginx/sites-available/default
            notify: Restart Nginx
      
          - name: Enable new site
            file:
              src: /etc/nginx/sites-available/default
              dest: /etc/nginx/sites-enabled/default
              state: link
            notify: Restart Nginx
      

      Allowing Port 80 on UFW

      Next, include the task that enables tcp access on port 80:

      ~/ansible-nginx-demo/playbook.yml

      . . .
          - name: Allow all access to tcp port 80
            ufw:
              rule: allow
              port: '80'
              proto: tcp
      . . .
      

      Creating a Handler for the Nginx Service

      To finish this playbook, the only thing left to do is to set up the Restart Nginx handler:

      ~/ansible-nginx-demo/playbook.yml

      . . .
        handlers:
          - name: Restart Nginx
            service:
              name: nginx
              state: restarted  
      

      Running the Finished Playbook

      Once you’re finished including all the required tasks in your playbook file, it will look like this:

      ~/ansible-nginx-demo/playbook.yml

      ---
      - hosts: all
        become: yes
        vars:
          server_name: "{{ ansible_default_ipv4.address }}"
          document_root: /var/www
          app_root: html_demo_site-main
        tasks:
          - name: Update apt cache and install Nginx
            apt:
              name: nginx
              state: latest
              update_cache: yes
      
          - name: Copy website files to the server's document root
            copy:
              src: "{{ app_root }}"
              dest: "{{ document_root }}"
              mode: preserve
      
          - name: Apply Nginx template
            template:
              src: files/nginx.conf.j2
              dest: /etc/nginx/sites-available/default
            notify: Restart Nginx
      
          - name: Enable new site
            file:
              src: /etc/nginx/sites-available/default
              dest: /etc/nginx/sites-enabled/default
              state: link
            notify: Restart Nginx
      
          - name: Allow all access to tcp port 80
            ufw:
              rule: allow
              port: '80'
              proto: tcp
      
        handlers:
          - name: Restart Nginx
            service:
              name: nginx
              state: restarted
      

      To execute this playbook on the server(s) that you set up in your inventory file, run ansible-playbook with the same connection arguments you’ve used when running a connection test within the introduction of this series. Here, we’ll be using an inventory file named inventory and the sammy user to connect to the remote server. Because the playbook requires sudo to run, we’re also including the -K argument to provide the remote user’s sudo password when prompted by Ansible:

      • ansible-playbook -i inventory playbook.yml -u sammy -K

      You’ll see output like this:

      Output

      BECOME password: PLAY [all] ********************************************************************************************** TASK [Gathering Facts] ********************************************************************************** ok: [203.0.113.10] TASK [Update apt cache and install Nginx] *************************************************************** ok: [203.0.113.10] TASK [Copy website files to the server's document root] ************************************************* changed: [203.0.113.10] TASK [Apply Nginx template] ***************************************************************************** changed: [203.0.113.10] TASK [Enable new site] ********************************************************************************** ok: [203.0.113.10] TASK [Allow all access to tcp port 80] ****************************************************************** ok: [203.0.113.10] RUNNING HANDLER [Restart Nginx] ************************************************************************* changed: [203.0.113.10] PLAY RECAP ********************************************************************************************** 203.0.113.10 : ok=7 changed=3 unreachable=0 failed=0 skipped=0 rescued=0 ignored=0

      Once the playbook is finished, if you go to your browser and access your server’s hostname or IP address you should now see the following page:

      HTML Demo Site Deployed by Ansible

      Congratulations, you have successfully automated the deployment of a static HTML website to a remote Nginx server, using Ansible.

      If you make changes to any of the files in the demo website, you can run the playbook again and the copy task will make sure any file changes are reflected in the remote host. Because Ansible has an idempotent behavior, running the playbook multiple times will not trigger changes that were already made to the system.



      Source link

      How To Create a Static Footer With HTML and CSS (Section 7)



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In the final tutorial of the CSS series, you will create a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. This tutorial will recreate the footer in the demonstration website but you can use these methods for other website projects as well.

      Gif of static footer on demonstration website

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      This tutorial uses several social media icons as content in the footer. If you’d like to use these icons, download them now from our demonstration site and save them to your images folder as:

      To download these images, click on the linked filename above and then click CTRL + Left Click (on Macs) or Right Click (on Windows) while hovering on the image and select “Save Image As”. Save the images with the instructed file names to your images folder.

      Once you have your icons saved, you can proceed to the next section.

      First you will define a “footer” class by adding the following code snippet to the bottom of the styles.css file:

      styles.css

      . . .
      
      /* Footer */
      
      .footer {
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height: 90px;
        background-color: #D0DAEE;
      }
      

      Save the styles.css file. In this code snippet you have added a comment to label the CSS code for the Footer section. You then defined a class named footer and declared several style rules. The first rule declares its position as fixed, which means the element will not move from the location you specify as the user scrolls down the page. This location is specified by the next two declarations: bottom:0 and left:0, which specifies a location zero pixels from the left and zero pixels from the bottom of the browser’s viewport.

      By changing these values, you can change the location of the element on the page. Note, however, that any value aside from zero needs to include the px suffix after the number. The ruleset also specified the width, height, and background color of the footer class.

      You are now ready to add the footer content in the next section of this tutorial.

      To add the footer content, you will add a <div> container to the webpage and assign the footer class that you just created. Return to your index.html file and paste the following code snippet after the end of the last closing </div> tag:

      index.html

      . . .
      
      <!--Section 7: Footer-->
      
      <div class="footer">
      </div>
      

      Save your index.html file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).
      You should now have an empty footer section at the bottom of your webpage that stays in place as you scroll up and down the page:

      Gif of blank fixed footer

      Next you will add content to the newly created footer.

      In this step, you will add and style the menu items to the left side of the footer. These menu items can be used to link to other pages on your site. Currently, there is only one webpage on your site, so you can use the links we provide for demonstration purposes. Later on, if you add additional pages to your website you can create menu items here and add the correct links. You can learn how to create and link to new webpages with this tutorial on How to Build a Website with HTML.

      Return to your styles.css file and add the following code snippet to the bottom of the file:

      styles.css

      . . .
      
      .footer-text-left {
        font-size:25px;
        padding-left:40px;
        float:left;
        word-spacing:20px;
      }
      
      a.menu:hover {
        background-color:yellow;
        font-size:20px;
      }
      

      Let’s pause briefly to review each of the rulesets we’ve created:

      • The first ruleset defines a class named footer-text-left that will be used to style the menu item text. Note that you are setting the float property to left so that the text assigned to this class will float to the left of the page. You are also using the word-spacing property to grant extra space between the menu items. If any of your menu items are more than one word, you’ll need to create a class for styling the menu items (instead of just changing the word spacing value).

      • The second ruleset uses the hover pseudo-class to add a yellow background color to the text when the user hovers their cursor over the text.

      Now you will add the menu items to the webpage. Return to your index.html file and add the following highlighted code snippet inside the footer container that you’ve already created:

      index.html

      . . .
      
      <div class="footer">
        <p class="footer-text-left">
          <a href="https://www.digitalocean.com/community/tutorials/index.html" class="menu">home</a>
          <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
          <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
        </p>
      </div>
      
      

      This code snippet adds two menu items (“about” and “credits”), links these menu items, and styles the text with the footer-text-left and a.menu classes you just created.

      Save both files and reload your webpage in the browser. You should receive something like this:

      Gif of footer with menu items

      Next you will add the social icons to the footer, which you can use to link to your social media accounts. If you want to use icons for different social media platforms, you can search for free icons on the web and download them to your images folder. Return to your styles.css file and add the following three rulesets to the bottom of your file:

      styles.css

      . . .
      
      .footer-content-right {
        padding-right:40px;
        margin-top:20px;
        float:right;
      }
      
      .icon-style {
        height:40px;
        margin-left:20px;
        margin-top:5px;
      }
      
      .icon-style:hover {
        background-color:yellow;
        padding:5px;
      }
      

      Let’s pause to review each ruleset:

      • The first ruleset defines the class footer-content-right and assigns it specific padding, margin, and float values. You will use this ruleset to style a <div> element that will hold the social media icons.

      • The second ruleset creates the class icon-style that will provide height and margin values to the size and position of the social media icons.

      • The third ruleset uses the hover pseudo-class to add a yellow background to the icon when the user hovers their cursor over the text.

      Save your styles.css file. You will now add the social media icons to the footer. Return to your index.html file and add the following code snippet after the last closing </a> tag of the menu items:

      index.html

      . . .
      
      ...
      <div class="footer-content-right">
        <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
        <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
        <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
      </div>
      

      Make sure that you change the file paths and links with your own social media information.

      This code snippet creates a <div> container, which is assigned the style of footer-content-right the class. Inside this div container, you have added three social media icons using the HTML <img> tag, and linked each image using the HTML <a> tag.

      You have also added the alternative text that describes each icon using the alt attribute. When creating websites, alternative text should be added to all images to support site accessibility for individuals who use screen readers. To read more about using alternative text with HTML, please visit the section on alternative text in our guide How To Add Images To Your Webpage Using HTML.

      Save your index.html file and reload it in the browser. You should now have a fixed footer with three social media icons on the right that link to your accounts. The links should change color when the user hovers their cursor over them. To confirm your results, you can compare them to the gif at the beginning of this tutorial.

      Conclusion

      You have now created a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. You can continue exploring footer design and content possibilities by changing values in the CSS classes that you created, or add different types of content to your index.html file. For more ideas on exploring design and layout possibilities for your website, the conclusion of this tutorial series has more suggestions for things to try like rearranging content sections, adding links to other pages, and changing layout styles using the box model.





      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