Static HTML @ Cloudflare page

ukitdog
4 min readAug 5, 2022

--

# Background
Currently, I am using firebase with Gitlab CI/CD to deliver my static page with CDN.

# Problem

Gitlab plans to remove inactive repo to save their operation cost. I currently heavily make use of the Gitlab CI/CD to automatic the website release.

If Gitlab deleted my repo and I will lose all my source code and Git commits.

# Resolution

In order to find a new place to host my repo, I go back to Github again as nowadays Monkey worker (CI/CD) is an exclusive feature for Gitlab any more.

# Bonus

Firebase static hosting does not come with an auto DDoS shield while I notice that Cloudflare offers a similar static hosting with a DDoS shield.

I really do not want to get a bill for USD 99,999 while I am under a DDoS attack.

# Downside of Cloudflare

Cloudflare supports many modern web frameworks like React.js, Vue.js and Gitbook, etc.

However, my website is a simple stupid pure HTML file. Under this condition, the auto integration feature from Cloudflare is not useful for me.

# How to deploy a static page at Cloudflare

You can run npm run build to unlock the power of the Cloudflare page

Setting > Builds & deployments > Build configurations
// As I am not able to do fancy web framework and deal with webpack

## importance

Specify the node js version

## package.json

// add this line
"scripts": { "build": "sh ./build.sh" }

## build.sh

#!/bin/bash

npm i -g html-minifier-terser
mv ./_public/index.html ./_public/raw.html
html-minifier-terser --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true ./_public/raw.html > ./_public/index.html
rm -rf ./_public/raw.html

## output

2022-08-05T09:21:02.862613Z Success: Finished cloning repository files
2022-08-05T09:21:03.413183Z Installing dependencies
2022-08-05T09:21:03.423879Z Python version set to 2.7
2022-08-05T09:21:06.555729Z Downloading and installing node v17.9.1...
2022-08-05T09:21:06.917886Z Downloading https://nodejs.org/dist/v17.9.1/node-v17.9.1-linux-x64.tar.xz...
2022-08-05T09:21:07.337016Z Computing checksum with sha256sum
2022-08-05T09:21:07.467035Z Checksums matched!
2022-08-05T09:21:12.412214Z Now using node v17.9.1 (npm v8.11.0)
2022-08-05T09:21:12.778737Z Started restoring cached build plugins
2022-08-05T09:21:12.794225Z Finished restoring cached build plugins
2022-08-05T09:21:13.258235Z Attempting ruby version 2.7.1, read from environment
2022-08-05T09:21:16.706224Z Using ruby version 2.7.1
2022-08-05T09:21:17.054047Z Using PHP version 5.6
2022-08-05T09:21:17.210059Z 5.2 is already installed.
2022-08-05T09:21:17.235592Z Using Swift version 5.2
2022-08-05T09:21:17.236164Z Started restoring cached node modules
2022-08-05T09:21:17.250575Z Finished restoring cached node modules
2022-08-05T09:21:17.748291Z Installing NPM modules using NPM version 8.11.0
2022-08-05T09:21:18.155965Z npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
2022-08-05T09:21:18.15634Z npm WARN config location in the cache, and they are managed by
2022-08-05T09:21:18.156519Z npm WARN config [`cacache`](http://npm.im/cacache).
2022-08-05T09:21:18.556771Z npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
2022-08-05T09:21:18.557123Z npm WARN config location in the cache, and they are managed by
2022-08-05T09:21:18.557367Z npm WARN config [`cacache`](http://npm.im/cacache).
2022-08-05T09:21:18.689562Z
2022-08-05T09:21:18.689844Z up to date, audited 1 package in 164ms
2022-08-05T09:21:18.690426Z
2022-08-05T09:21:18.690651Z found 0 vulnerabilities
2022-08-05T09:21:18.697772Z NPM modules installed
2022-08-05T09:21:19.140946Z npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
2022-08-05T09:21:19.141316Z npm WARN config location in the cache, and they are managed by
2022-08-05T09:21:19.141763Z npm WARN config [`cacache`](http://npm.im/cacache).
2022-08-05T09:21:19.159897Z Installing Hugo 0.54.0
2022-08-05T09:21:19.825418Z Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
2022-08-05T09:21:19.829217Z Started restoring cached go cache
2022-08-05T09:21:19.846978Z Finished restoring cached go cache
2022-08-05T09:21:19.990701Z go version go1.14.4 linux/amd64
2022-08-05T09:21:20.005434Z go version go1.14.4 linux/amd64
2022-08-05T09:21:20.008176Z Installing missing commands
2022-08-05T09:21:20.008448Z Verify run directory
2022-08-05T09:21:20.0086Z Executing user command: npm run build
2022-08-05T09:21:20.485151Z npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
2022-08-05T09:21:20.485492Z npm WARN config location in the cache, and they are managed by
2022-08-05T09:21:20.485657Z npm WARN config [`cacache`](http://npm.im/cacache).
2022-08-05T09:21:20.5016Z
2022-08-05T09:21:20.501987Z > sh ./build.sh
2022-08-05T09:21:20.502146Z
2022-08-05T09:21:20.913386Z npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
2022-08-05T09:21:20.91371Z npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
2022-08-05T09:21:20.913892Z npm WARN config location in the cache, and they are managed by
2022-08-05T09:21:20.914023Z npm WARN config [`cacache`](http://npm.im/cacache).
2022-08-05T09:21:22.421422Z
2022-08-05T09:21:22.421751Z added 24 packages, and audited 25 packages in 2s
2022-08-05T09:21:22.42191Z
2022-08-05T09:21:22.422063Z 1 package is looking for funding
2022-08-05T09:21:22.422224Z run `npm fund` for details
2022-08-05T09:21:22.422759Z
2022-08-05T09:21:22.422967Z found 0 vulnerabilities
2022-08-05T09:21:22.875027Z Finished
2022-08-05T09:21:22.875725Z Note: No functions dir at /functions found. Skipping.
2022-08-05T09:21:22.876019Z Validating asset output directory
2022-08-05T09:21:23.367294Z Deploying your site to Cloudflare's global network...
2022-08-05T09:21:26.907478Z Success: Assets published!
2022-08-05T09:21:27.514049Z Success: Your site was deployed!

# To sum up

Cloudflare Page is a very great tool for a lazy engineer like myself to deploy a static s page with a DDoS shield and all the features provided by Cloudflare.

And npm run build able to unlock a very complex build script without working with Webpack which is likely to have breaking changes and have a lot of config files.

## Reference

  1. https://news.itsfoss.com/gitlab-inactive-projects-policy/
  2. https://www.reddit.com/r/Firebase/comments/mf3279/how_to_save_your_ass_from_a_ddos_99999_firestore/
  3. https://developers.cloudflare.com/pages/framework-guides/
  4. https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

ukitdog
ukitdog

No responses yet

Write a response