Third post expaining how to switch Jekyll theme on GitHub pages

Also switches my own theme to Modernist
lithiumhead · Dec 27, 2023 · 71bb23d · 71bb23d
1 parent decf24a
commit 71bb23d
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 2 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -20,15 +20,15 @@
 
 title: Anurag's DIY & IoT Projects
 description: >- # this means to ignore newlines until "baseurl:"
-  I am an Engineer based in Pune, India. 
+  I am an Engineer based in Pune, India.
   These are some of my DIY & IoT projects.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: duniyakashaana
 github_username:  lithiumhead
 
 # Build settings
-theme: minima
+theme: jekyll-theme-modernist
 plugins:
   - jekyll-feed
 

diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -0,0 +1,61 @@
+---
+layout: base
+---
+
+<div class="home">
+  {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }}</h1>
+  {%- endif -%}
+
+  {{ content }}
+
+
+  {% if site.paginate %}
+    {% assign posts = paginator.posts %}
+  {% else %}
+    {% assign posts = site.posts %}
+  {% endif %}
+
+
+  {%- if posts.size > 0 -%}
+    {%- if page.list_title -%}
+      <h2 class="post-list-heading">{{ page.list_title }}</h2>
+    {%- endif -%}
+    <ul class="post-list">
+      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+      {%- for post in posts -%}
+      <li>
+        <span class="post-meta">{{ post.date | date: date_format }}</span>
+        <h3>
+          <a class="post-link" href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </h3>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    {% if site.paginate %}
+      <div class="pager">
+        <ul class="pagination">
+        {%- if paginator.previous_page %}
+          <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+        {%- else %}
+          <li><div class="pager-edge">•</div></li>
+        {%- endif %}
+          <li><div class="current-page">{{ paginator.page }}</div></li>
+        {%- if paginator.next_page %}
+          <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+        {%- else %}
+          <li><div class="pager-edge">•</div></li>
+        {%- endif %}
+        </ul>
+      </div>
+    {%- endif %}
+
+  {%- endif -%}
+
+</div>
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+{% seo %}
+
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    {% include head-custom.html %}
+  </head>
+  <body>
+    <div class="wrapper">
+      <header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}>
+        <h1>{{ site.title | default: site.github.repository_name }}</h1>
+        {% if site.description or site.github.project_tagline %}
+          <p>{{ site.description | default: site.github.project_tagline }}</p>
+        {% endif %}
+        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
+        <ul>
+        {% if site.show_downloads %}
+          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
+          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
+        {% endif %}
+          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
+        </ul>
+      </header>
+      <section>
+
+      {{ content }}
+
+      </section>
+    </div>
+    <footer>
+    {% if site.github.is_project_page %}
+      <p>Project maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+    {% endif %}
+      <p>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></p>
+    </footer>
+    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
+  </body>
+</html>
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+{% seo %}
+
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    {% include head-custom.html %}
+  </head>
+  <body>
+    <div class="wrapper">
+      <header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}>
+        <h1>{{ site.title | default: site.github.repository_name }}</h1>
+        {% if site.description or site.github.project_tagline %}
+          <p>{{ site.description | default: site.github.project_tagline }}</p>
+        {% endif %}
+        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
+        <ul>
+        {% if site.show_downloads %}
+          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
+          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
+        {% endif %}
+          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
+        </ul>
+      </header>
+      <section>
+
+      {{ content }}
+
+      </section>
+    </div>
+    <footer>
+    {% if site.github.is_project_page %}
+      <p>Project maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+    {% endif %}
+      <p>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></p>
+    </footer>
+    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
+  </body>
+</html>
diff --git a/docs/_posts/2023-12-27-switch-jekyll-theme.markdown b/docs/_posts/2023-12-27-switch-jekyll-theme.markdown
@@ -0,0 +1,47 @@
+---
+layout: post
+title:  "Switch the Jekyll theme on GitHub Pages from Minima to Modernist"
+date:   2023-12-27 18:40:00 +0530
+categories: howto
+---
+
+This post shows you how to switch the Jekyll theme on your existing GitHub Pages site
+
+References
+==========
+
+* [Adding a theme to your GitHub Pages site using Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll)
+* [List of themes supported on GitHub Pages](https://pages.github.com/themes/)
+
+  * [Minima theme preview](https://jekyll.github.io/minima/)
+  * [Modernist theme preview](https://pages-themes.github.io/modernist/)
+
+Prerequisites
+=============
+
+* Your existing GitHub Pages repo cloned out on an Ubuntu Computer
+
+Cloning your existing repo and recreating the environment
+=========================================================
+
+1. Open console and navigate to the `docs` sub-folder in your checked out repo (is `lithiumhead.github.io/docs/` in my case).
+2. Open `_config.yml` for editing. Look for `theme: minima` and change it to `theme: jekyll-theme-modernist` and save the file.
+3. Back at the bash prompt, run `bundle update` while still in the `docs` sub-folder.
+   This will download all the themes supported by [GitHub pages](https://pages.github.com/themes/) locally to your computer.
+4. Try to render existing posts locally by issuing `bundle exec jekyll serve`.
+   You will get a build warning saying that the layouts for the types page, post and home are not known.
+   This is because if you look at the [GitHub repo](https://pages-themes.github.io/modernist/) for the modernist theme, you will realise that [_layouts](https://github.com/pages-themes/modernist/tree/master/_layouts) folder there only has default.html. So at this point we can open the affected markdown files and switch the layout for each of them to default or we can supply the html files for the page,post and home layout types manually. We will try the latter.
+   Press ctrl+c to kill the server.
+5. Copy the `home` layout files from the (_layouts)[https://jekyll.github.io/minima/tree/master/_layouts] folder of the minima theme:
+   1. At the console while still in the `docs` sub-folder, issue `mkdir _layouts`
+   2. `cd _layouts`
+   3. `wget https://github.com/jekyll/minima/raw/master/_layouts/home.html`
+6. For the `post` and `page` layout, let's just duplicate the `default` layout of the modernist theme, we can customize them later:
+   1. `wget https://github.com/pages-themes/modernist/raw/master/_layouts/default.html -O post.html`
+   2. `wget https://github.com/pages-themes/modernist/raw/master/_layouts/default.html -O page.html`
+7. Render locally
+   1. Navigate one level up back to `docs` : `cd ..`
+   2. `bundle exec jekyll serve`
+   3. Open [http://127.0.0.1:4000/](http://127.0.0.1:4000/) in Browser
+
+