Skala Tidak Terbatas dan Hosting Web Gratis dengan Halaman GitHub dan Cloudflare

Saya memiliki rahasia yang menghemat banyak uang klien saya, menjaga keamanan situs web mereka, dan memiliki cadangan bawaan.

Rahasianya: Saya membuat situs web mereka statis. Kemudian, saya menyimpan dan menghostingnya dengan GitHub, dan menggunakan Cloudflare untuk menyajikannya melalui HTTPS, dan membuatnya cepat. Klien saya hanya membayar untuk nama domain mereka, namun mereka mendapatkan lebih banyak dari yang pernah mereka tawar.

Mengapa Konten Statis?

Situs statis sangat cepat karena tidak ada waktu pemrosesan server yang terlibat. Juga, dengan melakukan basis kode aset statis di repositori git, mengembalikan perubahan hanya menjadi masalah kembali ke komit sebelumnya. Pencadangan dapat dilakukan dengan git push , dan pada dasarnya Anda melayani seluruh situs web Anda dari cache, artinya server Anda hampir tidak perlu memproses permintaan lagi.

Membangun UI yang kompleks?

Dengan munculnya kerangka kerja front-end, seperti React dan sejenisnya, Anda dapat membuat pengalaman ajaib dengan tidak lebih dari HTML/CSS dan JavaScript. Anda harus memisahkan logika back-end Anda dari front-end Anda, tetapi bahkan Ruby on Rails dikirimkan dengan mode API sekarang.

Setiap kali saya dikontrak untuk membangun situs web, saya mempertimbangkan apakah situs statis cukup untuk memenuhi kebutuhan klien saya, dan dalam banyak kasus, memang demikian.

Apakah Anda bertanya-tanya kasus penggunaan seperti apa yang ada dalam pikiran saya? Besar! Mari kita bahas beberapa situasi ketika Anda mungkin ingin mempertimbangkan konten statis, dan jelaskan bagaimana pendekatan ini dapat menghemat waktu Anda dan klien Anda.

Situs web brosur

Situs web brosur dimaksudkan untuk memberikan informasi tentang bisnis, dan tidak berubah secara signifikan sepanjang hidupnya. Aplikasi dinamis jelas berlebihan untuk situs semacam itu, dan karena situs ini tidak dirawat selama bertahun-tahun, hanya menerima sedikit, jika ada pembaruan, biasanya mereka menjadi sasaran empuk peretas, yah, diretas.

Template HTML statis secara signifikan lebih murah daripada rekan-rekan CMS mereka, dan mereka lebih mudah untuk diubah di masa depan. Pengembang yang diminta untuk memperbarui situs tersebut tidak memerlukan pengetahuan khusus tentang CMS tertentu. Sebagai aturan, saya selalu membuat website statis untuk situs brosur.

Bonus: Usaha kecil suka tidak membayar biaya hosting bulanan berulang. Memang, hosting bukanlah biaya yang besar, tetapi klien tidak perlu repot membayar apa pun selain domain, yang sangat bagus.

Aplikasi satu halaman

Apakah Anda memamerkan aplikasi baru yang luar biasa dan keren yang mengandalkan kerangka kerja front-end modern?

Aplikasi Anda sebagian besar sudah statis. Ambil beberapa langkah ekstra untuk mengisolasi logika sisi server apa pun ke dalam aplikasi terpisah, dan dapatkan manfaat penuh karena aplikasi Anda dilayani sepenuhnya dari cache Cloudflare.

Aplikasi Anda akan tersedia setiap saat.

Blog

Ini adalah penjualan yang sulit. Sulit untuk meyakinkan orang bahwa situs statis dapat digunakan untuk blog, tetapi bacakan saya – saya belum membahasnya secara mendalam.

Blog tidak lebih dari konten yang dirender dengan template. Anda tidak memerlukan aplikasi lengkap untuk mengurai setiap permintaan dan merender halaman baru. Situs statis sangat cocok untuk kasus penggunaan ini.

Pertimbangkan Jekyll. Anda memberikan template Liquid dan konten penurunan harga, dan menggabungkannya menjadi situs web statis. Tidak diperlukan pemrosesan on-the-fly, dan blog Anda tiba-tiba terasa jauh lebih cepat.

