Building pugia.com ~ adding some structure

Ok, now that the fist step is done, I can add some structure to the website.

Right now I don’t have a specific idea of what I want to put in it, basically I want to list these articles, and maybe some section with custom content. The first one will be probably a section called WILT (What I Learned Today), in which I’d like to link something new everyday… 🤓

So let’s start with a general structure: since at work we use Pug (ex Jade), I think I will use it also on my personal page. I don’t know the path structure that the site will have, I want to keep the structure as flexible as possible, so I’ll create a simple routing with Express, passing a JSON with small data Pug rendering (right now it’s basically only the title of the page).

Folder tree, server, about route and Pug template

It’s pretty simple, I create a single file for every route, in the folder routes I have a file for every route, including the index. The server read these files with a readdirSync looking for routes to render

// find routes in routes folder
const routes = fs.readdirSync(SRC_PATH + 'routes/');
for (var x in routes) {
    if (routes.hasOwnProperty(x)) {
        const route = path.basename(routes[x], '.js');
        if (route === 'index') {
            app.use('/', require('./src/routes/index'));
        } else {
            app.use('/' + route, require('./src/routes/' + route));
        }
    }
}

On the front design side of the page everything is still the same, I’m still waiting for my logo from FrancescoScalambrino, maybe with some UI/UX hint… 😙

The page is obviously still 100/100 on Google Pagespeed, that is my background goal.

The next step will be to separate the content from the layout, and publish the repo, so that everyone can laugh at my code… 😅