(this tool was extracted from a bigger monorepo, we finally had time to open source it!)
Jamify let's you convert any website to a working Jamstack website by compiling it. Currently, only Gatsby.js is supported as a compile target. Thanks to Jamify, you can convert mostly every existing website to Gatsby with ease. Going from Gatsby.js to Next.js isn't that difficult after that.
You can also jump straight to The Ultimate Template Porting Guide for a detailed, uncensored step by step guide.
Here's an example of a website we converted to Gatsby.js using the steps as documented in The Ultimate Template Porting Guide.
- Original site: Source | Live Demo
- Gatsby.js starter: Source | Live Demo
- Next.js starter: Source | Live Demo
Try it out yourself now! Just like that:
npm i -g jamify # or "yarn global add jamify"
jamify gatsby --urls https://html5up.net/uploads/demos/paradigm-shift/ -o ./new-gatsby-siteThis will convert the website located at "https://html5up.net/uploads/demos/paradigm-shift/" to a Gatsby.js project.
Now, let's start the Gatsby development server:
cd new-gatsby-site
npm i
gatsby develop...and navigate to http://localhost:8000/uploads/demos/paradigm-shift/ 🧙♂️
For more options, type jamify --help
Get creative and pick any template you like from sources like HTML5UP or Bootstrapdash. But always make sure the license allows for the intended usage!
This is only the start of the journey. For most sites, you will have a fully functioning Gatsby site now, but there are still some manual steps which need to be performed to reach an acceptable quality. Here you can find a somewhat extensive guide for porting website templates to Gatsby.js using Jamify:
The Ultimate Template Porting Guide
The document is editable, so you can add your findings too!
When developing Jamify, first create a .env file in the root of your project:
DEV_COMMAND=gatsby -u http://localhost:8080 -r -o ./out
The DEV_COMMAND variable is the current command you want to simulate.
Now run npm run dev
Live-reload is enabled thanks to Nodemon.
Please use the commitizen CLI to create commit messages