Find answers, guides, and tutorials instantly
Press Esc to close or Enter to search
Tokyo Jekyll Theme docs: setup, configuration, and tips for a fast, modern Jekyll-powered website.
Complete documentation guide
Getting started with the Tokyo Jekyll Theme is straightforward. This guide will walk you through the installation and initial setup process.
Before installing the Tokyo theme, ensure you have the following installed on your system:
gem install bundlergit clone https://github.com/yourusername/jekyll-tokyo.git
cd jekyll-tokyo
bundle install
bundle exec jekyll serve
http://localhost:4000 to view your site.bundle install
bundle exec jekyll serve
After installation, you’ll need to configure the basic settings in _config.yml
Open _config.yml and update the following:
# Site settings
title: "Your Portfolio Name"
email: "your@email.com"
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site
logo: /assets/images/header-brand.png
description: "Your portfolio description"
keywords: "jekyll, portfolio, creative, photography"
Configure your social media profiles:
mailchimp: "https://your-mailchimp-form-url"
facebook: https://facebook.com/yourprofile
instagram: https://instagram.com/yourprofile
twitter: https://twitter.com/yourprofile
Understanding the Tokyo theme structure will help you customize it effectively:
jekyll-tokyo/
├── _config.yml # Main configuration file
├── _data/ # Data files
│ ├── navigation.yml # Menu navigation
│ ├── portfolio.yml # Portfolio items
│ └── site_data.yml # Site content data
├── _includes/ # Reusable components
│ ├── tk-left-part.html # Left sidebar
│ └── right-parts/ # Right section components
├── _layouts/ # Page layouts
├── _posts/ # Blog posts
├── _authors/ # Author profiles
├── assets/ # Static assets
│ ├── css/ # Stylesheets
│ ├── js/ # JavaScript files
│ └── img/ # Images
├── index.html # Homepage
└── intro.html # Intro page
To ensure everything is installed correctly:
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
Solution:
# Update Ruby gems
gem update --system
# Clear bundler cache
rm -rf .bundle
bundle install
Solution:
# Use a different port
bundle exec jekyll serve --port 4001
Solution:
_data/site_data.ymlassets/img/ folderbaseurl setting in _config.ymlAfter successful installation:
_data/site_data.yml_data/portfolio.yml_data/navigation.yml_posts/ folderassets/css/colors.cssIf you encounter any issues during installation:
Your Tokyo theme is now ready for customization!
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Loading content...
Deploying your Tokyo Jekyll theme is the final step to make your portfolio live on the internet. This guide covers the most popular deployment methods and best practices.
Before deploying, ensure your site is ready:
# Start local server
bundle exec jekyll serve
# Visit http://localhost:4000
# Test all pages and functionality
# Build for production
bundle exec jekyll build
# Check the _site folder
# This contains your built site
Check _config.yml:
title: "Your Portfolio Name"
baseurl: "" # Leave empty for root deployment
url: "https://yourdomain.com" # Your final URL
GitHub Pages is perfect for beginners and offers free hosting.
yourusername.github.io (for user pages) or any name (for project pages)# Initialize git
git init
# Add all files
git add .
# Commit changes
git commit -m "Initial commit"
# Add remote
git remote add origin https://github.com/yourusername/your-repo.git
# Push to GitHub
git push -u origin main
main or master)/ for root or /docs)If using a project repository (not user.github.io):
# _config.yml
baseurl: "/your-repo-name"
url: "https://yourusername.github.io"
Create .github/workflows/jekyll.yml:
name: Jekyll site CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: ruby/setup-ruby@v1
with:
ruby-version: '3.0'
bundler-cache: true
- run: bundle exec jekyll build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: $
publish_dir: ./_site
Netlify offers more features and easier deployment.
# Build your site locally
bundle exec jekyll build
Build command: bundle exec jekyll build
Publish directory: _site
Create netlify.toml:
[build]
command = "bundle exec jekyll build"
publish = "_site"
[build.environment]
RUBY_VERSION = "3.0"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Vercel is excellent for modern development workflows.
npm install -g vercel
# Navigate to your project
cd /path/to/jekyll-tokyo
# Deploy
vercel
# Follow the prompts
Create vercel.json:
{
"buildCommand": "bundle exec jekyll build",
"outputDirectory": "_site",
"devCommand": "bundle exec jekyll serve"
}
# Add custom domain
vercel domains add yourdomain.com
For complete control, deploy manually.
bundle exec jekyll build
Upload the contents of _site folder to your web server via:
Apache (.htaccess):
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Nginx:
location / {
try_files $uri $uri/ /index.html;
}
Cloudflare Pages offers fast global CDN.
Build command: bundle exec jekyll build
Build output directory: _site
Click “Save and Deploy”
Buy a domain from:
Add DNS records to your domain provider:
Type: A
Name: @
Value: Your hosting IP
Type: CNAME
Name: www
Value: Your hosting domain
Add your custom domain in your hosting platform’s settings.
Enable SSL/TLS certificates for secure connections.
Netlify:
JEKYLL_ENV: productionBASEURL: (if needed)Vercel:
vercel env add JEKYLL_ENV production
GitHub Actions: Add to repository secrets:
Add to .htaccess (Apache):
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
Minify CSS and JavaScript:
Update _config.yml:
title: "Your Portfolio Name"
description: "Your portfolio description"
keywords: "portfolio, web development, photography"
url: "https://yourdomain.com"
The theme includes jekyll-seo-tag plugin which automatically generates sitemaps.
Create robots.txt:
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml
Add to _includes/head.html:
<meta property="og:title" content="Tokyo Theme Deployment">
<meta property="og:description" content="<p>Deploying your Tokyo Jekyll theme is the final step to make your portfolio live on the internet. This guide covers the most popular deployment methods and best practices.</p>
">
<meta property="og:image" content="/assets/images/themeix-logo.svg">
<meta property="og:url" content="https://support.themeix.com/tokyo-theme-deployment/">
<meta property="og:type" content="website">
Always enable HTTPS:
Add security headers:
<IfModule mod_headers.c>
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"
Header set X-XSS-Protection "1; mode=block"
</IfModule>
Create .gitignore:
.DS_Store
.env
*.log
_site
.sass-cache
.jekyll-cache
.jekyll-metadata
Add to _includes/head.html:
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
Use services like:
Use services like:
Problem: Site won’t build
Solution:
# Test locally first
bundle exec jekyll build
# Check for errors
# Verify dependencies
bundle install
# Clear cache
rm -rf .jekyll-cache
rm -rf _site
Problem: Images/CSS not loading
Solution:
baseurl settingProblem: Custom domain not working
Solution:
dig or nslookupProblem: Pages returning 404
Solution:
Before going live:
Always use Git:
git add .
git commit -m "Backup before deployment"
git push origin main
If using a database (not typical for Jekyll), regular backups are essential.
Regularly backup:
_posts/ folder_data/ folder_authors/ folderassets/img/ foldergem update jekyllbundle update| Platform | Best For | Cost | Features |
|---|---|---|---|
| GitHub Pages | Beginners, simple sites | Free | Basic, easy setup |
| Netlify | Most users | Free tier available | Advanced features, easy |
| Vercel | Modern developers | Free tier available | Fast, modern tools |
| Cloudflare Pages | Global CDN | Free | Fast, secure |
| Manual | Complete control | Varies | Full control |
Deploying your Tokyo theme is straightforward with the right platform. Choose based on your needs:
Remember to test thoroughly, monitor your site after deployment, and keep regular backups.
For more detailed guides on specific platforms, check their official documentation:
The Tokyo Jekyll Theme features a unique split-layout design with a fixed left sidebar and scrollable right content area. This guide explains the layout structure and how to customize it.
The Tokyo theme uses a two-column layout:
tk-left-part.html Fixed navigation and branding┌─────────────────────────────────────────┐
│ LEFT SIDEBAR (Fixed) │
│ ┌─────────────────────────────────┐ │
│ │ Logo │ │
│ │ Navigation Menu │ │
│ │ Copyright │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ RIGHT CONTENT (Scrollable) │
│ ┌─────────────────────────────────┐ │
│ │ Home Section │ │
│ ├─────────────────────────────────┤ │
│ │ About Section │ │
│ ├─────────────────────────────────┤ │
│ │ Portfolio Section │ │
│ ├─────────────────────────────────┤ │
│ │ News/Blog Section │ │
│ ├─────────────────────────────────┤ │
│ │ Contact Section │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────────┘
The left sidebar is defined in _includes/tk-left-part.html
Update the logo images:
<div class="logo">
<a href="/">
<img class="logo-dark" src="/assets/img/logo/dark.png" alt="Themeix Documentation Website" />
<img class="logo-light" src="/assets/img/logo/logo.png" alt="Themeix Documentation Website" />
</a>
</div>
To customize:
assets/img/logo/alt text for accessibilityThe navigation is dynamically generated from _data/navigation.yml
To customize:
_data/navigation.ymlactive classUpdate the copyright information:
<div class="copyright">
<p>
© 2026 Themeix Documentation Website<br>
Created by <a href="https://themeix.com" target="_blank" rel="nofollow">Themeix</a>
</p>
</div>
To customize:
Each section is a separate include file in _includes/right-parts/
File: _includes/right-parts/tk-home.html
The home section displays your profile information:
<div id="home" class="tokyo_tm_section active">
<div class="container">
<div class="tokyo_tm_home">
<div class="home_content">
<div class="avatar">
<div class="image" data-img-url=""></div>
</div>
<div class="details">
<h3 class="name"></h3>
<p class="job"></p>
<div class="social">
<!-- Social media links -->
</div>
</div>
</div>
</div>
</div>
</div>
Customization options:
_data/site_data.ymlFile: _includes/right-parts/tk-about.html
The about section includes personal information and skills:
Main About Display:
Modal Box (Click “Learn More”):
To customize the about section:
_data/site_data.yml under the about keyFile: _includes/right-parts/tk-portfolio.html
The portfolio section displays your work with filtering:
Features:
To customize:
_data/portfolio.yml_data/site_data.ymlFile: _includes/right-parts/tk-news.html
The news section displays blog posts from the _posts/ folder.
To customize:
_posts/ folder_includes/post-card.htmlFile: _includes/right-parts/tk-contact.html
The contact section provides a way for visitors to reach you.
To customize:
The theme includes several layout files in _layouts/:
File: _layouts/default.html
The base layout that wraps all pages with the left sidebar and right content structure.
File: _layouts/post.html
Used for individual blog posts with:
File: _layouts/author.html
Displays author profile pages with:
Files: _layouts/category.html, _layouts/tag.html
Display posts grouped by category or tag.
To change the order of sections on your page:
index.htmlExample:
<!-- Current order -->
{% include right-parts/tk-home.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}
<!-- Reorder as needed -->
{% include right-parts/tk-home.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}
To add a new section:
_includes/right-parts/tokyo_tm_section classindex.html_data/navigation.ymlExample:
<!-- _includes/right-parts/tk-services.html -->
<div id="services" class="tokyo_tm_section">
<div class="container">
<div class="tokyo_tm_services">
<!-- Your services content -->
</div>
</div>
</div>
The layout is fully responsive:
_data/ files for easy editingSolution:
_includes/right-parts/index.htmlSolution:
assets/css/style.cssSolution:
_data/)The Tokyo theme’s modular structure makes it easy to customize while maintaining a clean, organized codebase.
The Tokyo theme’s content is managed through data files in the _data/ directory. This guide explains how to customize each section’s content.
All main content is stored in _data/site_data.yml. This file contains data for all major sections of your site.
home: # Home section data
about: # About section data
portfolio: # Portfolio section data
news: # News section data
contact: # Contact section data
The home section displays your profile information and social links.
_data/site_data.ymlhome:
profile_name: ADRIANO <span>SMITH</span>
profile_img: "/assets/img/slider/1.jpg"
bio: "Creative Photographer based in New York and happy to travel all over Europe to capture photos."
social:
facebook: "http://facebook.com"
twitter: "http://twitter.com"
instagram: "http://instagram.com"
dribbble: "http://dribble.com"
tiktok: "http://tiktok.com"
Profile Name:
<span> for different colors)Profile Image:
assets/img/slider/ or custom folderBio/Description:
Social Links:
home:
profile_name: JOHN <span>DOE</span>
profile_img: "/assets/img/profile/my-photo.jpg"
bio: "Full-stack developer passionate about creating beautiful web experiences."
social:
facebook: "https://facebook.com/johndoe"
twitter: "https://twitter.com/johndoe"
instagram: "https://instagram.com/johndoe"
dribbble: "https://dribbble.com/johndoe"
tiktok: "https://tiktok.com/@johndoe"
linkedin: "https://linkedin.com/in/johndoe" # Custom addition
The about section includes personal information, skills, and statistics.
_data/site_data.ymlabout:
title: "Adriano Smith & <span>Photographer</span>"
description: "Hello, I am a creative photographer based in New York and happy to travel all over Europe to capture your big day in candid and authentic photos. I will create a lasting memory of the people."
img_src: "/assets/img/slider/1.jpg"
learn_more: Learn More
lm_url: #
birthday: "01.07.1990"
age: 31
address: Ave 11, New York, USA
email: mail@gmail.com
phone: +77 022 177 05 05
study: Univercity of Texas
freelance: Available
photography:
- title: Wedding Photography
expertise: 95
- title: Lifestyle Photography
expertise: 85
- title: Family Photography
expertise: 90
languages:
- title: English
expertise: 95
- title: Japanese
expertise: 85
- title: Arabic
expertise: 90
project_completed: 777+
happy_clients: 3k+
lines_of_code: 9k+
our_partners:
- name: one
img_src: "/assets/img/partners/1.png"
url: #
# ... more partners
Basic Information:
title: About section heading with HTML supportdescription: Detailed about text (2-3 paragraphs)img_src: Profile image pathlearn_more: Button textlm_url: Button link destinationPersonal Details:
birthday: Date format: DD.MM.YYYYage: Current ageaddress: Full addressemail: Contact emailphone: Phone number with country codestudy: Education/degreefreelance: Availability status (Available/Busy/etc.)Skills (Photography/Languages):
title: Skill nameexpertise: Percentage (0-100)Statistics:
project_completed: Number of completed projectshappy_clients: Number of satisfied clientslines_of_code: Any metric relevant to your fieldPartners/Clients:
name: Partner nameimg_src: Logo image pathurl: Partner website linkabout:
title: "John Doe & <span>Web Developer</span>"
description: "I'm a passionate web developer with 5+ years of experience creating modern, responsive websites. I specialize in JavaScript frameworks and love turning complex problems into simple, beautiful solutions."
img_src: "/assets/img/about/profile.jpg"
learn_more: View Resume
lm_url: "/resume"
birthday: "15.03.1992"
age: 32
address: 123 Main St, San Francisco, CA
email: john@example.com
phone: +1 555 123 4567
study: Stanford University
freelance: Available for Projects
photography:
- title: Frontend Development
expertise: 95
- title: Backend Development
expertise: 85
- title: UI/UX Design
expertise: 75
languages:
- title: JavaScript
expertise: 95
- title: Python
expertise: 80
- title: PHP
expertise: 70
project_completed: 150+
happy_clients: 50+
lines_of_code: 100k+
our_partners:
- name: Google
img_src: "/assets/img/partners/google.png"
url: https://google.com
- name: Microsoft
img_src: "/assets/img/partners/microsoft.png"
url: https://microsoft.com
The portfolio section is managed separately in _data/portfolio.yml.
_data/portfolio.yml- name: Joss Butler
img_src: /assets/img/portfolio/1.jpg
project_url: https://vimeo.com/312334044
filter_classes: 'vimeo'
cat: Vimeo
- name: Ross Taylor
img_src: /assets/img/portfolio/2.jpg
project_url: https://www.youtube.com/watch?v=Amq-qlqbjYA
filter_classes: 'youtube'
cat: YouTube
- name: David Smith
img_src: /assets/img/portfolio/3.jpg
project_url: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
filter_classes: 'soundcloud'
cat: SoundCloud
- name: Kiron Polard
img_src: /assets/img/portfolio/4.jpg
project_url: /assets/img/portfolio/3.jpg
filter_classes: 'image'
cat: Image
Portfolio Item Properties:
name: Project titleimg_src: Thumbnail image pathproject_url: Link to project (video URL, image path, or website)filter_classes: Category for filtering (vimeo, youtube, soundcloud, image)cat: Display category nameSupported Media Types:
filter_classes: 'vimeo'
project_url: https://vimeo.com/VIDEO_ID
filter_classes: 'youtube'
project_url: https://www.youtube.com/watch?v=VIDEO_ID
filter_classes: 'soundcloud'
project_url: https://w.soundcloud.com/player/?url=TRACK_URL
filter_classes: 'image'
project_url: /path/to/full-size-image.jpg
- name: E-Commerce Website
img_src: /assets/img/portfolio/ecommerce.jpg
project_url: https://example-project.com
filter_classes: 'image'
cat: Web Design
- name: Mobile App Demo
img_src: /assets/img/portfolio/mobile-app.jpg
project_url: https://www.youtube.com/watch?v=dQw4w9WgXcQ
filter_classes: 'youtube'
cat: App Development
- name: Brand Identity
img_src: /assets/img/portfolio/branding.jpg
project_url: /assets/img/portfolio/branding-full.jpg
filter_classes: 'image'
cat: Branding
- name: Photography Portfolio
img_src: /assets/img/portfolio/photo.jpg
project_url: https://vimeo.com/123456789
filter_classes: 'vimeo'
cat: Photography
The news section displays blog posts from the _posts/ folder.
_data/site_data.ymlnews:
title: Latest News
Create new posts in the _posts/ folder with the following format:
File Naming: YYYY-MM-DD-post-title.md
Example: 2026-01-20-my-first-post.md
Post Front Matter:
---
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..."
---
layout: Use “post” for blog poststitle: Post titledate: Publication date and timepost_image: Featured image pathtags: Array of tagscategories: Array of categoriesauthor_id: Link to author profilecomments: Enable/disable commentsexcerpt: Short description for post cards---
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 static site generator that's perfect for blogs and portfolios. In this post, we'll cover...
[Your post content here]
The contact section configuration in _data/site_data.yml:
contact:
title: Get in Touch
Title: Contact section heading
Additional Contact Information:
You can add more fields to the contact section by modifying the include file _includes/right-parts/tk-contact.html.
The contact form typically uses a service like Formspree or Netlify Forms. To configure:
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
<!-- Form fields -->
</form>
<form name="contact" method="POST" data-netlify="true">
<!-- Form fields -->
</form>
To add a new content section:
_data/site_data.yml:
custom_section:
title: "Custom Section"
description: "Your custom content"
# Add more fields as needed
_includes/right-parts/:
<div id="custom" class="tokyo_tm_section">
<div class="container">
<h3></h3>
<p></p>
</div>
</div>
index.html:
include right-parts/tk-custom.html
_data/navigation.yml:
```yaml
Solution:
Solution:
Solution:
filter_classes values match filter buttonsSolution:
_posts/ folderThe Tokyo theme’s data-driven approach makes it easy to customize content without touching any code. Simply update the YAML files and your changes will be reflected immediately.
The Tokyo Jekyll Theme offers flexible color customization options. This guide explains how to modify the color scheme to match your brand identity.
The theme’s colors are managed in several CSS files:
assets/css/colors.css - Main color variablesassets/css/dark.css - Dark mode specific colorsassets/css/style.css - Global stylesOpen assets/css/colors.css to view and modify the main color variables:
:root {
/* Primary Colors */
--primary-color: #f75023;
--primary-color-hover: #d63500;
/* Text Colors */
--text-color: #767676;
--heading-color: #000;
/* Background Colors */
--bg-color: #fff;
--bg-secondary: #f9f9f9;
/* Border Colors */
--border-color: #e5e5e5;
/* Social Media Colors */
--facebook-color: #3b5998;
--twitter-color: #1da1f2;
--instagram-color: #e1306c;
--dribbble-color: #ea4c89;
--tiktok-color: #000000;
}
The primary color is used throughout the theme for:
To change the primary color:
:root {
--primary-color: #your-color-here;
--primary-color-hover: #your-hover-color-here;
}
Example - Blue Theme:
:root {
--primary-color: #007bff;
--primary-color-hover: #0056b3;
}
Example - Green Theme:
:root {
--primary-color: #28a745;
--primary-color-hover: #1e7e34;
}
Example - Purple Theme:
:root {
--primary-color: #6f42c1;
--primary-color-hover: #5a32a3;
}
:root {
--heading-color: #000; /* Main headings */
}
:root {
--text-color: #767676; /* Body text */
}
You can add custom text color variables:
:root {
--text-color: #767676;
--text-color-light: #999;
--text-color-dark: #333;
}
:root {
--bg-color: #fff; /* Main background */
}
:root {
--bg-secondary: #f9f9f9; /* Secondary sections */
}
:root {
--bg-color: #fff;
--bg-secondary: #f9f9f9;
--bg-dark: #1a1a1a;
--bg-light: #f5f5f5;
}
The Tokyo theme includes a dark mode feature. Dark mode colors are defined in assets/css/dark.css.
.dark {
--primary-color: #f75023;
--primary-color-hover: #d63500;
--text-color: #a0a0a0;
--heading-color: #fff;
--bg-color: #1a1a1a;
--bg-secondary: #252525;
--border-color: #333;
}
To create a custom dark mode color scheme:
.dark {
--primary-color: #f75023;
--primary-color-hover: #d63500;
--text-color: #b0b0b0;
--heading-color: #ffffff;
--bg-color: #0d0d0d;
--bg-secondary: #1a1a1a;
--border-color: #2a2a2a;
}
The navigation colors are controlled by CSS classes. To customize:
/* Navigation Links */
.menu ul li a {
color: #000;
}
.menu ul li.active a {
color: var(--primary-color);
}
.menu ul li a:hover {
color: var(--primary-color);
}
Portfolio item hover effects:
.portfolio_list li .inner .entry:hover {
background-color: var(--primary-color);
}
.portfolio_list li .inner .entry:hover h3,
.portfolio_list li .inner .entry:hover span {
color: #fff;
}
Primary button styling:
.tokyo_tm_button a {
background-color: var(--primary-color);
color: #fff;
}
.tokyo_tm_button a:hover {
background-color: var(--primary-color-hover);
}
Create a new CSS file for your custom color scheme:
File: assets/css/custom-colors.css
:root {
/* Custom Color Scheme */
--primary-color: #e91e63;
--primary-color-hover: #c2185b;
--text-color: #666;
--heading-color: #222;
--bg-color: #fafafa;
--bg-secondary: #f0f0f0;
--border-color: #ddd;
}
Then include it in your layout:
<link rel="stylesheet" href="/assets/css/custom-colors.css">
Create multiple theme options:
Light Theme (default):
:root {
--primary-color: #f75023;
--bg-color: #fff;
--text-color: #767676;
}
Dark Theme:
.dark-mode {
--primary-color: #f75023;
--bg-color: #1a1a1a;
--text-color: #a0a0a0;
}
Blue Theme:
.blue-theme {
--primary-color: #007bff;
--primary-color-hover: #0056b3;
}
Apply theme classes to the body:
<body class="blue-theme">
The theme may use gradients for certain elements. To customize:
/* Gradient Background */
.gradient-bg {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
}
/* Gradient Text */
.gradient-text {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Customize social media brand colors:
:root {
--facebook-color: #3b5998;
--twitter-color: #1da1f2;
--instagram-color: #e1306c;
--dribbble-color: #ea4c89;
--tiktok-color: #000000;
--linkedin-color: #0077b5;
--youtube-color: #ff0000;
}
Apply to social icons:
.social a[href*="facebook"] { color: var(--facebook-color); }
.social a[href*="twitter"] { color: var(--twitter-color); }
.social a[href*="instagram"] { color: var(--instagram-color); }
Customize skill progress bars:
.tokyo_progress .progress_inner .bar_in {
background-color: var(--primary-color);
}
/* Different colors for different skill types */
.tokyo_progress .progress_inner[data-value="95"] .bar_in {
background-color: #28a745;
}
.tokyo_progress .progress_inner[data-value="85"] .bar_in {
background-color: #ffc107;
}
Adjust colors for different screen sizes:
/* Mobile */
@media (max-width: 768px) {
:root {
--text-color: #555;
--bg-color: #fff;
}
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
:root {
--text-color: #666;
--bg-color: #fafafa;
}
}
/* Desktop */
@media (min-width: 1025px) {
:root {
--text-color: #767676;
--bg-color: #fff;
}
}
Ensure your color choices meet WCAG accessibility standards:
/* High contrast example */
:root {
--primary-color: #0056b3; /* Dark blue on white */
--text-color: #333; /* Dark gray on white */
--heading-color: #000; /* Black on white */
}
:root {
--primary-color: #007bff;
--primary-color-hover: #0056b3;
}
:root {
--text-color: #333;
}
:root {
--bg-color: #fafafa;
--bg-secondary: #f0f0f0;
}
:root {
--accent-color: #e91e63;
--accent-color-hover: #c2185b;
}
/* Use accent color */
.custom-element {
color: var(--accent-color);
}
Solution:
Solution:
Solution:
Here’s a complete custom color scheme example:
:root {
/* Primary Colors - Purple Theme */
--primary-color: #9c27b0;
--primary-color-hover: #7b1fa2;
/* Text Colors */
--text-color: #616161;
--heading-color: #212121;
/* Background Colors */
--bg-color: #fafafa;
--bg-secondary: #f5f5f5;
/* Border Colors */
--border-color: #e0e0e0;
/* Social Media Colors */
--facebook-color: #3b5998;
--twitter-color: #1da1f2;
--instagram-color: #e1306c;
--dribbble-color: #ea4c89;
--tiktok-color: #000000;
/* Custom Accent */
--accent-color: #ff5722;
--accent-color-hover: #e64a19;
}
.dark-mode {
--primary-color: #9c27b0;
--primary-color-hover: #7b1fa2;
--text-color: #b0b0b0;
--heading-color: #ffffff;
--bg-color: #121212;
--bg-secondary: #1e1e1e;
--border-color: #333;
}
Customizing the Tokyo theme’s colors is straightforward with CSS variables. Experiment with different combinations to create a unique look that matches your brand identity.
Adding authors to your Tokyo Jekyll theme is a straightforward process that involves just two steps. Here’s how to do it:
In the front matter of your blog post, you’ll need to include the author_id field. This ID links your post to a specific author.
author_id: 3
For example, your post’s front matter might look like this:
---
layout: post
title: "Test Post Title"
date: 2019-08-01 10:59:37 +0600
post_image: /assets/images/blog-images/blog-img16.jpg
tags: [tag1, tag2, tag3]
categories: [category-name]
author_id: 3
comments: false
excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
---
Here, the author_id is set to 3. You can use any unique number (e.g., 3, 4, 5) to identify different authors.
After assigning an author_id to your post, you must create a corresponding HTML file for that author within your _authors data folder. This file contains the author’s details.
Here’s an example of the configuration for an author file:
---
layout: author
name: John Doe
author_id: 3
email: example@yourdomain.com
bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
image: /assets/images/authors/author-pic.jpg
location: Sao Paulo, BR
---
You can also include optional fields like facebook, twitter, instagram, or reddit with their respective social links. These will be displayed in the author information area.
Once created, copy this HTML file into your _authors data folder. If you’ve already created an HTML file for a particular author, you can skip this step.
The portfolio section is one of the most important features of the Tokyo theme. This guide explains how to configure and customize your portfolio to showcase your work effectively.
All portfolio items are managed in _data/portfolio.yml. This YAML file contains information about each project you want to display.
Each portfolio item in _data/portfolio.yml has the following structure:
- name: Project Name
img_src: /path/to/thumbnail.jpg
project_url: https://project-url.com
filter_classes: 'category'
cat: Display Category Name
The Tokyo theme supports multiple media types for portfolio items:
Display Vimeo videos in a popup:
- name: Project Title
img_src: /assets/img/portfolio/1.jpg
project_url: https://vimeo.com/312334044
filter_classes: 'vimeo'
cat: Vimeo
Requirements:
filter_classes must be ‘vimeo’Display YouTube videos in a popup:
- name: Project Title
img_src: /assets/img/portfolio/2.jpg
project_url: https://www.youtube.com/watch?v=Amq-qlqbjYA
filter_classes: 'youtube'
cat: YouTube
Requirements:
filter_classes must be ‘youtube’Display SoundCloud audio tracks:
- name: Project Title
img_src: /assets/img/portfolio/3.jpg
project_url: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
filter_classes: 'soundcloud'
cat: SoundCloud
Requirements:
filter_classes must be ‘soundcloud’Getting SoundCloud Embed URL:
Display full-size images in a lightbox:
- name: Project Title
img_src: /assets/img/portfolio/4.jpg
project_url: /assets/img/portfolio/4-full.jpg
filter_classes: 'image'
cat: Image
Requirements:
filter_classes must be ‘image’project_url can be the same as img_src or a larger versionLink to external websites:
- name: Project Title
img_src: /assets/img/portfolio/5.jpg
project_url: https://example-project.com
filter_classes: 'image'
cat: Website
Note: External websites will open in a new tab/window.
assets/img/portfolio/
├── 1.jpg
├── 2.jpg
├── 3.jpg
└── 4.jpg
Open _data/portfolio.yml and add your item:
- name: My Awesome Project
img_src: /assets/img/portfolio/my-project.jpg
project_url: https://myproject.com
filter_classes: 'image'
cat: Web Design
The portfolio includes a filtering system that allows visitors to filter items by category.
The theme includes these default filters:
To add custom filter categories:
_includes/right-parts/tk-portfolio.html:<div class="portfolio_filter">
<ul>
<li><a href="#" class="current" data-filter="*">All</a></li>
<li><a href="#" data-filter=".web-design">Web Design</a></li>
<li><a href="#" data-filter=".branding">Branding</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
<li><a href="#" data-filter=".video">Video</a></li>
</ul>
</div>
- name: Website Project
img_src: /assets/img/portfolio/web.jpg
project_url: https://example.com
filter_classes: 'web-design'
cat: Web Design
- name: Brand Identity
img_src: /assets/img/portfolio/branding.jpg
project_url: /assets/img/portfolio/branding-full.jpg
filter_classes: 'branding'
cat: Branding
web-design, branding, photographydata-filter attribute in the filter buttonfilter_classes: 'web-design responsive'The portfolio section title is configured in _data/site_data.yml:
portfolio:
title: Creative Portfolio
To change the title:
portfolio:
title: My Portfolio
The portfolio uses a responsive grid. To modify the number of columns:
In assets/css/style.css:
/* Desktop - 3 columns */
.portfolio_list li {
width: 33.33%;
}
/* Tablet - 2 columns */
@media (max-width: 1024px) {
.portfolio_list li {
width: 50%;
}
}
/* Mobile - 1 column */
@media (max-width: 768px) {
.portfolio_list li {
width: 100%;
}
}
.portfolio_list {
display: grid;
gap: 30px; /* Adjust spacing between items */
}
Customize portfolio item hover effects:
.portfolio_list li .inner .entry:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
- name: E-Commerce Platform
img_src: /assets/img/portfolio/ecommerce.jpg
project_url: https://myshop.com
filter_classes: 'web-design'
cat: Web Design
- name: Corporate Website
img_src: /assets/img/portfolio/corporate.jpg
project_url: https://corporate-site.com
filter_classes: 'web-design'
cat: Web Design
- name: Landing Page
img_src: /assets/img/portfolio/landing.jpg
project_url: /assets/img/portfolio/landing-full.jpg
filter_classes: 'web-design'
cat: Web Design
- name: Wedding Photography
img_src: /assets/img/portfolio/wedding.jpg
project_url: /assets/img/portfolio/wedding-full.jpg
filter_classes: 'photography'
cat: Photography
- name: Portrait Session
img_src: /assets/img/portfolio/portrait.jpg
project_url: /assets/img/portfolio/portrait-full.jpg
filter_classes: 'photography'
cat: Photography
- name: Landscape Shot
img_src: /assets/img/portfolio/landscape.jpg
project_url: /assets/img/portfolio/landscape-full.jpg
filter_classes: 'photography'
cat: Photography
- name: Brand Video
img_src: /assets/img/portfolio/brand-video.jpg
project_url: https://vimeo.com/123456789
filter_classes: 'vimeo'
cat: Video
- name: Product Demo
img_src: /assets/img/portfolio/demo.jpg
project_url: https://www.youtube.com/watch?v=dQw4w9WgXcQ
filter_classes: 'youtube'
cat: Video
- name: Website Redesign
img_src: /assets/img/portfolio/redesign.jpg
project_url: https://redesigned-site.com
filter_classes: 'web-design'
cat: Web Design
- name: Brand Video
img_src: /assets/img/portfolio/video.jpg
project_url: https://vimeo.com/987654321
filter_classes: 'video'
cat: Video
- name: Product Photography
img_src: /assets/img/portfolio/product.jpg
project_url: /assets/img/portfolio/product-full.jpg
filter_classes: 'photography'
cat: Photography
- name: Audio Project
img_src: /assets/img/portfolio/audio.jpg
project_url: https://w.soundcloud.com/player/?url=TRACK_URL
filter_classes: 'soundcloud'
cat: Audio
Group similar projects together:
# Web Design Projects
- name: Project 1
filter_classes: 'web-design'
cat: Web Design
- name: Project 2
filter_classes: 'web-design'
cat: Web Design
# Photography Projects
- name: Photo 1
filter_classes: 'photography'
cat: Photography
- name: Photo 2
filter_classes: 'photography'
cat: Photography
Assign items to multiple categories:
- name: Responsive Website
img_src: /assets/img/portfolio/responsive.jpg
project_url: https://responsive-site.com
filter_classes: 'web-design responsive'
cat: Web Design
This item will appear in both “Web Design” and “Responsive” filters.
_data/portfolio.ymlSolution:
_data/portfolio.ymlSolution:
filter_classes values match filter buttonsSolution:
Solution:
assets/img/portfolio/Solution:
Add custom fields to portfolio items:
- name: Project Name
img_src: /assets/img/portfolio/project.jpg
project_url: https://project.com
filter_classes: 'web-design'
cat: Web Design
client: Client Name
year: 2026
tools: [React, Node.js, MongoDB]
description: Brief project description
Then modify the portfolio template to display this metadata.
Implement lazy loading for better performance:
<img src=""
alt=""
loading="lazy" />
Add captions to image lightboxes:
<a class="zoom"
href=""
title="">
<img src="" alt="" />
</a>
The Tokyo theme’s portfolio system is flexible and powerful. Experiment with different configurations to create a portfolio that perfectly showcases your work.
Navigation is a crucial part of the Tokyo theme. This guide explains how to configure and customize the navigation menu to match your site structure.
The navigation menu is managed in _data/navigation.yml. This YAML file defines all menu items and their links.
The default navigation in _data/navigation.yml looks like this:
- text: Home
url: home
- text: About
url: about
- text: Portfolio
url: portfolio
- text: News
url: news
- text: Contact
url: contact
The navigation is rendered in _includes/tk-left-part.html:
### Key Features
- **Automatic active state:** The first item gets the `active` class
- **Anchor links:** URLs are prefixed with `#` for smooth scrolling
- **Dynamic generation:** Menu items are generated from the data file
## Adding Navigation Items
### Step 1: Add to Navigation Data
Open `_data/navigation.yml` and add your item:
```yaml
- text: Home
url: home
- text: About
url: about
- text: Services
url: services
- text: Portfolio
url: portfolio
- text: News
url: news
- text: Contact
url: contact
Create a new include file in _includes/right-parts/:
File: _includes/right-parts/tk-services.html
<div id="services" class="tokyo_tm_section">
<div class="container">
<div class="tokyo_tm_services">
<h3>Our Services</h3>
<!-- Your services content -->
</div>
</div>
</div>
Add the include to index.html:
{% include right-parts/tk-home.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-services.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}
If your section needs data, add it to _data/site_data.yml:
services:
title: Our Services
description: "We offer a wide range of services..."
To remove a navigation item:
_data/navigation.ymlindex.htmlExample:
# Before
- text: Home
url: home
- text: About
url: about
- text: Services
url: services
- text: Portfolio
url: portfolio
# After (removed Services)
- text: Home
url: home
- text: About
url: about
- text: Portfolio
url: portfolio
To change the order of navigation items:
_data/navigation.ymlactive classExample:
# Original order
- text: Home
url: home
- text: About
url: about
- text: Portfolio
url: portfolio
# New order (Portfolio moved up)
- text: Home
url: home
- text: Portfolio
url: portfolio
- text: About
url: about
To add external links that open in a new tab:
Edit _includes/tk-left-part.html:
<div class="menu">
<ul>
.....
</ul>
</div>
Update _data/navigation.yml:
- text: Home
url: home
- text: About
url: about
- text: Portfolio
url: portfolio
- text: Blog
url: https://blog.example.com
external: true
- text: Contact
url: contact
The Tokyo theme doesn’t include dropdown menus by default, but you can add them:
Update _data/navigation.yml:
- text: Home
url: home
- text: About
url: about
submenu:
- text: About Me
url: about-me
- text: My Story
url: my-story
- text: Portfolio
url: portfolio
- text: Contact
url: contact
Edit _includes/tk-left-part.html:
<div class="menu">
<ul>
....
</ul>
</div>
Add to assets/css/style.css:
.menu ul li {
position: relative;
}
.menu ul .submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.menu ul li:hover .submenu {
display: block;
}
.menu ul .submenu li {
border-bottom: 1px solid #eee;
}
.menu ul .submenu li:last-child {
border-bottom: none;
}
.menu ul .submenu li a {
display: block;
padding: 10px 15px;
color: #333;
}
.menu ul .submenu li a:hover {
background: var(--primary-color);
color: #fff;
}
The active menu item has a special class:
.menu ul li.active a {
color: var(--primary-color);
font-weight: 600;
}
Add hover effects to navigation items:
.menu ul li a {
transition: color 0.3s ease;
}
.menu ul li a:hover {
color: var(--primary-color);
}
Create custom navigation styles:
.menu {
background: var(--bg-color);
padding: 20px;
border-radius: 10px;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
margin-bottom: 15px;
}
.menu ul li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: var(--text-color);
border-radius: 5px;
transition: all 0.3s ease;
}
.menu ul li a:hover,
.menu ul li.active a {
background: var(--primary-color);
color: #fff;
}
The Tokyo theme includes responsive navigation for mobile devices.
The mobile navigation typically uses a hamburger menu icon. Ensure it’s properly configured:
<button class="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
@media (max-width: 768px) {
.menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
overflow-y: auto;
}
.menu.active {
display: block;
}
.mobile-menu-toggle {
display: block;
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
}
}
- text: Home
url: home
- text: About
url: about
- text: Portfolio
url: portfolio
- text: Blog
url: blog
- text: Contact
url: contact
- text: Home
url: home
- text: About Us
url: about
- text: Services
url: services
submenu:
- text: Web Design
url: web-design
- text: Development
url: development
- text: Marketing
url: marketing
- text: Portfolio
url: portfolio
- text: Testimonials
url: testimonials
- text: Contact
url: contact
- text: Work
url: portfolio
- text: Services
url: services
- text: About
url: about
- text: Journal
url: blog
external: true
- text: Contact
url: contact
- text: Home
url: home
- text: Portfolio
url: portfolio
- text: Weddings
url: weddings
- text: Portraits
url: portraits
- text: About
url: about
- text: Contact
url: contact
Solution:
_data/navigation.ymlSolution:
index.htmlSolution:
Solution:
Solution:
The Tokyo theme’s navigation system is flexible and easy to customize. Experiment with different configurations to create the perfect navigation for your site.
The Tokyo theme supports multiple authors, allowing you to create author profiles and assign posts to specific authors. This guide explains how to manage authors effectively.
The author system in Tokyo theme works through:
_authors/ folderauthor_idAuthor profiles are stored as HTML files in the _authors/ folder. Each author needs a unique file.
File Naming Convention: Use the author’s name or ID as the filename
john-doe.html, jane-smith.html, author-1.htmlCreate a new file in _authors/ with the following structure:
---
layout: author
name: John Doe
author_id: 1
email: john@example.com
bio: John is a web developer with 5+ years of experience in creating modern web applications.
image: /assets/img/authors/john-doe.jpg
location: San Francisco, CA
facebook: https://facebook.com/johndoe
twitter: https://twitter.com/johndoe
instagram: https://instagram.com/johndoe
linkedin: https://linkedin.com/in/johndoe
---
Required Fields:
layout: Must be “author”name: Author’s display nameauthor_id: Unique numeric ID (1, 2, 3, etc.)email: Author’s email addressbio: Short biographyimage: Path to author photoOptional Fields:
location: Author’s locationfacebook: Facebook profile URLtwitter: Twitter profile URLinstagram: Instagram profile URLlinkedin: LinkedIn profile URLwebsite: Personal website URLgithub: GitHub profile URLFile: _authors/john-doe.html
---
layout: author
name: John Doe
author_id: 1
email: john@example.com
bio: John is a full-stack developer specializing in React and Node.js. He loves building scalable web applications and sharing knowledge through writing.
image: /assets/img/authors/john-doe.jpg
location: San Francisco, CA
facebook: https://facebook.com/johndoe
twitter: https://twitter.com/johndoe
instagram: https://instagram.com/johndoe
linkedin: https://linkedin.com/in/johndoe
github: https://github.com/johndoe
website: https://johndoe.com
---
In the front matter of your blog post, add the author_id field:
---
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..."
---
Ensure the author_id in your post matches the author_id in the author profile file.
Post:
author_id: 1
Author Profile:
author_id: 1
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...
[Post content]
Create separate HTML files for each author in _authors/:
Author 1: _authors/john-doe.html
---
layout: author
name: John Doe
author_id: 1
email: john@example.com
bio: Full-stack developer with 5+ years of experience.
image: /assets/img/authors/john-doe.jpg
location: San Francisco, CA
---
Author 2: _authors/jane-smith.html
---
layout: author
name: Jane Smith
author_id: 2
email: jane@example.com
bio: UI/UX designer passionate about creating beautiful interfaces.
image: /assets/img/authors/jane-smith.jpg
location: New York, NY
---
Author 3: _authors/bob-wilson.html
---
layout: author
name: Bob Wilson
author_id: 3
email: bob@example.com
bio: Content strategist and technical writer.
image: /assets/img/authors/bob-wilson.jpg
location: Austin, TX
---
# Post by John Doe
---
author_id: 1
---
# Post by Jane Smith
---
author_id: 2
---
# Post by Bob Wilson
---
author_id: 3
---
Create a folder for author images:
assets/
└── img/
└── authors/
├── john-doe.jpg
├── jane-smith.jpg
└── bob-wilson.jpg
In author profile files, reference images relative to the site root:
image: /assets/img/authors/john-doe.jpg
The author page layout is defined in _layouts/author.html. You can customize it to display:
Edit _layouts/author.html to modify how author information is displayed:
<div class="author_profile">
<img src="" alt="2026-01-20-tokyo-author-management.md" />
<h1>2026-01-20-tokyo-author-management.md</h1>
......
</div>
The post layout (_layouts/post.html) typically includes author information. Ensure it’s configured to display:
<div class="post_author">
</div>
The Tokyo theme supports these social media platforms:
Add social media URLs to the author profile:
---
layout: author
name: John Doe
author_id: 1
email: john@example.com
bio: Full-stack developer with 5+ years of experience.
image: /assets/img/authors/john-doe.jpg
location: San Francisco, CA
facebook: https://facebook.com/johndoe
twitter: https://twitter.com/johndoe
instagram: https://instagram.com/johndoe
linkedin: https://linkedin.com/in/johndoe
github: https://github.com/johndoe
website: https://johndoe.com
youtube: https://youtube.com/@johndoe
dribbble: https://dribbble.com/johndoe
behance: https://behance.net/johndoe
---
Solution:
author_id matches between post and author profile_authors/Solution:
Solution:
_config.yml_authors/ folderSolution:
Solution:
author_id matches in postsFor guest authors who don’t have a full profile:
---
layout: author
name: Guest Author
author_id: 99
email: guest@example.com
bio: This is a guest author.
image: /assets/img/authors/guest.jpg
---
Categorize authors by role:
---
layout: author
name: John Doe
author_id: 1
email: john@example.com
bio: Full-stack developer with 5+ years of experience.
image: /assets/img/authors/john-doe.jpg
role: Developer
---
Display author statistics (posts count, views, etc.):
<p>47 posts by 2026-01-20-tokyo-author-management.md</p>
Create a team page displaying all authors:
<div class="team">
</div>
---
layout: author
name: Sarah Johnson
author_id: 1
email: sarah@example.com
bio: Tech blogger and software engineer sharing insights on web development and programming.
image: /assets/img/authors/sarah.jpg
location: Seattle, WA
twitter: https://twitter.com/sarahjohnson
github: https://github.com/sarahjohnson
---
Author 1 - Editor:
---
layout: author
name: Mike Chen
author_id: 1
email: mike@example.com
bio: Editor-in-chief with 10 years of publishing experience.
image: /assets/img/authors/mike.jpg
role: Editor
linkedin: https://linkedin.com/in/mikechen
---
Author 2 - Writer:
---
layout: author
name: Lisa Park
author_id: 2
email: lisa@example.com
bio: Tech writer specializing in tutorials and how-to guides.
image: /assets/img/authors/lisa.jpg
role: Writer
twitter: https://twitter.com/lisapark
---
---
layout: author
name: TechCorp Team
author_id: 1
email: team@techcorp.com
bio: The TechCorp team shares insights on technology, innovation, and industry trends.
image: /assets/img/authors/techcorp.jpg
location: San Francisco, CA
website: https://techcorp.com
twitter: https://twitter.com/techcorp
linkedin: https://linkedin.com/company/techcorp
---
The Tokyo theme’s author management system makes it easy to manage multiple contributors and create a professional multi-author blog.
To integrate your Mailchimp newsletter signup form with your Jekyll site, you need to add your Mailchimp list (audience) URL to the site’s configuration.
The Mailchimp list URL (sometimes called the form action URL) is a unique link provided by Mailchimp for each audience (list) you create. This URL allows your website to send subscription requests directly to your Mailchimp account.
form tag. The action attribute contains your unique list URL. It will look something like:
https://YOUR_PREFIX.list-manage.com/subscribe/post?u=YOUR_U_ID&id=YOUR_IDconfig.yml file in a text editor.mailchimp-list: "https://themeix.us16.list-manage.com/subscribe/post?u=4b7aa1c5c5ac54be844d58bcb&id=0e85c09412"
For example:
mailchimp-list: "https://YOUR_PREFIX.list-manage.com/subscribe/post?u=YOUR_U_ID&id=YOUR_ID"
Be sure to save your changes and redeploy your site after updating the configuration.
Creating blog posts in the Tokyo theme is straightforward. This guide explains how to create, format, and manage your blog posts effectively.
All blog posts are stored in the _posts/ folder. Each post is a separate Markdown file.
Jekyll requires a specific naming convention for post files:
Format: YYYY-MM-DD-post-title.md
Examples:
2026-01-20-getting-started-with-jekyll.md2026-01-21-web-development-tips.md2026-01-22-photography-techniques.mdImportant:
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..."
---
Required Fields:
layout: Must be “post” for blog poststitle: The title of your postdate: Publication date and time in ISO 8601 formatOptional Fields:
post_image: Path to featured imagetags: Array of tags for categorizationcategories: Array of categoriesauthor_id: Link to author profilecomments: Enable/disable comments (true/false)excerpt: Short description for post cardsCreate a new file in the _posts/ folder:
File: _posts/2026-01-20-my-first-post.md
---
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."
---
# 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.
Use Markdown headings:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Separate paragraphs with blank lines:
This is the first paragraph.
This is the second paragraph.
**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
Link text
Link with title
!Alt text
Unordered Lists:
- Item 1
- Item 2
- Nested item
- Another nested item
- Item 3
Ordered Lists:
1. First item
2. Second item
3. Third item
Inline Code:
Use `code` for inline code.
Code Blocks:
```javascript
function hello() {
console.log("Hello, World!");
}
```
> This is a blockquote.
> It can span multiple lines.
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Set the featured image in front matter:
post_image: /assets/img/news/1.jpg
Add images within your post content:
!Image description
assets/img/Organize your post images:
assets/
└── img/
├── news/
│ ├── 1.jpg
│ ├── 2.jpg
│ └── 3.jpg
└── posts/
├── tutorial-1.jpg
└── tutorial-2.jpg
Assign categories to organize posts:
categories: [Tutorials]
Multiple Categories:
categories: [Tutorials, Web Development, Jekyll]
Add tags for better organization:
tags: [Tutorial, Jekyll, Web Development]
Best Practices:
The theme includes category and tag pages at:
/category/category-name//tag/tag-name/Define a custom excerpt in front matter:
excerpt: "This is a custom excerpt that will appear on post cards."
If no excerpt is defined, Jekyll uses the first paragraph as the excerpt.
Use a custom separator in front matter:
excerpt_separator: <!--more-->
This is the excerpt.
<!--more-->
This is the rest of the post content.
Add the author_id field:
author_id: 1
The author_id must match an author profile in _authors/.
For posts with multiple authors, you can:
author_id: 1
This post was written by John Doe with contributions from Jane Smith.
comments: true
comments: false
The Tokyo theme supports various comment systems:
Disqus:
_config.ymlOther Systems:
Set a future date to schedule posts:
date: 2026-02-01 10:00:00 +0600
The post will appear automatically on that date.
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.
Posts with future dates won’t appear until that date:
date: 2026-12-31 10:00:00 +0600
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
jekyll new my-site
cd my-site
bundle exec jekyll serve
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.
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;
}
Flexbox makes it easy to align items:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Use custom properties for reusable values:
:root {
--primary-color: #007bff;
}
.button {
background: var(--primary-color);
}
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
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.
If you are having issue with category / tag then follow the tips bellow :
1) Check the post configuration and make sure you are using the correct settings make for tags and categories.
For Tag : tags
For Category : categories
2) Check the text what you are using as category / tag. It should be english ( Bug Report Here : https://github.com/sverrirs/jekyll-paginate-v2/issues/171 )
3) Make sure you wrote your tags and category with comma separted.
Example :
tags: [wordpress, jekyll, ghost, themeix]