Cara Membuat Website

Pada artikel ini kamu akan belajar step by step dari nol cara membuat website.

Setidaknya ada 5 Step besar yang harus kamu lalui sampai dengan website kamu dapat online.

1. Pilih Platform Situs Web Kamu

Untuk membangun sebuah website, pertama-tama kamu harus memutuskan platform apa yang akan kamu gunakan untuk membangun situs web kamu.

Apa yang saya maksud dengan “platform”?

Nah, Dahulu untuk membuat sebuah website kamu harus mengerti bahasa coding seperti HTML (kode), CSS, dan PHP. 

Masing-masing membutuhkan banyak waktu untuk kamu pelajari dan cukup sulit untuk kamu kuasai dalam waktu yang singkat..

Hal tersebut lah yang menjadi alasan utama berfikir bahwa untuk membuat sebuah website dari awal harus mengerti coding dan desain.

Namun kamu tidak perlu khawatir.

Karena saat ini sudah ada cms seperti wordpress yang bisa membantu kamu dalam membuat sebuah website meskipun kamu gaptek.

Apa itu CMS?

Sederhananya, CMS (Content management System) adalah sebuah platform yang memudahkan kamu untuk membuat website dan mengelola konten online kamu sendiri.

Tidak perlu membuat situs web dari awal menggunakan HTML, PHP, dan bahasa pengkodean lainnya.

Platform Pembuatan Situs Populer di tahun 2021

Mengapa menggunakan WordPress dan bukan pembuat situs web?

Berdasarkan halaman https://www.dearblogger.org/blogger-or-wordpress-better menjelaskan bahwa platform wordpress memilki pengguna terbesar di dunia

Selain itu wordpress.org memiliki banyak kelebihan untuk para pemula untuk membuat website:

  • 1. GRATIS –  Hanya membutuhkan host web dan nama domain.

Software ini gratis karena Kamu harus mengatur semuanya sendiri sampai website tersebut running. (gunakan artikel ini sebagai panduan Kamu ya)

  • 2. Desain Full customize

Ada puluhan ribu tema gratis dan berbayar untuk membantu menciptakan tampilan persis yang kamu inginkan.

  • 3. Powerful platform

Ada lebih dari 42.000 plugin gratis di direktori WordPress resmi saja.

Menambahkan plugins sangat direkomendasikan karena dapat membantu meningkatkan fungsionalitas dari website kamu.

  • 4. Aman

Tim dibalik WordPress selalu memperbarui software mereka dan menjaga semuanya aman dari bug dan serangan para hacker.

  • 5. Memungkinkan menghasilkan uang

Kamu dapat menempatkan iklan di blog dan bereksperimen dengan strategi monetisasi apa pun.

  • 6. Situs yang “responsif”. 

Artinya itu akan berfungsi di smartphone & tablet juga

Situs web yang kamu buat akan langsung responsif, tampak baik pada setiap perangkat seluler, smartphone, dan tablet. Tidak perlu menyewa web developer untuk itu.

  • 7. Bantuan tersedia di komunitas

Dengan begitu banyak orang yang menggunakan platform (webmaster, pemilik usaha kecil, blogger), mudah untuk menemukan bantuan cepat saat kamu membutuhkannya. 

Kamu bisa mendapatkan bantuan dari sini secara gratis atau kamu dapat menyewa ribuan pengembang WordPress yang sangat banyak.

Apakah ada alternatif yang bagus selain WordPress?

Ada beberapa.

Tapi, saya masih tetap akan menggunakan dan merekomendasikan WordPress.

  1. Wix adalah pembuat situs web yang mudah digunakan dengan interface drag and drop yang memudahkan kamu untuk membuat website sesuai keinginan kamu dengan mudah. Namun wix memiliki biaya yang lebih tinggi, tidak cocok untuk situs yang lebih besar dan tidak mungkin untuk memigrasikan situs web kamu jika diperlukan.
  2. Squarespace adalah website builder yang sangat estetika. Untuk membuat website yang indah dan keren menjadi mudah, tetapi biaya bulanannya lebih tinggi dan tidak memiliki fungsi untuk memigrasikan website kamu.
  3. Drupal adalah platform kuat yang populer di kalangan pembuat kode dan pengembang web berpengalaman, tetapi memiliki tingkat kesulitan yang cukup tinggi yang menjadikannya bukan pilihan terbaik untuk pemula.
  4. Joomla hampir mirip dengan WordPress dan merupakan alat yang bagus untuk membuat website, tetapi ini membutuhkan setidaknya beberapa pemahaman dasar tentang coding untuk membuat segala sesuatunya bekerja seperti yang kamu inginkan.

