Jalpc.

https://jarrekk.github.io/Jalpc/

http://www.jarrekk.com -- Personal website

• 3 steps to setup this theme at your website!
• Features
  • Index page
    • _data/*.yml
  • Chart Skills
  • Categories in blog page
  • Pagination
  • Page views counter
  • Multilingual Page
  • Web analytics
  • Comment
  • Share
  • Search engines
  • Compress CSS and JS files
• Put in a Jalpc Plug
• Upgrading Jalpc
  • Ensure there's an upstream remote
  • Pull in the latest changes
• Todo
• Donate Jalpc
• Wiki
• Ad

This is a simple, beautiful and swift theme for Jekyll. It's mobile first, fluidly responsive, and delightfully lightweight.

If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.

3 steps to setup this theme at your website!

Here is a document of how to setup this theme with 3 steps and a wiki of how to add posts. If you have any questions please ask me at GitHub Issues.

Features

Legacy multi-section landing (Removed)

The original Jalpc multi-section landing (driven by _data/landing.yml and _includes/sections/*) has been removed in favor of a minimalist single-page home (layout: home). Those files are no longer present. If you need them back, recover from git history.

The following is mapping between yml files to donation

• donation/donationlist.yml ==> blog/donate.html
• donation/alipay.yml ==> blog/donate.html
• donation/wechat_pay.yml ==> blog/donate.yml

(Removed) Chart Skills Section

The radar skills chart and associated data files were part of the legacy landing and are no longer rendered.

Categories in blog page

In blog page, we categorize posts into several categories by url, all category pages use same template html file - _includes/category.html.

For example: URL is http://127.0.0.1:4000/python/. In _data/blog.yml, we define this category named Python, so in _includes/category.html we get this URL(/python/) and change it to my category(Python), then this page are posts about Python. The following code is about how to get url and display corresponding posts in _includes/category.html.

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="navy-line"></div>
        {% assign category = page.url | remove:'/' | capitalize %}
        {% if category == 'Html' %}
        {% assign category = category | upcase %}
        {% endif %}
        <h1>{{ category }}</h1>
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight blog">
    <div class="row">
        <ul id="pag-itemContainer" style="list-style:none;">
            {% assign counter = 0 %}
            {% for post in site.categories[category] %}
            {% assign counter = counter | plus: 1 %}
            <li>

Pagination

The pagination in jekyll is not very perfect,so I use front-end web method,there is a blog about the method and you can refer to jPages.

Page views counter

Many third party page counter platforms are too slow,so I count my website page view myself,the javascript file is static/js/count.min.js (static/js/count.js),the backend API is written with flask on Vultr VPS, detail code please see ztool-backhend-mongo.

Multilingual Page

The landing page has multilingual support with the i18next plugin.

Languages are configured in the _data/index/language.yml file.

Not everyone needs this feature, so I make it very easy to remove it, just clear content in file _data/language.yml and folder static/locales/.

About how to custom multilingual page, please see wiki.

Web analytics

I use Google analytics and GrowingIO to do web analytics, you can choose either to realize it,just register a account and replace id in _config.yml.

Comment

I use Disqus to realize comment. You should set disqus_shortname and get public key and then, in _config.yml, edit the disqus value to enable Disqus.

Share

I use AddToAny to share my blog on other social network platform. You can go to this website to custom your share buttons and paste code at _includes/share.html.

Search engines

I use javascript to realize blog search,you can double click Ctrl or click the icon at lower right corner of the page,the detail you can got to this repository. Just use it.

Compress CSS and JS files

All CSS and JS files are compressed at /static/assets.

I use UglifyJS2, clean-css to compress CSS and JS files, customised CSS files are at _sass folder which is feature of Jekyll. If you want to custom CSS and JS files, you need to do the following:

1. Install NPM then install UglifyJS2 and clean-css: npm install -g uglifyjs; npm install -g clean-css, then run npm install at root dir of project.
2. Compress script is build.js
3. If you want to add or remove CSS/JS files, just edit build/build.js and build/files.conf.js, then run npm run build at root dir of project, link/src files will use new files.

OR

Edit CSS files at _sass folder.

Local tests/development

First, install Jekyll on terminal:

bundle install

Then, execute:

bundle exec jekyll serve

Put in a Jalpc Plug

If you want to give credit to the Jalpc theme with a link to my personal website http://www.jarrekk.com, that'd be awesome. No worries if you don't.

Upgrading Jalpc

Jalpc is always being improved by its users, so sometimes one may need to upgrade.

Ensure there's an upstream remote

If git remote -v doesn't have an upstream listed, you can do the following to add it:

git remote add upstream https://github.com/jarrekk/Jalpc.git

Pull in the latest changes

git pull upstream gh-pages

There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!

Testing Locally

To test your site locally, you’ll need

• ruby
• the github-pages gem

Installing ruby

There are lots of different ways to install ruby.

In Mac OS X, older versions of ruby will already be installed. But I use the Ruby Version Manager (RVM) to have a more recent version. You could also use Homebrew.

In Windows, use RubyInstaller. (In most of this tutorial, I’ve assumed you’re using a Mac or some flavor of Unix. It’s possible that none of this was usable for Windows folks. Sorry!)

Installing the github-pages gem

Run the following command:

gem install github-pages

This will install the github-pages gem and all dependencies (including jekyll).

Later, to update the gem, type:

gem update github-pages

Testing your site locally To construct and test your site locally, go into the directory and type

jekyll build

This will create (or modify) a _site/ directory, containing everything from assets/, and then the index.md and all pages/*.md files, converted to html. (So there’ll be _site/index.html and the various _site/pages/*.html.)

Type the following in order to “serve” the site. This will first run build, and so it does not need to be preceded by jekyll build.

jekyll serve

Now open your browser and go to http://localhost:4000/site-name/

Todo

• jekyll server --watch mode need to use original CSS/JS files
• User can customise index page's section title.
• Non-github projects also have links.
• Add some custom color themes for selection(Nav bar, background, words, dominant hue).

Donate Jalpc

If this project let you enjoy your blog time, you can give me a cup of coffee :)

Wiki

• Multilingual Page
• How to add posts
• Change Log
• Contributors
• Thanks to the following

Ad

Jalpc-A: another Jekyll theme written by AngularJS.

---

Modern Home Page (Customized)

This fork has been updated with a minimalist single-page home experience (layout: home).

Data-driven Content

Edit hero text in _data/hero.yml:

headline: "Rob Sewell"
subheading: "Automation Consultant – Sewells Consulting Limited"
primary_cta:
  label: "Visit the Blog"
  url: "https://blog.robsewell.com"
secondary_cta:
  label: "Book a Meeting"
  url: "https://calendly.com/rob-sewell"

Edit contact / link targets in _data/contact.yml:

linkedin: robmsewell
github: SQLDbaWithABeard
bluesky: robsewell.com
email_display: rob@sewells-consulting.co.uk
mvp_id: 5002693
calendly: rob-sewell
rss: /feed.xml
blog_url: https://blog.robsewell.com

Adding / Managing Short Links

Short links use the existing redirected layout. Create a file at the project root (or any subfolder) with front matter:

---
layout: redirected
redirect_to: https://target.example.com/some/path
permalink: /alias
---

The home page automatically lists all such redirects in the Short Links section. No plugin required; it enumerates site.pages where layout: redirected.

Theming & Dark Mode

The home layout auto-detects system dark/light. A toggle cycles auto → light → dark → … and stores preference in localStorage.

To tweak colors, adjust CSS variables near the top of _layouts/home.html.

Email Display & Copy

Email text is rendered without a direct mailto: to reduce scraping. A copy button is progressively enhanced with JavaScript.

Structured Data

The layout embeds JSON-LD Person schema to improve search engine visibility. Update fields in _config.yml and the contact data if needed.

Future: Redirect Validation (Optional)

You can add a GitHub Action to validate all redirect_to targets (e.g. using curl + a small script). Example workflow stub (not yet committed):

name: Validate Redirects
on: [push, workflow_dispatch]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: List redirect pages
        run: |
          grep -rl "layout: redirected" . > redirects.txt || true
          echo "Found $(wc -l < redirects.txt) redirect pages"
      - name: Validate
        run: |
          set -e
          while read file; do
            url=$(awk '/redirect_to:/ {print $2}' "$file")
            path=$(awk '/permalink:/ {print $2}' "$file" | tr -d '"')
            if [ -z "$url" ]; then echo "Missing redirect_to in $file"; exit 1; fi
            code=$(curl -I -o /dev/null -w '%{http_code}' -L --max-time 15 "$url" || echo ERR)
            echo "$path -> $url : $code"
            if [ "$code" = "404" ] || [ "$code" = "000" ] || [ "$code" = "ERR" ]; then
              echo "Broken redirect: $path ($url)"; exit 1;
            fi
          done < redirects.txt

---

Maintenance Summary

Task	File(s)
Update hero text	_data/hero.yml
Update contact links	_data/contact.yml
Add redirect	New file with layout: redirected
Tweak colors/layout	_layouts/home.html
Update avatar	_config.yml (author.avatar)

---