Configuration this site

Posted Feb 5, 2022 Updated Aug 26, 2024

15 min read

I’ve been nerding out about web development since I’m like 13 or 14 years old. While my first webpages were html-only, at some point designing them in Photoshop and then ‘slicing’ them up into pictures to then hosting them via tables on html became a big deal. All of this obviously was before people accessed websites on their phones.

Since I’m obsessed with getting stuff as cheap as possible or best case for free, I’ve been tinkering with web development that gets me there as well.

Which means, running this website comes at pretty much no cost to me and is – as far as I can tell also the only way to run a website as complex as this one for free.

I pay for the Domain and yes, a .lol-Domain is pricey but worth the joke. But that’s the only cost attached to this site.

That comes with some ~~drawbacks~~ quirks on usability. Upfront: I run this site with the comand-line CMS Jekyll, it’s hosted on github (free storage) and then pushed to Render.com, which hosts plain-text file websites for free.

The reason for pushing from Github to Render is, it gives me flexibility on plugins and themes which Github’s Jekyll integration does not.

How I publish

As a software stack, I use a combination of Sublime Text, iA Writer, the Terminal and obviously Git to do this stuff. I complement with espanso which I use to provide a boilerplate new post-kind-of-thing: Typing :nea¹ anywhere will add this yaml-metadata header anywhere:

---
date: 2024-12-05
author: mathis
tags:
category:
title:
---

I have my jekyll setup in a way that I have one developing folder mathis-lol which contains all my files and which if called with jekyll build builds into a folder called mathis-lol-push – which by the way was a poor naming decision. push-mathis-lol would have been smarter as the Terminal could’ve better auto-complete the folder names.

.
├── mathis-lol
├── mathis-lol-push

This folder setup is important since you may want to maintain one git-setup for your development files (in my case mathis-lol) while your public files will sit in its own git-repository.

Workflow-Schematic

Open iA writer
- New Doc: :nea
- Write
- Add title, tags, categories in frontmatter
- tags are lists
Open Terminal
- cd into development
- jekyll deploys in ../mathis-lol-push
  - bundle exec jekyll build
- this is the deploy I’m using
  - cd ../mathis-lol-push
  - git add .
  - git commit -m "message"
  - git push // ‘git push origin main –force’ (might help with large picture upload)
  - then render deploys repository “mathis-lol-push”
- Render.com should then auto-deploy
- You can manually deploy

Theme

This site uses Chirpy Theme by cotes2020. Some edits I made:

Added Open-Embed support

To easily embed e.g. Youtube videos into posts, Open-Embed.
Find local gem file # in the root directory of your site $ bundle info --path jekyll-theme-chirpy
In my case: /Users/mathis/.gem/ruby/3.1.0/gems/jekyll-theme-chirpy-5.0.2
Copy _layouts/default.html
To your site nullnein on github
In _layouts/default.html
Edit before the </body> include the open-embed.html

When writing, just paste the URL directly in the Markdown file of your post, and the plugin will automatically generate the corresponding HTML element. For example: In file _posts/2022-02-07-my-awesome-post.md:

 bla bla bla bla 

 https://www.youtube.com/watch?v=qgqZnHwG7Cc

 bla bla bla bla bla

 ...

I took out the section Trending Tags from the sidebar.

In _layouts/default.html I took out the trending-tags.html.

          <!-- panel -->
          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
            <div class="access">
              <!-- Get the last 5 posts from lastmod list. -->

  <section id="access-lastmod">
    <h2 class="panel-heading"></h2>
    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
      
        <li class="text-truncate lh-lg">
          <a href="/posts/ecb-doener-kebab/">DW -- Is the ECB going to make Döner Kebab cheaper?</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/configuration-this-site/">Configuration this site</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/from-bazooka-to-backstop/">Paper -- From bazooka to backstop - the political economy of standing swap facilities</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/igls/">Igls</a>
        </li>
      
    </ul>
  </section>
  <!-- #access-lastmod -->

              <!-- The trending tags list -->

  <section>
    <h2 class="panel-heading"></h2>
    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
      
        <a class="post-tag btn btn-outline-primary" href="/tags/dw/">DW</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/financialsociety/">FinancialSociety</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/central-banking/">central banking</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/germany/">Germany</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/economics/">economics</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/learning-journalism/">learning journalism</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/asyl/">asyl</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/business/">business</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/eu/">EU</a>
      
        <a class="post-tag btn btn-outline-primary" href="/tags/learningjournalism/">learningJournalism</a>
      
    </div>
  </section>

            </div>

