New eleventy 11ty web modern template

New eleventy 11ty web modern template free download source code gratis

Hey.. if you need to built modern website with new technology , modern design concept, and auto SEO , so you can use our source code project , on this project built with eleventy aka 11ty modern generator static site, so with using this SSG make your website very fast , powerfull SEO , and secure because you no need database configurations, this is just a static site modern for develope your website and blog. and of course this is a free and open source code so you can download it, and change any code with you needed.
Heloo man teman... jadi di proyek kali ini kita akan membagikan lagi nih,, ya masih seputar modern website di dalam nya, dengan generator statis site modern untuk kebutuhan pengembangan situs dan blog kamu, apa sih kelebihan dari proyek ini sendiri ?? tentunya kami menggunakan 11ty sebagai teknologi dalam penggunaan untuk pengembangan nya, mengapa menggunakan eleventy sendiri karna tentu aja SEO nya yang super, jadi bisa mbantu kamu untuk merengsek ke google page, selain itu kecepatan yang luar biasa jadi menyempurnakan situs kamu menjadi lebih keren dan beken...

You can play video then see how easy work using this project.

And yeah.. you can see and learn how this project work on our live codding click here →, you can scroll on bottom then you can change anycode or fork it to your repo account. just click on file so you can see all source code folder project, then you can live to change it to make update display.
Dan yap man teman... kalian bisa putar video nya dan lihat gimana sih mudah dan cepatnya bekerja ama proyek ini, sangat simple sekali kok dengan struktur folder yang tertata dengan rapi nya, kalian tinggal bermain main aja deh , dan pada koding online kita kamu bisa merubah nya secara langsung juga kok.cek kode dibawah ya...
Alright.. before we download this source code file so you need to install third party app , beacuse we work with this app, so for first make sure you have node , then you need to install code editor like visual code studio.
Dan sebelum kita melakukan installasi serta mengunduh proyek sumber terbuka ini, untuk awal kalian wajib menginstall beberapa aplikasi pendukung, karna nantinya kita akan bekerja dengan app itu jadi silahkan unduh dan install di perangkat kamu ya...

Node Download →
After download node you need to install on your devices, just run installation, then if installation success now you can open shell terminal bash, for windows you can presh windows logo on keyboard then typing cmd, and now you will see shell bash terminal or command prompt, so we need to check node with run this command node -v , and you will see shell bash terminal displaying node version you have install on your devices, and you can check npm version too.. with run npm -v
Baiklah man teman untuk awal kalian bisa lakukan penginstallan node js ya pada perangkat kamu, tinggal double klik atau enter pada file installer nya kemudian jalankan proses installasi nya, lalu setelah installasi selesai kita bisa melakukan pengecekan apakah installasi kamu berhasil apa tidak dengan menekan icon windows yang ada di keyboard mu, lanjutin dengan mengetikan cmd , nanti akan muncul tu shell terminal atau command prompt, dan selanjutnya ikuti langkah diatas untuk melakukan pemeriksaan versi nya ya, ini untuk memastikan bahwa node sudah berhasil di install pada perangkat kamu.
Visual Studio Code Download →
We need download code editor so we recommended using visual studio code for best and complete code editor, for first you need to download it , then install it, just it. Next we can work with visual code studio for change any code.
Dan yap ini adalah kode editor yang terbaik serta lengkap, jadi kenapa kami mengusulkan menggunakan nya karna kelengkapan fitur yang ada nantinya akan memudahkan mu dalam bekerja menggunakan kode sumber terbuka ini.

After all thir party app you have install , now we need to download and install this source code files, so you can download on our github repo or you can clone it .so let's get started now !!

Donwload Source code cool 11ty eleventy gratis
Github Download
Or you can clone it using terminal

git clone https://github.com/mesinkasir/cool11ty.git

Contibution with donation for support our team dev make other source code for the world.

Buy me a coffee ☕️ ❤️ ✌🏻
Donate Now

Oke before we install this project for first you need to know about display themes.
new elventy 11ty modern web static site geenerator free download gratis souce code

new elventy 11ty modern web static site geenerator free download gratis souce code

