Tokyo Theme Post Creation

Creating blog posts in the Tokyo theme is straightforward. This guide explains how to create, format, and manage your blog posts effectively.

Post File Location

All blog posts are stored in the _posts/ folder. Each post is a separate Markdown file.

Post File Naming Convention

Jekyll requires a specific naming convention for post files:

Format: YYYY-MM-DD-post-title.md

Examples:

2026-01-20-getting-started-with-jekyll.md
2026-01-21-web-development-tips.md
2026-01-22-photography-techniques.md

Important:

Date must be in YYYY-MM-DD format
Use hyphens instead of spaces in the title
Use lowercase letters
Keep the title descriptive but concise

Post Front Matter

Every post must begin with front matter enclosed in triple dashes:

---
layout: post
title: "Your Post Title"
date: 2026-01-20 10:00:00 +0600
post_image: /assets/img/news/1.jpg
tags: [tag1, tag2, tag3]
categories: [category-name]
author_id: 1
comments: true
excerpt: "Brief description of your post..."
---

Front Matter Fields Explained

Required Fields:

layout: Must be “post” for blog posts
title: The title of your post
date: Publication date and time in ISO 8601 format

Optional Fields:

post_image: Path to featured image
tags: Array of tags for categorization
categories: Array of categories
author_id: Link to author profile
comments: Enable/disable comments (true/false)
excerpt: Short description for post cards

Creating Your First Post

Step 1: Create the File

Create a new file in the _posts/ folder:

File: _posts/2026-01-20-my-first-post.md

Step 2: Add Front Matter

---
layout: post
title: "My First Blog Post"
date: 2026-01-20 10:00:00 +0600
post_image: /assets/img/news/1.jpg
tags: [Tutorial, Jekyll, Web Development]
categories: [Tutorials]
author_id: 1
comments: true
excerpt: "Learn how to create your first blog post with the Tokyo Jekyll theme."
---

Step 3: Add Post Content

# My First Blog Post

Welcome to my first blog post! In this post, I'll share some tips about creating content with Jekyll.

## Introduction

Jekyll is a powerful static site generator that makes it easy to create blogs and websites.

## Getting Started

To get started with Jekyll, you need to:

1. Install Ruby
2. Install Jekyll
3. Create your first post
4. Build and serve your site

## Conclusion

That's it! You've created your first blog post.

Step 4: Save and Test

Save the file
Refresh your browser
Navigate to the News section
Your post should appear

Post Content Formatting

Headings

Use Markdown headings:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Paragraphs

Separate paragraphs with blank lines:

This is the first paragraph.

This is the second paragraph.

Text Formatting

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~

Links

Link text
Link with title

Images

!Alt text

Lists

Unordered Lists:

- Item 1
- Item 2
  - Nested item
  - Another nested item
- Item 3

Ordered Lists:

First item
Second item
Third item

Code Blocks

Inline Code:

Use `code` for inline code.

Code Blocks:

```javascript
function hello() {
    console.log("Hello, World!");
}
```

Blockquotes

> This is a blockquote.
> It can span multiple lines.

Tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Post Images

Featured Image

Set the featured image in front matter:

post_image: /assets/img/news/1.jpg

Inline Images

Add images within your post content:

!Image description

Image Best Practices

Optimize images: Compress before uploading
Use descriptive alt text: For accessibility
Consistent sizing: Maintain aspect ratios
Web format: Use JPG, PNG, or WebP
Proper folders: Organize in assets/img/

Image Storage

Organize your post images:

assets/
└── img/
    ├── news/
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   └── 3.jpg
    └── posts/
        ├── tutorial-1.jpg
        └── tutorial-2.jpg

Post Categories and Tags

Category and Tag Pages

The theme includes category and tag pages at:

Categories: /category/category-name/
Tags: /tag/tag-name/

Post Excerpts

Manual Excerpt

Define a custom excerpt in front matter:

excerpt: "This is a custom excerpt that will appear on post cards."

Automatic Excerpt

If no excerpt is defined, Jekyll uses the first paragraph as the excerpt.