2. Membeli Domain dan Hosting

Part selanjutnya adalah membeli domain dan juga hosting.

Mungkin kamu masih asing dengan banyak istilah teknis seperti domain dan hosting.

Secara simplenya domain itu adalah nama website kamu.

Apabila kita anologikan rumah maka domain adalah alamat rumah kamu.

Domain sendiri memiliki banyak ekstensi.

  1. .NET
  2. .ORG
  3. .COM

Dan banyak lainya. Namun Kamu pasti paling lumrah dan menemui web dengan ekstension .com ya kan?

Apabila domain tadi adalah rumah maka untuk pengertian hosting adalah bagian ruangan dalam rumah Kamu untuk menyimpan berbagai barang dan furnitur didalamnya.

Penyedia layanan hosting dan domain

Untuk memilih layanan tersebut Kamu pastinya ingin yang recommended kan?

Karena pasti saat ada masalah seperti down mendadak atau tidak bisa diakses Kamu bisa dapat support yang cepat dan tepat.

Ada beberapa layanan domain dan hosting internasional atau Lokal yang sudah saya gunakan:

  1. Domain dan hosting Internasional: Namecheap, Bluehost dan hostgator.
  2. Domain dan hosting Lokal: Niagahoster, domainesia, Draccola, dan lainya

Kali ini saya akan membahas menggunakan hosting lokal domainesia. Saya sudah menggunakan domainesia untuk salah satu website saya.

Apa itu domain?

Nama domain website kamu merupakan hal yang tidak kalah penting.

Beberapa hal yang perlu Kamu perhatikan dalam memilih:

  1. Nama sesuaikan dengan topik website Kamu.
  2. Mudah ditulis, diingat dan diucapkan.
  3. Rekomendasi ekstensi yang Kamu gunakan .com
  4. Jangan gunakan simbol seperti strip, angka, % dan lainya.
  5. Jangan gunakan merk terkenal ataupun blog populer. Karena nantinya Kamu dituduh plagiat dan dapat mungkin ke ranah hukum.
  6. Cek ketersedian nama website dan sosial media yang masih available di situs  https://www.namecheckr.com/

Bagaimana membeli domain dan hosting?

Pada tutorial ini saya menggunakan provider domainesia.com untuk membeli domain dan juga hosting.

1. Buka website domainesia.com

  1. Ketik pada url nama domain yang kamu inginkan.
  2. Apabila domain yang kamu mau tersedia, maka akan ada signal hijau.
  3. Lalu klik pesan paket hemat.
Cara Membuat Website

2. Isi Detail Pembelian Paket Hosting

  • Pilih paket hosting kamu. Saya menggunakan paket Super (2GB).
  • Pada lokasi server kamu bisa memilih antara Singapore da Jakarta. Pada contoh ini saya memilih singapore.
  • Selanjutnya tentukan siklus pembayaran hosting kamu. Jika memilih 1 tahun, maka kamu akan mendapatkan gratis registrasi domain selama 1 tahun.
  • Pastikan bahwa nama domain yang kamu tulis sudah benar. Jangan sampai salah, karena apabila salah domain tersebut tidak bisa ditukar atau kamu refund.
  • Ceklis Addons: DNS Zone Manager (Gratis)
  • Masukkan alamat email kamu untuk pembuatan account DomaiNesia.
  • Terakhir, klik tombol “Masukkan ke Troli”
Cara Membuat Website
  • Nah berikutnya kamu akan mendapatkan summary order kamu.
    Cek sekali lagi order kamu.
  • Apabila sudah, kamu bisa sign in atau sign up
  • Saya asumsikan kamu sign up karena belum memiliki akun di domainesia.com
Cara Membuat Website
  • Isi data nama depan, belakang, kategori webiste kamu.
  • Untuk nama perusahaan kamu bisa isi dengan nama domain kamu.
  • Isi juga alamat email yang aktif dan set password kamu.
  • Lalu Klik lanjut.
