Add a static page

Introduction

Polyglot Tech Blog comes with three pages:

• Home, the landing page
• About
• Blog, where all blog posts are listed ... as well as a 404 error page.

Add the files

In each of your language directory, create a file "portfolio.html". This name must be the same accross all your language directories. The file name determines what the page URL will be. Here, it will be something like https://<my-domain>/<language>/portofio.html.

You should get the following structure:

src
 ├── (all files in src)
 ├── en
 │   ├── (all files in en)
 │   └── porfolio.html
 └── fr
     ├── (all files in fr)
     └── portfolio.html

Create the content in your files with the front matter as shown below.

en > portfolio.html:

---
title: "Portfolio"
layout: "base.html"
---

<div class="container">
    <p>
        Here is my content. <br>
        I write it in English in the "en" directory. <br>
        And of course, I write it in French in the "fr" directory.
    </p>
</div>

👍 Done, you have a new page!

Optional: Add entries to the navigation bar

This step is optional. If you wish to have a link to your portfolio page in the navigation bar, you have to make the following modification.

src > _includes > components > navbar.html:

        <!-- Pages -->
        <div class="tabs">
            <a href="\{\{ '/' | locale_url | url \}\}">Home</a>
+           <a href="\{\{ '/portfolio' | locale_url | url \}\}">{{ portfolio }}</a>
            <a href="\{\{ '/about' | locale_url | url \}\}">About</a>
            <a href="\{\{ '/blog' | locale_url | url \}\}">Blog</a>

And finally, the {{ porfolio }} references a variable that must be added to the en.json and fr.json files.

src > fr > fr.json:

{
    "lang": "fr",
    "home": "Accueil",
    "blog": "Blog",
    "about": "À propos",
    "madeBy": "Codé par",
    "seeOn": "Retrouvez-moi sur",
-   "read": "Lire"
+   "read": "Lire",
+   "portfolio": "Portefeuille"
}

src > en > en.json:

{
    "lang": "en",
    "home": "Home",
    "blog": "Blog",
    "about": "About",
    "madeBy": "Made by",
    "seeOn": "Check it out on",
-   "read": "Read"
+   "read": "Read",
+   "portfolio": "Portfolio"
}

Now, your page is accessible from the navigation bar 🥳

Conclusion

We have added a new "Portfolio" static page to our blog. This opens up many possibilities 🤩