9 Steps to Migrate From Jekyll to Statie

This post was updated on January 2019
Since Statie 5.4 you can automate basically the whole process with vendor/bin/statie migrate-jekyll command.

Jekyll is great to start for micro websites like Go Monorepo. But Jekyll has one big problem - the language. How would you add custom Twig or Latte filter to Jekyll?

I wanted to migrate gomonorepo.org and gophp71.org from Jekyll to Statie. Can new init command make this piece of cake? And what needs to be done next?

1. Create Basic Statie Structure

Statie 5.3 brings new init command, that creates basic structure in /source directory, statie.yml, .travis.yml and metafiles.

Before we start any moving, create a basic structure to save many copy-pasting steps:

composer require symplify/statie
vendor/bin/statie init

Then, clean /source directory from generated files and...

2. Move Source files to /source Directory

-CNAME
+/source/CNAME
-index.html
+/source/index.html
-_data/projects.yaml
+/source/_data/projects.yaml

3. Move Parameters Files Under parameters > [param name] Sections

Before - Jekyll

# _data/projects.yaml
-
    name: Symplify
    url: https://github.com/Symplify/Symplify

After - Statie

# source/_data/projects.yaml
parameters:
    projects:
        -
            name: Symplify
            url: https://github.com/Symplify/Symplify
-https://github.com/TomasVotruba/gophp71.org/edit/master/_data/projects.yaml
+https://github.com/TomasVotruba/gophp71.org/edit/master/source/_data/projects.yaml

5. Load Moved YAML Files in statie.yml

+imports:
+    - { resource: "source/_data/projects.yaml" }

6. Remove site.data. and use Variables Directly

 <ul>
-    {% for project in site.data.projects %}
+    {% for project in projects %}
         <li><a href="{{ project.url }}">{{ project.name }}</a></li>
     {% endfor %}
 </ul>

7. Setup Github Pages deploy in Travis

Thanks to vendor/bin/statie init you have correctly configured .travis.yml in your repository.

To finish deploy, you need to:

How you do this? Just follow Statie.org documentation step by step.

8. Clean Metadata from Headers

In Jekyll, it's required to have --- section in files, even if empty. You can drop it now:

- ---
- ---

HTML
...

9. Run Project Locally

This is what I missed the most at Jekyll page - instant feedback. We want to develop and see output instantly - is it correct or is there a bug?

npm install
gulp

This is at least 100 times faster than deploying to Jekyll and checking the output in the production.

Show me the Real Migration Code


That's it! You can enjoy Markdown, Twig, Latte, and PHP directly from your local machine and still on Github Pages.

Happy coding!