Skip to content

The index.html File

Filename Location Group Project/Repository
index.html ./static/index.html application httpcats

Why?

To present our static images we'll need to write an HTML document. This document is what will be downloaded by the browser and rendered, resulting in HTTP(S) requests to our application requesting the images which will be downloaded and rendered in the browser according to the HTML structure (and CSS styling.)

Breakdown

Our index.html file is very simple and we're not trying to learn HTML here, but let's break it down anyway.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>HTTP (DevOps) Cats</title>
  <meta name="description" content="HTTP (DevOps) Cats">
  <meta name="author" content="Michael Crilly">

  <link rel="stylesheet" href="css/main.css">

</head>

This is the header to the document and is setting up a few important aspects about the page: the document type, the title, the link to the CSS and more.

1
2
3
4
<body>
    <h1>HTTP (DevOps) Cats</h1>
    <p>They're just normal HTTP Cats, but they were deployed using the power of DevOps!</p>
    <p>All images made available thanks to <a href="https://twitter.com/girlie_mac">Tomomo Imura</a>!</p>

Now we're opening up the body of the HTML document which is where we begin to add our actual content structure and reference the content itself which in our case is a bunch of JPGs of cats (the best kind of JPG.)

1
2
3
4
5
6
7
8
    <div class="row">
        <div class="column">
            <img src="images/cats/100.jpg">
            <img src="images/cats/101.jpg">
            <img src="images/cats/102.jpg">
            <img src="images/cats/200.jpg">
            <img src="images/cats/201.jpg">
        </div>

Now we're creating a row, then a column and finally inserting references to cat JPGs inside that column. This is repeated quite a bit throughout the document

1
2
3
    </div>
</body>
</html>

Now we're closing down our rows and columns, and our body element, and finally closing off the HTML document.

I suggest copy/pasting this code instead of wasting time trying to understand it. We're more interested in the steps required to move this file through pipelines and make it live when changes come in, not learning HTML.

The Solution

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>HTTP (DevOps) Cats</title>
  <meta name="description" content="HTTP (DevOps) Cats">
  <meta name="author" content="Michael Crilly">

  <link rel="stylesheet" href="css/main.css">

</head>

<body>
    <h1>HTTP (DevOps) Cats</h1>
    <p>They're just normal HTTP Cats, but they were deployed using the power of DevOps!</p>
    <p>All images made available thanks to <a href="https://twitter.com/girlie_mac">Tomomo Imura</a>!</p>
    <div class="row">
        <div class="column">
            <img src="images/cats/100.jpg">
            <img src="images/cats/101.jpg">
            <img src="images/cats/102.jpg">
            <img src="images/cats/200.jpg">
            <img src="images/cats/201.jpg">
        </div>
        <div class="column">
            <img src="images/cats/202.jpg">
            <img src="images/cats/204.jpg">
            <img src="images/cats/206.jpg">
            <img src="images/cats/207.jpg">
            <img src="images/cats/300.jpg">
        </div>
        <div class="column">
            <img src="images/cats/301.jpg">
            <img src="images/cats/302.jpg">
            <img src="images/cats/303.jpg">
            <img src="images/cats/304.jpg">
            <img src="images/cats/305.jpg">
        </div>
        <div class="column">
            <img src="images/cats/307.jpg">
            <img src="images/cats/308.jpg">
            <img src="images/cats/400.jpg">
            <img src="images/cats/401.jpg">
            <img src="images/cats/402.jpg">
        </div>
        <div class="column">
            <img src="images/cats/403.jpg">
            <img src="images/cats/404.jpg">
            <img src="images/cats/405.jpg">
            <img src="images/cats/406.jpg">
            <img src="images/cats/408.jpg">
        </div>
        <div class="column">
            <img src="images/cats/409.jpg">
            <img src="images/cats/410.jpg">
            <img src="images/cats/411.jpg">
            <img src="images/cats/412.jpg">
            <img src="images/cats/413.jpg">
        </div>
        <div class="column">
            <img src="images/cats/414.jpg">
            <img src="images/cats/415.jpg">
            <img src="images/cats/416.jpg">
            <img src="images/cats/417.jpg">
            <img src="images/cats/418.jpg">
        </div>
        <div class="column">
            <img src="images/cats/421.jpg">
            <img src="images/cats/422.jpg">
            <img src="images/cats/423.jpg">
            <img src="images/cats/424.jpg">
            <img src="images/cats/426.jpg">
        </div>
        <div class="column">
            <img src="images/cats/429.jpg">
            <img src="images/cats/431.jpg">
            <img src="images/cats/444.jpg">
            <img src="images/cats/451.jpg">
            <img src="images/cats/499.jpg">
        </div>
        <div class="column">
            <img src="images/cats/500.jpg">
            <img src="images/cats/501.jpg">
            <img src="images/cats/502.jpg">
            <img src="images/cats/503.jpg">
            <img src="images/cats/504.jpg">
        </div>
        <div class="column">
            <img src="images/cats/506.jpg">
            <img src="images/cats/507.jpg">
            <img src="images/cats/508.jpg">
            <img src="images/cats/510.jpg">
            <img src="images/cats/511.jpg">
        </div>
        <div class="column">
            <img src="images/cats/599.jpg">
        </div>
    </div>
</body>
</html>

Committing the Code

  1. Set your working directory to the application/httpcats repository
  2. Create the static/ directory by using mkdir: mkdir static
  3. Move into the static/ directory: cd static
  4. Save the file as index.html and use git add index.html to add it to the Git staging area
  5. Use git commit -am 'our HTML index file for presenting the cat JPGs' to commit the file to our repository
  6. Push the code to GitLab.com: git push

Last update: August 25, 2021