9 Steps to Migrate From Jekyll to Statie

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

4. Upgrade Absolute Links to Moved Files

-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 and PHP directly from your local machine and still on Github Pages.

Happy coding!




Do you learn from my contents or use open-souce packages like Rector every day?
Consider supporting it on GitHub Sponsors. I'd really appreciate it!