Hosting Website Gratis Menggunakan Cloudflare Workers

Secure, Blazing Fast Website

Cloudflare Workers
Cloudflare Workers

Article kali ini menggunakan Cloudflare Workers dan KV untuk hosting website/blog, Web portofolio, Landing page.

Pertaman kamu harus menggunakan Layanan Cloudflare, Cloudflare menawarkan Layanan Gratis dengan berbagai fitur yang sangat menarik dan membantu kamu dalam mengembangkan web kamu.

Jika kamu sudah mendaftar dan mempunyai domain di cloudflare kamu bisa langsung menggunakan layanan gratis cloudflare seperti, KV+R2+Pages Dll.

Jika kamu belum tau apa itu cloudflare workers kamu bisa mengunjungi situs nya Cloudflare Workers.

Lanjut disini saya tidak menggunakan wordpress tetapi saya menggunakan static site generator :) , kamu tidak perlu cemas karena kamu bisa juga hosting web kamu menggunakan wordpress di Clodflare Workers, Kamu bisa menggunakan plugin wordpress Simply Static.

Table of Contents
  1. Install Nodejs NPM
  2. Install Wrangler
  3. Init Wrangler
  4. Deploy Static Website Assets

Install Nodejs NPM

Disini saya menggunakan Alpine Linux containers, Untuk menggunakan Cloudflare Wrangler kita harus menginstall Nodejs + NPM agar bisa kita gunakan, kamu bisa menginstall nodejs menggunakan perintah berikut ( perintah install berbeda di setiap distro linux ).

# apk add --update nodejs npm
OR
# apk add nodejs npm

Install Wrangler

Setelah berhasil menginstall nodejs + npm kita bisa langsung memberikan perintah di terminal dengan memasukan perintah di bawah ini dan akan menginstall wrangler

npm install -g wrangler

Setelah wrangler sudah terinstall kita bisa langsung login menggunakan perintah berikut

wrangler login

Setelah memberikan perintah di atas wrangler akan langsung otomatis membuka browser kamu untuk masuk ke halaman login , selain itu wrangler juga memberikan input url di terminal jika kamu ingin manual memasukan url tersebut di browser kamu.

Init Wrangler

Setelah berhasil login saat nya kita mendeploy website/blog yang ingin kita hosting di Cloudflare Workers, Pertama kamu masuk ke directory root website kamu dan init wrangler di root directory website dengan menggunakan perintah di bawah ini

wrangler init -y
This command adds/update the following files:
wrangler.toml: The file containing project configuration.
package.json: Wrangler devDependencies are added.
tsconfig.json: Added if not already there to support writing the Worker in TypeScript.
src/index.ts: A basic Cloudflare Worker, written in TypeScript.
Wrangler init
Wrangler init

Deploy Static Website Assets

Setelah Itu akan membuat 4 file di root directory website, wrangler.toml, package.json, tsconfig.json, src/index.ts, edit wrangler.toml dan tambahkan kode berikut

[site]
bucket = "./public" # <-- Add your build directory name here.

Saya menggunakan static site generator dan dengan ouput public sebagai folder output static assets website saya , jika kamu menggunakan wordpress kamu bisa menggunakan plugin simply static, jika website wordpress kamu sudah menjadi static kamu bisa push static assets website ke github kamu dan setalah itu kamu bisa clone repo nya dan init wrangler ke directory root website kamu. Lanjut Install @cloudflare/kv-asset-handler di sini Kita akan menyimpan static assets kita ke penyimpanan KV Cloudflare , kamu bisa menginstall dengan memberikan perintah berikut

npm i -D @cloudflare/kv-asset-handler

Ini adalah static assets website saya yang sudah tersimpan di Workers KV

Static assets
Static assets

Setelah selesai kita akan ganti src/index.ts , tambahkan kode berikut ke index.ts

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
addEventListener("fetch", (event) => {
  event.respondWith(handleEvent(event));
});
async function handleEvent(event) {
  try {
    // Add logic to decide whether to serve an asset or run your original Worker code
    return await getAssetFromKV(event);
  } catch (e) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" not found`, {
      status: 404,
      statusText: "not found",
    });
  }
}

Setelah selesai, publish website kamu ke cloudflare Workers + KV.

wrangler publish
Run wrangler dev or wrangler publish to preview or publish your site on Cloudflare. 
Wrangler will automatically upload the assets found in the configured directory.