I'm trying to develop a fully offline mapping solution using OpenLayers and this very useful guide. With it, was able to successfully build a map server. I set it up on a virtual machine, running Ubuntu Server 20.04. By following the "second part" of the same guide, I could be sure that the server is functioning properly (on Ubuntu Desktop 20.04) since a world map containing only details of Azerbaijan was shown.

In my question I say properly because it can be seen the script here contains both html and JavaScript, which I would rather not mix. Also it contains some tags like this:

<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>

which completely defeat the purpose of an offline mapping solution. Also I would like to organize the project code by following the model suggested by OpenLayers in this page, which separates the code in many files like in this project folder. Here's how OpenLayers gets data from my map server, in the url: field:

layers: [
  new ol.layer.Tile({
    // This illustrates a custom tiles source but for using
    // official OpenStreetMap server new ol.source.OSM()
    // instead of new ol.source.XYZ(...) is enough
    source: new ol.source.XYZ({
      attributions: [
      ol.source.OSM.ATTRIBUTION,
        'Tiles courtesy of ' +
        '<a href="http://openstreetmap.org">' +
        'OpenStreetMap' +
        '</a>'
      ],
   url: 'http://192.168.56.100/hot/{z}/{x}/{y}.png'
    })
  })
],

Hoping I didn't miss anything important I ask: how can I properly define the tile layer on OpenLayers in a completely offline manner and using my map server?