Build a static image server via Github — Upload CLI

Github

Prev Article: https://medium.com/@emagrorrimxguo/build-a-static-image-server-via-github-98833089e880

Last time, we build a static image server with Github, so we put the image into the server folder on your machine, and then commit and push the image to the remote git repo, then you will get your image hosted on Github. So this time, let’s make these steps automatically.

To Automate this, we need to write some code, here I choose to use Node.js which can provide a lot of tools to operate files or download images. And also easy to run locally on you laptop. And Node.js support running shell script.

So we split the uploading process into following steps:

1. Read the arguments from command line
2. Download the image and save into the a specific path
3. Push the image to remote git repo to get the image published

I will describe these steps one by one:

Read the arguments from command line

When using Node.js command line, we expect it looks like the following:

node upload.js --url https://any-image-host.com/static/images/image.png

So we can get the this url and download the images and put them into your Github repo.

Usually we can get these parameters from process.argv, but they are hard to format for all the data is store in an array. It may looks like following:

[
  '/<path>/node',
  '/<path>/upload.js',
  '--url',
  'https://any-image-host.com/static/images/image.png'
]

So I suggest to use a tool called minimist, you can install this via npm via npm i minimist --save in your static images github repo. This tool help us format the parameters into key-value format like following:

{
  _: [
    '/<path>/node',
    '/<path>/upload.js'
  ],
  url: 'https://any-image-host.com/static/images/image.png'
}

Then we can get the image url easily from minimist(process.argv).url

Download the image and save into the a specific path

After get the target image url, we should try download the image from the URL.

First, choose a path to store your image. I like the following path,

<project-path>/images/<timestamp>/<uuid>.<image-format>

So create the dir <project-path>/images/<timestamp>, here we can using shell script mkdir -p <project-path>/images/<timestamp>, but can we run shell script in Node.js? Yes, of course we can. We can run shell script via following code:

const exec = require('child_process').exec;
const sh = cmd => {
  return new Promise((resolve, reject) => {
    exec(cmd, (err, stdout, stderr) => {
      if (err) {
        reject(err);
      } else {
        resolve({ stdout, stderr });
      }
    });
  });
}

First, get exec method from child_process module, this is built in Node.js, we don't need to introduce any other 3rd party modules. Then it recieve shell script command as parameter and then execute it.

So here we just need to sh('mkdir -p <project-path>/images/<timestamp>'), the dir is there.

And after create the directory, we can try download the image. Here we can use image-downloader module, install it via npm i image-downloader --save. And it is quite simple to use. eg.

const downloader = require('image-downloader')
  const options = {
    url,
    dest: path.resolve(__dirname, `${dir}/${name}`),
    extractFilename: false,
  }
  return downloader.image(options)
    .then(({ filename, image }) => {
      console.log('The image is saved to', filename);
      console.log('The image is at', `https://raw.githubusercontent.com/<your-git-username>/static-images/master/images/v2/${timestamp}/${name}`);
    })

About more usage of image-downloader, pls have a look at https://www.npmjs.com/package/image-downloader

Then the image should be placed in the path you configured.

Push the image to remote git repo to get the image published

After get the image, the final step should be publish the changes.

This is simple for we have setup the sh method to run the shell script. So here we set the command like:

const command = `
  git add --all; \
  git commit -m "Add image"; \
  git push origin master});
`
sh(command)

Then you should see your image published if everything works.

Troubleshooting

The biggest problem I am facing is sometimes some image can not be download with error CONNECTION REFUSED on 0.0.0.0:443, but you can see the image when you put the image url in browser. This is mainly because your DNS can not resolve the image url, at this point, you can config another DNS on your laptop, but this may take time, so maybe manually download this image and push to git repo manually.