Step 4.3 · Gallery pages and draft

Publish a draft

Put your unfinished site on the web now, so you can find the problems that only appear on a real server while there is still time to fix them.

You will work in
Netlify, your site folder
Learning outcome
Publish and present

A site can work perfectly on your computer and break once it is online. The usual causes are a name whose capitals don’t match (Red-01-sm.jpg in the folder, red-01-sm.jpg in the code), a file left outside the site folder, or a path that starts with C:\ or /Users/. Publishing a draft now finds these early. It also gives you a live link to test on your phone and to check with WAVE in step 5.2.

It’s a draft

Unfinished is fine. Styling, captions and text can still change. You will update this same site with your final version in step 5.3.

Publish with Netlify Drop

  1. Save everything and preview each page one last time. Click every link.

  2. Go to app.netlify.com/drop and create a free account, so your site stays online and you can update it later.

  3. Drag your site folder (not the whole project folder) onto the page. In a few seconds Netlify gives you a live URL.

  4. Rename the site under Site configuration > Change site name, for example destijl-rosenstocks. Netlify site names may only use lowercase letters, numbers and hyphens, even though your file names can use capitals and underscores.

  5. Test the live site on your computer and your phone. Open every page, click every link and open every gallery image.

  6. Fix and update. Fix any problems in your files, then open your site in Netlify, go to Deploys and drag the site folder in again. Your URL stays the same.

Broken image or link only online?

Compare the name in your code with the real file name, letter by letter, including capitals and the extension (.jpg vs .jpeg). Then check that the file is inside site and that the path doesn’t start with C:\, /Users/ or file:///.

Before you continue

© Created by Sara Rosenstock, Marietta College Graphic Design.