Celoteh Angga

Implementasi Content Security Policy

Wed, 04 Oct 2023 12:16:07 +0700

Apa itu content security policy? Kurang lebihnya adalah standar keamanan yang diimplementasikan via header dengan sistem whitelist untuk menghindari XSS, clickjacking, dan code injection di situs. Di antara semua proses pengamanan via manipulasi header, ini yang paling ampun riweuh implementasinya, dan dalam kasus-kasus tertentu, sama sekali tidak bisa diimplementasikan, atau jika beruntung, bisa dengan beberapa kompromi.

Jadi misalnya dengan implementasi header CSP dengan konfigurasi yang benar, maka hanya script-script dan style dari situs yang sudah di-whitelist yang hanya akan dimuat oleh peramban. Kekurangannya adalah inline script dan inline style yang tidak bisa dan sudah pasti ditolak oleh peramban kecuali menggunakan tuas 'unsafe-inline' yang membuat implementasinya menjadi tidak terlalu "aman".

Untuk mengatasi hal tersebut, maka dibutuhkan salah satu faktor terpenting dalam implementasi CSP: nonce, atau token sekali pakai yang digunakan oleh peramban untuk verifikasi keaslian "data", jadi untuk script-script inline tersebut bisa dimuat oleh peramban dan tidak diblok.

Generate dan Implementasi Nonce

Agar sistem bisa untuk generate nonce sendiri bisa via mod untuk Apache dengan nama mod_cspnonce. Namun, seperti yang pernah saya sebutkan sebelumnya, mualas, pak. Karena kebetulan menggunakan Cloudflare, kenapa tidak generate saja noncenya via worker-nya Cloudflare? Gratis hingga 100.000 requests/bulan.

Lagipula karena pakai Cloudflare ada beberapa script yang di-inject Cloudflare yang perlu di-whitelist dengan nonce juga (atau tambahin via URL whitelist di header, tapi mualaaaas).

Untuk itu saya hanya tinggal masuk ke Cloudflare saja, lalu buat worker baru yang saya isi dengan perintah seperti di bawah ini yang merupakan modifikasi ringan dari script ini:

const cspConfig = {
    "default-src": [
        "'strict-dynamic'",
        "https:",
    ],
    "script-src": [
    "'unsafe-inline'",
        "{{cspNonce}}",
    ],
    "style-src": [
        "'self'",
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    "https://cdnjs.cloudflare.com",
    "https://cdn.jsdelivr.net",
    "{{cspNonce}}",
    ],
    "font-src": [
        "'self'",
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    "https://cdnjs.cloudflare.com",
    "https://cdn.jsdelivr.net",
        "data:",
    ],
    "img-src": [
        "'self'",
    "https://cdn.jsdelivr.net",
    "data:",
    ],
    "connect-src": [
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    ],
    "media-src": [
    "'none'",
    ],
    "manifest-src": [
        "'self'",
    ],
    "object-src": [
        "'none'",
    ],
    "base-uri": [
        "'self'",
    ],
    "script-src-elem": [
        "'self'",
        "{{cspNonce}}"
    ]
};

function generateCspString(cspConfig, cspNonce) {
    let cspSections = [];

    Object.keys(cspConfig).map(function (key, index) {
        let values = cspConfig[key].map(function (value) {
            if (value === "{{cspNonce}}") {
                return value = `'nonce-${cspNonce}'`;
            }
            return value;
        })

        let cspSection = `${key} ${values.join(" ")}`;
        cspSections.push(cspSection);
    });

    return cspSections.join("; ");
}

function generateCspHeaders(cspConfig, cspNonce) {
    return {
        "Content-Security-Policy": generateCspString(cspConfig, cspNonce),
        "Cache-control": "public"
    };
}

let sanitiseHeaders = {
    "Server": "Worker",
};

let removeHeaders = [
    "Public-Key-Pins",
    "X-Powered-By",
    "X-AspNet-Version",
];

class AttributeRewriter {
    constructor(attributeName, oldValue, newValue) {
        this.attributeName = attributeName
        this.oldValue = oldValue;
        this.newValue = newValue;
    }
    element(element) {
        const attribute = element.getAttribute(this.attributeName)
        if (!(attribute === undefined || attribute === null)) {
            console.log("AutoNoncing");
            if (this.oldValue) {
                element.setAttribute(
                    this.attributeName,
                    attribute.replace(this.oldValue, this.newValue));
            } else {
                element.setAttribute(
                    this.attributeName,
                    this.newValue);
            }
    }
    }
}