Home page - this a home page area with dark mode including with modern display design make your website and blog unique, on this home page area you can change title , description and intro content with you needed. then we can see all new article post will diplaying on home page too... this blog area is automaticly fecth from your new article post.
Beranda halaman utama adalah seperti tampilan diatas, mengungung tema gelap makin keren kan era modern saat ini dan tentunya dukungan typography yang makin oke menjadikan situs mu tetep keren dong walau tanpa menggunakan gambar cover , jadi ini bisa membantu mempercepat situs kamu hanya dengan bermain content saja pada konsep nya. dan ada juga blog artikel yang otomatis akan ditampilin setiap kamu membuat postingan baru tentunya akan muncul pada display blog di halaman beranda ini.
new elventy 11ty modern web static site geenerator free download gratis souce code

Post Article list Page - this is page for dispalying your all content blog post, include title, description, date and tags, then if your web blog visitor click on one of article then will be redirect to detail article page. so on this area your web visitor can be read all your update blog article page.
Dan disini adalah halaman dari daftar artikel yang sudah kamu buat, jadi nantinya pengunjung situs dan blog kamu akan melihat secara kesuluruhan daftar artikel pada halaman ini, dan tentunya nanti ketika pengunjung klik pada salah satu artikel maka akan diarahkan ke halaman detail informasi mengenai artikel kamu.
new elventy 11ty modern web static site geenerator free download gratis souce code

Article page - on this area will be displyaing detail information about article page, so your visitor can read detail article you have create .
dan ini adalah halaman dimana pengunjung kamu bisa melihat detail isi dari konten blog yang sudah kamu buat. dan tampilan nya tetap menarik juga kan. makin kece dong buat web dan blog menggunakan New eleventy 11ty web modern template

Installation

Oke after see display page area now you can install this source code project, and you can install on online host or you can install localy on your devices, so we have two option for installation.
jadi man teman setelah menjelajahi gimana tampilan nya, kini kita sudah siap untuk melakukan installasi dan mulai bekerja dengan sourcecode ini, bagaimana cara installsinya ?? tentu ada dua cara melalui host langsung atau kita install pada perangkat kita, yuk simak semua caranya dibawah ini.

OFFLINE INSTALLATION.
For first you can create new folder on your desktop , then you can name it with cool11ty for example,then extract and copy all files source code to your new folder / cool11ty , now we need to access this folder with terminal, so open terminal command prompt, then run this command cd C:\Users\pcname\Desktop\cool11ty change pcname with your pc name account.
Before install this source code and run it on your devices, for first we need to open this project using your visual code studio so you can run this command for open this project using visual studio code code . , then you can see this project will be opened on visual studio code, so minimize your code editor , then we can install this source code project.
Oke now we need to install it with run npm install after installation success now you can run this project with npm start then open your web browser using mozilla firefox, google chrome or other and visit on localhost:8080.
and congratulation now you have successfully to run this project on your local devices.

Baik man teman sebelum melakukan installasi kita wajib dong membuat folder baru dulu untuk penempatan proyek ini, agar mudah kamu bisa buka desktop kamu dan buat folder baru namai dengan cool11ty, lalu pindahin deh semua source code file ke folder baru itu, terus kita ikuti langkah diatas ya untuk mengakses folder proyek cool11ty menggunakan terminal, kemudian melakukan installasi dan selanjutnya menjalankan nya ke perangkat kita.

