Full website example with theme + Tailwindcss

The marketing website for my company’s new organization chart software, Lexchart, is built with Ghost. It might be a useful example for some of you, because it is much more than a blog. We are using Ghost for the entire site, including:

  • Custom home page which is pulling data from posts with Handlebars,
  • Custom landing pages like org chart software pricing
  • Product documentation
  • Tutorials with embedded videos from Wistia
  • Newsletter signup.
  • lots of examples of different card types

We do not use paid memberships from Ghost because the Lexchart app has both a free and paid version with its own registration system.

The site starts with the Firma theme. @eddiesigner has been great to work with. Firma includes a content search feature which was important to us. Fima also includes Alpinejs so we can develop additional interactive elements.

Beyond that we added tailwindcss with custom prefixed classes to avoid CSS conflicts with the theme. This allows us to extend the design in Tailwind which is our preferred CSS tech. If you are interested in using Tailwind with an existing theme, this tutorial on adding tailwind to a project is indispensable.

1 Like

And I should add it is self-hosted on DO with the Ghost marketplace droplet. Between DigitalOcean and Ghost’s documentation, pretty straightforward.