Jekyll Themes •
Last updated: January 20, 2026

Tokyo Theme Installation and Setup

Tokyo Jekyll Theme

Table of Contents

Getting started with the Tokyo Jekyll Theme is straightforward. This guide will walk you through the installation and initial setup process.

Prerequisites

Before installing the Tokyo theme, ensure you have the following installed on your system:

  • Ruby (version 2.5 or higher)
  • Bundler - Install with: gem install bundler
  • Git - For cloning the theme repository

Installation Methods

Method 1: Clone from Repository

  1. Clone the repository: 
    git clone https://github.com/yourusername/jekyll-tokyo.git
cd jekyll-tokyo
  2. Install dependencies: 
    bundle install
  3. Start the local server: 
    bundle exec jekyll serve
  4. Open your browser: Navigate to http://localhost:4000 to view your site.

Method 2: Download and Extract

  1. Download the theme ZIP file from the repository
  2. Extract the contents to your desired location
  3. Navigate to the extracted folder
  4. Install dependencies: 
    bundle install
  5. Start the server: 
    bundle exec jekyll serve

Initial Configuration

After installation, you’ll need to configure the basic settings in _config.yml

Basic Site Settings

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

Project Structure

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

Verifying Installation

To ensure everything is installed correctly:

  1. Check the server output: 
    Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
  2. Test navigation:
    • Click through all menu items
    • Verify portfolio items load correctly
    • Check blog post display
  3. Verify assets:
    • Ensure images load properly
    • Check CSS styles are applied
    • Test JavaScript functionality

Common Installation Issues

Issue: Bundle install fails

Solution:

# Update Ruby gems
gem update --system

# Clear bundler cache
rm -rf .bundle
bundle install

Issue: Port 4000 already in use

Solution:

# Use a different port
bundle exec jekyll serve --port 4001

Issue: Images not loading

Solution:

  • Check image paths in _data/site_data.yml
  • Ensure images exist in the assets/img/ folder
  • Verify baseurl setting in _config.yml

Next Steps

After successful installation:

  1. Customize content in _data/site_data.yml
  2. Update portfolio items in _data/portfolio.yml
  3. Configure navigation in _data/navigation.yml
  4. Add your own posts in the _posts/ folder
  5. Customize colors in assets/css/colors.css

Support

If you encounter any issues during installation:

  • Check the Jekyll documentation
  • Review the theme’s GitHub issues
  • Contact support at themeix@gmail.com

Your Tokyo theme is now ready for customization!