Introduction
A custom web application was developed to generate markdown posts for Jekyll-based blogs. The platform enabled writers to create, preview, and export posts in the precise format required by the client’s multiple Jekyll blogs.
Problem Statement
The client managed several Jekyll blogs that all shared the same structure and formatting rules. Each blog post needed to be:
- Written in markdown.
- Formatted with strict rules for filenames, folder structures, and metadata.
Manual formatting slowed down content production and introduced inconsistencies. The requirement was for a sleek browser-based application that allowed writers to compose blog posts with ease and export them as ready-to-use zip files, fully compatible with the Jekyll blogging system.
Objectives
The primary objective was to build a customized WordPress-like blog editor that functioned entirely in the browser, with no server required.
Key features included:
- A customized text editor.
- Automatic generation of zip files with the correct folder structure.
- Autosave functionality for text and uploaded images.
- Image compression before export.
- Generation of custom markdown from editor content.
- Form validation.Instant preview of blog posts.
Research
The requirements demanded a lightweight, frontend-only solution, making Vue.js the framework of choice. Since Vue 3 was still early in adoption and lacked library support, the application was built without third-party component libraries.
Tools & Tech Stack
- Editor.js – Powered the custom text editor, with additional custom tools and blocks built to meet requirements.
- Json2md – Used for converting JSON blocks into markdown. Preprocessing was required to make the output compatible, and custom converters were written to handle unique markdown structures.
- Json2Html – No existing library met the needs, so a custom converter was written to generate HTML previews.
- Bootstrap – Installed via npm and customized using SCSS variables for lightweight styling.
- Compressor.js – Implemented client-side image compression.
- FileSaver – Enabled downloads of generated zip files.
- JSZip – Used to generate properly structured zip files and folders.
- LocalForage – Chosen to store data (including images) in the browser. Earlier attempts with LocalStorage failed due to size limitations, and PouchDB was rejected for its complex API. LocalForage provided simple IndexedDB-based storage with clean APIs.
- Yup – Used for schema-based validation. A lightweight custom mechanism was built around Yup for validating both forms and inline editor fields.
Conclusion
The Jekyll Markdown Generator successfully delivered a fast, browser-based editing tool that simplified content creation and eliminated formatting inconsistencies. Writers could now draft, preview, and export posts with ease, while the application automatically generated optimized zip files aligned with Jekyll’s structure. The project improved workflow efficiency, reduced errors, and removed the need for server-side dependencies.