Enter your post title, date, category, optional tags and summary. Tags are added by typing and pressing Enter.
Use the toolbar shortcuts or write Markdown directly. **bold**, *italic*, ## Heading, - lists, > quotes, and code blocks all work.
Markdown is instantly converted to HTML using marked.js — no AI, no internet required. Two outputs appear below.
Click Download .html to save the post page (e.g. my-post.html). Upload this to your site folder.
Copy the card snippet and paste it at the top of the <div class="blog-grid"> in blogpostpage.html so newest posts appear first.
Upload the .html post file and your updated blogpostpage.html to your site. Done!
The generated post pages rely on classes defined in style.css. If you're using this tool for your own site, you'll need to adapt the generated HTML to match your site's structure.
bodyBackground, font, base colour.container-singlePage max-width & centeringmainContent box (background, border, shadow)h2Post title — styled as a header barh4Category label text stylep, aBody text & link colours.links-list li aTag pill appearance.floating-cardsDecorative background elements#header-frameSticky nav iframe positioning.post-cardCard background & border.post-card-titlePost title text.post-card-metaDate + category row.post-card-dateDate text style.post-card-categoryCategory badge pill.post-card-summarySummary paragraph.post-card-tagTag chip style.post-card-arrow→ arrow indicator.blog-gridPost list flex column.filter-bar / .filter-btnCategory filter rowℹ The listing page styles are self-contained inside blogpostpage.html. The post page styles depend on style.css being present in the same folder.
Upload a previously generated .html post file to reload it into the editor for changes.
→ Paste inside <div class="blog-grid"> in blogpostpage.html (newest at top)