Creating Custom Layouts and Page Templates

    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

    1. Navigate to the _layouts folder in your Mediumish theme directory.
    2. Duplicate an existing layout file such as page.html and rename it, e.g., custom-landing.html.
    3. Edit the layout to change the HTML structure or insert custom includes or Liquid logic.
    4. 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:

    1. Create a new include file at _includes/cta.html.
    2. Add your HTML content for the CTA (e.g. email signup form or download link).
    3. 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:

    1. Create a new search.html page and assign a basic layout.
    2. Generate a search.json file that outputs all post titles, URLs, and descriptions.
    3. Link the search input field to the search JavaScript logic.
    4. 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:

    1. Create a file _data/authors.yml with details for each author.
    2. In each post’s front matter, add author: username.
    3. In post.html, pull author info from the YAML data.
    4. 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

    Labels


    © . All rights reserved.

    -