Let's publish a static photo gallery using surge.sh.
-
Fork this repository
-
Clone your fork to your computer
-
Inside the project directory run:
npm install -
Run the following command:
npm run publish
The npm run publish command will publish everything in the site/ directory using surge.sh. The first time you run it, you will be prompted to create an account.
You can choose what domain you publish your website to. By default, surge will randomly generate a new domain name for you every time you publish. You will have to edit the domain name to re-use the same domain.
- The HTML
<img>tag - Using CSS to create a photo gallery-like UI
- Using fs.readdirSync to get a list of files in a directory on your computer
- Using fs.writeFileSync to write to a file
Before we spend time looking for images we want in our gallery, let's get the gallery effect working with placeholder images.
Use a website like Lorem Picsum to generate URLs for random images. Edit site/index.html and site/css/main.css to make a gallery and then publish it.
The site/images directory contains a few pre-downloaded placeholder images. Let's generate a gallery dynamically based on the photos in that directory.
Start with the placeholder images, so you can focus on generating the right HTML. After that's working, replace the placeholder images with images of your choosing.
Edit gallery.js so that running node gallery.js updates site/index.html according to the images in site/images.
To do this...
- Use fs.readdirSync to get a the list of files in a particular directory.
- Use string concatenation to generate a string containing the appropriate HTML. At a minimum you'll need one
<img>tag per image insites/images. - Use fs.writeFileSync to write the HTML to
site/index.html.
In other words, running gallery.js will generate a new index.html based on the list of files in site/images. Once you've done that you can run npm run publish to publish the photo gallery on the web.