22 Apr 2022
So this template for eleventy 11ty lovers.. yeah... with eleventy we can develope and build modern fast website and blog , no need database, just work with markdown file for create and update an article page or blog post, include auto SEO generate automaticly, so you can just focusing on content and write article, this is beacuse we have inject meta title, description and social card for following your title and description page or blog. Get started now and see how cuteblog concept work.
In home page cuteblog will displaying your lastest article, by default we set on three post, but no need wory you can change how many lastest or new article on your home page, include title, description, date publish and tags. of course with navbar menu on header.
for create new page navbar you can create new folder and name it with your page, then create index.md files and write new page using markdown format.
Example for article post page will displaying like this, in this post you can insert cover image,then write title , description,content article , input tag , publish date and more.. for create new article or update and delete you can visit on posts folder then you can see all sample post in here, just edit with you needed, or create new md.file , you can use combine markdown or html for write post article. and don't forget to save it . and automaticly your blog is displaying your new blog post .
And for page article you can see, this design same like post article so you can fast and easy for create new page article, just create new folder then name it with your page - and create new file index.md markdown format then write your article in here.
How about peformance ?? so let's see peform using lighthouse tester , this cuteblog source code free download is very help you to create and build modern website and blog with complete peform, you no need installing plugin like cms needed, or write code for title, description just write your content and publish it. that's it.. because eleventy cuteblog will be generate automaticly your title,description and social meta.
So let's get started now download and build your modern website using eleventy 11ty
or you can clone this repo with using terminal just run
git clone https://github.com/mesinkasir/cuteblog11ty.git
Contibution with donation for support our team dev make other source code for the world.Buy me a coffee ☕️ ❤️ ✌🏻
Download node and you can install it,after installation success now you need to test node version on your device, so click icon windows on keyboard - then typing cmd, and you can see command prompt / shell bash terminal , now you can run command
node -vif node displaying node version congratulation you have success installing node on your device, you can check npm version too with run command
Oke now we need code editor beacuse we work with code editor, so download visual code studio → , and install on your devices. now we ready to run this source code template project. Oke for first you can create new folder and name it with cuteblog then extract sourcecode project on desktop/cuteblog folder . then open shell terminal or command prompt, and run this command
cd C:\Users\pcname\Desktop\New folder- change pc name with your pc name, and now we can work using node, now you can run
npm installthen you can run cuteblog with command
npm start- open web browser like mozzila or google chrome and visit
localhost:8080. congratulations you have installing cuteblog on your devices.
For first you can open cuteblog project using code editor, or you can run using node shell terminal with run command
now you can see all source code will displaying on your visual code studio, this time to get started a codding.......
Oke now you can open _data folder then you can see metadata.json files, just click on metadata.json file and edit title, description and cover with your title and description website blog, then save it for setting your default SEO .
Write content and create article update edit delete post, for delete post you can open posts folder and just delete article you need to delete, for edit and update just click on article then edit content title description cover and others. for create new post you need to create new file and name it with your article.md , remember we use md files so you need to insert .md for all article post blog.
Or for simply you can just copy article and paste it, then edit with you needed.
Create a new page : for create new page you need create new folder, name it the folder with your page, and create new file name it with index.md then edit this file, you can copy and paste format md on post article with .md files.
Post and page Structure
title: Insert title blog or page
description: This is description page and blog
cover: insert url image cover here
tags: insert tag here
layout: layouts/post.njk # this is by default
now you can write article in here using markdown file
Example markdown format
H1 use #
H2 use ##
H3 use ###
H4 use ####
H5 use #####
UL and LI or list use + or you can use -
Image use ![alt image](insert url image)
Link use [this is text for link](insert url link)
Or you can run this source code live codding here..
run live codding and change any code with you needed to see how cuteblog work.
cuteblog template source code for other technology project you can download it here
Cuteblog for Astro
Cuteblog for Pico with admin area
All project we build using eleventy 11ty you can download it free too...
Mobile11ty build android and website
Bootstrap11ty powerfull blog SEO
Text11ty for blogger
Thisis11ty wordpress thesis inspired
New modern cool11ty
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 CONTENT !!
Mesin kasir terbaru →
All source code project free download gratis →
Oke we hope this project help you for build modern website and blog using static site generator, and happy codding !!