addEventListener('fetch', event => {
    return event.respondWith(addHeaders(event.request));
});

async function addHeaders(req) {
    let response = await fetch(req)
    let headers = new Headers(response.headers)

    if (headers.has("Content-Type") && !headers.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: headers
        });
    }

    let cspNonce = btoa(crypto.getRandomValues(new Uint32Array(2)));
    let cspHeaders = generateCspHeaders(cspConfig, cspNonce);

    Object.keys(cspHeaders).map(function (name, index) {
        headers.set(name, cspHeaders[name]);
    });

    Object.keys(sanitiseHeaders).map(function (name, index) {
        headers.set(name, sanitiseHeaders[name]);
    });

    removeHeaders.forEach(function (name) {
        headers.delete(name);
    });

    // Angular 404 routing handler
    let status = response.status;
    let statusText = response.statusText;

    if (headers.has("Content-Type") &&
        headers.get("Content-Type").includes("text/html") &&
        status === 404) {
        status = 200;
        statusText = "OK";
    }

    // Auto-Nonce creation
    const rewriter = new HTMLRewriter()
        .on("script", new AttributeRewriter("nonce", "", cspNonce))
    .on("link", new AttributeRewriter("nonce", "", cspNonce))
    .on("style", new AttributeRewriter("nonce", "", cspNonce));

    return rewriter.transform(
        new Response(response.body, {
            status: status,
            statusText: statusText,
            headers: headers
        })
    );
}

Simpan workernya, dan assign untuk https://angga.win/*

Dengan menggunakan perintah yang di atas, maka seluruh script-script yang di-inject oleh Cloudflare, seperti untuk email obfuscation, juga sudah ikut dapat noncenya, jadi sekali jalan, praktis, tinggal implementasi dengan mengikuti tutorial yang ada di halaman Github yang ada di atas dengan menambahkan nonce ke inline script, inline style, 3rd party script, atau 3rd party style yang nantinya akan langsung diubah oleh worker ke token nonce yang sebenarnya.

Contoh:

link rel="stylesheet" href="proxy.php?url=situsketiga.ext/styles.css" nonce

Yang akan diubah otomatis oleh worker dengan token sekali pakai nantinya, misal akan menjadi:

link rel="stylesheet" href="proxy.php?url=situsketiga.ext/styles.css" nonce="MTA5NTM3Mzk1NiwzMTY0MjAwOTA3"

Atur Asynchronous CSS

Kelemahan terbesar CSP adalah belum adanya dukungan untuk inline handler tanpa lagi-lagi menambahkan 'unsafe-inline' di implementasi CSP-nya, dengan kata lain, implementasi terbaik asynchronous CSS dengan inline handler onload tidak lagi berjalan sempurna tanpa tuas 'unsafe-inline'.

Jadi satu-satunya cara agar asynchronous CSS dapat tetap diimplementasikan adalah dengan pertama-tama menyatakannya sebagai media="print" agar peramban tidak memuatnya, lalu mengubahnya menjadi media="all" dengan kait class saat situs terpanggil utuh, via Javascript.

Jadi, pertama-tama panggil dahulu CSS-nya, misal:

<link rel="stylesheet" href="proxy.php?url=https://cdnjs.cloudflare.com/ajax/libs/picnic/7.1.0/picnic.min.css" integrity="sha512-HZgZOfcUw1rxWuEBlzDis5U4HlbzR0wcWmb3FrLSKV6uhZiZpT9JSTzPJplHDmJZJFNfAReW+iDELJ1kADYHtA==" crossorigin="anonymous" referrerpolicy="no-referrer" media="print" class="asyncCSP" nonce />

Lalu buat scriptnya di akhir dokumen untuk mengubah media="print" menjadi media="all" via kait class asyncCSP saat situs sudah selesai dimuat penuh.

<script nonce>
    document.addEventListener("DOMContentLoaded", () => {
        document.querySelectorAll(".asyncCSP").forEach(el => {
            el.media = "all"
            console.log(`Loaded: ${el.href}`)
        })
    });
</script>

Silakan hapus yang baris console.log-nya apabila sudah selesai develop. Saya pribadi tidak menghapusnya karena perasaan cemas yang berlebihan, jadi kadang suka meriksa ke konsol apakah seluruh library-library-nya sudah berhasil termuat, padahal tahu sudah pasti termuat, wk.

Perhatian!