ONLINE INSTALLATION
For live this project on host, for first you need to register on github, after register on github, now you can visit our source code repo on https://github.com/mesinkasir/cool11ty , then you can see fork button on top right navbar , just press fork for clone this repo on your github repo, or you can click this button Fork It
After fork this repo, now you need to register on static hosting,for easy step you can using github account for create register, no need wory you can use free version . oke now you can visit on static host so you can select one on static cloud host list
vercel register →
netlify register →
heroku register →
After register on cloud static hosting now you need to create new project or website, then you can integration or using github coll11ty repo project, just click import or use this repo, and run deploy... wait fot minutes... and congratulations your website is live now...
you can visit on your free domain name, like .vercel.app , .netlify.app or herokuapp.com. Now how to change on your TLD domain ?? you can visit on setting or configuration then select domain configuration, and you can change your free domain with your domain. and save it..
Now how to create update and change content or code ?? no need wory about this, you can change anycode just visit on your github repo and you can open folder - edit what file you needed to update and save it, then your website is automaticly update. for fast and easy solutions so you can forestry.io read how to work with forestry.io for headless cms Jadi man teman untuk melakukan installasi online ini untuk awal tentunya kalian wajib dong mendaftarkan diri kalian di github dulu, setelah pendaftaran dan sudah bisa loghin , kalian bisa langsung kunjungi halaman repo kami yang ada di github, terus cek pada sisi kanan atas ada tuh tombol fork, jadi kalian klik aja deh tombol itu untuk langsung menyalin semua source code proyek ini, selanjutnya kita perlu mendaftarkan juga di static hosting yang ada diatas, pilih salah satu kemudian lakukan pendaftaran menggunakan github akun kalian, dan buatlah proyek atau web baru, kemudian integrasi kan atau koneksikan dengan repo github yang sudah kalian fork pada repo kalian dengan nama cool11ty. dan klik deploy aja deh.. dan simsalabim website kamu sudah langsung online kaka....
nah selanjutnya gimana nih proses editing nya ?? secara kan sudah online langsung tuh installasi nya , nah kalau kita mau edit bejimana ?? tenang man teman, untuk awal kalian bisa langsung melakukan editing di source code github repo mu, dengan klik aja folder dan file yang mau kamu edit secara lansgung di github atau kalian bisa juga menggunakan forestry.io , dengan menggunakan forestry maka layaknya cms kita bisa mudah untuk menggunakan nya dengan cepat. cek bagaimana bekerja ama forestry.io disini →

WORK WITH CODE

Now ho to work with this project ?? for first you can open your code editor then you can see all code in here, now for create new content article you just need to open posts folder, then you will see all article file in here, for create article you need to know about markdown , no need wory with using md files you can insert html too...
now how to create new article post ?? for fast you can create new file on posts folder then name it with your url article, then you can copy code from example article.md files and paste it to your new post article, and edit article with you needed.
Jadi bagaimana untuk membuat artikel blog post pada proyek ini ?? tentunya kalian bisa dengan mudah akses dan masuk ke folder posts , kemudian kalian akan lihat ada banyak artikel contoh disana, dan untuk membuat baru kalian bisa saja langsung buat new file namai dengan alamat artikel kalian dan jangan lupa di tutup dengan extention md artinya markdown file format, contoh nya artikelbaruku.md
Details article markdown file format

---
title: Insert your blog title here
description: Insert description here
date: 2022-06-21 date post format
tags:
- tag1 insert tag here
- tag2
layout: layouts/post.njk this is default post blog themes
---

Now you can write article using markdown format or insert html

Markdown example
diplaying image : ![alt image](insert url image here)
insert url link : [your link here](insert url link here)
H1 : # This is H1 tag
H2 : ## This is H2 tag
H3 : ### This is H3 tag
H4 : #### This is H4 tag
List , ul , li : +

SEO Configuration

Oke after you have create all article and content now we need to setting your meta title, description for seo tags, so you can visit on _data folder then open metadata.json files, and you need to change and configuration all files in here like title, description , and url with your website. then save it for update your SEO configuration settings.

Deploy on host for local installation

Now if you need to deploy it on static hosting so you need to register on firebase or surge and install firbease surge CLI.
oke now we need to buidn this project for production mode so you can open terminal and run this commandnpm run build , then you can upload or push _site folder to static hosting.
you can read how to deploy on firebase documentation here →
For easy and fast way you can deploy your project on surge , for first you need to open terminal then we need to install surge globaly on your devices, so run this command npm install --global surge and register to surge with run this codesurge now you can register with email and password , then you can deploy your project on surge, and visit yourdomain.surge.sh and congratulations now you have successfully run your project on cloud.
Let's play with live codding here... you can change code and see what happent , run live code now..