This blog is different now! This website is different now! It’s all different!

but also the same

Backstory

For a while I’ve been fairly happy with my blog and website setup. They both were separate repositories with pretty much the exact same CSS styles across them. My website was plain HTML, CSS, and JavaScript, and my blog was built with Astro (for generating pages for blog posts) with most of the same scripts.

It was nice to just be able to post to my blog (which I’ve posted about here and here), occasionally update my website, and lightly host my husband Joe’s website.

I really liked not having frameworks to build my website, because I am an arrogant snob who is better than everyone in the world. That being said… updating and adding pages to my website was not the most ergonomic experience. Also, I learned from a friend of mine who’s great at SEO things that putting my blog on a subdomain is not great for search engines (they treat subdomains as separate websites). So, I put my pride aside and combined the two websites into one!

How I did it

Luckily because the CSS was mostly the same between my website and my blog, the combining process wasn’t too bad.

The high-level steps were:

• Make a new, private Git repository (because I didn’t want to deal with peeping eyes mid-update) that I called cassidoo-next
• Set it up to be a new Astro website with npm create astro@latest
• Add TinaCMS
• Copy my existing blog into the site (I did this part separately because it was using an older version of Astro and Tina)
• After verifying that worked, copy my website repo into the site
• Update my bio and site images (because the image paths ended up changing)
• Clean up CSS where things weren’t quite right (like my new site header)
• Update my newsletter page and its styles

Once everything looked right, there were two big things to make everything work smoothly: Git and the domains.

The Git parts

I made my cassidoo-next repository a remote on my existing repository for my website, and merged it in:

$ git remote add newweb [repo url] # adding the remote of the new repo
$ git checkout -b cw/new-website # new branch on the old cassidoo.co repo
$ git merge --allow-unrelated-histories newweb/main # merge the new with the old
$ git checkout main # switch back to main
$ git merge cw/new-website # merge it allll together

This was a WEIRD Git thing to do, but it meant that I didn’t have to reconfigure my domain setup with Netlify by keeping it all in the original cassidoo.co repository!

The one thing I did have to update in Netlify was the build step (because it went from no build to… build), but besides that, it worked! The site lived!

The redirects parts

Because I now had everything set up to go from blog.cassidoo.co to cassidoo.co/blog, I had to set up my Netlify redirects and domains to not have any dead links out in the world.

The first thing I did there was set blog.cassidoo.co as a domain alias to cassidoo.co. By pointing it to the exact same Netlify site, I could have redirects in the one repository.

My _redirects file pointed everything to their new spots:

https://blog.cassidoo.co/        https://cassidoo.co/blog          301!
https://blog.cassidoo.co/post/*  https://cassidoo.co/post/:splat   301!
/posts                           /blog                             301!
/post                            /blog                             301!

#fallback
/*                               https://cassidoo.co

That 301! at the end of each line is a permanent redirect code. It tells the client that the address for this resource has permanently changed, and any indexes using the old address should start using the new one. So, all new references to older posts will use the new, correct URL!

(by the way, I ended up referencing one of my own old posts about Astro and Netlify redirects to make it work, in case you try something like this at home)

Open sourcing it all

Phew! My website exists! My blog is safe! Everything works! Ahh!

After doing alllll of this to make everything shiny and functional, I realized that the template I set up for myself was pretty handy and might be useful to someone else. So, after cleaning things up and taking my name out of everything, blammo:

This website is now an open source template for you to use as your heart desires!

If you end up using it, let me know! I’ve already been really excited to see folks like Piyush and Mark use it and customize it to their style.

See ya next time! Feel free to subscribe here with RSS for more from me, or my newsletter!