Cara pemanggilan asynchronous CSS seperti di atas akan mengakibatkan content shift yang cukup lumayan saat web dipanggil. Disarankan untuk menggunakan inline critical CSS untuk menghindari content shift yang signifikan.

Saya sendiri pakai, tapi masih ada content shift yang cukup signifikan selama beberapa saat web dipanggil pertama kali, namun akan kembali normal untuk pemanggilan berikutnya sampai cache di disk dihapus untuk waktu berkala berikutnya.

Solusi? Debug manual inline critical CSS-nya sampai hilang content shift-nya saat pertama kali memuat situs, tapi yawda deh mualas, pak.

Implementasi CSP

Ada beberapa cara implementasi CSP dengan implementasi via header webserver sebagai salah satu solusi terbaik, misalnya apabila menggunakan Apache bisa via dengan menambahkan header di .htaccess-nya. Namun karena saat ini menggunakan Bludit dan di halaman admin Bludit sendiri inline script dan inline style-nya cukup banyak, tentu implementasi via header webserver ini yang bersifat global akan menjadi masalah sendiri.

Kecuali misalnya rela ngedit fail-fail di halaman adminnya satu-satu buat nambahin nonce-nya setiap update versi Bludit sih yaaa, silakan ya, wk.

Sebelumnya cara yang untuk saya pribadi paling cocok adalah dengan menambahkan header via php, satu untuk yang di front-end, dan satu lain untuk yang back-end-nya Bludit.

Contoh yang saya pakai di front-end situs saya via fail header theme-nya:

<?php
    header("Content-Security-Policy: default-src 'strict-dynamic' 'unsafe-inline' https: 'nonce'; font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com https://cdnjs.cloudflare.com 'nonce-DhcnhD3khTMePgXw'; img-src 'self' data:; connect-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com 'nonce'; style-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com https://cdnjs.cloudflare.com 'nonce'; base-uri 'self'; object-src 'none'; script-src-elem 'self' 'nonce");
?>

'unsafe-inline' di situ hanya untuk backward compatibility saja ya untuk peramban yang lama, karena sudah pakai 'strict-dynamic' untuk default-src-nya, jadi kalau ada nonce misalnya, 'unsafe-inline'-nya di-bypass di peramban baru. Sementara untuk source-source yang di-whitelist-nya itu saya main salin tempel aja dari satu ke yang lainnya karena malas ya, jangan ditiru, wakakaka.

Misal, di font-src itu ga perlu ada dua-duanya fonts.googleapis sama fonts.gstatic, cuma butuh yang gstatic, tapi males ah, kopas-aeeee biar seragam semua.

Pengecualian untuk img-src karena saya ada menggunakan inline svg, jadi harus ditambah data:.

Kemudian untuk yang di back-end bluditnya bisa diedit di fail login.php dan index.php yang ada di folder themes untuk admin, saat ini hanya theme "booty." Isinya hampir mirip dengan yang di atas, tapi cuma 'self' dan 'unsafe-inline' saja toggle-nya sama ada beberapa data: untuk inline font dan svg.

Contohnya:

<?php
    header("Content-Security-Policy: default-src 'self'; font-src 'self' data: 'unsafe-inline'; img-src 'self' data:; connect-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; base-uri 'self'; object-src 'none'; script-src 'self' 'unsafe-inline';");
 ?>

Tapi kemudian saya memutuskan untuk langsung inject saja semuanya via worker Cloudflare seperti yang sudah saya tempel di konfigurasi worker di atas. Jadi saya tidak perlu lagi membuat konfigurasi php header terpisah:

const cspConfig = {
    "default-src": [
        "'strict-dynamic'",
        "https:",
    ],
    "script-src": [
    "'unsafe-inline'",
        "{{cspNonce}}",
    ],
    "style-src": [
        "'self'",
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    "https://cdnjs.cloudflare.com",
    "https://cdn.jsdelivr.net",
    "{{cspNonce}}",
    ],
    "font-src": [
        "'self'",
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    "https://cdnjs.cloudflare.com",
    "https://cdn.jsdelivr.net",
        "data:",
    ],
    "img-src": [
        "'self'",
    "https://cdn.jsdelivr.net",
    "data:",
    ],
    "connect-src": [
    "https://fonts.googleapis.com/",
    "https://fonts.gstatic.com",
    ],
    "media-src": [
    "'none'",
    ],
    "manifest-src": [
        "'self'",
    ],
    "object-src": [
        "'none'",
    ],
    "base-uri": [
        "'self'",
    ],
    "script-src-elem": [
        "'self'",
        "{{cspNonce}}"
    ]
};

