Migrate from a Share Hosting to DigitalOcean

tl;dr

Why migrate away from a share hosting ?
I’m looking for more control over my personal website and I can try experiment some production setup.

Current Setup

  1. Droplet (The cheapest option)  😂
  2. SSL by Let’s Encrypt
  3. Nginx with Brotli compression
  4. NextJS + MaterialUI

# Droplet

DigitalOcean Pricing table

I choose the cheapest option which is $5 per month. They are providing a lot of combination for users to pick a suitable droplet.

# Setup SSL

I’m setup my ssl certificate using Let’s Encrypt service.

# Nginx and Brotli compression

Brotli compression – a smaller size of files streams to end users. Thus, make your website feel performance.

I choose Ubuntu as my server’s operation system(OS). Then, configure the Nginx to serve my website. Recommended to install Nginx from source or Nginx official repository instead of from the package provided by the Ubuntu. This is because I have some problem when I want to add a new compiled module to existing Nginx. (tutorial)

// Further reading
SSL is required for setup brotli compression, however, you may skip Step 1 if you had setup SSL for your website previously.

# NextJS and Material-UI

Previous SPA website is written from scratch using ReactJS and Bootstrap. Then, I rewrite it using NextJS (Static rendering and Server Side Rendering) with Material-UI as the base design system. (Source code)

Bonus

NextJS deployment on Nginx’s reverse proxy.

Implementing git hooks automation process, whenever I push the new changes to my droplet, git hooks post-receive will checkout the new changes from master branch.

The process will be as below:

  1. Git push to specified droplet
  2. Checkout new changes
  3. Stop existing pm2 process (Depend on droplet resources, if your droplet have enough resources. Then, skip this step)
  4. Reinstall node_modules,
  5. Rebuild NextJS app
  6. Start/Restart pm2.
while read oldrev newrev ref
do
    if [[ $ref =~ .*/master$ ]];
    then
        echo "Master ref received.  Deploying master branch to production..."
        git --work-tree={path to webroot} --git-dir={source of directory} checkout -f
    else
        echo "Ref $ref successfully received.  Doing nothing: only the master branch may be deployed on this server."
    fi
done

stop_next_app &&
cd {/path/to/webroot} &&
yarn install && 
yarn build && 
start_next_app

Script is refer this tutorial

Thanks for reading. Have fun. 😀