[Easy] 22 cara membuat web statis dengan html terbaru lengkap

Artikel ini akan membahas tentang cara mengubah WordPress menjadi static HTML page. Namun, ada baiknya kita bahas dahulu apa itu static HTML.

Static website atau web statis adalah sebuah kumpulan item seperti teks, gambar, dan elemen multimedia lainnya yang terdiri dari konten marked-up yang dibuat dengan menggunakan Hyper Text Markup Language atau lebih dikenal dengan nama HTML yang disimpan di server website tersebut.

Saat seseorang mengunjungi website, browser akan meminta dan mengambil konten website dari server. Data yang mereka dapatkan dari server inilah yang nantinya disajikan di layar browser pengunjung.

Web statis dan web dinamis sebenarnya bekerja dengan cara yang sama. Tetapi, jika Anda menggunakan web statis, data website yang tersimpan di server disimpan di dalam satu halaman yang sama.

Sementara itu, jika Anda menggunakan web dinamis, data-data tersebut dipisah menjadi beberapa halaman, tergantung pengelompokkannya.

Baca Juga: 20 Plugin Social Media WordPress Terbaik

Keuntungan menggunakan static website

Ada beberapa keuntungan yang bisa Anda dapatkan dengan membuat website Anda menjadi sebuah web statis dibanding web dinamis;

· Waktu loading yang lebih cepat

Waktu loading yang akan Anda dapatkan jika Anda menggunakan halaman HTML statis bisa dibilang sangat cepat. Bahkan, kecepatan loading website Anda bisa menjadi di bawah satu detik.

Tema WordPress Anda mungkin membuat banyak permintaan ke database untuk menampilkan website Anda. Semua aktivitas tersebut membutuhkan waktu dan menyebabkan waktu loading yang lebih lambat. Plugin caching memang bisa membantu tetapi tidak sepenuhnya menghilangkan permintaan ke database atau kenyataan bahwa PHP harus dijalankan di server.

File HTML statis tidak membutuhkan semua waktu tersebut. Mereka langsung mendapatkan semua data yang diperlukan dari satu halaman yang sama.

· Meningkatkan waktu uptime website Anda

Bagi Anda pengguna WordPress, Anda mungkin pernah mengalami Error Establishing A Database Connection . Hal ini biasa terjadi ketika server mengalami error. Jika ini terjadi, website WordPress Anda juga akan ikut down.

Jika Anda menggunakan HTML statis, kemungkinan besar Anda tidak akan mengalami masalah ini. Web statis bisa dibilang lebih dapat diandalkan daripada web dinamis.

Sekarang, dengan solusi WordPress statis, situs sumber Anda masih akan menggunakan database, jadi Anda tidak dapat mengedit jika server database Anda down. Tapi, setidaknya situs Anda akan tetap bisa diakses.

· Mengurangi waktu loading server

Karena web statis Anda sangat mudah dirender dibandingkan dengan situs berbasis database, server Anda akan memiliki beban server jauh lebih rendah. Ini berarti Anda bisa menggunakan hosting murah dengan sedikit memori dan daya CPU tanpa mempengaruhi kerja server Anda.

· Keamanan yang lebih terjaga

Injeksi SQL atau SQL injection adalah salah satu ancaman keamanan yang paling berbahaya di luar sana. Website statis tidak terpengaruh dengan ancaman ini karena tidak ada database yang bisa dihack.

Selain itu, dengan menggunakan HTML statis, website Anda juga tidak memerlukan kode PHP yang harus dijalankan. Hal ini membantu memastikan bahwa tidak ada plugin yang bisa dihack.

Tentu saja, situs WordPress Anda masih memiliki beberapa keterbatasan karena masih membutuhkan database. Tapi, setidaknya Anda tidak akan mengungkapkan keterbatasan itu ke seluruh dunia, dan Anda dapat melakukan tindakan ekstra untuk menyembunyikan situs WordPress sumber Anda.

Untuk keamanan tertinggi, Anda dapat menginstal WordPress sumber Anda di komputer lokal Anda.

· Staging server gratis

