Set up your website hosting

The download contains the website source, page content, local images, and this guide. Keep a backup of the original ZIP.

1. Sign in to Webrenew with the email address used at checkout.
2. Open Downloads and select Download code beside the website order.
3. Extract the ZIP into a folder on the computer. Open the folder that contains package.json and site-content.json.

If the download is not ready yet, wait for the download email. Contact Webrenew if a paid order does not appear.

• Open Downloads

Use Node.js 22 or a newer LTS release. The Node.js installer includes npm, which installs the website packages.

1. Install an LTS version of Node.js from the official download page.
2. Open the website folder in a code editor such as Visual Studio Code. Select Terminal → New Terminal.
3. Run these commands in that terminal, one line at a time. Keep an internet connection for package and font downloads.

node --version
npm --version
npm install

Keep the package-lock.json file that npm creates. It records the package versions for future installs.

• Download Node.js
• Download Visual Studio Code

Run the command below. Open the Local address shown in the terminal, usually http://localhost:3000. Keep the terminal open during the preview.

npm run dev

Check every page, photo, phone link, and contact detail. Press Ctrl+C in the terminal to stop the preview.

Stop the preview, then run the build command in the same website folder.

npm run build

A successful build creates out/ with index.html, page folders, and assets. Upload this output to a static host. Keep the source folder for future edits.

Use this option to upload the built files from the computer without Git. Check Cloudflare plan limits before launch.

1. Sign in to Cloudflare and open Workers & Pages.
2. Select Create application, then the Pages Get started option and Drag and drop your files.
3. Name the project. Upload the out folder from the successful build, then select Deploy site.
4. Open the pages.dev address shown for the project. Check every page before domain setup.

Upload the built out folder, not the original download ZIP. Direct Upload projects need a new project to switch to Git-based deployments later.

• Cloudflare upload instructions and limits

Use this option if a Git repository is part of the workflow. Vercel can rebuild the site after each push. Choose a plan that permits the intended use.

1. Create a private Git repository for the extracted source. Include package-lock.json and the supplied .gitignore file.
2. In Vercel, create a project and import that repository. Set the root to the folder that contains package.json.
3. Set Framework Preset to Other. Set Install Command to npm ci.
4. Set Build Command to npm run build. Set Output Directory to out.
5. Select Node.js 22 or a newer supported LTS release. Leave Webrenew environment variables unset.
6. Deploy the project. Open its vercel.app address and check every page.

Keep node_modules, .next, and local environment files out of Git. The supplied .gitignore covers these paths.

• Vercel build settings
• Vercel plans

Start after the host-provided address works. DNS records tell browsers which host serves the domain.

1. Add the domain in the hosting project first. For Cloudflare Pages, open Custom domains. For Vercel, open Settings → Domains.
2. Follow the host's instructions at the domain's DNS provider. Copy the records shown for that project.
3. For a Cloudflare Pages root domain such as example.com, use Cloudflare nameservers. A subdomain can use a CNAME at another DNS provider.
4. Preserve email records when DNS providers change. Copy the MX records and email-related TXT records before the nameserver change.
5. Wait for the host to confirm the domain and HTTPS certificate. Open the HTTPS address and test every page.

Add both the root domain and www to support both addresses. Choose the main address in the host's settings and redirect the other address to it.

• Cloudflare custom domains
• Vercel custom domains

Edit text and page content in site-content.json. Each entry in pages has its own path, title, and config. Keep the JSON quotes and commas intact.

Store local photos in public/. Reference public/photo.jpg as /photo.jpg in the content. Keep image paths the same unless the files change.

Update each page's config.seo.siteUrl to the final website address. Components live in kits/ and shared styles live in app/globals.css.

1. Make a backup or Git commit before edits. Preview the changes with npm run dev.
2. Run npm run build after the changes pass the preview check.
3. For Cloudflare Direct Upload, create a new production deployment in the same project and upload the new out folder.
4. For Vercel Git deployments, commit and push the source changes to the production branch. Check the finished deployment.

External photo and map URLs still depend on their providers. Local images travel with the download. Review package updates periodically and test before each release.

The exported contact form opens the visitor's email app with a prepared message. The visitor must send that email. It does not send email from a server or store leads in Webrenew.

For automatic delivery, connect a form service in kits/home-services/contact-form.tsx. Follow that service's setup guide. Keep private API keys out of browser code and the static files.

Test the form on a phone and a computer. Confirm the destination email address in site-content.json before launch.

Node or npm not found: install Node.js, then close and reopen the terminal.

package.json not found: open the terminal in the extracted website folder that contains that file.

Build fails after an edit: read the first error. Check JSON syntax, image paths, and the file named in the error.

Font download fails: check the internet connection and retry the build. The build downloads fonts.

404 after upload: confirm that index.html is at the host's output root. Upload all of out/ with _next and page folders.

Images do not load: preserve filename case and upload every asset folder. Check whether an external image provider is available.

Domain does not work: first check the host-provided address. Then compare DNS records with the hosting project's domain instructions.

Form does not send automatically: the default form opens an email app. See the contact form section to add a form service.

• Get help from Webrenew