Posts

Showing posts with the label Rose Marie Garcia Ogoy

How Do You Optimize Jekyll Mediumish for SEO and Speed

By -

Why Optimization Matters for Static Jekyll Sites

Jekyll sites are fast by nature, but that doesn't mean they're automatically optimized for SEO and performance. If you're using the Mediumish theme on GitHub Pages, you already have a strong foundation. However, there are specific adjustments you can make to improve your site's visibility on search engines and ensure lightning-fast load times for all users—especially mobile visitors.

What Are the Key Optimization Goals?

  • Improve SEO structure: By using correct metadata, semantic tags, and sitemap support.
  • Enhance page speed: Through minification, lazy loading, and reduced third-party requests.
  • Ensure mobile responsiveness: So your site performs well in Google's mobile-first indexing.

How to Set Up Mediumish on GitHub Pages (Step-by-Step)

Before we optimize, make sure the site is properly set up. Here’s a quick technical walkthrough to deploy Mediumish on GitHub Pages.

1. Fork the Mediumish Repository

Find a trusted public Mediumish Jekyll theme on GitHub. Fork it to your account. Alternatively, you can start from a blank Jekyll setup and apply the Mediumish styles manually.

2. Rename the Repository for GitHub Pages

Use the naming format yourusername.github.io for your repo if you want the site to be deployed at the root domain. For project pages, use any name, and GitHub will deploy it under yourusername.github.io/project-name.

3. Enable GitHub Pages

Go to repository settings → Pages section → set the source to the main branch (or docs folder depending on structure). GitHub will build and deploy your Jekyll site automatically.

4. Update Your _config.yml File

This file controls the metadata and settings of your site. Here's what to focus on:


title: My Mediumish Blog
description: A fast, beautiful blog powered by Jekyll and GitHub Pages
url: https://yourusername.github.io
author:
  name: Your Name
  email: [email protected]
  url: https://yourwebsite.com

Important Optimization Settings

  • Set the correct url and baseurl: This helps generate valid canonical URLs.
  • Enable permalink: /:title/: Clean URLs help SEO and user readability.
  • Turn off future posts: Unless you use scheduling, it’s better to publish only present content.

How to Improve SEO in Jekyll Mediumish

SEO starts with clean code and semantic HTML. Here’s how to make your Mediumish Jekyll site more discoverable and crawlable.

1. Add a Sitemap

Jekyll doesn’t include a sitemap by default. Install the sitemap plugin by adding it to your Gemfile:


gem "jekyll-sitemap"

Then in _config.yml:


plugins:
  - jekyll-sitemap

This generates a sitemap.xml file automatically, which Google bots can use to index your site more effectively.

2. Create and Submit a robots.txt File

In the root of your site, add a file named robots.txt with the following content:


User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml

3. Optimize Meta Tags for Each Post

Edit the _includes/head.html file to ensure you have essential meta tags like:

  • <meta name="description" content="{{ page.description | default: site.description }}">
  • <link rel="canonical" href="{{ page.url | absolute_url }}">
  • OG tags for Facebook and Twitter sharing

4. Use Descriptive Titles and Descriptions

Each post should have its own description key in the front matter. For example:


---
title: "Best Tools for Content Creators"
description: "A curated list of the best tools for bloggers, YouTubers, and digital creators."
---

How to Make Jekyll Mediumish Load Faster

Speed is crucial for user experience and SEO rankings. Here’s how to squeeze maximum performance from your Mediumish theme.

1. Minify CSS and JavaScript

Use tools like CSSMinifier and JavaScript Minifier to compress your assets before uploading. You can also include minified versions directly in the theme files.

2. Enable Asset Compression via HTML

Wrap CSS and JS links in compressed versions or serve via CDNs if available. For example:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/.../mediumish.min.css">

3. Lazy Load Images

Edit post templates in _layouts or _includes to add loading="lazy" to all <img> tags:


<img src="{{ post.image }}" alt="{{ post.title }}" loading="lazy" />

4. Compress Image Sizes

Use image compressors like TinyPNG or ImageOptim before uploading images. Try to keep images under 100 KB for thumbnails and under 500 KB for full-width content images.

How to Track and Analyze Traffic in Jekyll

Without dynamic analytics tools, you can still integrate Google Analytics to track performance.

1. Add Google Analytics

Paste the GA4 tracking script in _includes/head.html or just before the closing </body> tag in _layouts/default.html.


<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>

2. Use Lightweight Alternatives

If you prefer privacy-friendly tools, consider:

How to Improve Navigation and User Experience

A good user experience helps reduce bounce rates and improve SEO. Mediumish has a solid foundation, but you can enhance it further.

1. Add Related Posts

Edit the post layout to include posts with similar tags or categories. You can use Liquid filters like:


{% raw %}
{% assign related_posts = site.posts | where: "category", page.category | limit:3 %}
{% for post in related_posts %}
  <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
{% endraw %}

2. Improve Site Search

Integrate a client-side search tool like Algolia InstantSearch.js or Lunr.js for better content discovery.

Final Checklist Before Going Live

  • ✅ All images optimized and lazy-loaded
  • ✅ Meta tags added to all pages
  • ✅ Sitemap and robots.txt present
  • ✅ Google Analytics installed
  • ✅ Mobile responsiveness tested
  • ✅ Custom domain and HTTPS configured

Conclusion

By combining Jekyll, Mediumish, and GitHub Pages with smart optimizations, you can create a lightning-fast, SEO-ready, and elegant static website that requires little maintenance and no hosting fees. Whether you're a blogger, developer, or content creator, this stack offers a powerful and future-proof platform for building your online presence.

What’s Next for Your Jekyll Project?

Now that your site is optimized, consider adding advanced features like multilingual content with data files, content gating for premium articles, or building a searchable knowledge base. The beauty of Jekyll is its flexibility and simplicity—once you master the basics, the possibilities are limitless.

Read more
Subscribe to: Comments (Atom)