Static Main Page | HTML

Static Main Page | HTML

23/09/2026

Let's create the first page. The first page a user will see when visiting this website is the main page. It will be an About page which contains a short description of the website.

It will be assembled from three parts: header (website navigation), content, and footer. The deployed version of my website doesn't have a footer because it doesn't make much sense. But in this version I will append it to give the page a sense of completeness. Creating the header and footer will be explained in the next articles.

In this project there will be a lot of pages, so a lot of HTML files, and they need to be stored somewhere. For this purpose, let's create a views folder and an about.html file inside of it.

Now we have the empty about.html file, and to fill it quickly, type the "!" symbol and press "Tab". You will see this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> <!-- Change to "About" --->
</head>
<body>
  
</body>
</html>


Let's change the value of the <title> tag from "Document" to "About". The <body> section is where all visible content is placed. I will add a header with the "About" text and paragraphs that describe my website. Here's an example of the layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About</title>
</head>
<body>
  <!-- Header -->
  <h1>About</h1>

  <!-- Paragraphs -->
  <p>
    Welcome to my website. Its purpose is to document my ...
  </p>
  <p>
    ...
  </p>
  ...
  <p>
    ...
  </p>
</body>
</html>


To display this page on the website, open app.js. Now we have the following code:

app.get('/', (req, res) => {
  res.send('Hello, World!')
})


Here we use the send function, but to send not text but HTML files, we should use the sendFile function:

// Display the About page on the main route
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/views/about.html')
})


The __dirname variable contains the absolute path to the directory where app.js is located. I then concatenate it with the path to my HTML file. Run the server:

Next time I will add some CSS styles to make this page look better and more pleasant.