Alur kerja ini sangat membantu karena halaman GitHub mendukung pembangunan Jekyll. Tiba-tiba, posting blog dapat disumbangkan dengan permintaan tarik, dan semua konten Anda disimpan dalam kontrol versi. Non-pengembang masih dapat berkontribusi postingan di Markdown dengan memublikasikan postingan mereka melalui Stackedit.

Sebenarnya, saya menggunakan Stackedit untuk menulis posting ini sekarang!

Juga, jika Anda ingin komentar di posting blog Anda, Disqus memberi Anda sistem komentar yang kuat dengan memasukkan potongan JavaScript.

Halaman yang Anda baca ini juga menggunakan Disqus.

Halaman GitHub

GitHub Pages adalah jawaban GitHub untuk halaman proyek, dan ini memungkinkan Anda untuk melayani situs web statis apa pun langsung dari repositori Anda. Karena halaman GitHub mendukung domain kustom, Anda dapat meng-host situs web statis di halaman GitHub secara gratis, dengan penerapan langsung dari Git.

Menyebarkan ke Halaman GitHub.

Cukup bicaranya, mari kita lihat aksinya!

Saya telah melanjutkan dan membuat satu halaman aplikasi React yang mengambil dan menampilkan nilai tukar saat ini untuk Rupee Pakistan dari API publik. Mari kita terapkan ini ke Halaman GitHub.

Pertama, mari buat repositori GitHub baru.

Halaman GitHub disajikan dari cabang yang disebut gh-pages jadi mari kita buat satu untuk proyek saya.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

Dan mari kita mendorong situs ke atas:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

Dan kita sudah selesai! Pada titik ini situs web akan tersedia di https://amingilani.github.io/price-check dengan SSL gratis:

Hal penting yang perlu diperhatikan:

• Halaman GitHub menyajikan file index.html di cabang gh-pages proyek Anda
• Situs web disajikan di USERNAME.github.io/REPOSITORY-NAME

Menyesuaikan nama domain.

Melayani situs dari GitHub baik-baik saja, tetapi situs web apa pun yang layak membutuhkan nama domain khusus. Untungnya, GitHub memungkinkan Anda Membawa Domain Anda Sendiri ke pesta!

Pertama, mari kita buat file CNAME khusus dan letakkan nama domain kita di sana. Ini akan memberi tahu GitHub nama domain mana yang akan dirutekan ke repositori.

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

Kedua, mari arahkan CNAME untuk subdomain kita ke DNS GitHub di USERNAME.github.io :

Perhatian: JANGAN gunakan ini untuk domain apex! Menambahkan CNAME ke root domain Anda akan menonaktifkan MX dan TXT Anda. Gunakan ini hanya untuk subdomain Anda. Domain apex akan dibahas kemudian.

Pada titik ini, situs web kami harus berjalan di domain khusus kami di HTTP:

Hal penting yang perlu diperhatikan:

• *.github.io default dilayani melalui HTTPS.
• Nama domain khusus kami disajikan melalui HTTP yang tidak aman.
• JANGAN gunakan CNAME di domain apex Anda kecuali jika Anda ingin mematikan email Anda.

Batasan Halaman GitHub:

• Repo harus berukuran kurang dari 1 GB.
• Situs web harus berukuran kurang dari 1 GB.
• Batas Bandwidth Bulanan adalah 100 GB. Kami akan melewati ini nanti.

Menggunakan domain apex sebagai domain khusus Anda

Cara termudah untuk mengatasi batasan ini adalah dengan menggunakan www sebagai subdomain Anda, dan mengalihkan semua lalu lintas HTTP dari apex ke www . Dalam contoh saya, saya akan mengarahkan gilani.me ke www.gilani.me , yang menunjuk ke situs statis saya, tetapi saya tidak suka melakukan sesuatu dengan cara yang mudah.

Jika Anda benar-benar ingin menggunakan domain apex, periksa apakah penyedia DNS Anda mengizinkan Anda menyetel data ANAME . Ini adalah (disederhanakan) di tengah antara catatan CNAME karena mereka memungkinkan Anda menunjuk ke domain dan catatan A karena mereka tidak membatalkan catatan lain di zona yang sama.

Bukan ANAME ? Opsi terakhir adalah mengubah ke penyedia DNS yang mendukung ini: masukkan Cloudflare. Cloudflare menyediakan perataan CNAME pada domain apex, yang setara dengan catatan ANAME . Yang terbaik adalah beralih sekarang karena kita akan membahas Cloudflare di bagian selanjutnya.

