Bagaimana membuat website dengan teknologi modern menggunakan cuteblog svelte sapper

Dan saat nya kini membuat blog dengan modern technology kaka........ ya menggunakan svelte dong, tapi kali ini project nya kita gak makai svelte kit tapi kita ganti ama sapper aja deh, ya karna kan legend gitu walau rumor nya dia akan digantikan dengan svelte kit, tapi sama aja lah pokoknya bisa buat web ama blog ye kan.. dan kali ini pun kita mau bagiin source code gratis buat kamu, tentunya masih di seputar cuteblog project, yang sudah di build dengan beberapa generasi web baru yes.. dengan desain unik menarik dan cutes tentunya untuk kamu gunain ngeblog, tambahan lagi auto seo nya menyempurnakan mu lah untuk fokus ke konten doang.



Terus apa yang menarik dari sourcecode gratis project ini adalah cara menulis artikel nya sedikit berbeda dengan beberapa project sebelum nya, jika kebanyakan menggunakan gaya markdown maka disini kalian akan banyak menggunakan gaya html tapi bisa langsung tulis artikle juga kok, jadi gak usah kawatir deh, dan hampir sama dengan cuteblog untuk react sebelumnya yes.. makai json gitu lah...
dari pada penasaran yuk cek aja display tampilan nya kaka....



Nah di halaman home page nya ini nanti semua artikel kamu akan di tampilin disini, makin cute kan ya.. desain nya menarik pokoknya top deh untuk kamu gunain dan gratis lagi... kurang apa coba... oke dilanjut pada list blog post ini pun dibungkus dengan desain cute banget, cover image nambahin keren nya buat web mu, dan dukungan emoji wow makin top pokoknya deh.



Setelah itu pada halaman konten artikel nya akan ditampilin detail dari informasi mengenai blog kamu, so disini pun masih sama dengan menggunakan cover image yang menjadi pemanis dan penyampaian ilustrasi mengenai blog artikel mu, dukungan judul, deskripsi ini pun nanti nya secara otomatis diambil dengan generate injeksi script auto SEO yang sudah kami masukan ke blog kamu, jadi ngemudahin mu untuk tetap tenang dan fokus pada konten mu saja yes.. teruss...



Dengan bootstrap framework menjadikan nya lebih mudah untuk diakses dari berbagai perangkat artinya akan menyesuaikan otomatis dengan perangkat yang digunain baik via hp maupun desktop semua menjadi menarik pokoknya, yuk cus ah di download ada source code gratis nya untuk kebutuhan mu bagaimana membuat website dengan teknologi modern menggunakan cuteblog svelte sapper.
Download sekarang di repo github kami dan mulai menggunakan cuteblog for sapper js
Dan sekarang kita akan masuk ke bagaimana caranya melakukan installasi ke perangkat kamu atau installasi online langsung, oke untuk awal kita bisa menggunakan cara termudah dulu yaitu dengan fork repo ini ke github repo mu, caranya daftar ke github dan heroku, terus lanjutin deh klik alamat link repo project kita di https://github.com/mesinkasir/cuteblog-sapper - lalu cek pada sisi bagian kanan atas nantinya ada pilihan fork , nah lanjutin deh di klik fork langsung , nantinya repo kita akan ada direpo mu yes.. jadi sebuah repo baru untuk mu, terus hajar lagi kita daftar ke heroku, gunain akun github untuk regritasi supaya gampang integrasi ke repo mu, kalau uda kamu buat project baru di heroku, dan integerasikan dengan cuteblog repo, lanjutkan dengan deploy dan jadi sudah situs kamu sudah bisa diakses.. terus untuk edit mengedit kalian bisa kembali ke repo github dan masuk pada cuteblog-sapper/src/routes/blog/_posts.js edit file post.js langsung di github dan kalian sudah bisa melakukan editing maupun buat post baru dengan ngikutin konsep di artikel contoh nya, setelah itu simpan, dan otomatis nanti web kalian yang di deploy di heroku akan melakukan update sesuai dengan perubahan yang kamu lakuin. se simple itu kan... mantab gak....

Dan lanjutin deh ya untuk pengertian mengenai artikel json nya itu seperti dibawah ini

