Blog Site: Deploying to Vercel

Published: October 6, 2025

I wanted to make the blog site accessible online so others could visit it. I chose Vercel because it’s easy to use with static sites, integrates well with Git, and handles deployments automatically.

Step 1: Connecting the Repository

I pushed the project to GitHub, then connected the repository to Vercel. Vercel automatically detected it as a static site and suggested the default build settings.

Step 2: Adjusting Paths for Deployment

One important detail was that the inject.js script, which handles the header and footer, relies on relative paths. To make sure these worked on Vercel as well as locally, I implemented a depth-aware prefix in inject.js. This way, the site works correctly whether a page is in a subfolder or at the root.

Step 3: Deploying

Once the repository was connected and paths verified, I clicked “Deploy”. Vercel built the site and provided a live URL, which I customized after. Every push to the main branch triggers an automatic redeploy, so the site stays up-to-date without manual uploads.

Step 4: Testing the Live Site

I checked all pages, the header, footer, and blog posts to ensure they rendered correctly. All links, code snippets, and the image worked as expected, and the scrollable code snippets maintained their styling.