setting up my blog

Setting up a blog and writing your own layout can be both a fun and enlightening journey. Today, I created a custom blog layout using the Hugo framework. Here’s a look at how I did it, step by step. :-)

Project Structure

I started by organizing my Hugo project. Here’s how the key directories are structured:

Content: all blog posts are stored in the content/ directory in Markdown format.

CSS: custom styles are located in static/css/style.css.

Layouts: templates such as baseof.html, list.html, and single.html live in layouts/_default/.

I decided to remove the themes/ folder entirely, focusing on building everything within the project root for a fully customized setup.

Fonts and Styles

To give the blog a clean, modern look, I used Google Fonts for typography:

Body Font: IBM Plex Sans for a sleek, sans-serif style.

Date Font: IBM Plex Mono for a clean, monospaced look.

CSS Snippet

Here’s an example of the CSS used for styling the site:

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #f8f8f8;
    color: #333;
    margin: 0;
    padding: 0;
}

.site-header {
    background-color: #f5f5f5;
    text-align: center;
    padding: 20px;
}

.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1em;
    text-decoration: none;
    color: #007acc;
    border: 1px solid #007acc;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.back-button:hover {
    background-color: #007acc;
    color: white;
}