Added also tags of article into top sidebar, where Trending Tags deleted, now:

<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
<div class="access">
<!-- Get the last 5 posts from lastmod list. -->

  <section id="access-lastmod">
    <h2 class="panel-heading"></h2>
    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
      
        <li class="text-truncate lh-lg">
          <a href="/posts/ecb-doener-kebab/">DW -- Is the ECB going to make Döner Kebab cheaper?</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/configuration-this-site/">Configuration this site</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/from-bazooka-to-backstop/">Paper -- From bazooka to backstop - the political economy of standing swap facilities</a>
        </li>
      
        <li class="text-truncate lh-lg">
          <a href="/posts/igls/">Igls</a>
        </li>
      
    </ul>
  </section>
  <!-- #access-lastmod -->

Added GoatCounter Analytics

In _layouts/default.html before </body> added:

    <script data-goatcounter="https://mikrophaenomene.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

However: uBlock origin blocks GoatCounter which is fine for me. Also localhost serves of jekyll call at GoatCounter so test environment may mess up the count but since uBlock blocks it it should be fine.

Because of unclarity around licensing, I decided to opt for a “some rights reserved” in the footer. Thus, I needed to take out the CC license at the bottom of each post. Also, I don’t like sharing buttons. So the whole piece had to go.

In layouts/posts.html I deleted this whole section at the bottom:

  <div class="post-tail-bottom
    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
    <div class="license-wrapper">

      
    </div>

    <!-- Post sharing snippet -->

<div class="share-wrapper d-flex align-items-center">
  <span class="share-label text-muted me-1"></span>
  <span class="share-icons">
    
    
    

    
      
      <a
        href="https://twitter.com/intent/tweet?text=Configuration%20this%20site%20-%20mathis&url=%2Fposts%2Fconfiguration-this-site%2F"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Twitter"
        target="_blank"
        rel="noopener"
        aria-label="Twitter"
      >
        <i class="fa-fw fa-brands fa-square-x-twitter"></i>
      </a>
    
      
      <a
        href="https://www.facebook.com/sharer/sharer.php?title=Configuration%20this%20site%20-%20mathis&u=%2Fposts%2Fconfiguration-this-site%2F"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Facebook"
        target="_blank"
        rel="noopener"
        aria-label="Facebook"
      >
        <i class="fa-fw fab fa-facebook-square"></i>
      </a>
    
      
      <a
        href="https://t.me/share/url?url=%2Fposts%2Fconfiguration-this-site%2F&text=Configuration%20this%20site%20-%20mathis"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Telegram"
        target="_blank"
        rel="noopener"
        aria-label="Telegram"
      >
        <i class="fa-fw fab fa-telegram"></i>
      </a>
    

    <button
      id="copy-link"
      aria-label="Copy link"
      class="btn small"
      data-bs-toggle="tooltip"
      data-bs-placement="top"
      title=""
      data-title-succeed=""
    >
      <i class="fa-fw fas fa-link pe-none"></i>
    </button>
  </span>
</div>


  </div><!-- .post-tail-bottom -->

Took out pagination on post bottom

Deleted contents of _includes/post-nav.html.

Setup

[x]installing ruby
[x]installing jekyll
- continue at “Get your Ruby version:”
[ ]installing chirby on github pages
setup guide
setup at nullnein.onrender.com, run:
- jekyll bundle exec jekyll build
- push to github not automated yet
- I think render will automatically redeploy
How github/jekyll workflow works, very basic tutorial
How to link

Stuff to figure out

image handling

Typora imputs into assets folder
assets has subfolders by category
attibute image path as /assets/image-path.extension

add tag-archive

https://brettterpstra.com/projects/jtag/

change nil to none in tags_json.html
change config.yml to point to https://raw.githubusercontent.com/nullnein/site-deploy/main/data/tags.json

Footnotes

I’ve created an espanso-package, its pending approval. You can download it here. ↩

TechnicalStuff