9 Steps to Migrate From Jekyll to Statie

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

Jekyll is great a way to start static website on Github Pages. But Jekyll has one big problem - the language. How would you add custom Twig or Latte filter to Jekyll?

I wanted to migrate my static websites 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!


Found a typo? Fix it to join team of 73 people that improve content here

❤️️ Do you find value in topics what I write about?
Support my writing by throwing a couple bucks at my Patreon