Membangun website blog SEO dengan 11ty thisis not thesis

16 Apr 2022

#eleventy themes #site #source code #themes #static site generator #static #eleventy template #website #gratis #11ty #template #eleventy #free download #tema #thesis #bootstrap #eleventy website #generator

Thisis blog SEO web template free download source code

Dan yes... pada project kali ini kita akan membagikan lagi kode sumber terbuka template tema untuk blogging, tapi bedanya disini kita ngembangin nya dengan menggunakan eleventy 11ty. apa itu ?? sebuah generator static site modern yang cukup populer dan bertenaga khusus nya untuk SEO nya, dan ini lah alasan mengapa kita menggunakan nya.
thesis web template free download source code

thesis web template free download source code

Tema blog seo ini mengadopsi dan terinspirasi dari thesis nya om chris pearson , dan jika kamu para oldschool web developer maupun blogging pastinya tidak akan melupakan sang raja tema ini, bagaimana tidak era dulu , wow ini benar benar membahana menakutkan karna kemampuan nya dalam digunakan untuk mendukung SEO secara penuh, maka tidak heran pada saat itu pun hingga kini masih banyak yang menggunakan nya, thesis adalah salah satu tema terbaik khusus wordpress. entah lah kids jaman now masih mengenal tidak ya template ini.

Dan kini setelah beberapa developer mengeluarkan variant baru dengan multiplatform yang menggunakan tema itu, maka saatnya generasi static site generator beraksi , yap dengan free download thisis template gratis source code ini kamu bisa menggunakan nya untuk mengembangkan situs mu, dan tentu menggunakan eleventy 11ty sebagai landasan maka akan menjadikan situs web dan blog mu makin cepat lebih cepat dan super cepat pun dengan dukungan SEO yang sudah kami sematkan agar membantu mu melaju ke page one.
Supaya gak samar samar maka yuk kita cek tampilan display nya seperti apa sih.... tapi sebelum nya mari kita cek peforma nya menggunakan lighthouse dulu agar afdol dan meyakinkin.... cekiot dan cekiprot......
thesis web template free download source code

Nah via lighthouse sudah ada scor nya cukup menggemberikan juga sih, dengan nilai yang se sempurna ini, jadi kamu nantinya tinggal fokus ke konten kamu aja kan yes.... oke yuk sekarang kita intipin aja deh gimana nih daleman thesis 11ty classic blog seo pada display nya.
thesis web template free download source code

Karna berkonsep blog seo dan classic , maka nuansa putih menjadi pilihan untuk digunakan dan ditambah dengan adanya artikel blog post yang sudah mejeng di halaman depan untuk di baca oleh pengunjung situs mu, dan kini kita bisa cek juga pada halaman navigasi atas, itu nanti bisa kamu ubah ya ke link sesuai kebutuhan kamu disana, lanjut bagian samping artikel ada navigasi page yang akan otomatis muncul disana.
thesis web template free download source code

Dan pada halaman postingan artikel tampilan nya adalah berikut ini gaes,, kamu bisa cek disana akan ditampilkan detail mengenai title, deskripsi semua nya pokoknya lengkap deh.. dan nanti ada icon yang mengikuti cover yang sudah kamu setting sebelum nya. kamu bisa mengganti cover icon pada halaman posting yang menggunakan format markdown.
thesis web template free download source code

Tentunya responsive dong kaka... jadi otomatis akan menyesuaikan sama device perangkat yang digunakan pengakses dan pembaca blog kamu disini, jadi gak usah kawatir yess... yuk ah langsung aja unduh sekarang .

Download now on github repo
Github Download
Atau kamu bisa clone fork repo aja langsung yes..
git clone https://github.com/mesinkasir/thisis-11ty.git

Dan setelah menguduh nya kamu bisa siapin ke folder kerja kamu , buat folder baru namain thisis terus sekarang kita butuh peralatan tempur pendukung, apa aja ?? tentunya beberapa aplikasi yang nantinya kita butuhkan untuk bekerja, kok ribet banget ?? bukan ribet kaka karna emang sensasi nya menggunakan generator static site ini kalau kamu pengen belajar deploy nya. misal butuh cms atau content management system dengan admin mode,ini sangat cocok bagi yang kesulitan ngoding ya... maka kamu bisa menggunakan Foresty . jadi proses installasi berbeda dengan local deploy ya.. kalau makai foresty maka kamu tinggal fork aja source code kita di github.

