Template Setup & Customization Guide

Requirements

Use a current LTS version of Node.js and one package manager. The template is built with React, TanStack Start, Tailwind CSS and Lucide icons.

Node.js 20 or newer
npm, pnpm, yarn or Bun
A modern browser
A static or server-capable hosting account

Important: keep TanStack Router in place. Do not replace it with React Router or rename route files without updating their route paths.

Install and run locally

Extract the download, read read.txt and INSTALLATION.txt, then open the project folder in a terminal. Bun is recommended because its lockfile is included; npm is also supported.

Terminal

bun install
bun run dev

Open the local address printed in the terminal. Changes inside src/ update automatically while the development server is running.

Know where to make changes

The most commonly edited locations are listed below. Keep reusable content centralized instead of duplicating it across pages.

read.txtRead-first delivery notes and the recommended buyer workflow

INSTALLATION.txtDetailed local setup, build and deployment instructions

THIRD_PARTY_LICENSES.txtFont, icon and library credits with license references

src/components/hostify-page.tsxHomepage sections, pricing plans, domain search and configurator

src/lib/site-pages.tsSupporting-page copy and footer navigation

src/lib/order-flow.tsPlans, currency conversion and validated order selections

src/styles.cssColors, fonts, spacing and global visual tokens

src/routes/Every public page and its search metadata

public/Robots file, sitemap and other public assets

Change branding, colors and fonts

Replace every visible “Hostify Cloud” name with your own brand. Search the project for the old name so page titles, footer copy and order screens remain consistent.

Find current brand references

grep -R "Hostify Cloud" src public

Global colors and typography are defined as semantic values in src/styles.css. Change the values under :root, not individual page colors. Font links are loaded from the root page head.

Replace the logo icon or wordmark
Update primary and emerald accent colors
Choose licensed web fonts
Replace social profile destinations
Check contrast in every state

Edit homepage content and pricing

Homepage sections are in src/components/hostify-page.tsx. Update plan names, base monthly prices, features, testimonials, trust claims, locations and domain extension prices with your real offer.

The annual option displays a 20% discount. If your offer uses a different discount, update both the calculation and every “Save 20%” label so the displayed monthly rate and yearly total agree.

Currency note: conversion values are presentation examples. Replace them with your approved fixed rates or connect a live pricing service before selling real hosting.

Update pages and navigation

Supporting-page text and footer groups are centralized in src/lib/site-pages.ts. Each public URL also has a matching file in src/routes/ for its title, description and canonical URL.

When adding a page, create its route file and navigation link together. Use internal Link navigation rather than plain anchors for page-to-page links.

Replace example contact email addresses
Link GitHub, Instagram and LinkedIn icons
Review legal text with qualified counsel
Remove pages your final product does not include
Update footer copyright and company name

Understand the demo order flow

Signup, checkout, billing, domains and deployment are interactive demonstrations. Selections travel between pages in validated URL parameters, so refresh and browser navigation work, but no account is created and no card is charged.

Before real sales: connect your own secure account, database and payment solution. Never collect real card information with the included demo form.

If the item is sold as a frontend template, keep the “Demo only” and “You will not be charged” notices visible in the preview and documentation.

Replace SEO and sharing details

Every route includes its own page title, description and social sharing text. Replace the example production URL in canonical tags, public/sitemap.xml and public/robots.txt.

Values to replace

https://example.com
Hostify Cloud
Hostify Cloud, Inc.

Use one unique title per page
Use a truthful page description
Set the final canonical domain
Regenerate sitemap URLs
Add a real social preview image if available

Build, test and deploy

Create a production build before uploading. Resolve all errors and manually test navigation, forms, price switches and overflow at phone, tablet and desktop widths.

Production check

npm run build
npm run preview

The output can be deployed to a platform that supports TanStack Start. Add your project through the platform dashboard, keep the build command as npm run build, and attach your final domain.

TanStack Start hosting guide

Hostify Cloud documentation