FREE Image Hosting with Gitlab

Images are an amazing way to show info & create interest; though at the cost of size & bandwidth. Let's see how to have FREE image Hosting with GitLab

FREE Image Hosting with Gitlab

Images are an amazing way to show information and create interest in readers.

But good representations means big and sharp images. And that comes at the cost of file size and bandwidth cost.

Today we will see how to use GitLab pages, or any Git service provider's static site feature as image hosting.


It is fairly simple.

Create a repository for images or files you wanna host. Let's say for example images is the repository

After creating the repository, just create a directory named public as this directory gets published to the static pages. You can create the public directory either by using the web tool or by cloning and committing the director with .gitkeep file.

Now as we have the public directory present; let's go ahead and set up out pipeline to build and publish the static site; Initially, we will use following .gitlab-ci.yml code to build our pipeline:

image: alpine:latest

  stage: deploy
  - echo 'Nothing to do...'
    - public
  - master

We took this code from previous pose about how to host static site on gitlab:

Host your Static Site on GitLab Pages πŸŽ‰ - Time to Hack
Static Sites are quick and easy; and when you can host them for free forever, that’s icing on the cake. Let’s see what GitLab has to offer.

And we are ready.

Now we just need to upload the file before linking to the blog or any other place and they are available as a CDN.


As we have the hosting now, we can think about optimizing it.

For optimization, we will try the compression for the images. And for compression, we will be using the package called imagemin We chose to use this package because it has the possibilities to use plugins to choose from varieties of compression algorithms.

To begin with compression, we will create a package.json and install the required packages.

npm i -S imagemin imagemin-mozjpeg imagemin-pngquant imagemin-webp

And then the index.js files which will execute every time we make a commit to the repository.

const fs = require('fs');
const mkdirp = require('mkdirp');
const getDirName = require('path').dirname;

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

const config = {
  sourceDir: 'images',
  destinationDir: 'public',
  preserveDirectoryStructure: true,
  patterns: [
    { // compress jpegs
      pattern: '/**/*.{jpg,jpeg}',
      plugins: [
    { // compress pngs
      pattern: '/**/*.{png}',
      plugins: [
        imageminPngquant({ quality: [0.7, 0.8] }),
    { // convert all images to webp
      pattern: '/**/*.{jpg,jpeg,png}',
      plugins: [
        imageminWebp({quality: 70}),

const flattenDeep = (arr) => {
   return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);

const saveFile = (path, buffer) => {
  return new Promise((resolve, reject) => {
    mkdirp(getDirName(path), function (err) {
      if (err) return cb(err);

      fs.writeFile(path, buffer, (err, result) => {
        if (err) reject('error writing file: ' + err);
        else resolve(result);

Promise.all({plugins, pattern}) => {
    const options = { plugins };
    const glob = [`${config.sourceDir}${pattern}`]
    if (!config.preserveDirectoryStructure) {
      options.destination = config.destinationDir;
    return imagemin(glob, options);
.then(files => Promise.all( => saveFile(
    file.sourcePath.replace('images', config.destinationDir),

And to run this JS file on every commit, we need to update our .gitlab-ci.yml file as following:

image: node:latest

    - node_modules/
    - npm install
    - node index.js
      - public
    - master

And it will optimize the images and publish the public directory.


You can use any free Git provider with Pages feature to have Free hosting. Which one you prefer or would use for your Image hosting?

Let me know through comments πŸ’¬ or on Twitter at @patel_pankaj_ and/or @time2hack

If you find this article helpful, please share it with others πŸ—£

Subscribe to the blog to receive new posts right to your inbox.

Hey There! You have made it this far.

Would you like to subscribe via email?

You've successfully subscribed to Time to Hack!