Nah terus gimana nih uda mulai lagi ya.. ready... installasi offline nya kaka...
untuk awal ada beberapa kebutuhan dalam proses installasi di perangkat mu, jadi kita butuh node untuk bekerja, sok atuh.. download node →
Setelah itu kita butuh kode editor, so kamu bisa gunain visual code studio download →
nah setelah itu lakuin installasi dulu gaes... kalau uda kita cek dulu apa sih nona node berhasil kita install cara nya tekan icon windows di keyboard lalu ketik aja cmd, nah akhirnya muncul tuh yang namanya command prompt keren nya disebut dengan terminal, inget inget cara nampilin ini ya karna nanti kita banyak kerja menggunain nya, oke dilanjuttt..... sekarang masukan perintah node -v dan tekan enter perintah ini untuk cek node versi berapa yang sudah kamu install di perangkat mu. kalau uda sekarang kita bisa membuat folder baru di desktop namain dengan cuteblog, lalu buka folder download dan copy paste ke folder baru cuteblog.
Kalau uda kini kita saatnya melakukan installasi, tapi sebelumnya kita membutuhkan akses ke folder project mu ini dengan menggunakan terminal lagi jadi jalankan perintah berikut ini cd C:\Users\creativebydre\pcname\cuteblog ganti pc name dengan nama computer kamu, gimana cara tau nama computer kita?? kamu buka folder sembarang aja dulu lalu cek di sisi kiri folder ada kan yang namanya this PC - lanjutin klik kanan dan pilih properties nah disitu akan muncul nama pc kamu.
oke setelah kita uda masuk ke folder kerja sekarang kita buka dulu dengan visual code yang sudah kamu download sebelum nya, caranya masih menggunakan terminal dan masukan perintah code . nanti secara ajaib visual code akan nampil tuh,, keren gak,, wkwkwkw.....
Nah kamu bisa cek seluruh source code akan ada di visual code studio ini , tentunya ini untuk ngemudahin mu melakukan editing kode ya...
dan kembali ke terminal kamu tadi, sekarang kita akan menjalankan installasi nya dengan cara masukan perintah npm install.
tunggu sampai installasi selesai ya.. kalau uda sekarang kamu bisa menjalankan dengan masukin lagi perintah npm run dev dan buka di web browser kamu via chrome maupun firefox atau lain nya dan akses ke localhost:3000.
sim salabim... cuteblog sudah berhasil kamu install... selamat yes...
nah tugas mu sekarang cukup mudah aja masuk ke visual code studio mu, dan cari folder src/router/blog dan edit _posts.js nah ubah deh sesuai kebutuhan mu disini.untuk SEO nya jangan kawatir ya karna sudah kita set otomatis ngikutin judul dan deskripsi dari postingan blog mu.
dilanjutin dong... sekarang kalau uda selesai dan mau upload ke hosting supaya website bisa online kamu bisa menggunakan github untuk memudahkan mu dengan push ke repo kamu, dan integrasikan dengan heroku atau vercel / netlify.
kalau mau upload ke hosting static lain seperti surge dan firebase maka kamu perlu tingkatkan ke build production dulu, caranya jalankan perintah npx sapper export nanti kamu bisa lihat di folder _sapper_ itu ada export folder ya, nah kita bisa upload file disini, untuk cara jalan ninja tercepat saran sih kamu bisa daftar ke surge , tapi sebelum itu kita perlu akses folder export ini , buka terminal mu dan masukin kode cd C:\Users\creativebydre\pcname\cuteblog\_sapper_\exportlalu lakukan installasi surge via terminal dengan menjalankan perintah npm install -g surge ini untuk melakukan installasi surge, selanjutnya kamu bisa push project ini dan online kan cuteblog kamu dengan cara menjalankan perintah surge lalu lakukan regritasi dan pilih nama web kamu, boom.... selamat situs kamu sudah online sekarang kaka......
Nah semoga Built new modern website with cuteblog sapper ini ngebantu kamu selaku developer maupun pengguna untuk membuat situs modern dengan konsep single page app dan dukungan SEO nya. tentunya gratis 100% free download yes...
Cuteblog for other technology
Cuteblog for Pico CMS →
Cuteblog for Astro →
Cuteblog for Eleventy 11ty →
Cuteblog for React →
Cuteblog for Jekyll →
Cuteblog for Phyton Flask →
Cuteblog for Django Phyton CMS →
Cuteblog for Sapper Svelte →
Cuteblog for Gatsby JS →
Cuteblog for Angular →
Cuteblog for PHP →

---

BONUS CONTENT YOU NEED TO KNOW :
New Point of sale mesin kasir →
All sourcecode project →