Brought to you by @scriptifyjs, the person with the most active Twitter account out there.

Always WIP, add your experiences here, so we can optimize wherever possible

Assuming you have found a HTML/CSS template, perform the following steps:

Step 1: Convert template to Gatsby

Use the Jamify CLI tool to convert your template into a Gatsby project. This converts all HTML to JSX, creates pages, imports images, styles and all other assets where needed. After the conversion, make sure the project compiles successfully when you execute gatsby develop

Step 2: Substitute non-React JS

Now, it's your job to remove all custom JS (like jQuery, etc.) from the Gatsby project. Find React alternatives for used libraries and replace them. Document your findings below

Untitled Database

Step 3: Developer friendly CSS

Find out if any CSS frameworks/libs were used and replace them with packages you installed from NPM.

If the template source includes the original style files, e.g. SASS files, use those! Install the missing gatsby plugins needed to make them run correctly.

If the original styles are not available and there's just one big CSS file, we could: (please verify)

• Extract them manually in smaller CSS modules/styled components
• Use some automated approach
• Avoid such cases altogether

Step 4: Create components

Developers wouldn't use a template with just one big component per page, that's why we need to create React components.

For one page templates, this is relatively easy: Just create a component for each section of the page.

For multi-site templates, find out if a manual approach is scalable, otherwise try to find ways how this process could be speed up using some sort of automation.