04 Apr 2022
Membuat website dengan eleventy text11ty khusus blogger !!
Website Blog Generator Static eleventy untuk para blogger dengan FULL SEO
In this project it is a source code and review without blogs, and SEO support to use, as the name implies, the basic text is to focus on an article only, there are images and videos for the purpose of getting faster concepts lightning and without embedded js scripts only using css bootstrap in combination with fontawesome for the icon to make it a little more interesting.Another factor why not use image and video elements as well as cover because in this free free download source code project it is intentionally for bloggers who like to write articles to use it, besides that SEO support will automatically follow every title, description to twitter card in the article content. and page. Of course this will make it easier for bloggers to focus on content only.
Pada project kali ini adalah sebuah source code dan mengulas mengenai blog, dan dukungan SEO untuk digunakan, sesuai dengan nama nya text maka konsep dasar fokusing pada sebuah artikel saja, tanpa ada gambar maupun video untuk tujuan agar dapat lebih cepat secepat kilat dan tanpa js script tertanam hanya menggunakan css bootstrap kombinasi dengan fontawesome untuk icon agar sedikit lebih menarik.
Faktor lain mengapa tidak menggunakan elemen image dan video maupun cover karna pada project source code free download gratis ini sengaja memang untuk para blogger yang senang menulis artikel untuk menggunakan nya, selain itu dukungan SEO otomatis akan mengikuti setiap title, deskripsi hingga twitter card pada konten artikel dan halaman. tentunya ini akan memudahkan para blogger untuk fokus pada konten saja.
Home display - this is the initial display when accessing the main page, with the concept of sliding on the side navbar which will give a unique impression to reading every article you make, of course with the ease of changing and changing the display already available for use. Of course this is faster and with automatic SEO so markdown support makes it easy for you to create a website quickly.
ini adalah tampilan awal ketika mengakses halaman utama , dengan konsep sliding pada navbar samping akan memberikan kesan unik untuk membaca setiap artikel yang anda buat, tentunya dengan kemudahan untuk mengganti dan merubah display sudah tersedia untuk digunakan. pastinya ini lebih cepat dan dengan SEO otomatis hingga dukungan markdown memudahkan mu untuk membuat website secara cepat.
Responsive mobile display - the appearance of the website when accessed via a mobile smartphone, by using bootstrap technology we will find it easier to adjust the side of the display interface to be more attractive, and in this concept the mobile first theme also follows the desktop page, where there is a navbar menu on the side right side. and article content is on the left side for the convenience of visitors to read a post or article.
Tampilan mobile phone - tampilan website ketika diakses via mobile smartphone , dengan menggunakan teknologi bootstrap kita akan semakin mudah untuk mengatur sisi antar muka tampilan menjadi lebih menarik , dan pada konsep kali ini tema mobile first nya juga mengikuti halaman desktop , dimana ada menu navbar pada sisi bagian kanan. dan artikel konten berada pada sisi kiri untuk kemudahan pengunjung membaca sebuah post maupun artikel.
Article page - this page that contains and will display all the articles created, so all articles will be loaded on this page, with the structure of the posting date, title, description and link information that will lead to each article's page.
Sebuah halaman ini yang berisi dan akan menampilkan semua artikel yang dibuat, jadi seluruh artikel akan dimuat pada halaman ini, dengan struktur tanggal posting, judul , deskripsi dan informasi link yang akan mengarah ke halaman masing masing artikel nya.
Tag Page - To support SEO, there are also tags that are like blogs in general using a tagging system to help crawl into the Google search engine, and of course each tag will also group posts and articles based on the tags created. this will make it easier for visitors to find information based on the keywords they need, not only that this tag is also very good to help in your SEO.
Untuk mendukung SEO maka tersedia juga tag yang layaknya blog pada umumnya menggunakan taging system untuk membantu perayapan ke mesin pencarian google, dan tentunya pada masing masing tag juga akan mengelompokan posting dan artikel berdasarkan tag yang dibuat . dengan ini akan memudahkan pengunjung untuk mencari informas berdasarkan kata kunci yang dibutuhkan nya, bukan hanya itu tag ini juga sangat bagus untuk membantu dalam SEO mu.
Alright let's download and start working with this free open source code for you. - Baiklah mari kita unduh dan memulai bekerja dengan sumber kode terbuka gratis ini untuk mu.
Github Download
or you can clone fork this repo with run
git clone https://github.com/mesinkasir/text11ty.git
INTRODUCTION
Well, first, why do we use eleventy and not others, there are several factors and reasons, firstly, this is specifically and developed for the Elventy project, secondly, because the ease of structure in eleventy makes it easy for developers to make various changes. Attractive SEO support with easy code injection to automate giving a boost to SEO, to the need for tagged blogs is helpful. and this is a free open source code that you can download for your eleventy website creation project needs or for blogging.
Baiklah pertama mengapa kita menggunakan eleventy dan bukan yang lain ada beberapa faktor dan alasan, pertama memang ini dikhusus kan dan dikembangkan untuk elventy project , kedua karena memang kemudahan struktur yang ada pada eleventy memberikan kemudahan pengembang untuk melakukan berbagai perubahan. dukungan SEO yang menarik dengan kemudahan injeksi kode agar otomatis memberikan dorongan ke SEO, hingga kebutuhan untuk blog dengan tag sangat membantu. dan ini adalah kode sumber terbuka gratis yang bisa kamu unduh untuk kebutuhan project pembuatan website eleventy maupun untuk ngeblog.
INSTALLATION
download node js →
And now let's start the installation, for the beginning because it works with node js then we must and need to download node js first, visit the node site and start downloading then install it on the device you are using, after successful installation we can try to check with open a command prompt or shell terminal by pressing the windows logo and typing cmd , then run the following code then press enter
node -v
you can also check npm version with run npm -v
, and if it displays the version you are using then congratulations you have successfully installed node . then create a working folder on the desktop page or something else, and name it with your work folder, then we move all the open source code that we have downloaded to this new working folder. Next, do the installation using a command prompt shell terminal by entering the following command npm install
, then the installation process will run and the set eleventy text11ty package is ready to use, then it's time to try to run it by entering the following command npm run serve
, visit localhost:8080 from your web browser and congratulations you have successfully installed and started working with this open source code.
Dan sekarang mari kita mulai melakukan installasi, untuk awal karena bekerja dengan node js maka kita wajib dan perlu untuk mengunduh node js terlebih dahulu, kunjungi situs node dan mulai unduh kemudian install pada perangkat yang kamu gunakan ,setelah installasi sukses kita bisa mencoba untuk mengecek dengan membuka command prompt atau shell terminal dengan menekan logo windows dan ketikan cmd , lalu jalankan kode berikut ini kemudian tekan enter node -v, dan jika menampilkan versi yang kamu gunakan maka selamat kamu sudah berhasil melakukan installasi node . selanjutnya buat folder kerja di halaman desktop atau lain nya, dan namai dengan folder kerja mu, lalu kita pindahkan semua kode sumber terbuka yang sudah kita unduh ke folder kerja baru ini. Selanjutnya lakukan installasi dengan menggunakan command prompt shell terminal dengan memasukan perintah berikut ini npm install, maka proses installasi akan dijalankan dan paket set eleventy text11ty ini pun sudah siap digunakan, kemudian saat nya kita mencoba menjalankan nya dengan memasukan perintah berikut ini npm run serve , kunjungi localhost:8080 dari web browser dan selamat kini kamu sudah sukses melakukan installasi dan memulai bekerja dengan kode sumber terbuka ini.
WORK WITH TEXT11TY ELEVENTY
And it's time we start working using it for the needs of building sites and blogs faster and more stable with automatic SEO support using Creating a website with eleventy text11ty specifically for bloggers !!
The first step we need access to the project's open source code, and visit _data/metadata.json open it using a code editor you can use notepad++ or for completeness you can use visual studio code , download code editor now
Notepad ++ Download →
Visual Studio Code Download →
then open the metadata.json file with your code editor. And this area serves to change the title, website description to change the appearance on the main page, with the following information:
Nav for switching nav pages and icon support from font awesome
Content : to replace the existing article content on the main page slider
Contact : to change the contact information in the footer.
Dan saat nya kita memulai bekerja menggunakan nya untuk kebutuhan membangun situs dan blog lebih cepat dan semakin cepat stabil dengan dukungan SEO otomatis nya menggunakan Membuat website dengan eleventy text11ty khusus blogger !!
Langkah awal kita perlu akses ke kode sumber terbuka proyek, dan kunjungi _data/metadata.json buka menggunakan kode editor kamu bisa menggunakan notepad++ atau untuk kelengkapan bisa menggunakan visual studio kode , donwload sekarang dan buka file metadata.json dengan kode editor kamu. Dan pada area ini berfungsi untuk mengganti judul, keterangan website hingga merubah tampilan pada halaman utama, dengan keterangan berikut ini :
Nav untuk mengganti halaman nav dan dukungan icon dari font awesome
Content : untuk mengganti konten artikel yang ada di halaman utama slider
Contact : untuk merubah informasi kontak yang ada pada bagian footer.
CREATE ARTICLE CONTENT
And then your task is to create articles and blog content, so to do this you can access the posts folder and there are several examples of articles that you can easily copy and paste, then just change the name of the link url, and open this markdown file, replace and make changes according to your needs, starting from the article title, description, content and so on then save it to update your blog and website. to delete, just delete the markdown file that you want to delete, and to do editing, just open the article file that you want to change. it's as simple as working with the Static Eleventy Blog Generator Website for bloggers with FULL SEO.
Dan selanjutnya tugas kamu adalah membuat artikel dan konten blog jadi untuk melakukan ini kamu bisa akses ke posts folder dan disana ada beberapa contoh artikel yang bisa dengan mudah kamu lakukan salin dan tempel , lalu tinggal merubah nama url link , dan buka file markdown ini ganti serta lakukan perubahan sesuai kebutuhan mu, mulai dari judul artikel, deskripsi, konten dan lain sebagai nya kemudian simpan untuk melakukan update blog dan website mu. untuk menghapus tinggal hapus saja file markdown yang kamu ingin hapus, dan untuk melakukan editing tinggal buka file artikel yang ingin kamu rubah. se simple itu bekerja dengan Website Blog Generator Static eleventy untuk para blogger dengan FULL SEO .
DEPLOY ON HOSTING
And after making changes to filling in the article content, it's time for us to get our site online, the method is quite easy, you can work using various alternative static site hosting such as firebase, vercel, heroku, surge, netlify and others. and can also use repo integration with your github. so the first step is to make sure you have registered to static hosting then push the _site folder there so that the site can be accessed. and finished already making a blog and web using eleventy super seo and very fast with embedded markdown.
Dan setelah melakukan perubahan hingga mengisi konten artikel maka saat nya kita sekarang online kan situs kita, cara nya cukup mudah saja kamu bisa bekerja menggunakan berbagai alternatif statis site hosting seperti firebase, vercel, heroku , surge ,netlify dan lain lain. dan bisa juga menggunakan integrasi repo dengan github kamu. jadi langkah awal pastikan sudah melakukan regristasi ke statis hosting kemudian push _site folder disana agar situs dapat diakses. dan selesai sudah membuat blog dan web menggunakan eleventy super seo dan sangat cepat dengan markdown tersemat.
BONUS CONTENT :
Mobile11ty build android and website
Bootstrap11ty powerfull blog SEO
Text11ty for blogger
Thisis11ty wordpress thesis inspired
New modern cool11ty
All source code project free download →
Mesin kasir terbaru →