Built with BodilessJS

This site was built with BodilessJS, BodilessJS is a toolset for building editable websites in a JAMstack technology.


Technology behind BodilessJS


BodilessJS is built off three popular tools. Gatsby: a JAMstack framework, TailwindCss: utility-first CSS framework and SlateJS: a simple rich text editor.



BodilessJS Edit:


BodilessJS provides an editing app that allows you to edit the content inline on your page. Similar to a traditional CMS, but instead of the content being saved in database, it is saved with the site in the site's code repository as .json files. Components can be easily added to extend the site functionality and each components manage their own data.
Edit App

Bodiless Static:


Once you are happy with your site, you can run a build and it will produce a static generated html site without the editing interface. This is directly deployed on hosting/internet, with the benefits of improved performance and security compared to traditional CMS systems.
Static Site

Hosting a Static Site


There are many ways to host a static site. I chose Heroku as an economical way that proved to be easy to setup and work with BodilessJS. Since this is built off Gatsby, you can follow their directions to deploy to Heroku by adding app.json and static.json. There was an addition step to serve the site with creating a Procfile and putting in "web: gatsby serve --port $PORT --host 0.0.0.0 "


Adding New Content to the Site


Anytime, I need to add content, I locally start up the edit environment, make the necessary changes, commit and push to the master branch and my static website is updated automatically

Credits:
Site design inspiration started from Cruip's tailwind landing page template.
More Learnings

All rights reserved.