Why use a microblog when mastodon/bluesky/tumblr/etc. exists?

Why?#

I saw a mastodon mutual of mine open an account with micro.blog recently in order to have a non-SNS place to ramble¹. They go into some pretty insightful and personal details (do check them out!), and that made me wonder about my reasons as well.

I keep a separate microblog as well, though sometimes I consider it more of a statuslog. I don’t post on there as often as I do on my mastodon account, but I have noticed that I’m a little hesitant to post the random thoughts or feelings I have on mastodon. For example, I find it really fun to post about my game or book pickups on mastodon because other people might be amused by that (and I want them to see those posts and maybe spark some interaction).

But I’m more hesitant to complain about how my day was, or when I’m feeling under the weather. I think most people wouldn’t find it interesting to hear about how often I have migraines, for example. And sometimes I just wanna yap about whatever show or book I’m into at the moment, even when I don’t have particularly deep thoughts about it.

“But Navi,” I hear you say, “Isn’t that what this blog is for?”.

Dear imaginary reader, yes and no. It’s true that if I have more than a couple sentences to say about something, I would rather post it on my blog(s) if it falls into one of my established categories (ranobe, games, book reviews, etc). But sometimes your girl just wants to talk about the awesome ice cream she ate last night or the post-series depression from a really good litrpg series.

And honestly, sometimes I cross-post these spur of the moment posts to my mastodon anyways, after thinking “why shouldn’t I post it there too??”. It’s helpful to have a place where you can be a little more… “relaxed” first and maybe vent a little. Anyways, those are my rough reasons for bothering to have a microblog/statuslog even though I’m already pretty active on mastodon.

Because I plan on putting this blog post in the “webdev” category, let’s talk about some more practical and fun stuff now lol.

How it’s made#

I initially started with the Pastille template by NomNomNami. Mary linked to it, and it got me thinking about how I might want to “archive” some mastodon posts. I was excited to use it since it was totally just an HTML page with some fancy CSS, with no other complicated static site generation tools involved.

However, while I was tinkering with the code, there were some modifications I wanted to make. I had these ideas over time, and slowly added them to my page by asking Gemini for code solutions and tweaking things when they didn’t work. Below, you can find some of the customizations that I did to the Pastille template.

1. Adding post IDs#

I simply used anchor links for these!

2. Customizing the color scheme#

I picked some colors from the avatar I was planning to use, and edited the CSS.

3. Creating an RSS feed with a script#

I used a python script and a github action for this. I can manually trigger the script to run to generate an RSS feed when I’m done posting.

RSS Generation Script

1
import os
2
import re
3
import zoneinfo
4
import PyRSS2Gen
5
from bs4 import BeautifulSoup
6
from datetime import datetime
7
import xml.dom.minidom
8
import io
9

10
# CONFIGURATION
11
SITE_URL = "https://now.pomnavi.net"
12
SITE_TITLE = "What is Navi up to now?"
13
SITE_DESC = "Doing geeky things probably."
14
PACIFIC_TZ = zoneinfo.ZoneInfo("US/Pacific")
15

16
def get_dt_object(date_text):
17
    """Helper to convert emoji-string to a real datetime object for sorting."""
18
    try:
19
        clean_date = re.sub(r'[📅🕐]', '', date_text).strip()
20
        clean_date = " ".join(clean_date.split())
21
        dt = datetime.strptime(clean_date, "%d %b %Y %I:%M %p")
22
        return dt.replace(tzinfo=PACIFIC_TZ)
23
    except Exception as e:
24
        print(f"Date error: {e}")
25
        return datetime.now(PACIFIC_TZ)
26

27
# 1. Load HTML
28
with open("index.html", "r", encoding="utf-8") as f:
29
    soup = BeautifulSoup(f, "html.parser")
30

31
posts = soup.find_all("article", class_="post")
32
temp_list = []
33

34
for post in posts:
35
    post_id = post.get("id", "0000")
36
    time_tag = post.find("time")
37

38
    # Get datetime object for sorting
39
    dt_obj = get_dt_object(time_tag.get_text()) if time_tag else datetime.now(PACIFIC_TZ)
40

41
    # Format the string for the RSS XML (RFC 822)
42
    formatted_date = dt_obj.strftime("%a, %d %b %Y %H:%M:%S %z")
43

44
    description = " ".join([p.text for p in post.find_all("p")])
45

