24 May 2022
Membuat web dengan solid js how to build web blog solid netlify
How to build modern website with solid js
Nah pada project kali ini kita akan ngebahas bagaimana membangun sebuah modern website dengan menggunakan solid js, tentunya sudah termasuk dengan router nya agar mendukung penuh single page app untuk kamu gunakan, dan dengan kode sumber terbuka penuh maka kamu pun bisa merubah sesuai kebutuhan kamu untuk pengembangan nya,dan tentunya solid js akan membantu mu secara penuh membuat web lebih mempesona, sesuai ama slogan mereka Reaktivitas sederhana dan berkinerja tinggi untuk membangun antarmuka pengguna. Secara konsisten melampaui kecepatan UI yang diakui dan tolok ukur pemanfaatan memori. API yang masuk akal dan disesuaikan membuat pengembangan menjadi menyenangkan dan sederhana. Ergonomi dan keakraban membuat membangun hal-hal sederhana atau kompleks menjadi mudah.Solid berada pada para raksasa JS library modern khususnya React dan Knockout. Jika Anda pernah mengembangkan dengan React Hooks sebelumnya, Solid akan terlihat sangat alami. Bahkan, lebih alami karena model Solid jauh lebih sederhana tanpa aturan Hook. Setiap Komponen dieksekusi satu kali dan Hooks dan bindinglah yang dieksekusi berkali-kali seiring pembaruan dependensinya. Solid mengikuti filosofi yang sama dengan React dengan aliran data searah, pemisahan baca/tulis, dan antarmuka yang tidak dapat diubah. Namun ia memiliki implementasi yang sama sekali berbeda yang tidak menggunakan Virtual DOM. Ini membuka kontrol penuh atas apa yang diperbarui dan kapan, bahkan pada tingkat pengikatan DOM. Tanpa DOM Virtual atau pembedaan ekstensif, kerangka kerja tidak akan pernah bekerja lebih dari yang Anda inginkan.
Dan kalau kamu tertarik mencoba nya maka kamu bisa langsung melakukan installasi nya, pastikan sudah memiliki node js pada device perangkat mu, setelah itu buka terminal dan jalankan perintah berikut ini
npx degit solidjs/templates/js my-app
setelah itu nantinya solid akan membuat kan sebuah folder project baru dengan nama my-app atau kamu bisa ubah sesuaikan dengan kebutuhan kamu disini, dan untuk melakukan installasi maka kamu bisa menjalankan
npm install
selanjutnya untuk menjalankan dan akses via local kamu bisa open terminal dan run npm start
buka localhost:3000 dari web browser kamu , dan web modern dengan solid sudah siap untuk kamu gunakan.Pelajari bagaimana struktur dari solid js ini dalam membantu mu mengembangakan sebuah situs.
Dan kini makin mudah untuk mu mempelajari nya, karna kami juga sudah menyediakan sebuah source code yang bisa kamu free download untuk mengembangkan dan membuat website secara gratis menggunakan kode sumber terbuka ini , tentunya kamu bisa mengunduh nya di repo github kami, dan ini adalah starter project dari astronot css yang bisa kamu cek di https://astronot.axcora.com sebuah css modern untuk membuat situs website dan blog mu menjadi semakin unik menarik tentunya dengan gaya kekinian nya.yuk download sekarang juga gratis !!
Github Download
Atau kamu bisa clone menggunakan terminal dengan menjalankan
git clone https://github.com/mesinkasir/solid-astronot.git
Dan jangan lupa jika bermanfaat dan membantu kamu bisa berkontribusi dengan melakukan donasi agar team dev kami dapat memberikan source code gratis untuk kamu. lakukan donasi sukarela pada rekening kami berikut :
BCA Bank : 0181884109- Atas nama Suci Chanifah.
Donasi Sekarang
Baiklah setelah melakukan download source code nya kamu perlu melakukan installasi node karna kita akan bekerja dengan node jadi download node js →
Setelah itu lakukan installasi ke perangkat kamu , dan kamu bisa cek apakah node serta npm sudah sukses kamu instal dengan menjalankan perintah berikut ini via terminal shell bash, cara nya klik icon windows dan ketikan cmd, dan yap.. command prompt yang tampil adalah terminal shell pastikan kamu mengingat bagaimana cara memulai nya karna kita akan banyak bekerja menggunakan nya.
Baik lah sekarang masuk ke desktop pc mu buat lah folder baru namai dengan project situs mu atau buat saja astronot, lalu copy dan paste semua dari file yang sudah kamu download tadi ke folder project kerja kamu, kita perlu mengakses nya menggunakan terminal maka buka shell bash terminal dan jalankan
cd C:\Users\namapcmu\Desktop\astronot
kini kamu bisa melakukan installasi menggunakan node dengan menggunakan terminal shell bash command prompt dan jalankan perintah ini npm install
setelah installasi sukses maka kamu bisa menjalankan source code project ini dengan perintah npm start
dan buka localhost:3000 dan selamat kini web modern single page app sudah siap untuk kamu gunakan mengemabangkan dan membuat website secara gratis !!dan yap tampilan diatas adalah display dari project ini , menggunakan astronot css plus solid js menjadikan situs mu lebih atraktif dan menarik tentunya ini gratis 100% untuk kamu kembangkan dalam kebutuhan pembuatan website gratis mu.
Oke sekarang mari kita pelajari bagaimana struktur nya untuk bekerja, untuk awal kamu bisa buka source code project ini atau buka folder kerja web solid js ini lalu kita bisa lihat disana ada struktur folder yang perlu kamu ubah untuk konfigurasi hanya pada index.html , src/content.tsx files saja. kita mulai dengan index.html file disini kamu bisa ubah title dan deskripsi nya sesuaikan dengan website title dan deskripsi mu, dan simpan setelah melakukan perubahan, dan untuk content article nya kamu bisa melakukan perubahan pada src/content.tsx yap tentunya kamu membutuhkan code editor untuk melakukan perubahan agar memudahkan mu dalam bekerja , maka kamu bisa donwload code editor berikut ini
visualcode download → atau gunakan notepad ++ untuk code editor yang lebih ringan download notepad ++ →.
setelah download kode editor lakukan installasi dan untuk membuka file folder kamu bisa menggunakan terminal arah kan pada source code file atau jalankan menggunakan terminal
cd C:\Users\namapcmu\Desktop\astronot
lalu kita bisa membuka visual code dengan code .
dan simsalabim maka visual code studio akan menampilkan seluruh isi folder kamu, khusus pengguna notepad ++ kamu bisa klik kanan pada salah satu file dan pilih open with notepad ++.Nah setelah itu selamat bekerja mengganti semuanya sesuaikan dengan kebutuhan kamu ya...
Dan setelah kamu selesai melakukan perubahan update website dan kamu ingin melakukan upload ke hosting agar website kamu bisa online maka langkah awal kamu bisa lakukan dengan membuat account pada hosting static. apakah berbayar ngab ?? tenang kamu bisa menggunakan gratisan aja dulu, salah satunya ada surge , jadi kamu bisa melakukan upload ke surge caranya cukup mudah kita perlu menaikan dahulu dari mode development ke production , nah caranya cukup jalankan perintah
npm run build
nanti kamu akan lihat pada project mu ada folder baru namanya dist, nah ini folder yang akan kita gunakan untuk push atawa upload ke hosting static, untuk surge kamu bisa langsung aja mendaftar via terminal dengan menjalankan npm install --global surge
untuk melakukan installasi surge ke perangkatmu agar nantinya kamu bisa mudah aja untuk push semua project kamu, lalu kamu bisa lanjutkan dengan menjalankan surge
dan isi deh sesuai dengan ID kamu disini ya dan pilih nama domain surge kamu, dan setelah itu enter aja deh nantinya kalau sukses maka kamu bisa mengunjungi situs surge kamu yang sudah kamu pilih pada saat push ke hosting, keren kan....
Atau kamu bisa menggunakan firebase cuma untuk firebase kamu perlu mempelajari dan melakukan installasi nya kamu bisa cek dokumentasi bagaimana deploy ke firebase hosting disini →
dan selamat deh kamu sudah sukses membuat website dan situs menggunakan solid js astronot starter ini.
JALAN NINJA
Eits.... tunggu dulu broo... petunjuk diatas adalah installasi local dan bagaimana proses untuk upload ke static hosting agar kamu memahami bagaimana cara kerja nya, ya itung itung sebagai pengalaman dan pengetahuan lah yes kan... biar ribet ribet gimane gitu,, wkwkwk...........
oke kita ada jalan ninjanya kok cara cepet lah istilah nya agar langsung online gitu maksud nya, jadi proses ini dilakukan installasi online langsung, gimana cara nya ?? untuk awal kamu perlu register ke github setelah itu kamu bisa juga langsung register ke static hosting dan lakukan regristasi dengan menggunakan akun github mu aja ya biar mudah integrasikan repo nya nanti. untuk pilihan static hosting kamu bisa ke netlify misalnya. lakukan register dan gunakan github akun mu loh ya...
oke setelah register sukses kini kita bisa langsung aja akses ke repo project ini https://github.com/mesinkasir/solid-astronot dan kamu lihat bagian pojok kanan ada fork menu ya, atau biar cepet kamu klik aja deh tombol fork nya Fork
Nah setelah fork otomatis ini repo langsung ada di repo kamu yess... jadi kamu bisa langsung edit kode nya disini , live codding kaka... keren kan... tapi untuk itu kita musti integrasikan dulu dengan static host agar situs kamu bisa online kan.. oke sok atuh masuk ke akun netlify kamu atau akses app disini →
Nah setelah login app netlify kamu akan lihat dashboard kamu kan, langsung aja klik menu site, dan nanti akan ada gambar seperti diatas, dan pilih import from git , nantinya ada setting permision dari github dan kamu setujui atau oke kan atau iyakan aja yes....
Setelah itu kamu bisa pilih github repo, karna pada petunjuk ini kita gunain github agar lebih mudah yes.. jadi pilih github, nanti kamu pilih import from repo kamu, dan pilih deh repo kamu dan klik deploy , tunggu beberapa saat dan selamat kini website modern dengan solid js mu sudah online kaka...
dan yap.. semoga dengan source code ini kamu bisa mempelajari struktur dari solid js tentunya Membuat web dengan solid js how to build web blog solid netlify semakin mudah.
BONUS CONTENT YOU NEED TO KNOW :
New Point of sale mesin kasir →
All sourcecode project →