TLDR : Beralih ke DNS gratis Cloudflare dan atur CNAME di domain apex Anda. Mereka melakukan sesuatu yang istimewa dengan CNAME mereka yang membuatnya berfungsi.

SSL dan Cloudflare

Selamat datang di era pasca-Snowden. Semua ketakutan terburuk kami terhadap pengintaian dan peretasan yang disetujui pemerintah telah dikonfirmasi, dan dunia berebut untuk mengamankan data dalam perjalanan dan saat istirahat.

Sebagai admin web modern, Anda diharapkan untuk menyediakan setidaknya SSL di situs web Anda, tanpa konten campuran .

Itu sampai pada titik di mana Google Chrome menandai situs web HTTPS biasa sebagai tidak aman dan Google Penelusuran mulai lebih menyukai situs web HTTPS dalam peringkat mereka. Kami akan membahas lebih banyak strategi untuk membuat front-end Anda aman nanti, tetapi untuk saat ini, kami hanya akan membahas SSL.

Untungnya, kami sekarang memiliki Let's Encrypt.

Ini adalah Otoritas Sertifikat (CA) nirlaba dan sepenuhnya otomatis yang memungkinkan Anda mengeluarkan sertifikat SSL 90 hari jangka pendek secara terprogram untuk domain apa pun yang Anda kontrol. Sangat mudah untuk digunakan; itu sumber terbuka; dan proyek ini didukung oleh banyak perusahaan, termasuk Mozilla dan Electronic Frontier Foundation.

Memanfaatkan Cloudflare dengan Baik

Cloudflare adalah layanan perlindungan DNS, CDN, dan DDoS.

Ini men-cache situs web Anda, dan menyajikannya kepada pengguna dari server yang berdekatan secara geografis, membuat situs web Anda lebih cepat. Ini memiliki manfaat tambahan untuk menjaga Anda di bawah batas bandwidth 100GB GitHub karena meskipun situs web Anda menjadi sangat populer, sebagian besar permintaan akan mencapai cache, dan tidak pernah mencapai server.

Selain itu, Cloudflare menawarkan layanan yang disebut Universal SSL di mana mereka mengeluarkan Anda sertifikat SSL gratis dari mitra CA mereka, sehingga Anda mendapatkan HTTPS gratis… selamanya.

Mengapa Cloudflare?

Saya tahu apa yang Anda pikirkan: Gilani, Anda baru saja memberi tahu saya betapa hebatnya Let's Encrypt. Mengapa Anda berbicara tentang Cloudflare? Yah, semuanya bermuara pada kesederhanaan.

Sebagai latihan mental, bayangkan menyiapkan beberapa cache Nginx dan membalikkan proxy di seluruh dunia, memberi mereka semua sertifikat SSL yang valid dan melayani halaman web pengguna dari lokasi terdekat mereka.

Ini menyebabkan situs web Anda dilayani melalui SSL bahkan jika server asal tidak memiliki sertifikat SSL, meskipun Cloudflare memberi Anda sertifikat yang ditandatangani sendiri khusus yang dapat Anda letakkan di server asal untuk mengamankan koneksi hingga ke server Cloudflare. Inilah yang Cloudflare berikan kepada Anda dengan paket gratis, dan Anda bahkan tidak perlu memperbarui sertifikat Anda setiap 90 hari.

Sebagai pekerja lepas, saya mendapatkan klien yang menginginkan situs dan menjalankan bisnis mereka secepat mungkin. Mereka tidak mengerti atau peduli tentang masalah keamanan, mengganggu web modern, atau enkripsi selama transit. Beberapa klien berjuang untuk memahami ide nama domain, dan merasa menjengkelkan ketika mereka harus membayar biaya tahunan $15 “hanya untuk menjaga agar situs web saya tetap berjalan”. Jadi coba jelaskan kepada mereka mengapa mereka harus membayar sekelompok proxy terbalik yang melindungi situs web mereka yang berjalan di hosting gratis itu sendiri.

Menyiapkan Cloudflare SSL

Mari kita mengotori tangan kita lagi. Hal pertama yang harus dilakukan, beralih ke perutean semua lalu lintas Anda melalui Cloudflare:

Selanjutnya, di bawah Crypto, atur level SSL ke “Full.”