Cara Membuat Website
  • After klik lanjut, kamu akan mendapat tambahan form yang harus kamu isi.
  • Ada alamat lengkap, nomor telepon dan konfirmasi menyetujui term of service.
  • Setelah itu klik selesaikan dan bayar.
Cara Membuat Website
Cara Membuat Website
  • Selanjutnya kamu bayar deh….. sesuai dengan pembayaran yang kamu inginkan.
  • Banyak sekali metode pembayaran yang kamu pilih, jadi sangat mudah dan tidak merepotkan.
Cara Membuat Website

3. Instalasi wordpress

Untuk instalasi wordpress ada opsi yang bisa kamu lakukan yaitu:

  • Menggunakan fitur instalasi otomatis
  • Menggunakan softaculous pada cpanel

Saya akan mencontohkan cara kedua yaitu menggunakan softaculous.

  • Login pada akun domainesia kamu
  • Klik service
  • Kemudian klik website atau domain kamu
Cara Membuat Website

  • Selanjutnya pergi ke access >> login to cpanel
  • Pilih “softaculous apps installer”
Cara Membuat Website
  • Selanjutnya klik “install”
  • Settings sesuai gambar dibawah ini.
  • kosongkan bagian “in directory”.
  • Apabila kamu ingin mengubah ke bahasa indonesia bisa pilih “select anguage”.
  • lalu klik install.
Cara Membuat Website
  • Tunggu beberapa saat hingga wordpress terinstall pada hosting kamu.
  • Apabila berhasil maka kamu akan mendapatkan notifikasi sudah berhasil dan url login, seperti dibawah ini.

4. Setting Dasar Website WordPress

Pada step ini website kamu sudah berhasil ter-instalasi wordpress dan saatnya untuk melakukan setting awal website kamu.

Install SSL menggunakan let’s encrypted

Apakah kamu pernah melihat logo gembok seperti ini?

Cara Membuat Website

Website tersebut menggunakan SSL untuk mengamankan websitenya.

Apabila website tidak menggunakan ssl maka akan muncul warning ketika kamu membuka website tersebut.

Jadi instalasi SSL hukumnya wajib kamu lakukan.

Lalu apa itu SSL?

“A secure sockets layer” (SSL) berarti data yang dikirim ke pengunjung situs web kamu tetap aman. 

SSL adalah faktor peringkat pencarian yang penting, dan penting untuk memastikan pengalaman pengguna yang positif dengan memprioritaskan privasi dan keamanan pengguna.

Lalu bagaimana instalasinya?

1. Buka akun domainesia kamu atau buka cpanel kamu.

2. Klik services >> Klik akun website / hosting kamu

Cara Membuat Website

3. Klik menu access >> login Cpanel

4. Cari menu “Let’s encrypt” 

5. Setelah masuk menu “Let’s encrypt tampilanya kurang lebih akan seperti ini.

6. Lalu klik Run autossl.

7. Tunggu prosesnya, nanti setelah itu pada semua domain dan subdomain kamu sudah hijau, ada logo gembok dan ada tulisan “Autossl domain validated”

8. Sekarang cek website kamu. Seharusnya pada menu url sudah ada logo gembok dan sudah ter-encrypt.

Memilih theme wordpress

Tampilan saat pertama kali install pasti tidak sesuai dengan apa yang kamu mau.

Kamu bisa mengganti tema wordpress kesukaan kamu dengan cara

  • Pergi ke Appearance >> Themes.
  • Klik add new theme
  • Kamu akan mendapatkan tampilan seperti dibawah ini. Selanjutnya Klik Theme astra. Atau apabila belum ada kamu bisa klik search bar pada kotak kanan atas.
  • Setelah itu Klik install dan activate.
  • Apabila kamu sudah mendownload theme sebelumnya kamu bisa pergi ke menu “Upload theme”

Selain theme Astra kamu bisa mencoba theme lainya yang sudah seo friendly dan responsif seperti:

  • Generatepress
  • Kadence
  • Hello
  • Oceanwp
  • Dll

Setting permalink website

Ini penting agar tampilan url kamu seo friendly.

Selain seo friendly, url kamu juga mudah diingat serta tampak simple.

Misalnya kamu memiliki artikel dengan judul 7+ Rekomendasi tema wordpress yang bagus bagi blogger.

