Built with BodilessJS
This site was built with Open link in new windowBodilessJS, BodilessJS is a toolset for building editable websites in a JAMstack technology.
Technology behind BodilessJS
BodilessJS is built off three popular tools. Open link in new windowGatsby: a JAMstack framework, Open link in new windowTailwindCss: utility-first CSS framework and Open link in new windowSlateJS: 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.
Bodiless Static:
Once you are happy with your site, you can run a build and it will produce a Open link in new windowstatic 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.
Hosting a Static Site
There are many ways to host a static site. I chose Open link in new windowHeroku 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 Open link in new windowdirections 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 Open link in new windowtailwind landing page template.