Live Deployment

Gatsby johnvincent.io is deployed to a Digital Ocean Droplet.

Technical

This implementation is a port from johnvincent.io V1, which was built using Jekyll

The intention is to build the website in the Gatsby and React world. A more suitable design will follow shortly.

• johnvincent.io is built using Gatsby, React, HTML5, Sass and CSS3

• Gatsby is a React-based, GraphQL powered, static site generator. By weaving together the best parts of React, webpack, react-router, and GraphQL, Gatsby builds blazingly fast websites.

• johnvincent.io is a Progressive Web App (PWA)

• johnvincent.io is fully responsive, adapting for mobile, table and desktop viewports.

• All routing is handled by Gatsby

• All client and server communications are performed using https.

• johnvincent.io fully implements Google Analytics

• johnvincent.io fully supports Google Webmaster Tools

• johnvincent.io is deployed to an Ubuntu droplet at Digital Ocean and kept running using PM2

• johnvincent.io resources are served from Nginx Server

• The Ubuntu droplet at Digital Ocean can only be accessed with SSH from a particular client. All other access is disabled.

Deployment Overview

Building and Configuring a Droplet can be very complex.

This is the first part of series of documents describing how to create and configure a droplet hosting.

The following documents describe a series of tasks. They should be performed in the order shown.

1. Create Ubuntu Droplet at Digital Ocean
2. Digital Ocean - Install Nginx
3. Configuring Domains at Google Domains
4. Configure non-SSL Nginx at Digital Ocean
5. SSL Certificates - Let’s Encrypt & Nginx
6. Configure SSL Nginx at Digital Ocean
7. Google Webmaster Tools
8. Configure PM2
9. Deploy johnvincent.io to Digital Ocean
10. Backup johnvincent.io from Digital Ocean

Other

• Gatsby Meta Tags
• Gatsby Manifest
• Gatsby Sitemap
• Gatsby robots.txt
• Gatsby Google Analytics
• Gatsby Webpack Bundle Analyzer

Website Validation

The following describe tasks required for the validation of johnvincent.io at Digital Ocean.

Website Validation Reference

johnvincent.io Website Validation

Maintenance

The following describe tasks required for the maintenance of johnvincent.io at Digital Ocean.

Update SSL Certificates to Ubuntu at Digital Ocean

Maintaining Droplets at Digital Ocean

Website Review

Review PM2

Markdown Spelling

Monthly Review Topics

Review the following to ensure continuing compliance.

• Google Webmaster Tools
• Google Analytics

Updates

Building and deploying MyTunes to johnvincent.io

Configuring Nginx to implement HTTP Basic Authentication

Building and deploying React GithubHelper App to johnvincent.io

Technologies

Client

• Gatsby
• React
• Progressive Web App
• Styled Components
• HTML5
• CSS3
• Sass
• Webpack
• Jest
• Enzyme
• ESLint
• Prettier
• Balsamiq

Production Deployment

• Digital Ocean
• Ubuntu
• Nginx
• SSL certificates
• Node
• npm
• PM2