Kiekkist
Menu
DE

Guide · HTML

Install an HTML template

The HTML export is the simplest form: finished pages, CSS, fonts and images. Upload them and the site runs. No Node on the server, no database.

In the example the design is Fieldnote (free, short name fieldnote). For your design, use its short name.

What you need

What is in the export

Folder fieldnote-html/

index.html and the other .html files
Every page of the design; links between pages are relative.
404.html
Error page, wired up in .htaccess.
assets/
CSS, fonts (woff2 with licence files), images, a small script.
tokens.css
Every colour, font and spacing value as CSS variables.
.htaccess
For Apache: HTTPS redirect, security headers, caching, 404 page.
_headers
The same headers for hosts that read this file.
sitemap.xml, robots.txt
For search engines, with your domain if you pass it to the export.
EXPORT.md
Export report.

By hand

  1. Download the ready export

    Free designs download from the design page, purchased ones from the download page with your licence key. Then choose what to load: HTML website, everything in one ZIP, or the design package only. Unpacked, the export sits in fieldnote/exports/html/, with INSTALL.md and EXPORT.md. It is the same content as fieldnote-html/ in the steps below.

  2. Or create it yourself

    To rebuild the export from a changed design package, use the Kiekkist tool kk. It is open source, runs locally and needs Node.js 22 or later. Put it next to the design folder (in the “design package only” download it is fieldnote/). The command writes fieldnote-html/; --no-check skips the visual comparison (for it, run npx playwright install chromium once).

    git clone https://github.com/tillheidrich/kiekkist
cd kiekkist && npm ci && cd ..
node kiekkist/cli/kk.js export ./fieldnote --target html --site-url https://www.your-domain.com --no-check

  3. Look at it locally

    Open the folder with a small web server so fonts and paths work as they will online. Then open http://localhost:3000/ in the browser.

    cd fieldnote-html
npx serve .

  4. Upload by FTP

    Connect to your web space and open the domain’s root folder (often htdocs, public_html or www). Upload the contents of fieldnote-html/, not the folder itself. index.html has to sit directly in the root folder. Show hidden files so .htaccess is included (FileZilla: Server → Force showing hidden files).

  5. Check

    Open the home page, every subpage, a wrong address (shows 404.html) and the legal pages. Check in the browser’s developer tools that no request goes to a third-party server.

With an AI assistant

Your AI coding assistant can create the export, replace the sample content and tell you what is left for you to do. Give it the unpacked design folder and have it read these files:

  • fieldnote/DESIGN.md: design rules, colours, fonts, what not to change
  • fieldnote/tokens.json and tokens.css: every colour, type and spacing value
  • fieldnote/README.md: what is in the package and what to replace before launch
  • fieldnote/LICENSE.md: what you may do with code, copy and photos
  • fieldnote/UEBERGABE/: handover templates for your client (German and English)
  • after the export fieldnote-html/EXPORT.md

Prompt to copy. Replace the details in square brackets. Instead of fieldnote, use your design’s short name.

The folder ./fieldnote holds a website design as a package. Turn it into a static HTML website for [company name], domain [www.domain.com]. 1. Read fieldnote/DESIGN.md, README.md and LICENSE.md first. Do not change the design; use only values from the tokens. 2. Get the Kiekkist tool (git clone https://github.com/tillheidrich/kiekkist, then npm ci inside it) and create the export: node kiekkist/cli/kk.js export ./fieldnote --target html --site-url https://[www.domain.com] --no-check. 3. Replace all sample content in fieldnote-html with my details: [name, address, services, copy]. Header and footer are repeated in every page: change them the same way everywhere. 4. Fill in the placeholders on the legal pages; ask me for anything you do not know. 5. At the end, show me which files I need to upload by FTP and where to.

Have every change shown to you before it goes onto the live site. Passwords and licence keys do not belong in the chat or in the repository.

Replace content, images and logo

Copy: directly in the .html files, with a text editor. Header and footer are in every page, so change them everywhere (search and replace across all files).

Images: in assets/img/. Photos come in several widths and as AVIF and WebP. Either replace every variant under the same names, or trim the sources in the <picture> element to your files. Set width and height on the <img> to match your image, or the layout jumps while loading.

Logo: an SVG in the header (class="brand"), in every page.

Adapt colours and fonts

Every colour, font and spacing value is a CSS variable in tokens.css. Change the value, reload the page. The rest of the CSS in assets/site.css only reads these variables.

Different font: put the woff2 into assets/fonts/, add an @font-face to assets/fonts/fonts.css, switch --font-… in tokens.css. Update the font preload line in every page’s <head> too.

Colours are given in OKLCH. After every change, check the contrast (at least 4.5:1 for text).

What the licence allows

Purchased design: you may build unlimited websites with it, your own and your clients’, and hand them over with all rights. Your client may keep running the site without you. What is not allowed: passing on or selling the design itself, also not as a template, theme or kit. The full text is in the licence.

Free design: LICENSE.md in the package applies. For Fieldnote that is CC BY 4.0: use for clients and commercial work is fine, with a short credit in the source or on a credits page.

Photos from the package may only be used as part of the website you build with it. Do not pass them on separately or use them as stock.

Fonts are under the SIL Open Font License. Keep the licence files LICENSE-*.txt next to the font files.

Never put your licence key into a repository or theme files. KIEKKIST-LICENCE.txt in the package only names the licence ID and project.

Common problems

The page looks unstyled; fonts are missing.

Usually the assets/ folder is missing on the server or sits one level too deep. index.html and assets/ have to sit side by side in the root folder.

“Too many redirects” or the site cannot be reached.

.htaccess redirects to HTTPS. If there is no TLS certificate for the domain yet, that goes nowhere. Activate the certificate in your host’s control panel first. For a test you can comment out the lines in the mod_rewrite block.

The 404 page does not show.

.htaccess was not uploaded (hidden file) or the host does not use Apache. On nginx the host sets the error page and headers in its configuration.

An embedded video, map or form service is blocked.

The content security policy in .htaccess and _headers only allows content from your own domain, and forms only to your own domain (form-action). Add the service on purpose and update the privacy policy.

The form sends nothing.

That is on purpose: in the package it is a demo. Set your form endpoint as the action and switch to method="post".

The export stops with “export refused”.

kk checks the design before exporting and names every error with file and line, for example a section without a name. That happens when you changed the HTML pages in the package first. Fix the named spot, or export from the untouched package and change things afterwards. Also check your Node version with node -v: below 22 the tool does not run.

What we checked

Checked with two designs (Fieldnote and Kestrel Row): export created, every page loaded in a browser through a local web server, with no missing files and no requests to third-party servers.

More about this export All guides See the gallery

Other exports: WordPress, Astro, React, Elementor