Masalahnya adalah backend-nya yang harus dikonfigurasi secara terpisah seperti yang sudah tertulis di atas. Dan karena saya injeksi langsung via Cloudflare, maka konfigurasi header php pun sudah tidak ada pengaruhnya sama sekali. Solusinya adalah dengan melakukan rute bypass untuk URL untuk halaman admin.

Masuk ke Cloudflare, ke bagian manajemen domain yang ingin di-bypass, pilih bagian untuk Routes, lalu buat route URL admin dengan worker NONE.

Saya sarankan untuk tetap memasang contoh php header yang sudah saya contohkan di atas khusus untuk halaman admin tersebut.

<?php
    header("Content-Security-Policy: default-src 'self'; font-src 'self' data: 'unsafe-inline'; img-src 'self' data:; connect-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; base-uri 'self'; object-src 'none'; script-src 'self' 'unsafe-inline';");
 ?>

Perhatian!

Jangan salin dan tempel saja contoh implementasi CSP via injeksi Cloudflare di atas ya, karena tiap orang, tiap situs, kebutuhan untuk whitelist-nya beda-beda, jadi harus benar-benar dicek satu per-satu via konsol di perambannya apakah semua resources sudah terload dengan sempurna. Emang repot sih, tapi ya begitu lah implementasi CSP.

Oiya, yang https: doang untuk default-src seperti yang saya buat di atas untuk backward compatibilitynya itu ga aman ya. Itu karena mualas aja satu-satu masukin lagi sources-nya, alias saya goblo, jangan ditiru.

Tes!

Jangan lupa untuk selalu cek konsol perambannya untuk melihat apakah ada script atau styles, atau resource apapun yang terblok oleh Content Security Policy-nya dan edit kembali headernya sesuai dengan kebutuhan. Berikut adalah hasil tes untuk implementasi saya untuk content security policy di angga.win via CSP Evaluator.

Hijau-hijau mas broooo, wakakaka!

Dan tentu saja karena CSP yang paling ribet sudah teratasi, nilai di securityheaders.com juga sudah A+.

Untuk backend-nya ya yang jelas di CSP Evaluator dapat perisai merah, wakakaka!

Kesimpulan

Ribet dan ngeselin parah sih, wk. Menurut saya pribadi, karena saya orangnya mungkin terlalu konservatif kali ya (atau memang terlalu nubi...), saya rasa lebih baik menghabiskan waktu pertama kali untuk keamanan yang paling dasar dulu sih, seperti konfigurasi SSH agar bisa masuk hanya bisa dengan keypair saja, ubah port SSH, lalu setup mod_security/WAF dengan rules, terserah mau rules yang mana aja, boleh Comodo, boleh OWASP, boleh yang lain, dan ya testing rules mod_security-nya dan whitelist seperlunya sesuai kebutuhan.

Menurut saya itu yang paling dasar, bisa dilanjut dengan setup firewall dan lain-lain selanjutnya.

Kalau misalnya masih ada energi untuk setup security header seperti CSP lagi berikutnya yaa lebih bagus dan mantap.

Saya sendiri bukan ahli keamanan atau gimana-gimana juga sih, jadi kayanya juga ga ada authority kalau ngomongin masalah security, jadi maaf apabila blog-nya malah menyesatkan, wk. Cuma ya, seneng aja gitu ngeliat hijau-hijau setelah sebelumnya gagal implementasi CSP di situs klien karena konfigurasi-nya tabrakan, wakakaka.

Tema Simpel dan Cerah untuk Bludit: Solen

Tue, 03 Oct 2023 14:59:17 +0700

Akhirnya selesai juga tema yang akan digunakan untuk blog pribadi ini. Memutuskan untuk menggunakan Picnic CSS yang ternyata tidak terlalu bersahabat dengan pembaca layar di struktur menunya, bisa diakalin jadi tidak masalah.

Bercita-cita untuk menyajikan tiga bahasa untuk teks-teks yang nantinya akan sangat berguna bagi screen reader dan sedikit tersandung di pengetahuan Bahasa Jepang saya yang masih N3 tidak lulus-lulus. Terima kasih untuk Chiko yang sudah membantu untuk terminologi-terminologi yang saya tidak ketahui!

Tautan Unduh

Unduh di GitHub

Tangkapan Layar

Berikut detil dari theme Solen untuk Bludit yang dirilis dengan lisensi MIT! Semoga ada yang memakai dan suka atau bahkan semakin mengembangkannya karena saya yakin pasti masih banyak kurang dan salahnya lol.

