An HTML First sinatra setup

  • I've regularly found myself wanting to build a super simple website that has some of the niceties of rails but without all the additional files and folders. People have been using sinatra for this for years of course, but I thought I'd write down my setup, which also brings some of the niceties of the html first stack, and has so little code that it can be copy-pasted.

  • Setup

    • Install dependencies with gem install sinatra rackup puma

    • Start the server with ruby server.rb

  • Files

  • server.rb

  • require 'sinatra'

set :views, './examples'

get '/*' do |path|
  path = 'index.html' if path.empty?
  erb path.to_sym, layout: :"layout.html"
end

  • /examples/layout.html.erb

  • <!DOCTYPE html>
<html>
  <head>

    <title><%= @page_title %></title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap" rel="stylesheet">

    <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
    <script src="https://cdn.mini-js.com/1.0.20.js"></script>
    
    <link rel="stylesheet" media="screen" href="https://cdn.tailwind-lite.com/1.0.3.css" />
    <link rel="stylesheet" media="screen" href="https://cdn.base-styles.com/versions/0.0.7.css" />
 
  </head>
  <body hx-boost="true">
    <%= yield %>
  </body>
</html>

  • Website Page