Merender situs WordPress Anda dan hanya menampilkan file statis yang diberikan ke publik memberi Anda fitur bonus ini: staging server gratis!

Apa itu staging server?

Staging server adalah sebuah tipe server yang digunakan untuk mengetes sebuah software, website, atau layanan di lingkungan produksi yang serupa sebelum disajikan secara live. Ini adalah bagian dari proses staging dimana server ini menjadi hosting sementara dan juga server pengujian untuk software ataupun website baru.

Dengan kata lain, Anda bisa bermain dengan situs WordPress Anda tanpa mempengaruhi situs yang disajikan ke publik. Jika Anda menyembunyikan situs WordPress Anda, situs statis Anda akan tetap bekerja tanpa masalah. Publikasikan situs Anda hanya jika Anda merasa situs Anda sudah siap.

· Mudah untuk dipindahkan ke URL yang berbeda

Memindahkan WordPress dari satu URL ke URL lainnya tergolong rumit jika harus sering melakukannya. Mungkin situs Anda adalah untuk event-event tahunan yang memiliki tahun di URLnya. Plugin Simply Static memungkinkan Anda untuk mengirim situs Anda ke URL yang berbeda hanya dengan beberapa pengaturan dan beberapa klik saja.

Sebelum Anda memutuskan untuk mengubah situs WordPress Anda menjadi sebuah situs statis, ada beberapa hal yang perlu diperhatikan.

Ada beberapa fungsi dan fitur yang berasal dari server yang tidak dapat bekerja lagi. Berikut adalah sebagian daftar hal yang tidak akan bekerja pada file WordPress statis Anda:

• formulir komentar berbasis server
• formulir kontak berbasis server
• hampir semua plugin yang menggunakan form submit
• widget “popular posts”
• pencarian situs
• plugin sign up
• plugin e-commerce
• plugin membership
• dan banyak plugin lain yang membutuhkan fungsionalitas server dinamis

Tapi ada beberapa hal yang bisa Anda lakukan untuk mengatasinya. Beberapa fitur berbasis server yang tidak tersedia untuk situs statis dapat diganti dengan solusi client-side. Misalnya, Anda dapat menerapkan komentar menggunakan Disqus (atau layanan komentar client-side lainnya) daripada menggunakan sistem komentar WordPress asli.

Baca Juga: Cara Mencegah dan Mengatasi Serangan di WordPress

Jenis website yang cocok diubah menjadi situs statis

Lalu website apa saja yang cocok untuk diubah menjadi situs statis?

• Situs yang bersifat informasi
• Brosur perusahaan online
• Landing page atau halaman “Coming Soon”
• Blog (menggunakan komentar berbasis client-side)
• Situs yang perlu waktu loading lebih cepat
• Situs yang membutuhkan keamanan luar biasa, atau yang ditargetkan terutama oleh hacker (misalnya situs politik, situs selebriti, dsb.)

Bagaimana? Apakah Anda tertarik untuk mengubah situs Anda menjadi situs statis?

Jika ya, kami akan memandu Anda untuk melakukannya dengan menggunakan plugin WordPress, Simply Static.

Simply Static sendiri adalah sebuah plugin WordPress yang membantu Anda untuk membuat versi statis dari website WordPress Anda. Setiap halaman dan setiap postingan yang ada di website Anda akan ditransformasi menjadi sebuah dokumen HTML statis.

Baca Juga: Pilihan Plugin Image Editing CMS WordPress

Cara mengubah WordPress menjadi situs HTML statis dengan Simply Static

Berikut adalah langkah-langkah untuk mengubah situs Anda menjadi situs statis.

1. Copy Situs WordPress Live Anda

Pertama, Anda harus membuat salinan situs WordPress produksi Anda ke lokasi staging barunya. Ini bisa berupa offline di komputer lokal Anda, atau di cloud server web yang sama dengan situs Anda. Ada pro dan kontra untuk masing-masing.

Jika Anda menginstal WordPress Anda ke komputer lokal Anda, Anda dapat mengerjakannya tanpa koneksi internet. Instalasi WordPress Anda akan aman dari hacker. Tapi, Anda harus mengatur localhost (WAMP, MAMP, XAMPP, dll.).

