Optimize Site SEO with Elder.js | Svelte Bay Area
Published:
Anthony Campolo presents Elder.js, an opinionated Svelte-based static site generator optimized for SEO through simple HTML pages and fast build times.
Episode Summary
In this talk, Anthony Campolo introduces Elder.js, an opinionated static site generator built on Svelte and optimized for SEO. He explains that Elder.js generates simple HTML pages quickly, making it ideal for large sites that need to be easily crawled by search engines. Anthony demonstrates how to create a basic Elder.js project, set up routing, and deploy the site to Netlify. He highlights Elder’s fast build times, showing how it can generate thousands of pages in seconds. The presentation includes a live coding session where Anthony creates a new route and explains the structure of Elder.js projects. The talk concludes with a Q&A session covering topics such as continuous deployment, SEO optimization, and comparisons to other static site generators. Throughout the discussion, Anthony emphasizes Elder’s speed and SEO benefits while acknowledging that he’s still learning some of its more advanced features.
Chapters
00:00 - Introduction to Elder.js
Anthony Campolo introduces himself and begins his presentation on Elder.js, a Svelte-based static site generator optimized for SEO. He explains that Elder.js is designed to generate a large number of pages quickly, making it ideal for web crawlers. Anthony mentions that Elder.js was created by Nick Reese for a website called Elder Guide, which focuses on elderly care homes. He briefly touches on the problem with traditional static site generators, which often struggle with large sites due to the time-consuming transformation process between source code and the final HTML output.
02:56 - Elder.js Features and Benchmarks
Anthony dives into the features and performance of Elder.js, showcasing a benchmark that demonstrates its rapid build times. He explains that Elder.js can generate 18,000 pages in about eight minutes on a budget core virtual machine, or in just under a minute and a half on bare metal. He briefly mentions other features of Elder.js, such as hydration, shortcodes, plugins, and hooks for passing data around. Anthony then focuses on the explicit routing system of Elder.js, explaining how routes are created and how they correspond to Svelte components.
05:30 - Live Coding: Setting Up an Elder.js Project
The presentation shifts to a live coding demonstration where Anthony sets up a new Elder.js project. He walks through the process of creating a project from a template, installing dependencies, and running the development server. Anthony explains the structure of an Elder.js project, including the home page and how it serves as a built-in tutorial. He demonstrates how to edit the home page and create a new route, showing the simplicity of Elder.js’s routing system and how it integrates with Svelte components.
12:52 - Deploying an Elder.js Site to Netlify
Anthony guides the audience through the process of deploying an Elder.js site to Netlify. He explains how to set up a Git repository, connect it to Netlify, and configure the build settings. The demonstration showcases the speed of Elder.js, with the build process completing in just 1.5 seconds for 20 pages. Anthony emphasizes how this quick build time is beneficial for SEO and global distribution through CDNs.
16:18 - Q&A Session
The presentation concludes with an extensive Q&A session. Attendees ask questions about continuous deployment, SEO optimization, the role of the server and Rollup in the development process, and comparisons to other static site generators. Anthony addresses these questions, often acknowledging areas where he’s still learning. The discussion touches on topics such as metadata handling, routing capabilities, and the upcoming Svelte Kit framework. Other participants, including Jim Fisk, contribute their experiences with similar technologies, broadening the conversation to include tools like Routify and Snowpack.
33:26 - Wrap-up and Future Topics
As the session winds down, the group discusses potential topics for future meetups. Suggestions include deep dives into Routify, SvelteKit, and other Svelte-related technologies. The conversation briefly touches on ongoing projects and job experiences related to Svelte and static site generation. The meetup concludes with expressions of gratitude and anticipation for future discussions on Svelte technologies.