static_files

16102025::19102025

Jekyll is a static site builder written in Ruby with focus on blog posts. And this site is totally jekyll dependant. Initially it was hosted in github and Github does the jekyll build process upon push. But I have ever since migrated this site to codeberg pages. Codeberg however didnt have jekyll build proccess like github did. And I have taken it as a challenge to learn jekyll myself instead of relying on github workflow.

At first I only intended to do blog posts. But now I share my artwork progress and want to organize them. It is no biggie with javascript to organize static files like images. There are plenty options like tabbing, masonry grid and such but because I avoid javascript like its a plague I looked for and found a good (html only) workaround for tabbing to organize my artwork.

<div id="gallery-container" class="main-content-wrapper">

    <input type="radio" name="tabs" id="tab1" class="tab-input" checked>
    <input type="radio" name="tabs" id="tab2" class="tab-input">

    <nav class="tabs">
        <label for="tab1" class="nav-link">Photographs</label>
        <label for="tab2" class="nav-link">Sketches</label>
    </nav>

    <section id="photographs-content" class="tab-content" data-content="photographs">
        <div class="art-grid">
            <div class="art-grid-item">
                <img src="/assets/img/photographs/wire.jpg">
            </div>
            <div class="art-grid-item">
                <img src="/assets/img/photographs/branch.jpg">
            </div>
            <div class="art-grid-item">
                <img src="/assets/img/photographs/coucal.jpg">
            </div>
        </div>
    </section>
    <section id="sketches-content" class="tab-content pixel-art-image" data-content="sketches">
        <input type="checkbox" id="sensitiveToggle" class="sensitive-toggle-input">

        <label for="sensitiveToggle" class="toggle-button">
            <span class="show-text">Show nudity</span>
            <span class="hide-text">Hide nudity</span>
        </label>
        <div class="art-grid">
            <div class="art-grid-item">
                <img src="/assets/img/sketches/sketch1760524508537.png">
            </div>
            <div class="art-grid-item">
                <img src="/assets/img/sketches/sketch1760525141314.png">
            </div>
        </div>
    </section>
</div>

(as of October 19, 2k25 I no longer use tabbing instead use monthly archives)

I find it tedious to edit a page everytime I add a new photo. I wanted to automate the whole process so that it requires minimal effort. I have thought of creating a new collection in _config.yml however It’d be much more tedious to use same liquid code used for posts as It’d require me to make a new markdown file for every entry. The liquid code in question:

{% for post in site.posts %}
    <div>
        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
        <small>{{ post.date | date: "%d-%m-%Y" }} </small>
        <p>{{ post.description }} <a href="{{ post.url }}"> Read &rarr;</a></p>
    </div>
    <hr>    
{% endfor %}

What it does is look for files(markdown/html) in the /_posts directory and generates an html page in the specifed address. In my case /a/ar/:title. Though perfect for posts as is but terrible for something like bunch of images. Luckily there is jekyll function literally called the static_files.

<div class="art-grid">
    {% assign current_dir = page.dir %}
    
    {% assign monthly_files = site.static_files 
                               | where_exp: "file", "file.path contains current_dir" 
                               | where_exp: "file", "file.basename != 'index.html'" 
                               | where_exp: "file", "file.extname != '.DS_Store'" 
                               | reverse 
    %}

    {% for file in monthly_files %}
        <div class="art-grid-item">
            <img 
                src="{{ file.path | relative_url }}" 
                alt="{{ alt_text }}"
            >
        </div>
    {% endfor %}
</div>

AKA the drop and go. It looks for static files in the specified directory and outputs them all. With this I can get away with just storing the image in the directory without having to do any page editing. So as of now this is what I use for my artwork pages.