Selain itu, salah satu hal yang harus Anda ingat adalah bahwa hal itu akan memakan sedikit usaha untuk mendorong file yang dirender ke server. Anda mungkin perlu menggunakan Filezilla untuk menyeret file secara manual.

Jika Anda memasang WordPress di server yang sama dengan situs live Anda, mendorong file yang dirender adalah urusan satu klik dengan menggunakan plugin Simply Static yang akan digunakan di tutorial ini. Plugin ini benar-benar membantu dan mempermudah prosesnya.

Salah satu plugin yang bisa Anda gunakan adalah plugin Duplicator untuk menyalin situs. Tapi, ada banyak plugin lain yang tersedia untuk menyalin situs WordPress

2. Menginstal Simply Static

Saat Anda menyiapkan staging situs WordPress Anda, instal plugin Simply Static. Plugin ini menjadikan seluruh situs WordPress Anda menjadi file HTML. Pada saat yang sama, ia menggantikan URL dasar di database WordPress dengan URL tujuan Anda.

Dari sini, jangan lupa untuk menempatkan staging situs WordPress Anda di subdirektori situs live Anda. Misalnya, Anda bisa meletakkan situs WordPress Anda di “/ wordpress”. Kita akan menyembunyikannya nanti.

3. Persiapkan Simply Static dan Lakukan Uji Situs

Buka Simply Static -> Settings di admin WordPress Anda.

Di bagian URL tujuan, pilih “Use absolute URL”. Perhatikan bahwa Anda harus memilih jalur URL absolut atau yang lain, meta tag akan menjadi relatif dan tidak akan benar.

Masukkan URL subdirektori dari situs utama Anda untuk saat ini, yaitu “http://yoursite.com/test”. Ingatlah untuk menghapus direktori ini setelah pengujian selesai.

Untuk Metode Pengiriman (Delivery Method), pilih “Local Directory”.

Di bidang Direktori Lokal, lengkapi jalur ke direktori lokal Anda.

Kemudian klik Simply Static -> Generate dan tekan tombol biru yang tersedia. Peluncurannya akan memakan waktu beberapa menit. Uji coba situs yang baru saja dihasilkan di “yoursite.com/test”.

4. Tambahkan halaman yang tertinggal

Anda juga perlu memeriksa apakah Anda memiliki beberapa halaman yang ada di situs WordPress namun tidak dalam versi statis. Hal itu bisa terjadi karena tidak ada link yang absolut ke halaman-halaman tersebut, jadi plugin Simply Static tidak dapat menemukannya. Simply Static tidak akan menemukan halaman yang dihubungkan oleh URL relatif.

Untungnya, mudah untuk menambahkan halaman ini secara manual dengan memasukkan URL ke dalam plugin Simply Static di Simply Static -> Settings -> Include / Exclude. Tambahkan URL halaman yang hilang ke tab “Additional URLs”.

Atau, Anda bisa kembali ke situs WordPress Anda dan mengubah link relatif ke link absolut. Pastikan untuk menggunakan URL situs staging WordPress Anda, bukan URL produksi.

Load ulang situs untuk melihat apakah halaman muncul, dan ulangi jika perlu.

5. Launch situs Anda

Saat semua halaman sudah dirender dengan benar oleh HTML statis, Anda bisa memindahkan data-data yang ada di situs WordPress lama Anda dari root ke temporary subdirectory (subdirektori sementara), kemudian coba dorong file staging WordPress Anda ke root directory situs Anda.

Pertama, ubah URL tujuan ke root situs Anda di pengaturan Simply Static.

Lalu pergi ke Simply Static -> Generate dan tekan tombol biru besar untuk meluncurkan situs Anda.

Baca Juga: Cara Install WordPress dengan LEMP Stack

Hal-hal yang perlu diperhatikan setelah launching website

Setelah situs Anda diluncurkan, ada beberapa hal yang sebaiknya Anda cek dan perbaiki

· Tambahkan Sitemap Anda

