-
Notifications
You must be signed in to change notification settings - Fork 0
Hosting
For this project, we initially hosted our webpage on GitHub Pages and then later used Digital Ocean. This section will describe both of these processes, starting with setting up GitHub Pages.
This section will describe how we setup our webpage using GitHub Pages. You can signup for a free account on GitHub, which gives you access to public repositories and allows you to host on GitHub Pages, or you can get an educational account if you are a student to get access to private repositories.
You will need to signup for an account on Namecheap to acquire a URL for the webpage. Using a student email to signup will allow use of the .me domain for free.
After acquiring the domain name of choice, create a new text file on the GitHub repository containing the domain name. Save the file as CNAME and commit it to the repository.
Next you go to the dashboard of your Namecheap account and click on the domain list tab to show a list of your domain names. Click on the "Manage" button for the desired name and select the "Advanced DNS" option. You'll need to add/adjust the records as follows:
Type: A Record; Host: @; Value/IP Address: 192.30.252.153; TTL: Automatic.
Type: A Record; Host: @; Value/IP Address: 192.30.252.154; TTL: Automatic.
Type: CNAME Record; Host: www; Value/IP Address: username.github.io; TTL: Automatic.
The page should now be setup, though it may take about 30 minutes to an hour until the URL will redirect to the GitHub Pages webpage.
For the final phase of this project, we setup the hosting for our website using Digital Ocean. You can create an account on Digital Ocean for free, though you will have to enter payment information upon signing up. Next go to education.github.com/pack/offers. You should have signed up for a student developer pack. Scroll down to find the section for digital ocean and claim a promo code. Login to your Digital Ocean account and at the bottom select the "Have a Promo Code?" option and enter in the code you received from the GitHub student developer pack.
After completing the above steps, select "Create a New Droplet" with the following options:
Droplet Options - Choose an image: Ubuntu 16.04.2 x64 (should be selected by default) Choose a size: $5/mo (just choose the smallest, it should be fine) Add block storage: (skip) Choose a datacenter region: New York (should be selected by default) Select additional options: (skip) Add your SSH keys: (skip) Finalize and Create: 1 Droplet, Enter whatever name you want
Once all of this is entered, click "Create". You should receive an email listing your Droplet Name, IP Address, Username and Default Password.
Use SSH to login to your Droplet on Digital Ocean: you will be prompted to change your password
ssh root@<your_ip_address>
Update and install apache:
sudo apt-get update
sudo apt-get install apache2
Install Web Server Gateway Interface(WSGI):
sudo apt-get install libapache2-mod-wsgi python-dev
Enable mod_wsgi with:
sudo a2enmod wsgi
Create a Flask Application:
Move to the /var/www/ directory:
cd /var/www/
Clone your project from GitHub:
git clone https://github.com/yourgithub/cs329e-idb.git
Move into your project directory:
cd cs329e-idb
Set up a virtual environment:
sudo apt-get install python-pip
sudo pip install virtualenv
sudo virtualenv –p python3 venv
You will now want to install Flask or install the needed python packages from requirements.txt(make sure you are in the virtual environment when doing this):
pip install Flask
or
pip install -r requirements.txt
Test your installation by running python app.py within the virtual environment. If you get a message saying “Running on http://localhost:5000/” or “Running on http://127.0.0.1:5000/” your installation was successful.
The setup will later require that your main project folder be a module. To do this in Python you will need to add a file called init.py, even if it is an empty file. Do this with:
touch /var/www/cs329e-idb/__init__.py.
Next you will set up and enable a new virtual host. In the droplet terminal, enter:
sudo nano /etc/apache2/sites-available/cs329e-idb.conf
Add the following lines of code to the file to configure the virtual host. Be sure to change the ServerName to your domain or cloud server’s IP address.
<VirtualHost *:80>
ServerName mywebsite.com
ServerAdmin admin@mywebsite.com
WSGIScriptAlias / /var/www/cs329e-idb/app.wsgi
<Directory /var/www/cs329e-idb/>
Order allow,deny
Allow from all
</Directory>
Alias /static /var/www/cs329e-idb/static
<Directory /var/www/cs329e-idb/static/>
Order allow,deny
Allow from all
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
LogLevel warn
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Save and close the file. Enable the virtual host with:
sudo a2ensite cs329e-idb
Create the .wsgi file named app.wsgi with the following command:
sudo nano app.wsgi
Add the following lines 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'
Restart Apache by entering the following:
sudo service apache2 restart
To check if everything is working properly, activate your virtual environment and run python app.py &. Navigate in a web browser to the domain name or IP address that you entered in your virtual host configuration.
If you get a message saying “Address already in use” or you want to stop and restart your application, use the following steps:
- Enter the command: lsof –i:80 This will display all currently running processes. If your website is running properly it will be listed with the command of “python” and <your_server’s_IP>:http (LISTEN) as its name. When initially setting up your server, if you received an “address already in use” message you will probably see several “apache2” commands listed.
- Kill currently running processes: kill Each running process in the list shown after the lsof command will have a PID number. Use that number to stop that process with the kill command. Stop any processes associated with python or apache2.
- Restart web application: python app.py & (within the virtual environment) Move back into your main project directory, activate the virtual environment, and start the web application. You should now be able to access your website in a web browser using its IP address or domain name.
This section will discuss how to link the Namecheap URL to Digital Ocean. First log in to your account on Namecheap, click on Domain List on the left-hand menu and click on manage for your domain name in the list.
Scroll down to the Nameservers section and select the Custom DNS option on the drop-down menu. Add the following three server names to the list(one per line):
- ns1.digitalocean.com
- ns2.digitalocean.com
- ns3.digitalocean.com
Save the changes, switch over to Digital Ocean and log in to your account. Select Networking from the top menu. Enter your domain name into the box and click on Add Domain.
In the Create New Record section select CNAME and enter the following information:
- Hostname: www
- Is An Alias Of: @
- TTL(Seconds): 43200
After adding that record, you should see it along with the three NS records you added previously and an A record. If you do not have an A record, select A and enter the following:
- Hostname: @
- Will Direct To: (your droplets IP Address)
- TTL(Seconds): 3600
You should now be able to access your website through the domain name and IP Address. Note that it may take some time for new records to propagate through the DNS system.