Apabila kamu tidak setting permalink ini maka url kamu akan menjadi.

bukasekarang.com/?p=1232

Nah, jadi susah untuk diidentifikasi kan?

Berbeda apabila kamu setting permalink menjadi post name.

Nantinya url post kamu menjadi “bukasekarang.com/rekomendasi-tema-wordpress-untuk-blogger”

Nah sekarang sudah paham kan?

  • Untuk merubahnya, kamu pergi ke setting >> permalink
  • Lalu pilih postname >> lalu save changes

Membuat page dan post

Page dan post adalah elemen dasar pada website kamu.

Pada suatu website pasti memiliki paling tidak 2 elemen ini.

Page kamu bisa gunakan untuk hal yang sifatnya tidak / jarang kamu update misalnya:

  • Halaman Home
  • Halaman Kontak
  • Halaman Tentang kami
  • Dll

Sedangkan post bisa kamu gunakan untuk membuat artikel ataupun blog post.

Bagaimana cara membuatnya?

Membuat Page:

  1. Kamu bisa pergi ke menu pages >> add new
  • Ketik halaman yang kamu buat, misalnya saya membuat home.
  • Lalu klik Publish.
  • Setelah itu kamu bisa ulangi langkah tersebut untuk membuat page lainya.
  • Pada artikel kali ini saya hanya membuat 3 page yaitu:
    • Home
    • Tentang Kami
    • Dan Blog

Membuat Post:

  • Pergi ke All Post >> add new
  • Pada contoh ini saya membuat judul “Cara membuat website”
  • Lalu pada kolom bawahnya kamu bisa isi dari tulisan atau artikel kamu.
  • Apabila sudah Klik Publish
  • Ulangi langkah tersebut untuk membuat sebuah post lainya.
Cara membuat website

Membuat menu

Agar tampilan header website kamu rapih, kamu bisa mengaturnya pada fitur menu.

  • Caranya pergi ke appearance >> menus
Cara membuat website
  • Lalu kamu bisa lihat ada box samping tulisan menu name?
  • Isi nama menus yang akan kamu buat.
  • Misalnya saya buat dengan nama “Menu Utama”.
  • Ceklis primary menu.
  • Lalu klik create menu.
Cara membuat website
  • Setelah itu akan muncul pada sidevar kiri page atau post yang ingin kamu gunakan sebagai primary menu.
  • Saya memilih semua page yaitu Home, Blog dan tentang kami.
  • Setelah teratur klik save changes
  • Sesudah itu maka tampilan menu akan muncul pada website kamu.
Cara membuat website

Customize website lainya

Agar tampilan website bisa sesuai dengan keiinginan kamu tentu terdapat fitur yang memudahkan kamu untuk melakukan customize.

Membuat page static atau mengubah page home menjadi homepage website kamu.

  • Pergi ke customize >> Homepage settings
  • Pilih “A static page”
  • Pada menu pilihan homepage pilih page “Home
  • Pada menu post page pilih page “Blog”
  • Lalu Klik publish.
  • Jadi nantinya ketika kamu ketik di url bukasekarang.com, maka yang akan tampil adalah page home.
  • Sedangkan pada menu blog, nanti akan muncul post yang sudah kamu publish.
  • Tampilanya akan seperti dibawah ini:

Edit title, tagline dan logo

  • Untuk melakukan edit title, tagline dan logo kamu bisa pergi ke homepage kamu.
  • Lalu kamu bisa lihat diatas ada tulisan customize?
  • Klik customize
  • Klik Site identity
  • Lalu pilih site title and logo settings
  • Klik “select logo apabila kamu memiliki logo”
  • Atur ukuran logo dengan menggunakan tools “Logo widht
  • Aktifkan toggle “Display site tagline” apabila kamu ingin membuat tagline
  • Lalu isi box dengan nama tagline kamu.
  • Pada contoh ini saya hanya menggunakan nama website saya dan juga tagline
  • Selanjutnya apabila kamu ingin mengganti warna pada font title website atau tagline, kamu bisa klik menu design.
  • Saya mengubah site title menjadi biru.
  • Kamu juga bisa custom ukuran font title dan juga tagline pada menu ini.
  • Apabila sudah selesai jangan lupa klik publish ya.