46
    rss_item = PyRSS2Gen.RSSItem(
47
        title=f"Post #{post_id}",
48
        link=f"{SITE_URL}/#{post_id}",
49
        description=description,
50
        guid=PyRSS2Gen.Guid(post_id, isPermaLink=False),
51
        pubDate=formatted_date
52
    )
53

54
    # Add a tuple to our list: (the datetime object, the rss item)
55
    temp_list.append((dt_obj, rss_item))
56

57
# 2. Sort by the actual datetime object (the first item in the tuple)
58
# reverse=True puts the newest posts at the top
59
temp_list.sort(key=lambda x: x[0], reverse=True)
60

61
# Extract only the RSSItems for the generator
62
rss_items = [item[1] for item in temp_list]
63

64
# 3. Generate the RSS Object
65
current_build_time = datetime.now(PACIFIC_TZ).strftime("%a, %d %b %Y %H:%M:%S %z")
66

67
rss = PyRSS2Gen.RSS2(
68
    title=SITE_TITLE,
69
    link=SITE_URL,
70
    description=SITE_DESC,
71
    lastBuildDate=current_build_time,
72
    items=rss_items
73
)
74

75
# 4. Format/Pretty-Print the XML
76
tmp_file = io.StringIO()
77
rss.write_xml(tmp_file, encoding="utf-8")
78
raw_xml = tmp_file.getvalue()
79

80
dom = xml.dom.minidom.parseString(raw_xml)
81
pretty_xml = dom.toprettyxml(indent="  ")
82

83
# 5. Save the pretty file
84
with open("feed.xml", "w", encoding="utf-8") as f:
85
    f.write(pretty_xml)
86

87
print("Chronological Pretty-printed RSS Feed updated successfully!")

RSS Generation Github Action

1
name: Generate RSS Feed
2

3
on:
4
  workflow_dispatch: # This allows you to click a button to run it manually
5

6
jobs:
7
  build:
8
    runs-on: ubuntu-latest
9
    steps:
10
      - name: Checkout code
11
        uses: actions/checkout@v3
12
        with:
13
         fetch-depth: 0 # Ensures it gets the absolute latest commit
14

15
      - name: Set up Python
16
        uses: actions/setup-python@v4
17
        with:
18
          python-version: '3.x'
19

20
      - name: Install dependencies
21
        run: pip install beautifulsoup4 PyRSS2Gen tzdata
22

23
      - name: Run generator
24
        run: python generate_rss.py
25

26
      - name: Commit and push if changed
27
        run: |
28
          git config --global user.name "github-actions[bot]"
29
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
30
          git add feed.xml
31
          git diff --quiet && git diff --staged --quiet || (git commit -m "Manual RSS Feed Update" && git push)

4. Hiding posts when there are more than 20 of them (with a load-more button)#

5. Making the tags in the bottom of each post actually functional when you click on them#

Items 4-5 were accomplished with the following Javascript which is located at the bottom of my index page:

1
<script>
2
// CONFIGURATION
3
const postsToShowInitially = 20;
4
const amountToLoadEachTime = 20;
5

