Skip to content
Sign inJoin waitlist

Going live — Tustel HTML

Publishing the Tustel HTML edition means replacing the demo’s details and pictures, pointing the form at you and uploading the folder to any static host.

There is no build command and no server software: the folder you edited is the site.

Before you upload

Section titled “Before you upload”
Where
Demo domain replaced by yours Every .html file, sitemap.xml, robots.txt: find https://tustel-html-erapee.vercel.app (Editing the site)
Your own name instead of Alex Carter The Home and About heroes, the logo’s label, the footer note, the page descriptions, the testimonials (Editing the site)
Contact details (hello@example.com, the phone number and the location are placeholders) “Let’s work together” on Home and every project page
Your booking link (“Book a call” opens https://cal.com/) Every page
Social links (they open the networks’ home pages) The Home and About heroes, the footer of every page
Titles and descriptions written for your work Each page’s <head>; Home’s still describe the template
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, posts, services, testimonials and placeholder images replaced The pages, assets/images/
Your own figures: years, projects, clients, awards The counters on Home and About (Editing the site)
Client logos replaced, or the section removed assets/images/client-*.svg, Home (Editing the site)
The form delivers 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 “Alex Carter”, the sample e-mail, the sample figures, the testimonials or the sample client logos on a live site is the most common mistake: search the folder for “Alex”, “Tustel” and “example.com” one last time (the form’s placeholder jane@example.com can stay).

What to upload

Section titled “What to upload”

Everything except the tools and the documentation:

Upload Leave out
The .html pages, portfolio/, blog/ node_modules/, src/, docs/
assets/ package.json, package-lock.json
icon.svg, apple-icon.png, opengraph-image.png README.md, CHANGELOG.md, LICENSE.md
sitemap.xml, robots.txt Documentation.html, Documentation.pdf

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 with their file names (about.html, portfolio/aurora-coffee.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. The paths in 404.html start at the site’s root (/assets/css/style.css, /contact.html), because hosts show it at any address: if your site lives in a sub-folder of its domain (example.com/alex/, or a GitHub Pages project site), add that folder to those paths.

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 header over the Home photo, the one that comes back as you scroll up, and the phone menu;
    • the Catalog / List switch, the services and the testimonials on Home;
    • the client logo ticker and the counters;
    • Works and the Blog loading more as you scroll;
    • a project page with its galleries;
    • the contact form.
  2. Send yourself an enquiry 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 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 (the later projects and posts of Works and the Blog included);
  • one <h1> per page, and a title and description for every page;
  • canonical links, sitemap.xml, robots.txt and share cards; the 404 page and the style guide are kept out of search results (noindex);
  • lazy-loaded images below the top of each page, with their size written so that they keep their space while they load.

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 (the Home slideshow, the project covers, the post photos) matter most on phones.