Bahasa Indonesia

Tema Solen untuk Bludit

Sebuah tema blogging yang sederhana dan cerah yang dibuat dengan menggunakan Picnic CSS dengan dukungan untuk pengguna pembaca layar (screen reader).

Fitur

Sangat ringan digunakan di desktop dan peramban web mobile dengan desain responsif
Dukungan untuk pembaca layar (screen reader)
Dukungan untuk tiga bahasa: Bahasa Indonesia, Inggris, dan Jepang
Rasio kontras yang baik (Sesuai standar WCAG 2.1 AA)
Critical inline CSS dan juga memuat CSS dengan cara asynchronous
Penggunaan Javascript yang minimal dan tidak intrusif

Kompatibilitas

Bludit 3.15.0

Lisensi

MIT

English

Solen for Bludit Theme

A bright and simple Bludit blogging theme made with Picnic CSS with support for screen reader users.

Features

Very light on various desktop and mobile browser with responsive design
Support for screen reader users
Three languages support: Indonesian, English, and Japanese
Good contrast ratio (WCAG 2.1 AA Compliant)
Critical inline CSS and asynchronous CSS load
Made with Picnic CSS
Minimal and non-intrusive use of Javascript

Compatibility

Bludit 3.15.0

License

MIT

How to Install

Download the compressed file from the link above
Upload the compressed file to bl-themes folder on your bludit installation
Unzip the compressed file
Activate the theme from your bludit admin panel

How to Change the Logo and Welcome Message

You can change the logo by uploading your logo to the img folder and then altering the header.php file inside the php folder. Change img/logo.svg to img/YOUR_LOGO_HERE.EXT
You can also change the welcome message by altering your language file inside the languages folder. Example from "welcome": "Welcome!", to "welcome": "Welkom!",

Portfolio

Sun, 01 Oct 2023 15:26:35 +0700

Portfolio alias beberapa proyek yang sudah atau sedang saya kerjakan. Diambil dari beberapa tahun lalu, setidaknya 2018, yang mungkin masih sedikit relevan dengan perkembangan teknologi yang semakin pesat di beberapa tahun belakangan ini.

Pembuatan Situs Web

Bumi Kepanasan (April 2023)

Membuat situs disertai dengan form CRUD custom untuk mendata pengunjung yang ingin berpartisipasi dalam kampanye yang meningkatkan kesadaran untuk pemanasan global.

Dibuat dengan menggunakan HTML disertai dengan basic Aria tag, CSS (framework Bootstrap), serta custom white-label CMS dan PHP.

Tautan langsung | Tautan di Archive.org

Cek Suaramu (Mei 2022)

Implementasi desain klien menjadi sebuah situs dinamis dengan menggunakan HTML, CSS (framework Bootstrap), Javascript, dan custom white-label CMS.

Tautan langsung | Tautan di Archive.org

Semua Tercatat (Desember 2021)

Implementasi desain klien ke HelpJuice, sebuah SaaS untuk sistem knowledge base. Dikerjakan dengan menggunakan HTML, CSS, dan templating language internal dari HelpJuice.

Tautan di archive.org

Amarylis Hotel & Resort (Agustus 2018)

Mengubah konsep desain dari klien menjadi situs web dinamis. Dikerjakan dengan menggunakan HTML, CSS, dan custom white-label CMS.

Tautan langsung | tautan di Archive.org

Administrasi Sistem

Menjadi administrator sistem beberapa peladen untuk beberapa pelanggan menggunakan sistem operasi turunan Centos seperti AlmaLinux dan beberapa jenis panel kontrol seperti WHM dan CyberPanel, yang dikarenakan sifat pekerjaannya tidak dapat diberitahukan secara detil.

Membangun Rumah Baru Bagian 2: Apache

Fri, 29 Sep 2023 08:30:00 +0700

Masalah CMS sudah diputuskan untuk menggunakan Bludit karena simpel dan menggunakan flat file. Sekarang masuk ke masalah baru, perangkat lunak yang akan dipasangkan di VPS NAT-nya. Karena jelas ini oversell dan burstable, jadi harus ada beberapa pertimbangan untuk webserver.

Pertama mikirnya ya pakai Caddy atau Nginx, karena sangat ringan, tapi kok ya ngerasanya rada riweuh karena harus atur konfigurasi sana-sini lagi, ngubah rules .htaccess ke rules yang dipakai oleh Caddy atau Nginx, dan lain sebagainya. Bisa tapi mualas pak, jujur.

