20 Apr 2022
Tema blog website Terbaru dan gratis download markdown flatfile cms
Inilah solusi blog dengan tema template cute plus dukungan seo dan markdown pico flatfile cms cuteblog
Dan baiklah wan kawan dan man teman, kali ini kita mau bagiin nih sebuah project yang tentu nya yaitu cms content management system blogging platform dengan desain unik cute dan menarik serta manis manja grup dah pokoknya... π .trus apa yang menarik dan yang beda ?? dan kenapa makai flatfile cms ??
hm... baiklah aku akan jujur pada mu.... ceilehhh.... suit...suit... π€ͺ, sebenernya memang kita ini penggemar cms non database untuk bekerja kenapa ?? karna dengan tanpa database makin ngacir tuh website dan blog , dan tambahan nya lagi cara kerja yang super simple menjadi semakin menarik perhatian team developer kita untuk membuat lebih banyak karya dan kodding untuk di sebarkan agar berguna bagi pengguna nya khusus nya dalam pengembangan situs dan blog. bukan itu saja sih,, dengan dukungan auto seo nya menjadikan kamu nantinya akan fokus ke konten aja gak perlu mikirin yang lain nya lagi.. enak toh.... nah itu semua untuk apa coba kalau gak untuk kemajuan blog website mu π.
Nah kalau dulu kan kita pasti banyak dan sudah tau dong ama master cms dunia seperti wordpress , drupal dan joomla, berlanjut hadir lah klan dari divisi static dia menyebut dirinya adalah gank flatfile, dan ini utama serta pelopor nantinya lahirnya generator static site modern. di klan geng ini sendiri ada beberapa nama besar sebut saja grav, flextype , bludit , get simple dan pico . dan pada project ini kita gunain pico ya , nanti kita jelasin kenapa menggunakan pico.
nah secara umum flatfile cms itu bekerja tanpa menggunakan integrasi database dalam hal ini maksud nya kita gak perlu repot untuk melakukan koneksi ke database lah istilah nya, jadi bukan resmi dan umum tanpa db ya, karna menggunakan sqlite juga db tapi kita gak perlu lagi setting database nya. ada juga yang hanya menggunakan file sebagai data, dengan penggunaan technology ini maka relatif lebih dan super cepat untuk digunain , bukan itu saja alasan lain nya adalah tingkat keamanan yang cenderung lebih tinggi .
Setelah peperangan π§ flatfile geng vs π₯Έ oldschool geng dynamic website ditengah pertempuran muncul lah generasi dan geng terbaru, mereka menyebut dirinya dengan new generator static site modern π. dan mereka itu begitu mengejutkan para gengsta sebelumnya... dan developer dunia pun seperti ngeri akan datang nya generasi ini π±. bukan tanpa sebab juga kecepatan nya yang mengagumkan dan menggunakan technology teranyar dan dukungan SEO nya yang mantab wow.. pokok nya top abis deh.. dan pada klan ini dipimpin dengan jekyll ruby on rails, hugo , pelician by phyton , eleventy , dan terbaru astro , pokoknya banyak deh capek nyebutin nya... baru setelah klan geng ini berkembang lagi dengan kloni nya yaitu SPA , PWA , SSR dengan angular, react,nextjs,gatsby ,svelte kit,vue dan makin buanyak lagi... dan ini yang bikin kita sedikit terharu kita yang dulu cuma ngenal web antara cms menggunakan php dengan database nya vs clasic tradisional html yang setiap buat project situs ini mesti copy paste, sekarang disuguhkan dengan keberagaman yang luar biasa dan kemudahan untuk bekerja !!.
Pada akhirnya mereka pun berdamai, tentuya para gengster itu pun kini malah berlomba untuk menjadi lebih baik dengan berbagai kemudahan nya, jika menggunakan oldschool cms dengan text editor nya, maka kamu tidak akan menemukan atau jarang dijumpai ketika menggunakan technology modern , kenapa ?? karna rata rata mereka cukup menggunakan markdown saja untuk bekerja nya, tentu ini akan mempercepat seorang developer untuk bekerja jadi lebih fleksibel dan mobile gitu loh... tapi ada beberapa tingkatan kesulitan khusus nya bagi pengguna awam. nah gimana cara install nya ?? wong gak pernah ngerti kodding... plus gimana cara online kan nya.. wong biasanya aku cuma makai cpanel... nah kebanyakan itulah pertanyaan yang keluar ketika pengguna awam pertama kali mau menggunakan generator statis site modern.
Karna kita musti sedikit memiliki pengetahuan mengenai koding mengkoding dan komat kamit ke github repo untuk push deploy dan lain sebagai nya, belum lagi integrasikan repo dengan statis host, bermain dengan terminal maka menangislah mereka.. ribet amat !! amat aja gak mau ribet π€£π€£.
tapi itulah seni nya sih kalau kita rasa, mempelajari hal baru berusaha mengikuti perkembangan technology tentunya dengan ukuran pengetahuan kita, gak usaha memaksa untuk jadi superman jika kamu sudah terbiasa menjadi sultan. nah karna ini lah mengapa sih kita menggunakan pico cms untuk menunjang kebutuhan pembuatan website modern mu.
Baiklah pico adalah sebuah generasi flat file cms yang menurut kita lebih modern . mengapa karna menggunakan pico cms ini sama saja seperti kita bekerja dengan menggunakan generator static site modern layaknya jekyll , eleventy maupun astro, dengan system dan skema serta struktur yang bener bener memudahkan developer dalam bekerja , maka menggunakan pico akan menjadi solusi terbaik untuk di kembangkan dan di deploy ke cpanel cloud hosting. jika sebelumnya kamu ingin merasakan generator statis site dengan tingkat kerumitan nya, maka dengan flatfile pico ini kamu cukup download doang dan upload ke cloud hosting mu, dan semudah itu aja web kamu sudah online π€ .
Secara default bekerja dengan cms flat file ini kamu wajib belajar dan terbiasa akan format markdown karna kita nantinya akan menuliskan dengan markdown itu sih soalnya, bisa juga makai html lebih bebas pokoknya, dan kelebihan lain pico dibuat menggunakan symfony php framework jadi pastinya selain aman tentu akan stabil untuk digunakan dan utamanya mudah di install pada hosting cpanel maupun direct admin mana saja.anti ribet deh pokoknya π , dan cara kerja untuk membuat artikel pun edit dan delete seperti kita buat notepad file doang , buat baru dan isikan format markdown atau copy paste dari contoh yang ada, se simple itu gak perlu ribet .. cukup masuk ke cpanel hosting dan kita bekerja di sana nanti cuman mainin file doang....
Nah itu defaultnya ya.... karna kami peduli dan cinta serta sayang ama kamu π.. ceileh.... suit suit.. anjayyy... π , maka kita berikan deh kemudahan untuk pengembangan situsnya ,apa itu tentunya dengan hadirnya backend admin dong.. jadi kamu gak perlu login ke cpanel hosting bolak balik yes... maka kita persembahkan backend admin khusus untuk kamu gunain aja.
Baiklah sebelumnya mari kita cek display tampilan nya seperti apa sih.. katanya cute banget ?? masak iya ?? ya iyang dong... cute seperti akyu.. π€Έπ»
Injeksi bootstrap
yap tentunya kita juga sudah meninjeksi dengan bootstrap framework agar lebih repsonsive dan mudah untuk menyesuaikan dengan device perangkat yang digunakan pengunjung untuk mengunjungi website blog kamu, dengan ini maka secara otomatis akan menyesuaikan antara tampilan desktop maupun mobile makin top kan yesss...
Dengan kemampuan display ini tentu akan mengasyikan so kamu tinggal fokus aja bermain ama konten artikel kamu untuk blogging alias ngeblog doang, tentunya dukungan tampilan super kece kaka...
Tampilan halaman beranda depan makin mantab kagak tuh...otomatis langsung nampilin post artikel kamu disana lengkap dengan judul deskripsi author dan tanggal publih nya jadi lengkap baget deh , konsep desain nya sih kita buat mirip mirip notes diary gitu yes.. jadi berjejer dan tentunya ini bisa kamu ubah berapa post yang kamu ingin tampilin, secara default kita pakai 5 post untuk ditampilin, auh.. cute banget gak sih.. π§π»
Dan selanjutnya halaman artikel post, jadi dari list post blog tadi nantinya ketika salah satu artikel di klik , maka tampilan display nya seperti diatas itu kaka, kece banget yes.. uda ada cover dan judul, deskripsi dan publisher semua lengkap. lanjut dibagian bawah nya adalah isi dari artikel kamu , jadi kamu bisa menuliskan format markdown pada artikel page nantinya.
Dan sesuai ama janji kita kaakaaa.... maka uda kita include setting kan admin backend agar memberikan kemudahan kamu untuk melakukan update artikel postingan blog dan berita informasi dari website mu, cukup mudah saja kan tinggal masukan password dan login doang sih, dengan hadirnya admin backend ini maka kita gak perlu lagi deh masuk ke cpanel hosting untuk bekerja, yes... kalau terbiasa menggunakan generator static site maka admin area ini memiliki konsep yang sama dengan foresty io. cuma bedanya kamu gak perlu sulit dan ribet pash push pash push atau komat kamit ke repo mu, jadi cukup update dari sisi backend admin aja langsung deh otomatis update.
Dan nantinya setelah login kamu akan lihat tampilan nya seperti gambar diatas, cukup simple kan, disana ada beberapa artikel kamu jadi kamu bisa langsung klik salah satu artikel post untuk merubah update edit misalnya , untuk hapus tinggal klik artikel dan nanti ada icon sampah trash, jadi tekan aja tombol nya nanti otomatis dihapus kok, dan untuk buat baru tinggal klik icon + lalu masukan url dari artikel mu, maka otomatis akan dibuatkan file baru untuk mu yang siap kamu gunakan untuk bekerja. nah gimane nih.. kesengsem kagak tuh... nyok kita download langsung wong gratis juga kagak bayar kok π€£.
Github download
Atau kamu bisa clone repo kita dengan menggunakan git atau node dengan menjalankan perintah
git clone https://github.com/mesinkasir/cuteblog-pico-webapp.git
kalau mau kunjungi dan intip source code repo kita bisa di link berikut ini https://github.com/mesinkasir/cuteblog-pico-webapp
Cara installasi
Baiklah setelah download source code project saat nya kita melakukan installasi, tapi sebelumnya ada beberapa persyaratan untuk melakukan installasi dan kamu mau instal dimana misal ke pc kamu dengan offline dulu atau langsung ke hosting kamu, nah gini cara installasinya.INSTALLASI ONLINE
Untuk installasi online maka kamu bisa langsung aja upload unduhan kamu ke folder dimana kamu mau gunakan, misalnya ke domain utama webku.com maka kamu bisa login cpanel hosting dan masuk ke public_html upload disini, jika source code masih dalam folder cuteblog-pico-webapp maka kamu bisa pindahkan semua file yang ada di folder itu ke halaman root depan atau public_html.kalau kamu mau install direktori lain misalnya webku.com/blog maka kamu bisa buat dulu folder blog lalu upload kode sumber terbuka cute blog ini disana, kalau mua ke sub domain misal nya blog.webku.com maka kamu buat dulu subdomain dengan nama blog atau sesuaikan ama kebutuhan mu , setelah sub domain terbuat kamu tinggal upload saja ke subdomain nya. tambahan kalau ngegunain cloudflare jangan lupa tambahkan A record ke cloudflare kamu yes...
nah setelah itu sudah beres deh kamu bisa akses website mu dan online, keren gak tuh...
Permecahan masalah blank putih pada website
pada beberapa kasus ada trouble seperti ketika kita sudah melakukan upload ke cloud hosting terkadang ada eror seperti halaman blank putih doang, nah gak perlu kawatir kamu bisa solved atau menyelesaikan dengan dua cara :
1. Cloud shared hosting kamu mendukung terminal.
kalau cloud hosting kamu mendukung terminal maka kamu bisa masuk ke cpanel hosting dan pilih advance , lalu ketikan
ls
nanti akan muuncul semua folder yang ada di cloud shared hosting mu, kamu tinggal masuk dimana lokasi cuteblog ini kamu install pada folder yang mana , sub domain kah atau root domain utama atau direktori lain nya,
untuk sub domain maka kamu bisa jalankan dan sesuaikan dengan sub domain yang kamu buat dengan perintah ini
cd blog.webku.com
ini misal kamu menggunakan sub domain blog.
terus untuk root atau web utama misalkan kamu install di web utama makan jalankan perintah berikut ini di terminal hosting mu
cd public_html
ini adalah perintah untuk akses ke halaman public_html folder dari cpanel
dan kalau misalkan kamu install di directori lain tinggal jalankan perintah
cd public_html
lalu cek list dimana folder directori kamu dengan cara ls
nanti akan muncul semua directori dan kamu tinggal jalankan perintah cd directori
ubah directori folder dengan nama direktori mu.baik sesuaiin dengan dimana lokasi installasi cuteblog , dan setelah kamu masuk ke folder cuteblog sekarang kita bisa eksekusi dengan menggunakan composer caranya jalankan perintah berikut ini
composer install
dan selesai sudah masalah kamu. sekarang situs kamu sudah bisa diakses.2. Cloud shared hosting kamu tidak mendukung terminal.
Maka langkah dan solusinya ikuti seperti installasi offline mode dibawah ini, atau kamu bisa mengunduh composer , xampp dan node js atau git dan buka folder cuteblog kamu, jalankan saja
composer install
setelah itu upload ke cloud shared hosting mu, maka permasalahan blank white dead screen tampilan layar putih website mu bisa diatasi.
INSTALLASI OFFLINE
Baiklah sekarang untuk installasi offline mode, karna bekerja via offline mode maka kita perlu beberapa app untuk mendukung cuteblog, jadi ada beberapa yang kita butuhkan seperti web server mandiri untuk local terminal atau computer laptop dekstop kita, dan composer untuk installasi . jadi unduh dulu beberapa keperluan installasi offline dibawah ini.
Download XAMPP β
install dan jalankan xampp kemudian aktifkan apache web server
Download composer β
install composer kemudian tes dengan cek via terminal tekan logo windows di keyboard ketikan cmd dan enter , lalu jalankan perintah berikut ini pada command prompt composer -v
dan enter, jika shell terminal menampilkan display versi komposer maka kamu sudah sukses melakukan installasi nya.
dan pastikan kamu sudah download source code nya diatas juga yes...
Nah setelah itu kamu buka folder C:xampp\htdocs klik kanan dan buat folder baru namai dengan nama website mu misal cuteblog, lalu buka folder cuteblog pindahkan semua file download an ke folder ini. kemudian kamu bisa akses dan buka web browser localhost://cuteblog dan selamat kamu kini sudah berhasil menjalankan cms flat file modern markdown format ini.
Cara Penggunaan
Baiklah sekarang kita akan beralih ke cara penggunaan , untuk awal kita perlu mengganti password dahulu pada admin area karna secara default semua project kami menggunakan password: axcora jadi untuk alasan keamanan kalian bisa menggantinya terlebih dahulu, cara nya masuk ke plugins/pico_edit folder dan disana kamu ubah config.php file dengan text editor , kalau belum punya text editor kamu bisa mendownload nya terlebih dahulu, unduh visual code β atau kamu ingin kode editor yang lebih ringan maka unduh notepad ++ β. setelah itu kamu bisa buka file itu dengan klik kanan dan open with kode editor yang sudah kamu download tadi ya. setelah file terbuka kamu perlu mengganti code dibawah ini$backend_password = 'E280A8E456D2FC7B9FE3189A916D1AA96FE19A1C09B73FBEE613A5A2E6A8AD7C';
nah kita buat bash password dulu dengan mengunjungi link berikut ini https://convertstring.com/Hash/SHA256 , masukan password kamu dan klik generate, lalu copy code bash yang ada dibawah dan paste kan ke backend password mu contoh nya dibawah ini
$backend_password = 'paste kan kode bash mu disini';
dan simpan . setelah itu kamu sudah sukses untuk mengganti password admin login, nah langkah selanjut nya kita perlu melakukan setting untuk kebutuhan SEO kita jadi buak folder cuteblog dan masuk config folder, disana kita perlu melakukan editing untuk file config.yml. buka dengan kode editor dan ganti site title , site deskripsi dengan title judul blog serta deskripsi website blog kamu , simpan untuk update data.
selanjutnya baru deh kita tinggal melakukan membuat update artikel blog , caranya login via web adminmu dengan akses ke webku.com/pico_edit dan masukan password, nantinya akan ada contoh artikel disana , untuk edit klik salah satu artikel dan lakukan perubahan,untuk membuat baru klik icon tanda + dan masukan url blog lalu enter atau tekan oke, selanjutnya kamu bisa mengisi artikel disitu, dan untuk hapus klik icon trash sampah di samping artikel.
pembelajaran konsep skema : klik salah satu artikel dan pelajari format konsep default tema nya, serta kamu bisa langsung mengetikan dan mengisi artikel dengan gaya markdown. berikut ini adalah struktur konsepnya
---
Title: tulis judul disini
Description: masukan deksripsi web blog artikel disini
Date: 18 April 2022
Img: masukan url gambar cover disini
Author: nama penulis
Template: post
---
dan tulis artikel dengan gaya markdown, contoh penyematan markdown
# h1
untuk penulisan h1 maka gunakan `#` contoh `# h1`
## h2
untuk penulisan h2 maka gunakan `##` contoh `## h2`
### h3
untuk penulisan h3 maka gunakan `###` contoh `### h3`
#### h4
untuk penulisan h4 maka gunakan `####` contoh `#### h4`
##### h5
untuk penulisan h5 maka gunakan `#####` contoh `##### h5`
untuk penggunaan gambar `![alt image](https://linkfoto.com/filegambar.png)`
untuk penggunaan link `[isi link](https://link.com)`
untuk penggunaan list maka gunakan berikut ini `+` contoh cek dibawah ini
+ satu
+ dua
+ tiga
atau gunakan tanda `-` juga bisa kok.
Nah gimana gampang dan simple banget kan.....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
Nah secara ini adalah kode sumber terbuka gratis untuk membantu kamu yang pingin mencicipi sebuah markdown file untuk bekerja membangun website dengan dukungan tema cuteblog yang menyempurnakan SEO kamu plus pico cms untuk kebutuhan flatfile mu, serta symfony menjaga kestabilan situs mu, maka nikmat mana yang kamu dustakan ferguso.. π€£
Singkat cerita kita ngebuat nya sebenernya cuteblog ini awalnya adalah di develope menggunakan generator static site modern menggunakan astro, kamu bisa cek atau download source code nya cuteblog for astro β
Nah berhubung ada salah satu sahabat yang suka ama tema ini plus mau dibuatkan yang lebih mudah dengan cms , maka kita memilih menggunakan pico untuk digunain tentunya agar mudah dan mendekati kesamaan dengan generator static site modern jadi nya kembar banget dah pokoknya.
kalau kamu ingin nih mau cari tema lain tentunya kita juga ada beberapa project yang kami kembangkan dengan pico flatfile cms juga , jadi berikut adalah list dari tema website terbaru gratis untuk kamu download.
Axcora pico clean modern website β
Pena for blogger β
Piconic mobile web app β
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 KONTEN WAJIB BACA
Mesin kasir terbaru β
All source code project free download gratis β