WriteFreely is beloved for its minimalism. However, fostering a community often requires a feedback loop. The challenge is adding comments without shattering that clean, distraction-free aesthetic. I recently integrated Cusdis—a lightweight, open-source, and privacy-friendly comment system—into this blog. It aligns seamlessly with WriteFreely’s ethos: it requires no user tracking and adapts beautifully with a bit of custom CSS.

Here is how to implement a fully dynamic, styled comment section. This script ensures the widget loads only on individual posts (keeping your homepage pristine) and automatically respects dark mode.

Step 1: Get Your Cusdis ID

First, you need a running Cusdis instance. You have two paths:

• Cloud: Create a free account at Cusdis.com.
• Self-Hosted: Host it yourself on a VPS (using Coolify or Docker) for 100% data ownership.

Once you have access to your dashboard, copy your App ID (e.g., f42fd160-a4f2-...). You will need this for the JavaScript configuration below.

Step 2: The Logic (Why Custom JS?)

Since WriteFreely lacks native support for editing individual post templates, we cannot simply paste the standard Cusdis embed code. A static embed cannot automatically fetch the unique Page ID or Title for every article.

Instead, we use Custom JavaScript to:

1. Verify context: Check if the user is viewing a single post (ignoring the homepage).
2. Build the UI: Dynamically append a “Comments” container to the bottom of the article.
3. Inject the Widget: Initialize Cusdis with the correct metadata (ID, URL, Title).
4. Style: Force the widget into “Dark Mode” to match the theme.

Step 3: The JavaScript Code

Navigate to your WriteFreely dashboard, go to Customize > Custom JavaScript, and paste the code below.

Note: Be sure to replace 'YOUR-APP-ID-HERE' with the actual ID you copied in Step 1.

(function() {
    // Only run this script if we are on a post page (body#post)
    // This prevents the comments from loading on the homepage or collections.
    var postBody = document.querySelector('body#post');
    
    if (postBody) {
        // 1. Create the container div for Cusdis
        var cusdisContainer = document.createElement('div');
        cusdisContainer.id = 'cusdis_thread';
        cusdisContainer.dataset.host = '[https://cusdis.com](https://cusdis.com)';
        cusdisContainer.dataset.appId = 'YOUR-APP-ID-HERE'; // PASTE YOUR ID HERE
        cusdisContainer.dataset.pageId = window.location.pathname;
        cusdisContainer.dataset.pageUrl = window.location.href;
        cusdisContainer.dataset.pageTitle = document.title;
        cusdisContainer.dataset.theme = 'dark'; // Forces dark mode

        // 2. Append the container to the article or main content area
        // Note: 'article' is standard in most WriteFreely themes. 
        var article = document.querySelector('article');
        if (article) {
            article.appendChild(cusdisContainer);
        }

        // 3. Load the Cusdis SDK asynchronously
        var script = document.createElement('script');
        script.src = '[https://cusdis.com/js/cusdis.es.js](https://cusdis.com/js/cusdis.es.js)';
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
    }
})();

Step 4: The styling

Now that the functionality is in place, let's style the container to look like a piece of retro-futuristic hardware. We want a monospace font, a “console” border, and a distinct separation from the rest of your content.

Navigate to Customize > Custom CSS and add the following:

/* --- VISIBILITY RULES of COMMENT SECTION --- */
body#collection #comment-section,
body#subpage #comment-section {
    display: none !important;
}

body#post #comment-section {
    display: block !important;
}

/* --- END VISIBILITY RULES OF COMMENT SECTION -- */
/* --- CUSDIS COMMENT SECTION FIXES --- */
#comment-section {
    margin-top: 3rem; /* space from article content */
    width: 100%;
    max-width: 100%;
}

/* Cusdis iframe container */
#cusdis_thread {
    width: 100% !important;
    min-height: 500px; /* initial height */
    border-radius: 8px;
    overflow: hidden; /* remove inner scrollbars */
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Make the iframe responsive */
#cusdis_thread iframe {
    width: 100% !important;
    min-height: 500px !important;
    height: auto !important;
    border: none !important;
}

/* Dark theme for Cusdis content */
#cusdis_thread {
    --cusdis-background: var(--surface-color);
    --cusdis-text-color: var(--text-color);
    --cusdis-accent-color: var(--accent-color);
    --cusdis-border-color: var(--border-color);
    --cusdis-input-background: #222; /* input background */
    --cusdis-input-text-color: #eee; /* input text */
    --cusdis-button-background: var(--accent-color);
    --cusdis-button-text-color: #000;
}

/* Force Cusdis to expand to fit content (if Cusdis JS supports it) */
#cusdis_thread iframe {
    height: 100% !important;
}

/* Inputs and textareas */
#cusdis_thread textarea,
#cusdis_thread input {
    background-color: #222 !important;
    color: #eee !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 8px;
}

/* Submit button */
#cusdis_thread button {
    background-color: var(--accent-color) !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#cusdis_thread button:hover {
    background-color: #3aa8d1 !important;
    box-shadow: 0 0 12px rgba(98, 200, 243, 0.5) !important;
    color: #000 !important;
}

/* Scrollbar styling for iframe if it still scrolls */
#cusdis_thread iframe::-webkit-scrollbar {
    width: 8px;
}

#cusdis_thread iframe::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

#cusdis_thread iframe::-webkit-scrollbar-track {
    background-color: #111;
}

/* Optional: smooth font for Cusdis */
#cusdis_thread,
#cusdis_thread iframe {
    font-family: 'Nunito', sans-serif !important;
}

Final Thoughts

And that is it. You now have a lightweight, privacy-respecting comment section that loads exclusively on your articles.

By injecting the widget via JavaScript, you bypass WriteFreely's template limitations while maintaining total control over the look and feel. Your readers can now interact with your content in a space that feels like a natural extension of your blog's “hacker” aesthetic—no tracking pixels attached.

I currently run a Coolify instance on my VPS and recently decided to host a lightweight blogging platform. I managed to deploy WriteFreely using the open-source algernon/writefreely Docker image. While the initial deployment was straightforward, configuring the storage and database correctly required some specific steps. Here is a walkthrough of how I achieved a stable setup.

1. The Docker Configuration

First, I pulled the Docker image and deployed it via Coolify. The primary challenge was configuring persistent storage. By default, if you restart the container, you lose your configuration, which makes the service unusable in production.

To address this, I configured Coolify to create a persistent volume. I mapped a volume named wf_data to /data inside the container. This step is critical because the config.ini file needs to reside in this directory to persist across restarts.

2. Adding a Standalone MySQL Database

I preferred not to use the default SQLite engine, so I decided to provision a standalone MySQL database service within Coolify. The process is remarkably straightforward: you simply create a new resource, select MySQL, and let Coolify handle the password generation.

The tricky part was establishing the connection between the app and the database. I initially encountered “Access Denied” errors because I was attempting to use the default mysql user. Once I updated the credentials in the configuration file to use the root user (or a dedicated user with proper permissions), the connection worked perfectly.

3. Linking the Components

To ensure WriteFreely correctly reads from the persistent volume, I had to modify the startup command. I couldn't immediately locate the command field in the UI, so I utilized the Docker Compose configuration to override the entry point:

/bin/sh -c "./writefreely -c /data/config.ini"

Additionally, I ran the configuration wizard directly inside the terminal to generate the initial config.ini. I made sure to point the encryption keys and database paths specifically to /data.

Conclusion

I now have a fully functional WriteFreely instance running on my VPS, complete with persistent storage and a robust MySQL backend. It is a highly efficient and self-contained setup.