Skip to content
Sign inJoin waitlist

Going live — Titen HTML

Publishing the HTML edition means replacing the demo’s details and pictures, pointing the forms at you, and uploading the folder to any static host. There is no build command and no server software.

Before you upload

Section titled “Before you upload”
Where
Demo domain replaced by yours Every .html file, sitemap.xml, robots.txt: find https://titen-html-marcframe.vercel.app (Editing the site)
Name, contact details, addresses (contact@example.com, the phone number and both addresses are placeholders) Every page (header, footer), the Contact page
Titles and descriptions written for your business Each page’s <head>
Logo, icons and share image replaced The logo <svg> in every page (Making it look like your brand), icon.svg, apple-icon.png, opengraph-image.png (2400 × 1260; 1200 × 630 or larger)
Demo text, projects and placeholder images replaced The pages, assets/images/
The two videos replaced or removed The <video> elements in index.html and about.html (Editing the site)
Your brochure instead of the placeholder brochure.pdf
The forms deliver to you assets/js/config.js (Forms)
Style guide kept or deleted style-guide.html
Stylesheet rebuilt if you changed the theme or used new classes npm run build:css (Making it look like your brand)

Leaving “Titen”, the sample address or the sample projects on a live site is the most common mistake: search the folder for “Titen” one last time.

What to upload

Section titled “What to upload”

Everything except the tools:

Upload Leave out
All .html files, projects/, services/, blog/ node_modules/, src/, docs/
assets/ package.json, package-lock.json
icon.svg, apple-icon.png, opengraph-image.png, brochure.pdf README.md, CHANGELOG.md, LICENSE.md
sitemap.xml, robots.txt

Uploading the extra files does no harm, but there is no reason to publish them.

Where to host

Section titled “Where to host”
Host How
Netlify Drag the folder onto Netlify Drop. Done; then add your domain.
Cloudflare Pages, Vercel Upload the folder or connect a Git repository; no build command, the output folder is the root.
GitHub Pages Push the folder to a repository and enable Pages.
Shared hosting (cPanel, Plesk…) Upload through the file manager or FTP into public_html (or www).

Pages link to each other as about.html, so no server configuration is needed. Most hosts serve 404.html for unknown addresses automatically; on Apache, add ErrorDocument 404 /404.html to .htaccess.

Your domain

Section titled “Your domain”

Add it in the host’s domain settings and point your DNS where they tell you (usually an A record or a CNAME). Turn on HTTPS: every host above does it for free.

After it is live

Section titled “After it is live”
  1. Check the pages. Click through every page on a phone and a laptop:
    • the menu and the project search;
    • the accordion and the service list on Home;
    • the slideshows (Home testimonials, About approach);
    • the videos;
    • the forms.
  2. Send yourself a submission from the live site and reply to it.
  3. Verify the share card. Paste the URL of the home page and of a project into https://www.opengraph.xyz or a chat window, and confirm the image and title.
  4. Tell Google. Add the site to Search Console, verify ownership and submit https://yourdomain.com/sitemap.xml. Bing has the same thing in Webmaster Tools.
  5. Analytics, if you want it. Paste your snippet before </head> in every page (find and replace on </head> does it at once), or use your host’s built-in analytics (Cloudflare Web Analytics, Plausible, Fathom). None of them need a cookie banner.
  6. Keep the work current. Add projects and posts as described in Editing the site, and keep sitemap.xml and the search list in step.

Performance and SEO

Section titled “Performance and SEO”

The pages ship with what search engines look for:

  • real HTML, with links in it to every page;
  • one <h1> per page, and a title and description for every page;
  • canonical links, sitemap.xml, robots.txt and share cards;
  • lazy-loaded images.

Each image is one file, used at every screen size. Keep the site fast by exporting photos at the size they are shown and compressing them; the photos at the top of each page matter most on phones. The demo’s videos play from stock sites whose servers set cookies; your own video files from your own domain don’t.