One of Jekyll’s core strengths lies in its ability to let you build custom layouts. The Mediumish theme comes with several layout templates out of the box, but for a blog that wants to scale or adapt to business needs (e.g. product pages, service listings, opt-in offers), you'll eventually want to build your own templates.
How to create a custom layout
- Navigate to the
_layouts
folder in your Mediumish theme directory. - Duplicate an existing layout file such as
page.html
and rename it, e.g.,custom-landing.html
. - Edit the layout to change the HTML structure or insert custom includes or Liquid logic.
- In your content file (Markdown or HTML), set
layout: custom-landing
in the front matter.
Why create custom layouts?
- To isolate content sections like landing pages from blog post styles.
- To improve conversion rates on opt-in or offer-specific pages.
- To ensure full design control without affecting other pages.
Adding a Call-to-Action (CTA) Section to Your Blog Posts
If you’re using your blog for lead generation or list building, embedding a call-to-action at the bottom of each post is critical. Mediumish makes this easy using _includes
.
Steps to add a reusable CTA:
- Create a new include file at
_includes/cta.html
. - Add your HTML content for the CTA (e.g. email signup form or download link).
- In
_layouts/post.html
, insert the following at the end:
{% include cta.html %}
Benefits of modular CTA sections:
- You can update it once and see the change on all posts.
- You can A/B test different CTAs with minimal effort.
- You maintain consistent branding across the site.
Performance Optimization for Mediumish
Static sites are fast by nature, but they can still be optimized. By reducing the size of assets, eliminating unused CSS, and lazy-loading images, you can achieve near-perfect Core Web Vitals scores.
Checklist for performance tuning:
- Compress and resize all images before uploading.
- Use
loading="lazy"
on all<img>
tags. - Minify CSS and JavaScript using Jekyll plugins or build scripts.
- Use lightweight fonts or system defaults where possible.
- Remove unused JavaScript from the theme (e.g., smooth-scroll, wow.js).
Enabling Client-Side Search on Mediumish
Mediumish doesn’t ship with built-in search, but you can easily integrate a JavaScript-based search such as Simple-Jekyll-Search
for a lightweight, client-side solution.
Steps to add Simple-Jekyll-Search:
- Create a new
search.html
page and assign a basic layout. - Generate a
search.json
file that outputs all post titles, URLs, and descriptions. - Link the search input field to the search JavaScript logic.
- Style the results to match the Mediumish aesthetic.
Why client-side search?
- No backend or plugin dependency required.
- Works instantly without reloading the page.
- Search can be scoped to categories or tags with filtering.
Enhancing the Author Page Experience
Mediumish supports author profiles, but the default implementation is static. You can improve the author experience by dynamically loading author bios and associating posts with their authors using Jekyll’s data feature.
How to implement dynamic author pages:
- Create a file
_data/authors.yml
with details for each author. - In each post’s front matter, add
author: username
. - In
post.html
, pull author info from the YAML data. - Create a dedicated author template to list all posts by an author.
Advantages:
- Reusable and scalable across teams or guest bloggers.
- Better SEO with author-specific URLs and metadata.
- Improves trust and connection with the audience.
Automating Content Updates with GitHub Actions
To streamline your content workflow, you can use GitHub Actions to auto-deploy, check links, or notify team members. It adds DevOps capability to your blogging process with minimal configuration.
Common automations for a Jekyll blog:
- Auto-deploy to GitHub Pages on every push to main branch.
- Run link checker workflows on pull requests.
- Trigger builds only when posts are updated.
- Post Slack or email notifications on publishing.
Example GitHub Action to build and deploy:
name: Build and Deploy
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 2.7
- name: Install Dependencies
run: bundle install
- name: Build Site
run: bundle exec jekyll build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site
Conclusion: Professional Blogging on a Developer Stack
By digging deep into the Mediumish Jekyll theme and customizing it thoughtfully, you unlock a unique blogging experience that blends beauty with performance and complete control. Whether you're building a digital marketing blog, a technical tutorial hub, or a personal knowledge base, Mediumish offers the tools—and GitHub Pages offers the hosting—for a professional-grade platform with zero overhead.
Next steps you can take:
- Refactor your existing blog to use custom layouts and author data.
- Add interactive elements like search, tag filters, or newsletter popups.
- Set up GitHub Actions to automate and safeguard your publishing flow.
- Experiment with multilingual support using Liquid and
_data
folders.
With each small improvement, you're not just customizing a theme — you're building a durable, high-performance publishing platform tailored for growth.
Comments
Post a Comment