6
window.addEventListener('DOMContentLoaded', (event) => {
7
    const allPosts = document.querySelectorAll('.post');
8
    const loadMoreBtn = document.getElementById('load-more-btn');
9
    const endMsg = document.getElementById('end-message');
10

11
    // 1. Initial Visibility Logic
12
    if (allPosts.length <= postsToShowInitially) {
13
        if(loadMoreBtn) loadMoreBtn.style.display = 'none';
14
    }
15

16
    // 2. TAG CLICK LOGIC (Fixed for Radio Buttons)
17
    document.addEventListener('click', function(e) {
18
        if (e.target.classList.contains('inline-tag')) {
19
            e.preventDefault();
20

21
            const selectedTagId = e.target.getAttribute('data-tag');
22
            // Find the radio button that matches the tag ID
23
            const targetRadio = document.getElementById(selectedTagId);
24

25
            if (targetRadio) {
26
                targetRadio.checked = true; // "Click" the radio button
27
                // Trigger the change event so the CSS/JS filtering kicks in
28
                targetRadio.dispatchEvent(new Event('change'));
29
                window.scrollTo({ top: 0, behavior: 'smooth' });
30
            }
31
        }
32
    });
33

34
    // 3. Handle Direct Hash Links (e.g., site.com/#0001)
35
    if(window.location.hash) {
36
        try {
37
            const target = document.querySelector(window.location.hash);
38
            if (target) {
39
                target.classList.remove('is-hidden');
40
                target.style.display = 'block';
41
                target.scrollIntoView();
42
            }
43
        } catch(e) { console.error("Hash error:", e); }
44
    }
45

46
   // 4. Load More Button Logic
47
    if (loadMoreBtn) {
48
        loadMoreBtn.addEventListener('click', function() {
49
            loadMoreBtn.classList.add('loading');
50

51
            setTimeout(() => {
52
                const hiddenPosts = document.querySelectorAll('.post.is-hidden');
53

54
                for (let i = 0; i < amountToLoadEachTime; i++) {
55
                    if (hiddenPosts[i]) {
56
                        hiddenPosts[i].classList.remove('is-hidden');
57
                        hiddenPosts[i].style.display = 'block';
58
                    }
59
                }
60

61
                loadMoreBtn.classList.remove('loading');
62

63
                // Check again: if no more hidden posts, hide the button and show end message
64
                if (document.querySelectorAll('.post.is-hidden').length === 0) {
65
                    loadMoreBtn.style.display = 'none';
66
                    if (endMsg) {
67
                        endMsg.style.display = 'block'; // THIS LINE FIXES IT
68
                        endMsg.classList.add('visible');
69
                    }
70
                }
71
            }, 600);
72
        });
73
    }
74

75
    // 5. Filter Change Logic
76
    const filters = document.querySelectorAll('input[name="tag"]');
77
    filters.forEach(filter => {
78
        filter.addEventListener('change', function() {
79
            if (this.id !== 'all') {
80
                if(loadMoreBtn) loadMoreBtn.style.display = 'none';
81
                if(endMsg) endMsg.style.display = 'none';
82
            } else {
83
                if (document.querySelectorAll('.post.is-hidden').length > 0) {
84
                    if(loadMoreBtn) loadMoreBtn.style.display = 'block';
85
                    if(endMsg) endMsg.style.display = 'none';
86
                } else {
87
                    if(endMsg) endMsg.style.display = 'block';
88
                }
89
            }
90
        });
91
    });
92
}); // End of DOMContentLoaded
93
</script>

6. Creating archive pages#

7. Creating a function that auto-redirects you when the post was moved to an archive.#

For 7 and 8, I use two files, a config file that stores which posts are located in what archive page, and another script added to the index page where it builds out the navigation menu for the archive pages.

config.js

1
const SITE_CONFIG = {
2
  // Update this once a year when you move posts
3
  archives: [
4
    { year: "2025", lastId: 5 }
5
  ],
6
  currentYear: "2026"
7
};

Archive and Navigation script: It’s placed in the head tag of the index page.

1
  <!--navigation and locator-->
2
            <script src="config.js"></script>
3
        <script>
4
              window.addEventListener('DOMContentLoaded', () => {
5
        const hash = window.location.hash.replace('#', '');
6
        const path = window.location.pathname;
7

8
        // 1. REDIRECT LOGIC
9
        if (hash && !document.getElementById(hash) && !isNaN(hash)) {
10
          const idNum = parseInt(hash, 10);
11
          const target = SITE_CONFIG.archives.find(range => idNum <= range.lastId);
12
          if (target) {
13
            window.location.href = `archive-${target.year}.html#${hash}`;
14
          }
15
        }
16

17
        // 2. NAVIGATION GENERATOR
18
        const nav = document.getElementById('yearly-nav');
19
        if (nav) {
20
          // Start with the "Now" (index) link
21
          const isNow = path.includes('index.html') || path.endsWith('/');
22
          let html = `<a href="index.html" class="${isNow ? 'active' : ''}">Now</a>`;
23

24
          // Add each year from your config
25
          SITE_CONFIG.archives.forEach(archive => {
26
            const isCurrent = path.includes(`archive-${archive.year}`);
27
            html += `<a href="archive-${archive.year}.html" class="${isCurrent ? 'active' : ''}">${archive.year}</a>`;
28
          });
29

30
          nav.innerHTML = html;
31
        }
32
      });
33
        </script>

8. Adding Micropub functionality.#

I kind of didn’t even understand what micropub was, but Mary’s enthusiasm about it convinced me to research and see if I could implement it on my site. Basically it’s like a CMS that allows you to easily create and format posts for your static site. You can use any 3rd party micropub application, but the setup is kind of a weird concept to get your head around.

I spent a couple hours working on getting this, I literally finished this today. You basically have to add some html links to your head tag, and then create either a server or “serverless” function that can receive your posts from the app and format them for your page.

