Pre-Push Checklist Before Going Live

Pre-Push Checklist Before Going Live

In the previous chapter, we managed static pages. Now we are approaching the moment where your site goes from "running on my computer" to "live on the internet." This is exciting, but it is also where small mistakes become public.

This chapter is a checklist. It is shorter than the previous chapters, but every item on it matters. Work through it slowly, one item at a time. If you skip this step, you may discover problems after your site is already live — and fixing them in production is always more stressful than fixing them locally.

Why a Checklist?

When you have been working on a project for hours, it becomes hard to see the small mistakes. You have read the same text so many times that typos blur into correctness. A checklist forces you to look at each part of the site with fresh eyes, one at a time.

The items below are ordered from most visible to least visible. Start at the top, work your way down, and do not skip any item.

1. The Homepage

Open http://localhost:3000/ in your browser. Check each section from top to bottom:

• Hero section — is the headline correct? Is the subtitle free of typos? Do the two buttons point to the right pages?
• Social proof — are the four statistics accurate? Do they reflect your actual numbers, or are they still placeholders?
• Features — do the six feature cards describe features you actually offer? Are the icons appropriate?
• Steps — do the three steps match the actual process a customer goes through?
• Pricing — are the prices correct? Do the buttons point to the right purchase URLs?
• Testimonials — are the quotes real? If they are placeholders, either replace them with real testimonials or remove the section entirely.
• Final call-to-action — does the button point to the right page?
• Footer — are the links correct? Do the social icons point to your actual profiles?

If any section is still placeholder text, fix it now. It is better to remove a section entirely than to leave placeholder text on a live site.

2. The Navigation

Click every link in the header navigation. Each one should take you to the correct page. Then click every link in the footer. Then open the mobile drawer (resize your browser to a narrow width) and click every link there.

Common issues to look for:

• A link that points to # instead of a real page.
• A link that points to a page you have not created yet.
• A link that points to the wrong page (e.g., "About" pointing to "Contact").

Fix any broken links before proceeding.

3. The Products Page

Open http://localhost:3000/products. Check each product card:

• Is the cover image loading? If it shows a broken image icon, the URL is wrong.
• Is the price correct?
• Does the "View Details" button work?
• Does the card show the first three features correctly?

Then click into each product detail page and check:

• Does the gallery load and switch images correctly?
• Does the purchase button point to the right URL?
• Are the specs and features displayed correctly?
• Does the body text read well?
• Do the related products at the bottom appear?

4. The Blog Page

Open http://localhost:3000/blog. Check each blog post card:

• Is the cover image loading?
• Is the date formatted correctly?
• Is the category badge visible?
• Does clicking the card open the post?

Then open each blog post and check:

• Does the post body render correctly, including code blocks and images?
• Do the tags at the bottom appear?
• Does the previous/next navigation work?
• If the post has a ctaProduct, does the call-to-action band appear at the bottom?

5. The Static Pages

Open http://localhost:3000/about, /privacy, and any other static pages you have created. Check:

• Does the tag, heading, and intro render correctly?
• Do the stats, pillars, and team sections (if defined) appear?
• Does the body read well?

6. The Contact Page

Open http://localhost:3000/contact. Submit a test message using the form. Check:

• Does the success message appear?
• Does the message arrive in your Formspree inbox?
• Do the validation errors appear when you submit an empty form?

7. The 404 Page

Open http://localhost:3000/this-page-does-not-exist. Check:

• Does the 404 page appear?
• Are the heading, intro, and buttons correct?
• Do the buttons work?

8. The Documentation

If you are using the documentation feature, open http://localhost:3000/docs. Check:

• Does the sidebar appear with all chapters?
• Does clicking a chapter open the correct page?
• Do the previous/next links at the bottom work?

9. The Site URL

Open nuxt.config.ts and check the site.url field. It should be your actual production domain, not https://example.com or https://nuxas.pages.dev.

If you have not registered a domain yet, you can leave it as a placeholder for now, but remember to update it before deploying. An incorrect site.url will cause your sitemap and canonical tags to point to the wrong place.

10. The Favicon

Open http://localhost:3000/ and look at the browser tab. Does the favicon appear? If it shows a default Nuxt icon or a blank square, you need to replace public/favicon.ico with your own.

The favicon is a small detail, but it makes a big difference in how professional your site looks. It appears in browser tabs, bookmarks, and history.

11. The Open Graph Image

Open https://www.opengraph.xyz/ in your browser. Paste your local URL (or your production URL if you have deployed) and click "Check." This tool previews how your site will appear when shared on social media.

Check:

• Does the title and description appear correctly?
• Does the image appear correctly?
• Does the URL appear correctly?

If the image is missing or broken, check the ogImage field in your page meta. You may need to add a public/og-image.png file and reference it.

12. The Theme Toggle

Click the theme toggle in the header. Check:

• Does the site switch from dark to light mode?
• Is the change persisted when you refresh the page?
• Do all sections look correct in both modes?

If any section looks broken in one of the modes, fix it now. It is easier to fix locally than to discover a broken section after launch.

13. The Mobile View

Resize your browser to a narrow width (around 375 pixels, which is the width of a typical phone). Check every page:

• Does the layout stack correctly?
• Are the buttons large enough to tap?
• Does the mobile drawer open and close correctly?
• Is the text readable?

Most of your visitors will be on mobile, so this check is essential.

14. The Lighthouse Score

Open Chrome DevTools (press F12). Click the Lighthouse tab. Select Mobile and all categories. Click Analyze page load.

The Lighthouse score measures performance, accessibility, best practices, and SEO. Aim for:

• Performance: 90 or higher
• Accessibility: 95 or higher
• Best Practices: 95 or higher
• SEO: 95 or higher

If any category is below these targets, the report shows specific issues with specific fixes. Address the most impactful ones first — usually image optimization and accessibility labels.

15. The Console

Open Chrome DevTools (press F12) and click the Console tab. Refresh the page. Check for red error messages.

Common issues:

• Failed to load resource — an image or font is missing.
• Uncaught TypeError — a JavaScript error in a component.
• Hydration mismatch — a difference between the server-rendered HTML and the client-rendered HTML.

Fix any red errors before proceeding. Yellow warnings are usually less critical, but worth investigating.

16. The .env File

Open the .env file. Check:

• Is the NUXT_CONTACT_FORMSPREE_ID set to your actual ID?
• Are the other values correct?

If any value is a placeholder, fix it now. You will need to set these values in your hosting provider's dashboard during deployment. Having them correct locally is a good check that you know what they should be.

17. The Git Status

Open a terminal in VS Code. Run:

git status

You will see a list of files that have been modified or added since the last commit. Check that:

• You are not about to commit node_modules (it should be in .gitignore).
• You are not about to commit .env (it should be in .gitignore).
• You are not about to commit .nuxt (it should be in .gitignore).

If any of these appear in the list, do not commit them. They contain sensitive information or large files that do not belong in Git.

18. The Final Review

Take a step back and look at your site as if you were a first-time visitor. Ask yourself:

• Does the site feel professional?
• Is the value proposition clear?
• Are the calls-to-action obvious?
• Does anything look unfinished or out of place?

If something feels off, trust your instinct and fix it. The best sites are not the ones with the most features — they are the ones that feel polished and intentional.

What to Expect in the Next Chapter

In the next chapter, we will push your code to GitHub. This is the first step toward deployment. We will cover creating a GitHub account, creating a repository, and pushing your local code to the remote repository.

If you already have a GitHub account, you can skim the first part of the next chapter and focus on the repository setup.

See you in the next chapter.