Paksa "Penulisan Ulang HTTPS Otomatis" untuk mematikan peringatan konten campuran.

Pada titik ini, situs web kami akan bekerja melalui HTTP dan HTTPS. Mari kita paksa HTTPS untuk semua yang ada di domain kita.

Semua selesai. Situs web kami harus selalu dimuat melalui HTTPS dengan peringkat "Aman" berwarna hijau di Chrome.

Kata-kata Terakhir dan Pertimbangan Keamanan

Ada beberapa hal yang tidak saya diskusikan di atas, dan saya ingin meluangkan waktu sejenak untuk mengklarifikasi beberapa poin.

Yang cerdik di antara Anda akan menunjukkan bahwa ada beberapa masalah keamanan yang mencolok dengan pengaturan ini, yaitu bahwa tidak ada header HTTP yang aman seperti:

• Content-Security-Policy : memuat skrip dan aset dari daftar host yang diizinkan, dan dapat melarang js sebaris.
• X-Frame-Options : menonaktifkan situs web Anda agar tidak dimuat di iframe.

Dan Anda benar. Halaman GitHub dan bahkan Cloudflare tidak memungkinkan Anda untuk menyesuaikan header HTTP Anda . Namun, Anda dapat menyetel CSP menggunakan tag meta HTML.

Cukup masukkan ini ke halaman web Anda:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

Namun, saat ini, tidak ada cara praktis untuk menyetel header X-Frame-Options pada halaman GitHub, yang berarti penyerang dapat memuat halaman web Anda ke dalam iframe yang dibuat khusus dan melakukan serangan XSS. Namun, jika Anda berdedikasi, Anda dapat mengatasi masalah ini dengan meminta pengguna untuk mengonfirmasi kata sandi atau token 2FA mereka pada setiap tindakan sensitif, atau dengan memberikan token CSRF pada setiap permintaan yang diautentikasi.

Perhatian utama bagi sebagian orang adalah bahwa dengan menggunakan repositori publik gratis di GitHub, situs web dan kode sumber Anda tersedia bagi siapa saja yang ingin melakukan fork atau mengunduhnya. Jadi saya pikir kekhawatiran di sini salah tempat.

Konten statis bukanlah kode sumber dalam arti tidak dikompilasi atau diproses sebagai skrip sebelum disajikan kepada pengguna. Pengguna Anda akan mendapatkan salinan statis situs web yang sama persis jika mereka menjalankan perayap web yang diarahkan ke situs web Anda. Meskipun menghosting kode di repositori GitHub tentu saja memudahkan untuk mengunduh salinan situs web Anda, itu tidak mengekspos apa pun yang belum dipublikasikan.

Penskalaan, Penskalaan Tidak Terbatas

Ide-ide yang disajikan dalam artikel ini tidak terbatas pada web hosting gratis untuk aplikasi kecil.

Anda dapat membangun lapisan front-end berdasarkan kerangka kerja JavaScript modern, menghubungkannya ke Backend-as-a-Service (BaaS) berbasis cloud skala besar, seperti Firebase, dan membuat aplikasi kompleks tanpa mengkhawatirkan server, waktu aktif, atau masalah terkait infrastruktur lainnya.

Membuat game berbasis web baru yang menarik?! Lihat GameSparks, dan Anda siap melakukannya.

Ringkasan, Pengakuan, dan Tautan

Dalam artikel ini, saya membuatnya tampak seolah-olah saya memublikasikan aplikasi React saya secara manual ke gh-pages . Saya tidak melakukan hal seperti itu. Saya mengerjakan master dan ketika tiba saatnya untuk menyebarkan, saya menjalankan npm run deploy yang memulai skrip build dan mendorong build ke gh-pages . Silakan lihat cabang master repositori saya untuk melihat cara kerjanya.

Bawa pulang

Kelebihan:

• Penyebaran instan
• Kolaborasi mudah
• Lingkungan hosting yang aman

Peringatan:

• Tidak ada akses ke header HTTP
• Mudah untuk mengunduh salinan situs web
• Pengetahuan GitHub diperlukan
• Tergantung pada vendor teknologi

Tautan:

• Anda akan menemukan kode sumber untuk aplikasi saya di amingilani/price-check
• Aplikasi ini aktif di pricecheck.gilani.me dan harus tersedia tanpa batas waktu.