Hosting - woannaju/cs329e-idb GitHub Wiki

GitHub Pages

This website is hosted by GitHub Pages, a service from GitHub where a GitHub user can link a repository to a website under a registered domain url address.

Setting Up on GitHub Pages

To get started, first make a new repository on your GitHub account and title it: username.github.io, where username is your username (or organization name) on GitHub. This step is critical since the title of the repository must exactly match the given format above. The following step is to get an index.html page onto the repository. This can be achieved by cloning the new repository onto your machine (using any method that you prefer), adding an index.html page to use as the home page (note: it must be called index.html), and adding, committing, and pushing the new updated repository into GitHub. This step can be done numerous of ways, but the goal is to upload an index.html page onto GitHub. Now, your website is accessible by going to http://username.github.io, where username is the GitHub username the website repository is registered in.

Using a URL Address other than http://username.github.io

To use a web address other than http://username.github.io, additional steps must be taken. In this case, usaparks.me was registered using NameCheap. After getting a domain name, type the URL address into the CNAME file already in the website repository. After adding, committing, and pushing the repository with the edited CNAME file, check to see if the website is working by navigating to the URL address provided by NameCheap. If it is not working, navigate to the dashboard of your NameCheap account. Hover over the house icon of the domain name in the CNAME file and click it. Then check if the if there are 3 existing records in there. If there is not, click "add New Record" and select A Record from the list. Enter @ for the host field and 192.30.252.153 for the IP Address field. Repeat but using 192.30.252.154 for the IP Address. Finally, add a new record but choose CNAME Record. Enter www as the Host and use username.github.io. as the IP Address (where username is your username). Make sure to include the period. Save and check if the website URL Address is working (it should be).

Procedure above was used for creation of usaparks.me

Setting Up on Digital Ocean

Digital Ocean is a website hosting platform similar to GitHub Pages. Digital Ocean handles the back end processes - which includes redirecting users to the appropriate pages. You pay for space and CPU processes to host your server and allows developers to make their website accessible through a domain set by the developers. The current plan that the usaparks.me group in enrolled in is the $5/month plan that comes with 512MB of memory, 1 Core Processor, 20 GB SSD Disk, and 1TB Transfer data. Usaparks.me is currently hosted on Digital Ocean's New York City second server. Additionally, the server is running on Ubuntu 16.04.2 x64 operating system. To set up your website on Digital Ocean, make an account and setup a new droplet with all the information that was stated before. Make sure to customize the droplet name with something recognizable and with a name that can be related to the website to be hosted on it. Once you have received an email with the IP Address and password for your newly hosted server, navigate to either CMD prompt (on Windows) or Terminal (On Mac/Linux) and type "ssh root@", followed by your new Droplet IP Address. If a confirmation message appears, type "yes" and hit enter. Subsequently follow that up with the Droplet password (can be copy pasted from the email). Then, it will ask for your UNIX password, which is the same as the Droplet password when you first log in. It should be noted that this cannot be copy pasted from your email. Note that the following steps will be for a Ubuntu server for Digital Ocean. Once in your server, type "sudo apt-get update" and when that is done, "sudo apt-get install apache2". Then type "sudo apt-get install libapache2-mod-wsgi python-dev" and follow that with "sudo a2enmod wsgi" when done. Move into your /var/www/ director by typing "cd /var/www/" and clone your website's git repository into that directory. Move into your new local git repository with the "cd" command. To set up a virtual environment in your server, type "sudo apt-get install python-pip", "sudo pip install virtualenv", and "sudo virtualenv -p python3 venv" in order. Enable the virtual environment and install Flask (which is the Python web tool usaparks.me is running on). Test your progress by typing "python app.py" and seeing if a message pops up about the server running app.py locally or on an IP Address. Exit the virtual environment. If there is not an "init.py" file already in the server, make one by using the "touch /var/www/cs329e-idb/init.py" command. To confiure and enable a New Virtual Host, type "sudo nano /etc/apache2/sites-available/cs329e-idb.conf" in your window to make a new .conf file and open it. Type the following lines of code into the .conf file - be sure to change mywebsite.com to your custom domain name:

<VirtualHost *:80>

ServerName mywebsite.com

ServerAdmin [email protected]

WSGIScriptAlias / /var/www/cs329e-idb/app.wsgi

<Directory /var/www/cs329e-idb/>

Order allow,deny Allow from all

Alias /static /var/www/cs329e-idb/static

<Directory /var/www/cs329e-idb/static/>

Order allow,deny Allow from all

ErrorLog ${APACHE_LOG_DIR}/error.log

LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

Afterwards, enable the virtual host with the command "sudo a2ensite cs329e-idb". Now, you need to make the .wsgi file. To start, make sure to navigate to the /var/www/cs329e-idb directory and type "sudo nano app.wsgi". When the text editor opens, add the following to the file:

#!/usr/bin/python

import sys

import logging

logging.basicConfig(stream=sys.stderr)

sys.path.insert(0,"/var/www/cs329e-idb/")

from app import app as application

application.secret_key = 'Add your secret key'

Then restart Apache with "sudo service apache2 restart". Now, the final step is to open and edit app.py and change the bottom "app.run()" to app.run('your_Droplet_ip_address', '80'). Make sure to use your IP Address for where it says 'your_Droplet_ip_address'. Now, you should be done! Launch your virtual environment and type "python app.py" to run your server and host your website. It should be noted that the server must be in the virtual environment and running app.py for your website to be accessible publicly. The best way to do this is to use the console on Digital Ocean and running app.py (while still in the virtual environment).

Special steps had to be taken to transfer the hosting service from GitHub Pages to Digital Ocean. First, the custom domain name for the GitHub Pages repository must be removed. Then, on Digital Ocean, navigate to the droplet (Digital Ocean's name for a project) and go to the Networking tab. Manage the the domain for the droplet you want to link your custom domain name to by using the More drop down menu. In the A tab, use @ as the hostname and select the droplet you want to link your domain name to in the "will Direct To" field. Leave the TTL as the default of 3600. Now, add a CNAME tab with your custom domain name as the hostname and "as an alias of". Leave the TTL as the default value of 43200. After all the changes have been made, you must a few minutes to allow all the information to process and sync before GitHub Pages and Digital Ocean will reflect those changes.

⚠️ **GitHub.com Fallback** ⚠️