Since the Pastille template is just an html page, adding micropub functionality makes it way easier to post! I don’t have to manually edit the post IDs, dates, time, and html tags. I can just focus on the stupid message I want to send lol.

Since I use Netlify for hosting, I use a Netlify serverless function to accept my Quill posts and turn them into html on my microblog. Obviously I’m not going to post the authorization tokens or anything, but you can see the broad strokes of the function script below. It’s just a toml file, javascript, and a marker in the index that tells the micropub function where to place the new post.

netlify.toml

1
[build]
2
  command = "npm install"
3
  functions = "netlify/functions"
4
  publish = "."
5

6
[[redirects]]
7
  from = "/micropub"
8
  to = "/.netlify/functions/micropub"
9
  status = 200

micropub.js

1
const axios = require('axios');
2
const Busboy = require('busboy');
3

4
const parseMultipart = (event) => {
5
    return new Promise((resolve, reject) => {
6
        const fields = {};
7
        const files = [];
8
        const busboy = Busboy({ headers: event.headers });
9
        busboy.on('file', (fieldname, file, info) => {
10
            const { filename, mimeType } = info;
11
            let fileBuffer = Buffer.alloc(0);
12
            file.on('data', (data) => { fileBuffer = Buffer.concat([fileBuffer, data]); });
13
            file.on('end', () => { files.push({ filename, mimeType, content: fileBuffer }); });
14
        });
15
        busboy.on('field', (name, val) => {
16
            if (fields[name]) {
17
                if (!Array.isArray(fields[name])) fields[name] = [fields[name]];
18
                fields[name].push(val);
19
            } else { fields[name] = val; }
20
        });
21
        busboy.on('finish', () => resolve({ fields, files }));
22
        busboy.on('error', (err) => reject(err));
23
        const body = event.isBase64Encoded ? Buffer.from(event.body, 'base64') : event.body;
24
        busboy.end(body);
25
    });
26
};
27

