teaching machines

CS 268: Lecture 6 – Project Workflow

February 20, 2020 by . Filed under lectures, spring-2020, webdev.

Dear students:

We saw last time how we can use Flexbox to size and distribute our boxes of content across a container. We have a few more things to say about Flexbox, but we will postpone the new stuff till next time. Instead, we’ll discuss a workflow for developing a website and getting it served out over HTTPS.

But first, let’s review Flexbox by completing an exercise.

Activity

With exactly one neighbor, claim your task on Crowdsource. (Everyone will be assigned task 1.) Then recreate the following page:

Many pages support a sequence of navigation links below the header. They often are structured as a ul. Apply styling and a Flexbox layout to the following starter code to match the image above.

<!DOCTYPE html>
<html>

<head>
  <title>Oprah 2020</title>
  <style>

/* Add your CSS here. */

  </style>
</head>

<body>
  <header>
    <h1>Oprah 2020: She's Not All Talk</h1>
  </header>
  <nav>
    <ul>
      <li>About</li>
      <li>Blog</li>
      <li>Contact</li>
      <li>Donate</li>
    </ul>
  </nav>
</body>

</html>

Submit your solution on Crowdsource.

Project Setup and Workflow

Let’s pause our discussion of Flexbox for a moment and look at the steps we need to take to develop and maintain a website that is served out over HTTPS. To ease development, we’d like to be able to edit and test our files on our local machine, and then deploy them on our server. To make this possible, we’ll use a centralized Git repository.

Initialize a Repository

Follow these first steps to create a Git repository and connect your project folder to it:

Commit and Push

The previous steps need to be run only once. These next steps, on the other hand, should be completed after every work session to get your local changes up to GitHub:

Clone on Digital Ocean

We’ve now got our local project synchronized with GitHub. We clone this repository on our Digital Ocean droplet with the following steps:

Add Apache Site

With our project cloned on our droplet, it’s time to get Apache serving out its files using these steps:

Add a Domain Name

Our next task is to encrypt the HTTP traffic so that bad people can’t inspect our packets. For that, we need to get a certificate from a certificate authority. The certificate authority that I recommend you use is Let’s Encrypt. It is free and well-established. However, Let’s Encrypt does not grant certificates to IP addresses. We must first secure a domain name for our server.

A relatively simple way to get a domain name is to get a subdomain from a dynamic DNS provider. Follow these steps to get a subdomain from Duck DNS:

Add SSL

Now that we have a domain name, we add a certificate from Let’s Encrypt to our site by following these steps:

Regular Workflow

Whew, that was a lot. Now that’s it all set up, we need only follow this workflow:

  1. Make changes in your local project folder.
  2. Commit and push those changes to GitHub.
  3. SSH into your droplet.
  4. Run the following command to pull down the changes: 
    cd ~/project1 && git pull && chmod -R go+rX *

TODO

Here’s your TODO list for next time:

See you next time.

Sincerely,