13 Mar 2022
Eleventy bootstrap web template seo source code free download gratis
Buat website dengan generator static site modern menggunakan eleventy 11ty bootstrap full SEO
Build a modern site using eleventy 11ty , yes on this project we have develope a new modern web template, using modern static site generator, this is an alternative for jekyll , hugo or astro. powerfull with automatic SEO and sitemap !!Yap kawan kawan man teman pada kesempatan kali ini kita mau bagiin sebuah tema situs modern dengan teknologi teranyar nya, tentu saja semakin keren dengan berbagai fitur yang dimiliki nya, selain kecepatan menjadi prioritas pun juga SEO otomatis nya yang bikin makin kesengsem seru... berawal dari chat oleh seorang kawan request untuk dibuatkan nya tema untuk 11ty eleventy maka terciptalah source code ini untuk kamu gunain. super simple responsive dengan bootstrap dan tentunya mendukung mu untuk masuk page one mbah google yes...
baiklah dari pada penasaran cek dulu yuk tampilan nya berikut ini
yuk monggo play video nya biar bisa jelas tuh gimana bekerja nya kode sumber terbuka ini selain untuk belajar tentunya kamu juga bisa gunakan dalam pengembangan situs kamu ya, jadi bebas untuk kamu modifikasi nya, selain itu mendukung markdown akan memudahkan mu secara cepat untuk menulis artikel yap markdown adalah generasi terbaru dan lagi trend saat ini untuk project pembuatan website . bukan hanya itu dengan markdown pun kita bisa juga menggabung kan dengan html jadi lebih mudah kan, semakin mobile dengan dukungan markdown nya.
Untuk SEO nya secara otomatis by default sudah kita injeksi kan jadi meta title, deskripsi, sampai sosial media card facebook dan twitter sudah tersemat yes, artinya ini siap pakai doang.. ah siapppp......... dan sitempa xml file nya juga sudah tersedia untuk kamu kirim kan ke google web master . nah dari pada penasaran yuk kita intip bagaimana sih penampakan nya dibawah ini.
Update Canary Version 2 pefrom
And yes this is so crazy!! imagine the incredible speed and performance when updating to version 2 canary, and it will really help improve your site. perfectly the lighthouse score that he got.Dan ya ini sangat gila !!
bayangkan kecepatan dan peforma yang luar biasa ketika melakukan update ke version 2 canary, dan ini benar benar akan membantu memperbaiki situs mu. dengan sempurna nya lighthouse score yang di dapat.
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 :
Donasi Sekarang
Baiklah supaya kalian puas nih , bahwa kita bener bener mendeploy nya penuh cinta,, ceilehh...... kagak percaya yuk cek pembuktian nya nih dibawah ini.
GT Metrix tester drive
Light house tes... liat SEO scor nya kaka....
Mobile test by google
Desktop test google
So nikmat mana yang kau dusatakan ferguso !! dan ini gratis kamu bisa free download source code mengunduh nya langsung, dari pada penasaran cek display tampilan nya aja yukk.... Halaman utama ini sudah otomatis yes, jadi langsung aja deh kita buat nya konsep bloging, dan bisa juga di gunakan untuk berbagai kebutuhan pembuatan website modern kamu, mulai dari company profile perusahaan , sekolah , news berita sampai dengan kebutuhan untuk blog dan portfolio serta lain nya bisa aja sih menggunakan nya, dan jika kita lihat pada halaman atas adalah blog list terbaru akan muncul disana dengan kapasitas space 4 post, selanjutnya dibagian bawah blog ada web app page dengan tiga halaman list nya. terus scroll kebawah lagi kita bisa lihat gimana ada video dengan dua post page disana, artinya kita sudah melengkapi akan blog post artikel berita informasi, dilanjut kan dengan web app atau produk media, dan video juga, nikmat mana yang kamu dustakan ferguso....!!
dilanjutkan lagi pada bagian samping nya ada navigation halaman, space iklan sama hastag ini sangat penting untuk mendukung SEO kamu ya dengan cloud hastag disana, plus dukungan bagian header navbar ada menu yang menuju kebeberapa elemen halaman kamu, dan sampai ke github repo untuk mendownload nya.
cek lagi bagian footer sudah tersedia page, sosial media link , developer atau author, kemudian ada support dan contact page nya, semua semakin lebih mudah bukan . super lengkap dan ramai deh ciri blogger banget ye kan....
Blog page - nah selanjutnya ada halaman blog page juga disini semua blog yang sudah kamu input akan ditampilkan keseluruhan pada menu halaman posts, dengan konsep desain minimalis makin imut dong untuk dilihat nya, dan list ini akan membantu pengguna mu untuk memilih postingan artikel informasi yang dibutuhkan nya, super cepat tentunya.. lah wong menggunakan new generator statis site gaess,,, jadi teknologi modern ini benar benar mempercepat load speed page website kamu . by default kita juga memdahkan mu untuk membuat dan update blog post ini, cara nya tinggal buat file baru dengan format markdown atau .md file kemudian kamu bisa contek artikel sebelumnya untuk membuat artikel baru disini, ada beberapa fitur antara lain , title , deskripsi, cover image, dan tag hingga tanggal publish nya jadi pastikan kamu sudah mengisi semua nya ya, kalau uda tinggal save aja nanti secara otomatis blog page kamu akan bertambah sesuai dengan post artikel yang sudah kamu input kan.
web app page - dan selain blog page kita ada halaman lain juga yaitu web app page atau kamu bisa memasukan nya dengan kategori lain sesuai kebutuhan kamu, desain tampilan list nya pun kami buat berbeda dengan blog post jadi biar lebih keren binti kekinian gitu gaes, dengan mengusung card system membungkus artikel dari web app ini, dan pada list ini akan ditampilkan secara keseluruhan kategori group web app, dan kamu juga bisa melakukan update buat baru sampai menghapus file md nya doang, pengisian nya sama ama cara membuat blog posts artikel ya, jadi lebih mudah pakek banget gitu deh.
Cinema video page dan dilanjutkan lagi dengan melengkapi halaman via video page area, yah agar semakin menarik tentunya kita juga sudah membuat kan page khusus untuk media video gallery disini, bukan sekedar video player youtube aja tetapi juga include degan penjelasan yang bisa kamu masukan sesuai kebutuhan kamu, tentunya pengisan nya sama dengan cara mengisi posts nya ya, cuma beda nya disini cover image diganti dengan link url bagian belakang youtube,jadi tinggal copy paste aja link bagian id belakang youtube nya ya, atau kalau kamu kesulitan sih bisa langsung aja deh contek contoh nya dan ikutin aja selesai sudah.
Apa itu eleventy 11ty
Eleventy adalah sebuah static site generator modern yang ngebantu mu untuk membuat situs cepat dan efisien serta dukungan penuh SEO nya benar benar membantu kamu dalam pengembangan berbagai poject situs sesuai kebutuhan, dan selain itu bekerja dengan nunjucks menjadikan kesempurnaan akan kecepatan dan stabilitas nya, kemudahan lain adalah deploy ke server hosting begitu cepat dan integrasi dengan repo pun semakin menyenangkan tentunya.pada awal perkembangan nya hugo dan jekyll adalah generasi awal dari klan ini sebelum akhirnya hingga saat ini lahir banyak group nya yang membuat kita bingung untuk meminang yang mana, mulai dari astro, hingga eleventy sendiri memberikan kemudahan dalam kebutuhan deploy site cepat static modern. masih banyak lagi kelebihan lain menggunakan nya.
Baiklah mari kita memulai menggunakan nya untuk awal kalian wajib memiliki dan sudah terinstall node js pada device kalian, kalau belum yuk download node →.
Setelah download lakukan aja installasi nya tinggal next dan next sampai finish doang ya,, lalu kalian bisa cek apakah installasi node dan npm sudah sukses, cara nya klik logo windows dan ketikan cmd lalu jalankan kode berikut ini pada shell terminal comand prompt kamu
node -v
kalau pada terminal menampilkan node version maka selamat kamu sudah sukses melakukan installasi nya, selanjutnya yuk kita cek npm version dengan menjalankan npm -v
. nah gimana sudah tampil juga kan ?? selamat deh kamu sudah sukses installasi node, oke saat nya kini kita melakukan installasi eleventy 11 ty secara global ke device kamu caranya buka lagi shell terminal kamu dan jalankan perintah berikut ini npm install -g @11ty/eleventy
dan tunggu beberapa saat sampai installasi sukses, kalau uda sukses kamu bisa tes apakah sudah terinstall dengan baik dengan menjalankan eleventy --version
. kalau pada bash shell terminal sudah ditampilin maka selamat kamu sudah melakukan installasi dengan baik dan benar, nah saat nya deh sekarang kita download dulu Eleventy bootstrap web template seo source code free download gratis ini.cara nya sederhana dan simple aja kok kamu tinggal donwload di repo github kita atau clone bisa juga, yuk kita mulai.
Github download
atau gunain shell terminal untuk melakukan clone langsung dengan menjalankan perintah berikut ini
git clone https://github.com/mesinkasir/eleventyblog.git
Tes demo 1 Tes demo 2
cd C:\Users\namapc\Desktop\11ty
ganti nama pc dengan pc kamu ya, nanti kita akan masuk kehalaman project itu, selanjutnya kita perlu melakukan installasi dahulu dengan menjalankan npm install
tunggu sampai installasi selesai yes.. kalau uda kita bisa jalankan dengan npx @11ty/eleventy --serve
atau kamu bisa jalankan dengan npm run dev
nah kalau uda kini kita bisa akses ke web browser kunjungi localhost:8080 dan selamat kini website modern mu sudah siap pakai nih kaka....Nah PR selanjutnya adalah merubah beberapa file kontent sesuai kebutuhan kamu, caranya posts folder adalah area lokasi untuk merubah semua file artikel, jadi kamu bisa ubah disini ya, tinggal open folder kemudian kamu bisa edit sesuai kebutuhan , untuk menambahkan tinggal copas aja dari artikel sebelumnya yes.. dan lanjut untuk web app kamu bisa cek pada folder promos lalu ubah deh dan tambahkan lagi sesuai kan ama kebutuhan, terus untuk area video kamu bisa masuk ke folder cinemas dan selesai sudah untuk template lain nya kamu bisa cek pada folder yang sudah ada atau langsung aja tes pada live source code dibawah ini dan ubah edit sesuai kebutuhan mu ya...
nah selesai sudah tuh, kalian bisa ubah kode live nya diatas dan sesuain dengan kebutuhan kamu yes..
BONUS CONTENT ELEVENTY PROJECT FREE DOWNLOAD :
Eleventy text11ty full source code download →
Eleventy Mobile full source code download →
All source code project free download →
Mesin kasir terbaru →