Tokyo Theme Deployment

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.

Pre-Deployment Checklist

Before deploying, ensure your site is ready:

1. Test Locally

# Start local server
bundle exec jekyll serve

# Visit http://localhost:4000
# Test all pages and functionality

2. Build the Site

# Build for production
bundle exec jekyll build

# Check the _site folder
# This contains your built site

3. Verify Configuration

Check _config.yml:

title: "Your Portfolio Name"
baseurl: ""  # Leave empty for root deployment
url: "https://yourdomain.com"  # Your final URL

4. Optimize Assets

Compress images
Minify CSS and JavaScript
Remove unused files
Check for broken links

Deployment Methods

Method 1: GitHub Pages (Free)

GitHub Pages is perfect for beginners and offers free hosting.

Step 1: Create Repository

Go to GitHub and create a new repository
Name it: yourusername.github.io (for user pages) or any name (for project pages)

Step 2: Push Your Code

# 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

Step 3: Configure GitHub Pages

Go to repository Settings → Pages
Select source branch (usually main or master)
Choose folder (/ for root or /docs)
Wait a few minutes for deployment

Step 4: Configure for Project Pages

If using a project repository (not user.github.io):

# _config.yml
baseurl: "/your-repo-name"
url: "https://yourusername.github.io"

GitHub Pages Configuration

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

Method 2: Netlify (Recommended)

Netlify offers more features and easier deployment.

Step 1: Prepare Your Site

# Build your site locally
bundle exec jekyll build

Step 2: Deploy via Git

Push your code to GitHub, GitLab, or Bitbucket
Go to https://app.netlify.com
Click “Add new site” → “Import an existing project”
Connect your repository
Configure build settings:

Build command: bundle exec jekyll build
Publish directory: _site

Click “Deploy site”

Step 3: Netlify Configuration

Create netlify.toml:

[build]
  command = "bundle exec jekyll build"
  publish = "_site"

[build.environment]
  RUBY_VERSION = "3.0"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Step 4: Custom Domain

Go to Site settings → Domain management
Add custom domain
Update DNS records as instructed
Enable HTTPS

Method 3: Vercel (Modern Alternative)

Vercel is excellent for modern development workflows.

Step 1: Install Vercel CLI

npm install -g vercel

Step 2: Deploy

# Navigate to your project
cd /path/to/jekyll-tokyo

# Deploy
vercel

# Follow the prompts

Step 3: Vercel Configuration

Create vercel.json:

{
  "buildCommand": "bundle exec jekyll build",
  "outputDirectory": "_site",
  "devCommand": "bundle exec jekyll serve"
}

Step 4: Custom Domain

# Add custom domain
vercel domains add yourdomain.com

Method 4: Manual Deployment

For complete control, deploy manually.

Step 1: Build Your Site

bundle exec jekyll build

Step 2: Upload Files

Upload the contents of _site folder to your web server via:

FTP/SFTP (FileZilla, Cyberduck)
SSH (scp command)
Control panel (cPanel, Plesk)

Step 3: Configure Web Server

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;
}

Method 5: Cloudflare Pages

Cloudflare Pages offers fast global CDN.

Step 1: Connect Repository

Go to https://dash.cloudflare.com
Go to Workers & Pages → Create application → Pages
Connect to Git provider
Select your repository

Step 2: Configure Build

Build command: bundle exec jekyll build
Build output directory: _site

Step 3: Deploy

Click “Save and Deploy”

Custom Domain Setup

Step 1: Purchase Domain

Buy a domain from:

Namecheap
GoDaddy
Google Domains
Cloudflare

Step 2: Configure DNS

Add DNS records to your domain provider:

Type: A
Name: @
Value: Your hosting IP

Type: CNAME
Name: www
Value: Your hosting domain

Step 3: Configure in Hosting Platform

Add your custom domain in your hosting platform’s settings.

Step 4: Enable HTTPS

Enable SSL/TLS certificates for secure connections.

Environment Variables

Setting Environment Variables

Netlify:

Go to Site settings → Environment variables
Add variables:
- JEKYLL_ENV: production
- BASEURL: (if needed)

Vercel:

vercel env add JEKYLL_ENV production

GitHub Actions: Add to repository secrets:

Go to Settings → Secrets and variables → Actions
Add new repository secrets

Performance Optimization

1. Enable Compression

Add to .htaccess (Apache):

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
</IfModule>

2. Browser Caching

<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>

3. Image Optimization

Use WebP format
Compress images before uploading
Use responsive images
Lazy load images

4. Minify Assets

Minify CSS and JavaScript:

Use online tools (CSS Minifier, JSMin)
Use build tools (Webpack, Gulp)
Use Jekyll plugins