Excerpt Separator

Use a custom separator in front matter:

excerpt_separator: <!--more-->

This is the excerpt.

<!--more-->

This is the rest of the post content.

Post Author Assignment

Assign Author to Post

Add the author_id field:

author_id: 1

The author_id must match an author profile in _authors/.

Multiple Authors

For posts with multiple authors, you can:

Use the primary author:
```
author_id: 1
```

Mention co-authors in content:

This post was written by John Doe with contributions from Jane Smith.

Post Comments

Enable Comments

comments: true

Disable Comments

comments: false

Comment Systems

The Tokyo theme supports various comment systems:

Disqus:

Add Disqus shortname to _config.yml
Configure Disqus in the post layout

Other Systems:

Utterances
Isso
Staticman
Custom comment systems

Post Publication

Scheduled Posts

Set a future date to schedule posts:

date: 2026-02-01 10:00:00 +0600

The post will appear automatically on that date.

Draft Posts

Add published: false to keep posts as drafts:

---
layout: post
title: "Draft Post"
date: 2026-01-20 10:00:00 +0600
published: false
---

Draft posts won’t appear on the site.

Future Posts

Posts with future dates won’t appear until that date:

date: 2026-12-31 10:00:00 +0600

Post Examples

Example 1: Tutorial Post

File: _posts/2026-01-20-getting-started-with-jekyll.md

---
layout: post
title: "Getting Started with Jekyll"
date: 2026-01-20 10:00:00 +0600
post_image: /assets/img/news/jekyll.jpg
tags: [Jekyll, Tutorial, Web Development]
categories: [Tutorials]
author_id: 1
comments: true
excerpt: "Learn how to set up your first Jekyll site and start creating static websites."
---

# Getting Started with Jekyll

Jekyll is a powerful static site generator that's perfect for blogs and portfolios.

## What is Jekyll?

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.

## Installation

To install Jekyll, run:

```bash
gem install jekyll bundler

Creating Your First Site

Create a new directory
Initialize Jekyll
Start the server

jekyll new my-site
cd my-site
bundle exec jekyll serve

Conclusion

That’s it! You now have a Jekyll site running locally.

### Example 2: Photography Post

**File:** `_posts/2026-01-21-photography-tips.md`

```markdown
---
layout: post
title: "10 Photography Tips for Beginners"
date: 2026-01-21 14:00:00 +0600
post_image: /assets/img/news/photography.jpg
tags: [Photography, Tips, Tutorial]
categories: [Photography]
author_id: 2
comments: true
excerpt: "Master the basics of photography with these essential tips for beginners."
---

# 10 Photography Tips for Beginners

Photography is an art form that anyone can learn with practice and patience.

## 1. Understand Your Camera

Read your camera manual and understand the basic settings.

!Camera settings

## 2. Learn the Rule of Thirds

The rule of thirds is a fundamental composition technique.

## 3. Use Natural Light

Natural light is often the best light for photography.

## 4. Practice Regularly

The more you practice, the better you'll become.

## Conclusion

Start with these basics and gradually improve your skills.

Example 3: Web Development Post

File: _posts/2026-01-22-modern-css-techniques.md

---
layout: post
title: "Modern CSS Techniques You Should Know"
date: 2026-01-22 09:00:00 +0600
post_image: /assets/img/news/css.jpg
tags: [CSS, Web Development, Tutorial]
categories: [Web Development]
author_id: 1
comments: true
excerpt: "Explore modern CSS techniques that will take your web development skills to the next level."
---

# Modern CSS Techniques You Should Know

CSS has evolved significantly over the years. Here are some modern techniques.

## CSS Grid

CSS Grid is a powerful layout system:

```css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

CSS Flexbox

Flexbox makes it easy to align items:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS Variables

Use custom properties for reusable values:

:root {
    --primary-color: #007bff;
}

.button {
    background: var(--primary-color);
}

Conclusion

These modern CSS techniques will help you build better websites.

## Post Management Best Practices

1. **Consistent formatting:** Use consistent front matter and formatting
2. **Descriptive titles:** Make titles clear and engaging
3. **Quality images:** Use high-quality, optimized images
4. **Proper categorization:** Use relevant categories and tags
5. **Engaging excerpts:** Write compelling excerpts for post cards
6. **Regular publishing:** Maintain a consistent posting schedule
7. **Proofread content:** Check for errors before publishing
8. **SEO friendly:** Use keywords in titles and content

## Troubleshooting

### Post not appearing

**Solution:**
- Check file name format (YYYY-MM-DD-title.md)
- Verify front matter is properly formatted
- Ensure post is in `_posts/` folder
- Check if post is a draft (published: false)

### Images not loading

**Solution:**
- Verify image paths are correct
- Check that images exist in specified folders
- Ensure image file permissions are correct
- Test image URLs directly in browser

### Date not displaying correctly

**Solution:**
- Verify date format (YYYY-MM-DD HH:MM:SS +TZ)
- Check timezone is correct
- Ensure date is in valid ISO 8601 format

### Author not showing

**Solution:**
- Verify `author_id` matches author profile
- Check author file exists in _authors/
- Ensure author profile has correct layout

### Comments not working

**Solution:**
- Verify comments are enabled (comments: true)
- Check comment system configuration
- Ensure comment system is properly integrated

## Advanced Post Features

### Post Series

Create a series of related posts:

```yaml
series: "Jekyll Tutorial"
series_part: 1

Reading Time

Add estimated reading time:

reading_time: 5 minutes

Display related posts based on tags or categories:

  
    <a href="/tokyo-theme-installation-setup/">Tokyo Theme Installation and Setup</a>
  
    <a href="/tokyo-theme-deployment/">Tokyo Theme Deployment</a>
  
    <a href="/tokyo-post-creation/">Tokyo Theme Post Creation</a>
  
    <a href="/tokyo-portfolio-configuration/">Tokyo Theme Portfolio Configuration</a>
  
    <a href="/tokyo-navigation-setup/">Tokyo Theme Navigation Setup</a>
  
    <a href="/tokyo-layout-structure-customization/">Tokyo Theme Layout Structure and Customization</a>
  
    <a href="/tokyo-content-sections-customization/">Tokyo Theme Content Sections Customization</a>
  
    <a href="/tokyo-color-scheme-customization/">Tokyo Theme Color Scheme Customization</a>
  
    <a href="/tokyo-author-management/">Tokyo Theme Author Management</a>
  
    <a href="/jekyll-category-tags-not-working/">Jekyll Category & Tags Not Working</a>
  
    <a href="/jekyll-add-authors/">How to Add Authors to Your Theme</a>
  
    <a href="/jekyll-add-mailchimp-account-in-config/">How to add my mailchimp account?</a>

Generate a table of contents:

The Tokyo theme makes it easy to create beautiful blog posts. Follow these guidelines to create engaging content for your readers.

Search Documentation

Tokyo Theme Post Creation

Table of Contents

Post File Location

Post File Naming Convention

Post Front Matter

Front Matter Fields Explained

Creating Your First Post

Step 1: Create the File

Step 2: Add Front Matter

Step 3: Add Post Content

Step 4: Save and Test

Post Content Formatting

Headings

Paragraphs

Text Formatting

Links

Images

Lists

Code Blocks

Blockquotes

Tables

Post Images

Featured Image

Inline Images

Image Best Practices

Image Storage

Post Categories and Tags

Categories

Tags

Category and Tag Pages

Post Excerpts

Manual Excerpt

Automatic Excerpt

Excerpt Separator

Post Author Assignment

Assign Author to Post

Multiple Authors

Post Comments

Enable Comments

Disable Comments

Comment Systems

Post Publication

Scheduled Posts

Draft Posts

Future Posts

Post Examples

Example 1: Tutorial Post

Creating Your First Site

Conclusion

Example 3: Web Development Post

CSS Flexbox

CSS Variables

Conclusion

Reading Time

Related Posts

Table of Contents