teaching machines

CS 347: Setting Up Project 1

September 18, 2020 by Chris Johnson. Filed under fall-2020, specifications, webdev.

Your project 1 will be a real website with its own Git repository, Apache configuration, and domain name. This guide walks you through getting it all set up and served out via Apache.

Create Local Repository

Follow these steps to set turn the project 1 folder on your local machine into a Git repository.

• Open your folder for project 1 in Visual Studio Code.
• Ensure that your project contains a file named index.html. Nearly every website should use index.html as its starting page. This is the default page that Apache will try to load if you don’t explicitly include the HTML file name in the URL.
• In the Source Control panel—which you can reach via View / SCM or the button in the activity bar on the left—click Initialize Repository.
• Click the + icon next to any existing files to stage their changes.
• Enter a commit message in the text box and click the checkmark button labeled Commit at the top of the panel.

Your changes are now recorded in your local Git repository.

Create Remote Repository

Follow these steps to create a centralized version of your repository.

• Create a new Git repository on GitHub, GitLab, Bitbucket, or some other Git provider of your choosing.
• Add your instructor as a collaborator. On GitHub, visit Settings / Manage Access and add user twodee. Do likewise if you use a different provider; your instructor has the same username on all three.
• Copy the URL of your repository (which probably has the form https://YOUR-PROVIDER/YOUR-USERNAME/YOUR-REPOSITORY-NAME).
• Back in Visual Studio Code, click the ⋯ button at the top the Source Control panel, and select Remote / Add Remote…
• Enter the URL of your remote repository.
• Name the remote connection origin.
• Push your local version of the repository up to the remote version. Click ⋯ and select Pull, Push / Push. Confirm the connection to an upstream branch.
• Reload the browser page showing your repository. You should see remote copies of the files on your local machine.

Clone on Droplet

Follow these steps to pull the centralized version of your repository down onto your droplet.

• Log in to your droplet using your non-root account.
• While in your home directory, clone your remote repository using this command:

  git clone https://YOUR-PROVIDER/YOUR-USERNAME/YOUR-REPOSITORY-NAME

We’re not ready to view it in the browser yet. First we need a domain name.

Domain Name

It’s considered bad form to share your web site via its IP address. Instead, we give it a more mnemonic domain name. Follow these steps to get a free domain name that you will use to identify your Digital Ocean droplet.

• Visit the GitHub Student Developer Pack.
• Under the Namecheap section, claim your 1-year domain name registration by connecting your GitHub account to a Namecheap account. Note that this is the bottom link, not the top one about SSL.
• Choose a domain name. It doesn’t have to be branded for project 1. In fact, we will use the same domain name for project 2. The domain is yours, not your client’s.
• Find your domain under Domain List and click Manage.
• Under Advanced DNS, click Add New Record.
• Add an A Record. For host, enter project1. For the IP address, enter your droplet’s IP address. Save the record.
• Visit http://project1.YOUR-DOMAIN-NAME in your web browser. You should see your Apache test page. Right now your domain name is very general and goes to any virtual host that Apache knows about. Visit http://project1.YOUR-DOMAIN-NAME:8000 to see your blog.

Apache Virtual Host

You’re ready now to start serving our your project. This new site will be served out on port 80, just like your blog. The ServerName directive will funnel all HTTP requests starting with the subdomain project1 to this site.

• Log in to your droplet.
• Run these commands to change into your repository directory and print its absolute path:

  cd ~/YOUR-REPOSITORY-NAME
  pwd

  Observe the path that is printed. You will be entering it in the next step.
• Create /etc/apache2/sites-available/project1.conf using your favorite command-line text editor and sudo. Fill it with this content, replacing YOUR-DOMAIN-NAME, YOUR-USERNAME, and YOUR-REPOSITORY-NAME with their actual values:

  <VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName project1.YOUR-DOMAIN-NAME
    DocumentRoot /home/YOUR-USERNAME/YOUR-REPOSITORY-NAME
  
    # Allow access to all files.
    <Directory /home/YOUR-USERNAME/YOUR-REPOSITORY-NAME>
      Require all granted
    </Directory>
  
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
  </VirtualHost>
  

• Run this command to enable your site:

  sudo a2ensite project1
  sudo service apache2 restart

• Visit http://project1.YOUR-DOMAIN-NAME in a web browser. You should see your index.html.

HTTPS Certificate

Now that you have a domain name, you are able to encrypt HTTP requests to and from your server with the help of an SSL certificate from Let’s Encrypt. Add a certificate by following these steps:

• Install and run Let’s Encrypt’s certbot utility with these commands:

  sudo apt install certbot python3-certbot-apache
  sudo certbot --apache

  Select your project1.YOUR-DOMAIN site. Do not do any redirecting.
• Edit your project1.conf file to the following:

  # Redirect all HTTP traffic to HTTPS.
  <VirtualHost *:80>
    ServerName project1.YOUR-DOMAIN-NAME
    Redirect / https://project1.YOUR-DOMAIN-NAME/
  </VirtualHost>
  
  # Secure HTTP typically runs on port 443.
  <VirtualHost *:443>
    ServerAdmin webmaster@localhost
    ServerName project1.YOUR-DOMAIN-NAME
    DocumentRoot /home/YOUR-USERNAME/YOUR-REPOSITORY-NAME
  
    # Allow access to all files.
    <Directory /home/YOUR-USERNAME/YOUR-REPOSITORY-NAME>
      Require all granted
    </Directory>
  
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
  
    SSLCertificateFile /etc/letsencrypt/live/project1.YOUR-DOMAIN-NAME/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/project1.YOUR-DOMAIN-NAME/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf
  </VirtualHost>
  

• Restart Apache with this command:

  sudo service apache2 restart

• Visit https://project1.YOUR-DOMAIN to verify that HTTPS is working.
• Visit http://project1.YOUR-DOMAIN to verify that you are redirected to secure HTTP.
• Send your HTTPS URL your instructor in a direct message on Slack.