Pilihan kedua tentu saja menggunakan reverse proxy Nginx dengan Apache, Nginx bisa meladeni konten statis dan Apache untuk konten dinamisnya. Nah, ini lebih-lebih riweuh lagi kecuali pakai batch installer dan tentu saja ngatur gini-gononya bakalan pusing lagi secara ini pakai NAT-only VPS, atau emang skill issue aja wakakakak, nubi kak.

Pilihan ketiga adalah yang paling gampang dan user-friendly, dengan memasang CyberPanel dan memanfaatkan antara OpenLiteSpeed yang sekarang bisa membaca rules .htaccess walaupun masih hanya untuk rewrite atau LiteSpeed Enterprise, cuma 1 web ini, gratis.

Masalahnya adalah NAT-only VPS yang hanya menyediakan IPv6 untuk akses publiknya, wakakaka, jadi mau akses admin panelnya yang terikat dengan IP shell-nya yang IPv4 ga bisa . Saya yakin pasti ada caranya sih, cuma ya itu kak, skill issue dan mualas dari orok, ehehe.

Akhirnya diputuskan untuk pakai standar Apache saja, toh ini juga karena NAT-only harus dilapis lagi pakai CloudFlare biar publik yang belum bisa akses IPv6 (alias hampir semua orang umum), bisa akses situsnya.

Lagian instalasi Apache sekarang standarnya udah bagus kok, usage memory-nya defaultnya udah engga gila-gilaan lagi, jadi saya rasa sudah cocok lah dengan tujuan saya yang ingin semalas-malasnya mengurus backendnya.

Jadilah! Selamat datang di Celoteh Angga!

Membangun Rumah Baru Bagian 1: Bludit

Thu, 28 Sep 2023 17:55:57 +0700

Akhirnya memutuskan membuat rumah baru sekalian untuk portfolio setelah sebelumnya menggunakan Tumblr yang cukup simpel digunakan dan tidak perlu desain sana-sini lagi. Namun banyak sekali pertimbangan yang dilakukan sebelumnya kerena tidak ingin terlalu riweuh di urusan CMS yang digunakan dan segala macam tetek-bengek-nya.

Untuk CMS ini tentu saja harus menggunakan yang ringan, karena VPS yang dimiliki dan digunakan saat ini adalah NAT VPS di Norwegia yang memiliki RAM dan CPU super terbatas dalam kontainer OpenVZ yang tentu saja burstable, alias sudah dapat dipastikan oversell la ya secara cuma bayar Rp.150.000 saja untuk setahun, hahaha!

Karena hal tersebut akhirnya diputuskanlah untuk menggunakan flat file CMS agar VPS tidak lagi diperberat dengan proses untuk database konvensional seperti MySQL misalnya. Beberapa pilihan yang akhirnya masuk pertimbangan antara lain:

Pico CMS
Grav
Bludit

Setelah mempertimbangkan banyak hal termasuk kemudahan pengoperasian serta theme-ing, karena ingin membuat theme sendiri sekalian untuk portfolio, akhirnya pilihan jatuh ke Bludit, yay! Walaupun jujur sebenarnya memilih Bludit karena dasbor adminnya simpel, wk.

Pertimbangan secara teknis lainnya kayanya ga ada ya, secara emang kurang ngerti juga selain ngeliat, "Oh! Di Github mayan aktif kok," dan ngecek sejarah laporan vuln-nya di NVD via Stack Watch walaupun ga ngerti-ngerti amat.

Adapun kekurangan Bludit yang paling terasa saat ini adalah dukungan yang kurang baik untuk format .webp, seperti misalnya unggah foto profil yang otomatis diubah menjadi PNG dengan kualitas tinggi sehingga gambar menjadi terlalu besar untuk fungsi web.

Bisa diakalin sih, jadi no problemo, kok.

Sama mungkin kalau sudah terbiasa menggunakan Wordpress akan terasa sangat sederhana sekali. Tapi ini yang saya cari, ga mau riweuh pokoknya lah, mau fokus ke produktif bikin theme sama bangun portfolio lagi dari nol (?).

Berikutnya adalah pertimbangan theme seperti apa yang ingin dibuat, bisa dilihat di theme yang dipakai sekarang, dan juga menggunakan software apa-apa saja di VPSnya, dan tentu saja menambah portfolio desainnya, biar ada yang mau ngekomis buat job desain, hiks.