Sinatra Blog Engine with Markdown Posts

Project roadmap

1. 01

   Set up the Sinatra app

   ~1h

   Create a Gemfile with sinatra, redcarpet, puma and rack-test, and an app.rb with routes for the home page (/), a post (/posts/:slug), a tag page (/tags/:tag) and a 404 page, plus a public folder for CSS. Run it with ruby app.rb or rackup. Done when: every route answers with placeholder text, and unknown URLs get the 404 page.

2. 02

   Store posts as Markdown files

   ~1.5h

   Create a posts folder with a few sample posts, each starting with YAML front matter (title, date, tags and an optional draft flag) between --- lines. Write a Post class that reads a file, parses the front matter with YAML.safe_load (permitting dates), keeps the body, and takes the slug from the file name. Report posts with missing titles or dates clearly. Done when: all sample posts load with their metadata.

3. 03

   Render Markdown to HTML

   ~1.5h

   Render post bodies with Redcarpet with extensions (fenced code blocks, tables and autolinks) and filter_html: true so raw HTML in posts is not passed through, add syntax highlighting (for example with the rouge gem), and show each post with an ERB template inside a shared layout, with its title, date and tags. Done when: post pages render Markdown correctly, including code blocks.

4. 04

   Build the home page listing

   ~1.5h

   List published posts sorted by date, newest first, with the title, date, tags and an excerpt (the first paragraph, or text before a <!-- more --> marker), and build tag pages with the same listing filtered by tag. Hide drafts unless the app runs in development. Cache loaded posts and reload them only when a file changes (by comparing modification times). Done when: the home and tag pages list the right posts in order.

5. 05

   Add styling, pagination and a feed

   ~1.5h

   Paginate the listings (for example 5 posts per page with ?page=), add simple, readable CSS that works on phones, and an RSS feed at /feed.xml with the 10 latest posts, built with an ERB template or the rss standard library. Done when: pagination works, the site looks good on a phone, and the feed validates.

6. 06

   Test it

   ~1.5h

   Write tests with Rack::Test and Minitest (or RSpec) using a test posts folder: the home page order and pagination, post pages, 404 for unknown slugs and drafts, tag pages, HTML in posts not passed through, and the feed. Done when: the tests pass.

Resources

• DocsSinatra documentation
• DocsRedcarpet
• DocsRouge (syntax highlighting)
• DocsRack::Test
• DocsRSS 2.0 specification