Slides from talk presented at Frontrunners 2024. There are a lot of sites out there that were built with Jekyll, and those folks may be looking at newer frameworks like Next.js and curious about how to make the switch. Learn the tips and techniques for making the switch, including using Playwright for visual regression testing.

1. Lessons Learned
Migrating from
Jekyll to Next
With Help from Playwright
And Corgis

2. • I love these projects
• Corgibytes does a lot of these
Platform Migrations

3. • No user visible changes
• Gradual approach
• Guided by tests
Philosophy

4. • Launched 10 years ago
• Built with Jekyll
• Hosted using an AWS S3 bucket
• Opportunity to practice and experiment
corgibytes.com

5. • Goals
• Component-based
• Remain static
• Minimal changes to blog posts
Time For a Change

6. • Considered a lot of options
• Astro
• Eleventy
• Gatsby
• Hugo
• Next
• Remix
Picking the Right Tool

7. • React
• high team comfort level
• Great static site support
• New ”app” router fit the problem
• Server components
• File-based routing
• Found blog starter project
• https://next-blog-starter.vercel.app/
Choosing Next

8. • Playwright
• Screenshot comparisons
• Focus on critical pages
• No need to hit every blog post
• One is enough
• Multiple viewport sizes
• Multiple web browsers
• 2% difference permitted
• Validates page metadata
• Validates RSS feed contents
• Use production for initial capture
Testing Approach

9. Pages to Test

10. Capture Screenshots

11. • Pros
• High fidelity & confidence
• Aids progress tracking
• Cons
• Lots of images
• No seriously, lots of images
• ~650 MB
• Git LFS is a must
• Time intensive
• Multiple cores helps a ton
The Good & The Bad

12. • Go one page at a time
• Run just the tests for that page
• Create the Next page component
• Ex: ./app/about/page.tsx
• Copy Jekyll/Liquid content into component
body
• Clean up errors
• Ex: Convert class to className
• Create “api” functions for accessing any Jekyll
collections content
• Migrate static content out of the markup
• Create components to reduce duplication
Implementation

13. Jekyll Collection: Team

14. Before: Jekyll + Liquid

15. After: Next + React

16. Querying Page Content

17. Retrieving All Team Members

18. Loading a Single Team Member
Converts Markdown to HTML

19. Loading File Contents

20. Loading a Blog Post

21. Loading a Generic Collection
Converts Markdown to HTML

22. • Pros
• Almost no changes required to any
Jekyll collection or blog post
• Lays foundation for migrating to a
headless CMS
• Cons
• Performance
• Caching of file system content
happens once per request
• Dev mode blog post loading is slow
• Builds are slow (more cores helps)
The Good & The Bad

23. • Using GitHub Actions
• Creates static build
• Starts http-server
• Runs all snapshot tests
• Publish to AWS S3
• Invalidate CloudFront cache
Deployment

24. • Move content to headless CMS
• Considering Strapi
• Work with a design firm to
refresh look and feel
• Improve dev & build performance
• Remove unused CSS & migrate to
Tailwind
Future Additions

25. Contact Information
M. Scott Ford
Email:
scott@corgibytes.com
Mastodon:
@mscottford@legacycoderocks.com
LinkedIn:
in/mscottford
Phone:
804.596.2375x701

27. Like Podcasts?
Listen to Legacy Code Rocks!

28. Questions?
The End

29. Image Credits
Sunglasses Corgi
https://stock.adobe.com/images/red-corgi-in-sunglasses-in-the-car-on-summer-vacation-traveling-with-a-dog-sun-is-shining-no-people-generative-ai/613784699?prev_url=detail
Shoes Corgi
https://stock.adobe.com/images/cute-corgi-dog-puppy-in-sports-sneakers-on-jogging-in-the-park/471057888?prev_url=detail
Glasses & Tie Corgi
https://stock.adobe.com/images/a-welsh-corgi-puppy-in-glasses-and-tie-sits-with-a-book-on-a-green-background-the-concept-of-training-office-work/560420692?prev_url=detail
Pillow & Clock Corgi
https://stock.adobe.com/images/cute-dog-with-alarm-clock-and-pillow-at-home/417761843?prev_url=detail
Construction Corgi
https://stock.adobe.com/images/cute-working-dog-corgi-in-a-construction-helmet-and-with-a-set-of-tools-sits-on-a-background-of-bricks-and-smiles/634456851?prev_url=detail
Puppy Group
https://stock.adobe.com/images/group-of-corgi-puppy-dogs-lying-relaxing-and-sleeping-in-summer-sunny-day/251026313?prev_url=detail
Measuring Tape Corgi
https://stock.adobe.com/images/dog-corgi-overweight-and-fatness-with-tapeline/312729682?prev_url=detail
Food Choices Corgi
https://stock.adobe.com/images/dog-food-food-for-animals-beautiful-corgi-eats-food/608206668?prev_url=detail
Ready to Work Corgi
https://stock.adobe.com/images/cute-working-dog-corgi-in-a-construction-helmet-and-with-a-hammer-in-his-teeth-on-a-brick-background/634358393?prev_url=detail
Rocket Ship Corgi
https://stock.adobe.com/images/corgi-flying-in-the-space-through-the-stars-near-the-moon-with-a-view-on-planet-earth/557948887?prev_url=detail
Cyberpunk Corgi
https://stock.adobe.com/images/corgi-flying-in-the-space-through-the-stars-near-the-moon-with-a-view-on-planet-earth/557948887?prev_url=detail
Walking Away Corgi
https://stock.adobe.com/images/corgi-dog-pembroke-welsh-corgi-outdoor-in-summer-park/337469887?prev_url=detail