In this tutorial I show you how to deploy your web site code to a live site hosted by Digital Ocean. We’re hosting our site on DigitalOcean because 1) it’s free, 2) they provide free trusted SSL certificates allowing us to experiment with the browser APIs that require https, and 3) it is fun to have content on the web that is publicly viewable.
Below I provide screenshots of my experience as I launched my demo site on DigitalOcean. If you have any problems throughout the process reach out for help.
Step 1 — Create a DigitalOcean Account
Open a browser and navigate to Digital Ocean’s website. Click the Sign up button and create an account. After you enter your name, email address, and password, Digital Ocean will send you an email.
Click on the link in the email. The link will direct you to a page that displays a bunch of questions about how you will use their services. Below is a screenshot showing how I responded.
After you complete the form click Submit. You will then be directed to a page that asks for a credit card. Note: We will only be using Digital Ocean’s free services. Enter your credit card information, press Sign up.
When you press Sign up, you will be redirected to their welcome page. Click the link at the top of the page labeled Explore our Control Panel.
Step 2 — Deploy Your Website with DigitalOcean App Platform
The Control Panel is where you can create projects and start up services in your projects. There you will find that a project named first-project has been created for you. Press the button at the top of the page labeled Create.
Select App Platform – Deploy your code from the drop-down menu.
On the Create App page, select GitHub as the Service Provider, and then click Manage Access.
When you do, you will redirect to GitHub.com. Log into GitHub.
GitHub will redirect you to a page showing Install Digital Ocean – Where do you want to install DigitalOcean? Select your personal GitHub account.
You will then be redirected to a GitHub page titled Install & Authorize DigitalOcean. Press the Install button& Authorize button at the bottom of the page.
You will then be redirected back to the DigitalOcean Create App page as shown below. Select the repository that contains your website code.
Next, enter in the Source Directory box enter the path to the directory the repository that contains your index.html file. Recall that the index.html file is the file that has all of the links to your experiments. If you created a repository solely for this class, your path might be /. For others that are using the same repository that you used for csci-101, your path might be something like /courses/csci230 or /csci230.
On the Resources page, click Next.
On the Environment page, click Next.
On the Info page, click Next.
On the Review page, click Create Resources.
DigitalOcean will redirect you to the App Settings page. At the top of the page you will see that the site is building. While the site is building notice the section labeled Domains. Email me your domain. I will use your live site to grade the rest of your experiments.
When the site is finished building, click on the Live App button to view your website.
If all is well and you see your site – Congratulations! You now have a live website that you can show your family during Thanksgiving break. 🙂
Final Step: Test Experiment 13
If you look at the URL of your live website you will see it uses https. This is because DigitalOcean provides, for free, trusted SSL certificates.
In Experiment 13 you were asked to display on the page the user’s geolocation and to create notification on the user’s device. Verify that these are working on the page. If they are working – nice job! – You’re done! If not, try to debug the page to get these services working.