Mengganti atau menambah widget pada sidebar.

  • Untuk edit widget kamu bisa ke menu customize >> widgets >> Main sidebar
  • Dalam Case ini saya hanya ingin ada recent post dan search bar pada sidebar
  • pertama klik recent comments tab >> Klik titik tiga vertikal >> remove block
  • Kamu bisa ulangi langkah serupa pada widgets archives dan categories.
  • Setelah selesai jangan lupa klik publish ya

Nah tampilan website wordpress kamu sekarang seperti ini.

5. Mendesain Halaman Website

  • Buka plugins >> add new>> lalu ketik elementor pada search bar
  • Klik install dan activate

Mendesain halaman depan (Homepage)

Buka Pages >> klik edit.

Lalu Edit halaman depan kamu, dalam contoh ini saya memberikan judul halaman depan sebagai Home.

Kemudian, ikuti langkah-langkah pengaturan berikut untuk mempersiapkan halaman kamu sebelum meng-edit nya dengan plugin Elementor.

Pada bagian ini terdapat 4 pilihan yaitu:

  • Default template: Menampilkan template secara default
  • Elementor canvas: Menampilkan halaman atau page elementor saja.
  • Elementor Full width: Berbeda dengan elementor canvas, pada full width kamu masih menggunakan header dan footer dari tema yang kamu install pada website.
  • Theme: Menampilkan theme yang kamu install.

Lalu berikutnya Klik edit with elementor

Pada tutorial kali ini saya menggunakan settings full width

Edit Halaman Home Dengan Elementor

Nah inilah tampilan workspace dari elementor

Untuk mendesign sebuah halaman kamu memiliki 2 cara yaitu menggunakan widget atau menggunakan template free atau pro yang sudah disediakan oleh developer elementor.

Mendesain menggunakan widget

  • klik tombol plus ditengah halaman
  • Pilih struktur kolom yang kamu ingin gunakan, saya menggunakan 1 collom
  • Berikutnya klik 9 titik pada sidebar kiri tools elementor
  • Drag and drop heading
  • lalu ganti pada kolom title menjadi “cara membuat website”
  • Setelah itu klik style dan ganti text color menjadi hitam.
  • lalu klik ikon pensil pada typography.
  • ubah font menjadi poppins.
  • dan hasilnya seperti ini

Selanjutnya saya menambahkan widget Pada Elementor

Saat ini saya ingin menambahkan widget image dan button pada workspace elementor saya, caranya adalah:

  • klik “choose image”
  • upload foto atau insert media pada foto yang ingin kamu gunakan
  • hasilnya seperti ini
  • Selanjutnya drag n drop text editor dan berikutnya button
  • Saya buat setting default saja, apabila kamu ingin melakukan custom bisa otak atik pada:
    • Aligment: Posisi suatu objek yang kamu inginkan. Rata kiri, tengah atau kanan.
    • Text color: Mengubah warna text kamu.
    • Typhography: Mengubah Font tulisan.
  • Selanjutnya settings button. kamu bisa klik button untuk memulai custom.
  • saya mengganti text menjadi “Klik disini”, lalu rata tengah, size small.
  • dan setelah itu mengganti icon.

Setelah cukup custom yang kamu lakukan jangan lupa klik “update ya”

Saat ini tampilan home kamu akan seperti ini

Cara Membuat Website Menggunakan template

Untuk menggunakan template akan lebih mudah karena kamu hanya tinggal pilih tampilan yang mendekati yang kamu inginkan, lalu melakukan edit penyesuaian sesuai dengan keinginan kamu.

  • pertama klik icon “add template”
  • selanjutnya kamu akan mendapat tampilan library berbagai template.
  • pada contoh kali ini saya memilih template free study.
  • Klik template tersebut.
  • Klik template tersebut.
  • lalu insert.
  • Apabila kamu diminta login akun elementor, kamu bisa login dulu akun elementor kamu. Apabila belum ada akun, silahkan mendaftar terlebih dahulu. (gratis)
  • Jadi deh, sekarang tampilan homepage website kamu akan seperti ini:

Memodifikasi Template

  • Sekarang saatnya memodifikasi template sesuai keinginan kamu.
  • kamu bisa ikuti step by step pada tutorial diatas.
  • Dan kurang lebih hasilnya seperti ini. Sangat mudah kan?