9 Steps to Migrate From Jekyll to Statie

2019-01-10

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

Jekyll has all the source code in the root.
Statie works with /source directory, so the website is separated from PHP code, tests, metafiles.

-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:

create gh-pages branch
pick it as a source for Github Pages
generate Github Token
put it to Travis configuration of your repository

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

Then open localhost:8000 to see your generated HTML.
Did you edit code in /source? → Just refresh browser to see re-generated HTML.

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!

Have you find this post useful? Do you want more?

Follow me on Twitter, RSS or support me on GitHub Sponsors.