Migrating from Ghost to Render
Like any good technologists, I'm never one to turn down a nice little rewrite in a different technology just for “fun.” Well, like anyone who has ever proposed such a change, I had my reasons, of course.
Previously, I had coded my website in VuePress, but it became a little too heavy to maintain. Searching for a balance between the ease of publishing a blog and the fun of coding my website, I chose to migrate to a self-hosted version of Ghost, the CMS and publishing software. That solved two issues: the ability to quickly publish a blog and allow people to subscribe to the blog and get e-mail updates. What it took from me was the ability to add my own fun code and twist to my personal site. To do anything custom, I had to fit it into the framework of Ghost and my ability to customize its theme.
Requirements
In thinking about how I wanted to balance my ability to tinker with the ease of having a blog idea and being able to publish it quickly, I decided on the following requirements:
- Ability to post a blog like this one quickly in Markdown or a similar simple format
- Have that blog published to my subscribers (you should be one too!)
- Be able to code my own simple solutions (like my blog length selector)
- Simple and elegant design
Finding the right fit
Since I made this change about two years ago, a lot has changed in the world of writing and deploying static sites. One of my favorite new technologies is now much more mature, and my new chosen way to write static sites - Astro. I love the balance you can strike with Astro — write a simple markdown post and publish it quickly, or write an entire component library (in your favorite framework like Vue, Svelte, or React) and ship cool functionality.
Design
Astro Nano with Catppuccin Tailwind Theme
For the design of my new site, I wanted something that was both visually appealing and easy to work with. I chose to start with the Astro Nano template, which provided a minimalist foundation perfect for customization.
To give the site a unique and cohesive look, I integrated the Catppuccin Tailwind theme. Catppuccin offers a beautiful and consistent color palette that pairs wonderfully with Tailwind CSS, making it easy to maintain a clean and modern aesthetic.
Ghost as a Backend CMS
One of the main reasons I opted for Ghost was its powerful API, which makes it an excellent choice for a headless CMS. Connecting to the Ghost API was straightforward. I used the Ghost Content API to fetch blog posts and other content. This setup allows me to manage my content in Ghost while displaying it on my Astro site.
With the API connection established, I focused on displaying blog post details on my Astro site. I created components to render the fetched content dynamically. This approach ensures that my site remains static and fast while still displaying the latest posts from Ghost.
To keep the main site clean and focused, I decided to host the full articles on a subdomain, blog.boleary.dev. This setup allows visitors to browse through summaries and click through to read the full posts on Ghost. This separation of concerns ensures that my main site remains lightweight and performant while still leveraging Ghost's robust blogging features.
Deploying to Render
Easy (and Free!) Hosting for Static Sites
When I was looking around for where to host the site, I came across Render. One of the standout features of Render is how straightforward and cost-effective it is to host a static site. Also, any product that offers "sign in with GitLab" already is a cut above in my book. To make it even sweeter, Render offers a generous free tier, making it an excellent choice for personal projects and small websites. Here's how I set up my deployment pipeline with Render:
Automatic Deployments with GitLab
1. Connect GitLab Repository: Since I created my account on Render with GitLab, my GitLab repositories were already available to Render. Even better: the repositories are sorted by the time they were last updated so I didn't have to go searching for the right one (yes I have too many).
2. Configure Build Settings: In the Render dashboard, I configured the build settings for my Astro site. Render automatically detected the static site setup and suggested the appropriate build commands. For Astro, the build command is typically pnpm run build, and the publish directory is dist.
3. Automatic Deployments: One of the best features of Render is its automatic deployment process. Every time I push changes to my GitLab repository, Render automatically triggers a new build and deploys the latest version of my site. This means I can just `git push` from my laptop and be done with it.
4. Custom Domain and SSL: Render also makes it easy to configure a custom domain and provides free SSL certificates. Setting up my custom domain (e.g., boleary.dev) was a breeze.
Other Considerations
Now that the general design and deployment was complete, there were just a few other lose ends to consider:
Redirect to Ghost to Hopefully Not Miss Any Links
One of my primary concerns during the transition was ensuring that no links were broken, which could negatively impact SEO and the user experience. To address this, I implemented smart 404 redirects. If a page is not found on the Astro site, it redirects to the corresponding page on Ghost. This way, I minimize the risk of dead links and ensure that visitors can always find the content they're looking for.
Ghost Still Handles All the Subscription Items
Maintaining the subscription functionality was crucial. Ghost's built-in subscription features are robust and user-friendly. By keeping Ghost as the backend, I can still manage subscriptions, send out email updates, and handle member interactions without any additional setup. This integration allows me to focus on creating content and coding fun features, while Ghost handles the heavy lifting of subscriber management.
Added Some Fun Things
To make my site more engaging, I added a few fun elements. For instance, the kid emojis on my homepage dance a little, adding a playful touch. Additionally, I included a hidden Easter egg: clicking on "1x engineer" reveals a surprise. These small touches make the site more interactive and enjoyable for visitors, reflecting my personality and coding style.
Conclusion
Moving my site to Astro and hosting it on Render has been a fun and rewarding project. Using Ghost as a headless CMS and Render for easy deployments, I now have a fast and modern site that’s super easy to update. If you're thinking about giving your own site a refresh, I definitely recommend checking out this setup!
Links
Check out these links to see for yourself what I have built:
Member discussion