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