Installasi cepat
Untuk awal wajib mendaftarkan diri kamu ke pihak berwenang dan KUA. loh kok... emang mau maried ?? woless gaes... oke lanjut untuk awal kebutuhan nya kita cuma butuh untuk regristasi ke github, setelah reg maka login lah dengan akun yang sudah dibuat, lalu dan kemudian selanjutnya..... kalian kunjungi link ini https://github.com/mesinkasir/thisis-11ty - lihat tombol fork - dan klik maka nanti otomatis source code ini akan jadi milikmu.. cie.. selamat ya....
baiklah dilanjut... sekarang kita masuk ke repo yang barusan kita fork tadi nantinya akan menjadi seperti ini https://github.com/usernamemu/thisis-11ty. dan setelah itu mangga deh register ke foresty, kalau uda integrasikan dengan github kamu, dan langkah terakhir agar situs blog kamu menjadi online, solusi mudah kita bisa mendaftarkan ke statis hosting, jadi kamu bisa regristasi ke netlify atau heroku dan vercel, pilih salah satu, lakukan pendaftaran dan selanjutnya login, kalau uda kamu klik buat new project dan integrasikan dengan akun github kamu, teruss... tinggal pilih repo mu dan deploy situs mu, dan boom.... selamat site blog modern kamu sudah online kaka....
Cara kerja :
Ya setelah melakukan integrasi repo dengan hosting mu, kini kamu bisa menggunakan foresty.io untuk login dan akses ke source code kamu, dan sekali lagi ini berbeda dengan menggunakan cms ya, so pastikan kamu udah siap mental, wkwkwk... tapi gampang aja kok, login ke foresty dan nanti kamu akan membuka seluruh file repo, cara kerja nya pun mudah tinggal klik edit aja untuk melakukan editing konten artikel, dan ingat ini menggunakan markdown so kamu musti pelajari tatanan struktur markdown, mudah kok gaes...
Markdown singkat


TYPOGRAPHY

 # adalah H1 penulisan nya pada html Piconic pada markdown menjadi #Piconic

 ## adalah H2 penulisan nya pada html Piconic pada markdown menjadi ##Piconic

 ### adalah H3 penulisan nya pada html Piconic pada markdown menjadi ###Piconic

 #### adalah H4 penulisan nya pada html Piconic pada markdown menjadi ####Piconic

 ##### adalah H4 penulisan nya pada html Piconic pada markdown menjadi #####Piconic

 ** adalah Bold penulisan nya pada html Piconic pada markdown menjadi **Piconic**

 _ adalah Italic penulisan nya pada html Piconic pada markdown menjadi _Piconic_


 LIST

 + adalah li penulisan nya pada html Piconic pada markdown menjadi +Piconic


LINK

