improving site performance with caching on github pages

Why Caching Matters for GitHub Pages Caching stores copies of your website’s resources in the user's browser, reducing load times on repeat visits and easing server demand. For static sites hosted on GitHub Pages, effective caching significantly improves user experience and SEO. Types of Caching to Consider Browser caching: Configuring HTTP headers to specify how long browsers should cache static files. Service worker caching: Using JavaScript to cache resources and serve content offline or faster. Step 1: Set Cache-Control Headers via GitHub Pages GitHub Pages automatically adds some caching headers, but they are limited. For more control, use .htaccess or server config files (not available in GitHub Pages) or implement cache-busting strategies like versioned filenames. Step 2: Use Versioned Filenames for Assets Since you cannot modify server headers on GitHub Pages, append query strings or change filenames when assets update to ensure users get fresh content...

customizing navigation menus in jekyll mediumish theme

Why Customize Navigation Menus

Navigation menus guide visitors through your content and help them find what they need quickly. Customizing these menus improves usability, reinforces branding, and can highlight important sections of your blog.

Default Navigation in Mediumish Theme

The Mediumish theme uses a simple navigation bar typically featuring links to home, categories, about, and contact pages. While functional, it might not fit every blog’s unique structure or branding needs.

Step 1: Locate the Navigation Template

Find the navigation markup, usually in the _includes/header.html or _includes/navigation.html file depending on your setup.

Step 2: Modify Navigation Links

  • Add new links by inserting list items <li><a href="url">Label</a></li> inside the <nav> or <ul> element.
  • Remove or reorder existing links to prioritize your most important content.
  • Use Liquid tags to dynamically generate category or tag links:
{% raw %}
<ul>
  {% for category in site.categories %}
    <li><a href="{{ site.baseurl }}/categories/{{ category[0] }}">{{ category[0] | capitalize }}</a></li>
  {% endfor %}
</ul>
{% endraw %}

Step 3: Add Dropdown Menus (Optional)

To create dropdowns, nest a <ul> inside a <li> and use CSS for hover or click behavior. Example:

<li class="dropdown">
  <a href="#">Topics</a>
  <ul class="submenu">
    <li><a href="/topic1">Topic 1</a></li>
    <li><a href="/topic2">Topic 2</a></li>
  </ul>
</li>

Step 4: Style Your Menu

Update your CSS (often assets/css/style.css) to match your branding and add responsiveness for mobile devices.

Step 5: Test Navigation Across Devices

Verify the menu works well on desktops, tablets, and smartphones. Pay special attention to dropdown accessibility on touch screens.

Case Study: Personalized Navigation for a Marketing Blog

A blog owner restructured their Mediumish navigation to include custom category links and a prominent 'Resources' dropdown. This helped visitors find tutorials faster, boosting page views by 18%.

Conclusion

Customizing your navigation menus in the Jekyll Mediumish theme allows you to tailor your site’s user journey and improve engagement. With simple HTML and CSS tweaks, you can create a navigation system that reflects your brand and content priorities.


Archives / All Content

© ClipLeakedTrend . All rights reserved.