Jekyll 2 - Walk through build blog site.
Prerequisite: This post assumes you have already a website built using Jekyll template.
Page structure
highlighted are used specifically for posts.)
Root Folder
assets
css
images
js
blog
index.html
_data
_includes
_layouts
_posts
_sass
index.html
about.md
Posts list page - “blog/index.html”
---
layout: default
title: BLOG
---
<h1>Latest Posts</h1>
<ul class="blog__container">
{% for post in site.posts %}
<li>
<h3><a href="{{ post.url }}">{{ post.title }}</a><span> | {{ post.date | date_to_string }}</span></h3>
<span>{{ post.excerpt }}</span>
</li>
{% endfor %}
</ul>
Create post layout page “_layouts/post.html”
The layout file will be use for all posts.
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="post__author__date">{{ page.author }}, {{ page.date | date_to_string }}</p>
{{ content }}
Create .md files in folder “_posts”
File name follows the pattern “2025-01-1-filename.md”.
---
layout: post
author: my name
title: this is my first post.
excerpt: My first post summary.
---
# Welcome to my blog.
***Helo world=***, this is my first blog post.
Final result
- Build and run Jekyll: “jekyll serve”;
- Go to “http://localhost:4000/blog”;
- Posts are listed in the page;
- Click the link to one post to open the post page.