Salah satu plugin yang dapat Anda lakukan untuk menghasilkan Sitemap adalah plugin Yoast SEO. Sitemap digunakan oleh mesin pencari untuk membantu mereka melakukan crawling di situs Anda. Meskipun bukan sesuatu yang harus ada, sitemap direkomendasikan untuk membantu Anda mengoptimasi SEO website Anda.

Anda harus menambahkan URL halaman sitemap Anda ke bagian “Additional URLs” dari halaman pengaturan (settings) Simply Static. Berikut adalah beberapa contoh URL sitemap sebuah website.

http://yoursite.com/wordpress/sitemap_index.xml

http://yoursite.com/wordpress/page-sitemap.xml

Setelah Anda launch website Anda, jangan lupa untuk melihat apakah bahwa sitemap muncul di website akhir dan masukkan URL file sitemap Anda ke Google Webmaster Tools jika Anda belum melakukannya sebelumnya. Mereka harus sama seperti sebelum mereka statis.

· Set Up Your 404 Page

WordPress biasa akan menyajikan halaman “404 not found” saat pengguna mencoba mengakses halaman atau postingan yang tidak ada. Saat Anda membuat situs Anda menjadi HTML, Anda kehilangan fitur itu. Tapi, tidak sulit untuk mengaturnya kembali. Anda memerlukan akses FTP ke server. Inilah langkah-langkahnya untuk melakukannya:

1. Buat halaman 404 “tidak ditemukan” di WordPress. Catat slug yang ada.
2. Selanjutnya, Anda harus memberi tahu plugin Simply Static untuk merender halaman ini, karena tidak ada tautan ke dalamnya. Masuklah ke admin WordPress dan masuk ke Simply Static -> Settings -> Include / Exclude -> Additional URLs dan tambahkan staging URL dari halaman 404 Anda.
3. Buat kembali file statis Anda dan dorong mereka ke situs production Anda
4. FTP ke server Anda dan masuk ke root situs production Anda.
5. Tambahkan baris ini ke file .htaccess Anda: ErrorDocument 404/404-halaman-slug / dimana teks di antara garis miring adalah slug dari halaman 404 Anda.
6. Uji dengan mengetikkan URL yang tidak ada di situs yang baru saja Anda buat. Halaman 404 Anda harusnya muncul.

· Sembunyikan Situs WordPress Anda

Jika situs staging WordPress Anda berada dalam subdirektori di server live Anda, maka situs Anda akan tetap dapat dilihat karena itu Anda harus menyembunyikannya.

Hal pertama yang bisa Anda coba adalah memasang plugin “Under Construction” untuk menyembunyikan situs WordPress Anda.

Anda juga bisa melindungi instalasi staging dengan HTTP Simple Authentication. Anda dapat melakukan ini dengan Simply Static karena mereka dibangun untuk mendukung hak otentikasi sederhana (simple authentication) ke dalam plugin!

Menyiapkan otentikasi sederhana akan meminta Anda untuk FTP ke server Anda dan menyiapkan file .htpasswd di direktori root Anda.

Setelah disiapkan, masuk ke Simply Static -> Settings -> Advanced, dan masukkan username dan password Anda di bagian HTTP Basic Authentication.

Perhatikan bahwa jika Anda khawatir dengan keamanan Anda harus menyiapkan SSL untuk situs staging Anda juga.

Baca Juga: Belajar Membuat Template WordPress Sendiri dari Nol

· Hapus Direktori Uji

Akhirnya, hapus direktori uji dan direktori sementara atau file lain yang Anda buat.

Voila! Anda sekarang sudah memiliki situs statis yang berasal dari WordPress! Waktu loading website Anda sudah seharusnya menjadi lebih cepat.

Kapan pun Anda perlu memperbarui situs Anda, cukup perbarui situs WordPress Anda seperti biasanya. Saat Anda siap mempublikasikannya, cukup klik tombol “Generate Static File”.

Itulah penjelasan tentang cara mengubah WordPress ke static HTML. Satu hal yang tak boleh Anda lupa, selalu gunakan hosting yang berkualitas dari Dewaweb. Dengan hosting murah gratis domain, sewa VPS murah ditambah online backup yang berkualitas pula.

Selamat mencoba!

Top 22 cara membuat web statis dengan html menjelaskan Nha Xinh