Skip to content

Create an Index File

For the Tech Words GitHub Pages main website, a single HTML file is used. This HTML file contains the text, links, and styles used on the page.

  1. Open GitHub Desktop.
  2. Open the GitHub Pages repository.
  3. Click Open in Visual Studio Code. Or select Repository > Open in Visual Studio Code.
  4. In Visual Studio Code, select File > New File, type index.html, then press Enter. This creates an index.html file in the GitHub Pages root folder.
  5. Copy and paste the example below into the index.html file in Visual Studio Code.

  6. Update the following:

    • Change the <title></title> to the title for your website.
    • Change img src= to your logo. Save your logo in the `images folder.
    • Change alt= to describe your logo. This is useful if the image does not display.
    • Change the main content (<h1>, <h2>, and <p> tags) to your own writing samples.
    • Change the website addresses (a href) to your own writing samples. The {target=_blank} will open the link in a new tab.

  7. Save the file.

  8. Open GitHub Desktop and select the GitHub Pages repository. You should see your changes displayed. Green highlights are new content, red highlights are removed content.
  9. In the Update field, type a name for this update. For example, Initial check-in.
  10. In the Description field, type a description for this update. For example, First check-in for the index file.
  11. Click Commit to main.
  12. Click Push origin. This pushes your changes to the GitHub repository. Wait for a few minutes, then go to your GitHub Pages website to see your changes.

Index File Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tech Words</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
          font-family: Arial, Helvetica, sans-serif;
        }

        .header {
            padding: 80px; /* Adds some padding */
            text-align: center; /* Centers the text */
            background: #FFFFFF; /* A white background */
            color: white; /* White text color */
        }

        /* Increase the font size of the <h1> element */
        .header h1 {
            font-size: 40px;
        }

        /* Change color on hover/mouse-over */
        .navbar a:hover {
            background-color: #ddd; /* Grey background color */
            color: black; /* Black text color */
        }

        /* Ensure proper sizing */
        * {
            box-sizing: border-box;
        }

        /* Make the logo responsive to fit the device screen */
        .responsive {
            max-width: 100%;
            height: auto;
        }

        .footer {
            padding: 20px; /* Adds some padding */
            text-align: center; /* Centers the text*/
            background: #FFFFFF; /* A white background */
        }
    </style>
</head>

<body>
    <div class="header">
        <img src="images/Black Elegant Modern Name Initials Monogram Logo 1a.png" alt="Tech Words Documentation" class="responsive">
    </div>

    <div align="center">
        <h1>Documentation Tool Examples</h1>
        <p>I used GitHub Pages to create a simple page with links to examples using different technical writing tools.</p>
        </br>
        <h2>MadCap Flare 2020</h2>
        <p>Click the link to view the Morena template.</p>
        <a href="https://techwords.github.io/madcap/Content/Home.htm" target="_blank">MadCap Flare 2020 site</a>

        <h2>Material for MKDocs</h2>
        <p>Click the link to view a Material for MKDocs site.</p>
        <a href="https://techwords.github.io/mkdocs/" target="_blank">Material for MKDocs site</a>

        <h2>GitHub Public Repository</h2>
        <p>Click the link to view the public GitHub repo where these sites are stored.</p>
        <a href="https://github.com/techwords/techwords.github.io" target="_blank">GitHub Public Repository</a>
    </div>

    </br>

    <div class="footer">
        <h2>Sites are a work in progress</h2>
    </div>

</body>
</html>