Setup guide

01Before you start

You need a computer, a browser and a text editor. No other software, and no coding.

• Unzip the download. On a Mac, double-click the ZIP. On Windows, right-click → Extract All.
• Open index.html in the folder by double-clicking it. Your template opens in the browser, exactly as it will look online.
• Open the guide for your template: START_HERE.md (English) or START_HERE.ja.md (Japanese). MONO ARCHIVE and ÉCRU use README.en.md and README.md.

A text editor is enough: TextEdit on a Mac, Notepad on Windows. The free Visual Studio Code makes the files easier to read, but you don't need it.

02Editing a file

Your words, links and photo list live in one to three small files, such as settings.js. You never need to touch the HTML to change them. Every line looks like this:

name: 'Your Name',
role: 'Photographer',
location: 'Tokyo, Japan',

• Change only the text between the quotes ' '. Keep the quotes, the colon and the comma at the end.
• To write a quote inside the text, use the curly one: ’ (as in I’m).
• \n starts a new line, where the guide says so.
• To hide something, leave the quotes empty: ''.
• Lists in square brackets [ ] — photos, links, works — have one item per line or per block. Copy an item to add one, delete it to remove it, move it to change the order.

Save the file, then reload the page in your browser to see the change.

03Your photos

The ZIP comes with placeholder images that show their file name and shape. Replace them with your own.

• The easiest way: give your photo the same name as a placeholder (for example hero.jpg), drag it into the images folder and choose Replace.
• Or put your photo in images and write its file name in the settings file.
• JPG, about 2000 px on the long side, is enough. Bigger files only make the page slower.
• File names: letters, numbers, hyphens. No spaces. Write them exactly — photo.jpg and photo.JPG are different files on most web servers.
• alt is a short description of the photo for people who can't see it. Write one line, such as A wooden boat on a misty lake.

04Checking on a phone

Before publishing, make your browser window narrow: the template switches to its phone layout. After publishing, open the address on your phone to check it for real.

05Publishing

Your website is just a folder, so you can upload it as it is. Both services below have free plans and let you upload by dragging the folder into the browser. Upload the folder that contains index.html.

The screens of these services change from time to time. If something looks different, their own guides above are always up to date. Any other hosting works too: upload every file and folder with the same structure.

06Your own domain

Your site first gets a free address from the service (such as yourname.netlify.app). To use your own, like yourname.com, buy a domain from a registrar and connect it in the service's settings:

• Netlify — custom domains
• Cloudflare Pages — custom domains

07Contact forms

STUDIO, NOCTURNE, STILL and PLAIN have a contact form. As it comes, Send opens the visitor's email app with their message ready to send to your address.

To receive messages straight from the site, use a form service such as Formspree (free plan available). Create a form there, copy the form address that starts with https://, and paste it into settings.js:

formAddress: 'https://formspree.io/f/xxxxxxx',

08Changing it later

Keep the folder on your computer. Edit the files there, check them in the browser, then upload the whole folder again the same way. The address stays the same.

09If something goes wrong

“settings.js could not be read” (or another file name)

A quote, comma or bracket was deleted by mistake. Compare the line you changed with the examples in your guide. Undo (⌘Z / Ctrl+Z) often helps.

“Image not found: images/…” in place of a photo

The name written in the file doesn't match the file in images. Check spelling, capital letters and the ending (.jpg, .jpeg, .png).

A change doesn't appear

Save the file, then reload the browser. Online, the old version can stay for a moment — reload again after a minute.

The page is blank

Usually the same as the first problem: a missing quote or comma. Open the last file you changed and check the line.

Photos are missing only after publishing

The file name's capital letters don't match (Photo.jpg vs photo.jpg), or the images folder wasn't uploaded.

10License

One purchase lets you use the template for one website. You can change it as you like and use it for commercial work, for yourself or for one client. You can't resell or share the template. The full text is in LICENSE.md in the ZIP.

The demo photos are not included in the download. If you'd rather have TraceStudio build the site for you, get in touch.