SEO Configuration

1. Meta Tags

Update _config.yml:

title: "Your Portfolio Name"
description: "Your portfolio description"
keywords: "portfolio, web development, photography"
url: "https://yourdomain.com"

2. Sitemap

The theme includes jekyll-seo-tag plugin which automatically generates sitemaps.

3. Robots.txt

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">

Security Best Practices

1. HTTPS

Always enable HTTPS:

Free SSL from Let’s Encrypt (most hosts)
Paid SSL certificates
Cloudflare SSL

2. Secure Headers

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>

3. Hide Sensitive Files

Create .gitignore:

.DS_Store
.env
*.log
_site
.sass-cache
.jekyll-cache
.jekyll-metadata

Monitoring and Analytics

1. Google Analytics

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>

2. Uptime Monitoring

Use services like:

UptimeRobot
Pingdom
StatusCake

3. Error Tracking

Use services like:

Sentry
Rollbar
Bugsnag

Troubleshooting

Build Failures

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

Missing Assets

Problem: Images/CSS not loading

Solution:

Check file paths
Verify baseurl setting
Ensure assets are in correct folders
Check file permissions

Custom Domain Issues

Problem: Custom domain not working

Solution:

Wait for DNS propagation (up to 48 hours)
Check DNS records
Verify SSL certificate
Test with dig or nslookup

404 Errors

Problem: Pages returning 404

Solution:

Check page filenames
Verify URL structure
Check navigation links
Ensure pages are published

Deployment Checklist

Before going live:

Backup Strategy

1. Version Control

Always use Git:

git add .
git commit -m "Backup before deployment"
git push origin main

2. Database Backup

If using a database (not typical for Jekyll), regular backups are essential.

3. Content Backup

Regularly backup:

_posts/ folder
_data/ folder
_authors/ folder
assets/img/ folder

Maintenance

Regular Updates

Update Jekyll: gem update jekyll
Update dependencies: bundle update
Check for security updates
Review and update content

Performance Monitoring

Regularly check page load times
Monitor uptime
Review analytics
Check for broken links

Content Updates

Add new portfolio items
Publish new blog posts
Update author information
Refresh images

Choosing the Right Platform

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

Conclusion

Deploying your Tokyo theme is straightforward with the right platform. Choose based on your needs:

GitHub Pages: Great for beginners and simple portfolios
Netlify: Best balance of features and ease of use
Vercel: Excellent for modern development workflows
Manual: For complete control and custom requirements

Remember to test thoroughly, monitor your site after deployment, and keep regular backups.

For more detailed guides on specific platforms, check their official documentation:

GitHub Pages Documentation
Netlify Documentation
Vercel Documentation
Cloudflare Pages Documentation

Search Documentation

Tokyo Theme Deployment

Table of Contents

Pre-Deployment Checklist

1. Test Locally

2. Build the Site

3. Verify Configuration

4. Optimize Assets

Deployment Methods

Method 1: GitHub Pages (Free)

Step 1: Create Repository

Step 2: Push Your Code

Step 3: Configure GitHub Pages

Step 4: Configure for Project Pages

GitHub Pages Configuration

Method 2: Netlify (Recommended)

Step 1: Prepare Your Site

Step 2: Deploy via Git

Step 3: Netlify Configuration

Step 4: Custom Domain

Method 3: Vercel (Modern Alternative)

Step 1: Install Vercel CLI

Step 2: Deploy

Step 3: Vercel Configuration

Step 4: Custom Domain

Method 4: Manual Deployment

Step 1: Build Your Site

Step 2: Upload Files

Step 3: Configure Web Server

Method 5: Cloudflare Pages

Step 1: Connect Repository

Step 2: Configure Build

Step 3: Deploy

Custom Domain Setup

Step 1: Purchase Domain

Step 2: Configure DNS

Step 3: Configure in Hosting Platform

Step 4: Enable HTTPS

Environment Variables

Setting Environment Variables

Performance Optimization

1. Enable Compression

2. Browser Caching

3. Image Optimization

4. Minify Assets

SEO Configuration

1. Meta Tags

2. Sitemap

3. Robots.txt

4. Social Media Meta Tags

Security Best Practices

1. HTTPS

2. Secure Headers

3. Hide Sensitive Files

Monitoring and Analytics

1. Google Analytics

2. Uptime Monitoring

3. Error Tracking

Troubleshooting

Build Failures

Missing Assets

Custom Domain Issues

404 Errors

Deployment Checklist

Backup Strategy

1. Version Control

2. Database Backup

3. Content Backup

Maintenance

Regular Updates

Performance Monitoring

Content Updates

Choosing the Right Platform

Conclusion