[]() adalah link url penulisan nya pada html Piconic pada markdown menjadi [Piconic](https://axcora.my.id/piconic/)


 IMAGE

![]() adalah image penulisan nya pada html  pada markdown menjadi ![piconic web app](https://gambar.com/file.jpg)


IMAGE DAN LINK

 [![]()]() adalah image dengan link penulisan nya pada html  pada markdown menjadi [![piconic web app](https://gambar.com/file.jpg)](https://axcora.my.id/piconic/)

Gimana gampang pakek buanget kan...
POSTING ARTIKEL
Baiklah selanjutnya kita akan masuk pada posting artikel, untuk mengedit dan membuat baru kamu tinggal masuk ke posts/folder disana nanti ada list artikel blog dengan format.md files, klik edit dan namai dulu file .md markdown file nya, lalu kamu bisa open file dan lakukan editing sesuai dengan formatnya ya, struktur nya berikut ini plus penjelasan nya.


---

title: ini isi judul title mu

description: isikan deksripsi blog untuk seo disini

date: isi tanggal publihs mu contoh format (2022-04-15)

cover: masukan url cover photo disini

tags:

 - masukan keyword kata kunci 2

 - masukan keyword kata kunci 2

 - masukan keyword kata kunci 2

layout: layouts/post.njk

---



Dan isi atau tuliskan artikel kamu disini

terus untuk mengganti about page , kamu bisa membuka folder about/index.md dan edit kemudian lakuin perubahan disana.
Dan yang terakhir nih pengaturan untuk SEO nya, kamu bisa masuk ke _data folder dan edit metadata.json file, nantinya kamu bisa merubah semua kebutuhan kamu disini mulai dari SEO title, deskripsi, cover hingga mengganti navbar dan link nya.
Selesai sudah tutorial ini gaes... semoga ngebantuin kamu untuk membuat website dan blog penuh seo dengan technology modern menggunakan thisis eleventy 11ty.

Nah sekarang bagi yang demen banget ama koding kodingan mengkodang koding... kalian bisa menggunakan cara installasi dibawah ini yes.. atau cek dulu deh daleman isi dari source code nya di bawah ini, klik run untuk melihat source code full nya secara live, dan kamu pun bisa merubah melakukan editing , karna sudah ada live reload dari stackblitz ngemudahin untuk melihat update perubahan secara cepat .

dan baiklah kalau kalian ingin mengkoding mangga... tapi untuk awal kita perlu untuk melakukan installasi aplikasi penunjang dulu, ya.. kamu bisa langsung aja deh unduh link dibawah ini, gratis kok... so get started...
Node download →
Setelah download lakukan installasi, kalau uda kita bisa tes dengan menjalankan nya via terminal, caranya klik icon windows dan ketikan cmd, ingat nantinya kita banyak bekerja dengan cara ini maka usahakan sudah terbiasa yes.. setelah itu masukan jalankan perintah berikut ini dan tekan enter node -v kalau pada bash shell command prompt sudah keluar versi dari node maka artinya node sudah terinstall pada perangkat kamu, kamu juga bisa cek versi npm juga dengan menjalankan npm -v
Visual Code download →
Nah aplikasi ini berfungsi untuk membantu kita dalam kodang mengkoding yes... jadinya kamu bsia menggunakan nya untuk kebutuhan kamu dalam merombak penuh source code gratis ini, silahkan download dan lakukan installasi, ini lumayan besar ya memorinya, tapi kalau misalnya cari yang ringan supaya pc atau laptop mu bisa optimal kerja kamu bisa juga menggunakan kode editor lain, untuk yang paling ringan kamu bisa klik dan download dibawah ini.
Notepad++ download →
Solusi teringan untuk kode editor, unduh dan lakukan installasi nya, dan untuk mengubah file kamu bisa masuk folder , dan klik kanan pada file pilih open with notepad++ , maka nanti kamu akan bekerja menggunakan notepad++ itu.
Baiklah setelah semua installasi kini saatnya kita bekerja dan melakukan installasi penuh pada source code gratis project ini, untuk awal biar gampang kita buat folder baru di dekstop dan namain dengan thisis , lanjut buka command prompt kamu dengan cara klik icon windows , ketik cmd, dan kemudian jalankan perintah berikut untuk akses ke folder kerja via terminal cd C:\Users\namapcmu\Desktop\thisis nah setelah itu kita bisa akses semua folder disini,kamu bisa juga cek isi dari folder dengan menjalankan ls nanti akan ditampilkan seluruh folder dan file yang ada, oke sekarang kita jalankan installasi dulu, saatnya kita masukan perintah npm install maka installasi akan dilakukan, tunggu hingga selesai ya.. kalau uda kamu bisa jalankan dengan perintah npm run serve dan saat nya akses ke web browser kamu dan kunjungi localhost:8080. selamat free template tema web blog seo thesis eh salah thisis free download sudah berhasil kamu install.
Dan saatnya kamu bekerja dengan penjelasan diatas ya.

DEPLOY DAN ONLINE KAN SITUS
Baik lah setelah melakukan perubahan sesuai kebutuhan kamu saat nya kini kamu melakukan installasi ke cloud hosting caranya bagaimana ngab ?? untuk awal kamu bisa menggunakan cara diatas - installasi cepat, atau kamu bisa menggunakan surge atau firebase sebagai cloud hostmu , baiklah untuk awal kita wajib build dulu ya.. caranya jalankan npm run build setelah itu kamu akses ke folder _site via terminal dengan cd _site kemudian install surge dulu..npm install --global surge dan masukan lagi perintah ini surge lakukan regristasi langsung disana mulai dari email dan password kamu, dan selamat site kamu sudah di deploy di surge.
Cara selanjutnya ada lagi sih hampir sama dengan cara cepat installasi, kamu tinggal membuat repo di github dan cloud host seperti heroku,vercel maupun netlify, trus kamu bisa kembali ke repo kamu dan push source code disini , kemudian intergasikan dengan cloud hosting dengan membuat project baru, dan situs mu pun sudah sukses deploy kaka..
Nah itulah cara Membangun website blog SEO dengan 11ty thisis not thesis.

DONASI DAN KONTRIBUSI
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