Host Personal Website (React App) on OCI for Free

Why OCI?

Free! Free! Always Free. With OCI always free you can do a lot. You can get 2 free VM for free for hosting a VPN sever.

Want to build a personal website free? Here how OCI object storage can help. You get 10G object storage for free as long as you sign in an OCI account. That is enough for hosting websites as many as you want.
OCI Object storage is not supporting to host website out of box. But, with very minimum work, we can make that magic happen. Let's get started.

Create a public visible bucket.

First, create a bucket under object storage.
Second, edit visibility to make it public.

Then, upload any file to the bucket, and find the URL path. Save your base path for later use. In my case, my base path is "/n/ax5ixupubw30/b/jguo.site/o/";

Create a React App.

You can create a react app by following react official document. This is not a react tutorial, so, I will not go into any more details. You can also copy my personal website source code here.

Now, let's create a script to fix the base path issue during object storage rendering your website.
(Note: You need to replace /n\/ax5ixupubw30\/b\/jguo\.site\/o\/ with your base path which I mentioned earlier. Also, when you use OCI CLI to upload your website, you need to give a specific content-type, otherwise, it won't work. If you upload through console, you don't need to worry about it.)

#!/bin/bash
set -e

cd build

# modifiy index.html file and make it works in oci object storage.

sed -i .bak 's/"\/manifest\.json"/"\/n\/ax5ixupubw30\/b\/jguo\.site\/o\/manifest\.json"/g' index.html
sed -i .bak 's/"\/icon\.JPG"/"\/n\/ax5ixupubw30\/b\/jguo\.site\/o\/icon\.JPG"/g' index.html
sed -i .bak 's/"\/static\/js\//"\/n\/ax5ixupubw30\/b\/jguo\.site\/o\/static\/js\//g' index.html
sed -i .bak 's/"\/static\/css\//"\/n\/ax5ixupubw30\/b\/jguo\.site\/o\/static\/css\//g' index.html
sed -i .bak 's/"static\/js\/"/"n\/ax5ixupubw30\/b\/jguo\.site\/o\/static\/js\/"/g' index.html

# please setup oci cli first : https://docs.oracle.com/en-us/iaas/Content/API/SDKDocs/cliinstall.htm
oci os object bulk-delete -ns ax5ixupubw30  -bn jguo.site  --prefix static --force
oci os object put -bn jguo.site --file ./manifest.json --content-type application/json --force
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type text/html --include *.html --overwrite
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type image/jpeg --include *.JPG --overwrite
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type text/javascript --include *.js --overwrite
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type application/pdf --include *.pdf --overwrite
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type text/css --include *.css --overwrite
oci os object bulk-upload -bn jguo.site --src-dir ./ --content-type text/plain --exclude *.js --exclude *.html --exclude *.JPG --exclude *.pdf --exclude *.css --exclude ./manifest.json --overwrite

Then, let's add a command to package json, and automate the deployment.

 "scripts": {
    ...,
    "deploy": "npm run build && ./deploy_to_oci.sh"
  },

Last, let's deploy it to oci object storage (make sure you install and setup oci cli).

npm run deploy

Now, go back to OCI console, and find the URL for the index.html file. Click the URL, you should see your website now.

What's more?

You can see my personal website here on OCI
Or, scan this QR code.

My website source code here.