AMPERRA WEBSITE - HOW TO UPLOAD IT WITH FILEZILLA ================================================= WHAT YOU ARE LOOKING AT ----------------------- amperra-website/ UPLOAD-WITH-FILEZILLA.txt This file. Do not upload it. NOTES-about-the-site.txt How the site and the form work, and what is still outstanding. Read it after uploading. Do not upload it either. public_html/ THIS is the website. Everything inside it goes on the server. The folder is named public_html because that is what the web folder is called on most hosts. Some hosts call it htdocs or www instead. Whatever yours is called, the contents of this public_html go into it. THE UPLOAD, STEP BY STEP ------------------------ 1. Open FileZilla and connect to the host with the FTP details they gave you: host, username, password, port. Use SFTP if the host offers it. 2. In the right-hand panel (the server), open the web folder. It will be called public_html, htdocs or www. If you land in a folder that contains public_html, open it. Files must not sit outside it. 3. If the host put a placeholder page there, such as index.html, default.html or a "coming soon" page, delete it now. Otherwise it will keep showing instead of the Amperra site. 4. In the left-hand panel (your computer), open this amperra-website folder, then open public_html. 5. Select everything inside it. There are five items: index.html thanks.html favicon.ico robots.txt assets (a folder) plus a sixth hidden one, .htaccess, covered in the next section. 6. Drag that selection into the right-hand panel. IMPORTANT: drag the CONTENTS, not the public_html folder itself. If you drag the folder you will end up with amperra.com/public_html/ and the site will not load at the plain address. 7. Wait for the queue at the bottom to empty. It is about 350 KB, so it is quick. If anything lands in the Failed transfers tab, right-click it and choose Reset and requeue. 8. Open the domain in a browser. You should see the Amperra site. THE HIDDEN FILE --------------- There is a file called .htaccess in public_html. Files starting with a dot are hidden, so you may not see it in either panel. It tells the server to serve the Suisse Intl fonts correctly. Without it some hosts send the fonts in a format the browser rejects and the site falls back to a default typeface. To see it in FileZilla, on the server side: Server menu > Force showing hidden files To see it on your own computer: Windows: File Explorer > View > Show > Hidden items Mac: press Cmd + Shift + Period in Finder Then drag it across with the rest. If your host does not run Apache the file simply does nothing, which is harmless. IF THE PAGE LOADS BUT LOOKS WRONG --------------------------------- Plain typeface, missing logo, or pictures not showing means the assets folder did not come across properly. Check on the server that this exact structure exists: public_html/index.html public_html/assets/img/logo_light.png public_html/assets/fonts/suisse-light.woff2 The assets folder has to sit beside index.html, with its img and fonts folders inside it. If assets is missing or its insides are empty, upload the whole assets folder again and let it finish. Also press Ctrl + Shift + R once in the browser. It reloads the page without using anything saved from an earlier visit. PICTURES LOOK BROKEN OR CORRUPTED --------------------------------- This happens when FTP sends images as text. FileZilla gets this right by default, but if you have changed it: Edit > Settings > Transfers > File Types Default transfer type: Auto Then upload the assets folder again. WHAT IS IN assets/img --------------------- logo_light.png The amp:erra logo in the header, on white. logo_full_white.png The full logo with the company name underneath, in white. Used in the dark footer and on the confirmation page. mark_tl.png The logo symbol cut into four quarters. The mark_tr.png homepage assembles them so the symbol builds mark_bl.png itself as the page opens. All four are needed. mark_br.png founder.jpg Jakobina Junias, in the About section. favicon.png The small icon on the browser tab. apple-touch-icon.png The icon when someone saves the site to a phone home screen. og-image.png The picture that appears when the link is shared on WhatsApp, LinkedIn or Facebook. Nobody sees it on the site itself. assets/fonts holds Suisse Intl in Light, Regular and Medium. They are loaded from your own server, so the site looks the same for everyone and does not depend on any outside service. AFTER IT IS LIVE ---------------- Two things need your real domain filled in, and one needs a click. All three are explained in NOTES-about-the-site.txt: 1. Activate the contact form. Send one test request from the live site, then click the confirm link that arrives at info@amperra.com. Nothing reaches the inbox until this is done. 2. In index.html, near the top, two lines say amperra.com. Change them to the real domain so the preview picture shows when the link is shared. 3. Also in index.html, the form has a line ending thanks.html with amperra.com in it. Same change. UPDATING THE SITE LATER ----------------------- Changing wording means editing index.html and uploading just that one file over the old one. FileZilla will ask to confirm the overwrite. The assets folder only needs uploading again if you change a picture.