28
exports.handler = async (event) => {
29
    if (event.httpMethod !== 'POST') return { statusCode: 405, body: 'Method Not Allowed' };
30
    const authHeader = event.headers.authorization;
31
    if (!authHeader) return { statusCode: 401, body: 'Missing Token' };
32

33
    try {
34
        let content = "";
35
        let rawCategories = [];
36
        let photoFile;
37
        const contentType = event.headers['content-type'] || '';
38

39
        // --- DEEP DATA EXTRACTION ---
40
        if (contentType.includes('application/json')) {
41
            const body = JSON.parse(event.body);
42

43
            // Check properties (Standard Micropub)
44
            if (body.properties) {
45
                content = body.properties.content ? body.properties.content[0] : "";
46
                rawCategories = body.properties.category || body.properties.tag || [];
47
            } else {
48
                content = body.content || "";
49
                rawCategories = body.category || body.tag || [];
50
            }
51
        } else if (contentType.includes('multipart/form-data') || contentType.includes('application/x-www-form-urlencoded')) {
52
            let fields;
53
            if (contentType.includes('multipart')) {
54
                const parsed = await parseMultipart(event);
55
                fields = parsed.fields;
56
                photoFile = parsed.files[0];
57
            } else {
58
                const params = new URLSearchParams(event.body);
59
                fields = {};
60
                for (const [key, value] of params.entries()) {
61
                    fields[key] = params.getAll(key).length > 1 ? params.getAll(key) : value;
62
                }
63
            }
64

65
            content = fields.content || "";
66
            // Look for category, categories, or tags
67
            rawCategories = fields.category || fields['category[]'] || fields.tags || fields.tag || [];
68
        }
69

70
        // --- NORMALIZATION ---
71
        // Ensure it's an array and handle comma-separated strings
72
        let categoryList = Array.isArray(rawCategories) ? rawCategories : [rawCategories];
73
        if (categoryList.length === 1 && typeof categoryList[0] === 'string' && categoryList[0].includes(',')) {
74
            categoryList = categoryList[0].split(',');
75
        }
76

77
        const categories = categoryList
78
            .flat()
79
            .filter(cat => cat && typeof cat === 'string')
80
            .map(cat => cat.replace('#', '').trim().toLowerCase());
81

82
        // --- TIME (PST) ---
83
        const dateObj = new Date();
84
        const dateOptions = { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'America/Los_Angeles' };
85
        const timeOptions = { hour: 'numeric', minute: '2-digit', hour12: true, timeZone: 'America/Los_Angeles' };
86
        const dateStr = dateObj.toLocaleDateString('en-GB', dateOptions);
87
        const timeStr = dateObj.toLocaleTimeString('en-US', timeOptions);
88

89
        // 1. Image Upload (Shortened for brevity)
90
        let imageHtml = "";
91
        if (photoFile) {
92
            const fileName = `images/uploads/${Date.now()}-${photoFile.filename}`;
93
            await axios.put(`https://api.github.com/repos/${process.env.GH_USER}/${process.env.GH_REPO}/contents/${fileName}`, {
94
                message: `Upload image`,
95
                content: photoFile.content.toString('base64')
96
            }, { headers: { Authorization: `token ${process.env.GH_TOKEN}` } });
97
            imageHtml = `\n            <p><img src="${fileName}" alt="Upload" style="max-width:100%; height:auto; border-radius:8px;"></p>`;
98
        }
99

100
        // 2. Fetch & ID
101
        const indexUrl = `https://api.github.com/repos/${process.env.GH_USER}/${process.env.GH_REPO}/contents/index.html`;
102
        const getFile = await axios.get(indexUrl, { headers: { Authorization: `token ${process.env.GH_TOKEN}` } });
103
        const fileContent = Buffer.from(getFile.data.content, 'base64').toString('utf-8');
104

105
        const idMatch = fileContent.match(/id="(\d{4})"/);
106
        const nextNum = (idMatch ? parseInt(idMatch[1]) + 1 : 1).toString().padStart(4, '0');
107

108
        // 3. Build HTML
109
        const articleClasses = ["post", ...categories].join(" ");
110
        const tagLinks = categories.map(tag => `<a href="#" class="inline-tag" data-tag="${tag}">#${tag}</a>`).join("\n                ");
111

112
        const newPost = `
113
        <article class="${articleClasses}" id="${nextNum}">
114
            <div class="post-header">@navi <time>📅${dateStr} 🕐${timeStr}</time> <a href="#${nextNum}"><id>#${nextNum}</id></a> </div>
115
            <p>${content}</p>${imageHtml}
116
            <section class="tags">
117
                ${tagLinks}
118
            </section>
119
        </article>`;
120

121
        // 4. Inject & Push
122
        const marker = '<div id="micropub-marker" style="display:none;">--- MICROPUB-TARGET ---</div>';
123
        if (!fileContent.includes(marker)) return { statusCode: 500, body: "Marker missing" };
124

125
        await axios.put(indexUrl, {
126
            message: `Post #${nextNum}`,
127
            content: Buffer.from(fileContent.replace(marker, `${marker}\n${newPost}`)).toString('base64'),
128
            sha: getFile.data.sha
129
        }, { headers: { Authorization: `token ${process.env.GH_TOKEN}` } });
130

131

132
        // 5. Trigger GitHub Action for RSS generation
133
        try {
134
            await axios.post(
135
                `https://api.github.com/repos/${process.env.GH_USER}/${process.env.GH_REPO}/actions/workflows/rss-generator.yml/dispatches`,
136
                { ref: 'main' }, // Double-check if your branch is 'main' or 'master'
137
                {
138
                    headers: {
139
                        Authorization: `token ${process.env.GH_TOKEN}`,
140
                        Accept: 'application/vnd.github.v3+json',
141
                        'User-Agent': 'Netlify-Function'
142
                    }
143
                }
144
            );
145
            console.log("RSS Workflow triggered successfully");
146
        } catch (dispatchError) {
147
            console.error("Failed to trigger RSS workflow:", dispatchError.response ? dispatchError.response.data : dispatchError.message);
148
        }
149

150

151
        return {
152
            statusCode: 201,
153
            headers: { "Location": `https://now.pomnavi.net/#${nextNum}` },
154
            body: JSON.stringify({ message: 'Success' })
155
        };
156

157
    } catch (error) {
158
        return { statusCode: 500, body: error.message };
159
    }
160
};

Conclusion#

Was all this hard work worth it? I hope so! I’ve made it really easy to make my silly little posts now, and I really like how it looks and works. Here’s to more rambling in the future!

Why did I make an account on micro.blog and why am I paying a dollar a month to have a place to ramble? by ArimaMary, February 26, 2026. ↩

Comments

Comments are fetched from the Fediverse. You can join the conversation by replying to this post on Mastodon. New replies will appear here after the next site rebuild. If you don't have a fedi account, you can send me your comment here.

0 Replies 0 Boosts Likes

No comments yet.

Join the conversation