How I Built This blog

A Litte Background

I’ve been made my First Website back in may 2019. It’s done in HTML and CSS only. using a template provided by 1mb.site I never intend to make that much content besides a Landing page, a few guides and links to software i like.

While I’m still Wirting content for my personal website I wanted to work on a new project. this very blog. I Original wanted to just wirte the pages in HTML and css. but once you go beyond a few pages it can get hard to manage. i Wanted something that i could set and forget. so I ended up using the static site builder HUGO.

What i Used

Theme

I made my own based of the saito boilerplate theme

Fonts

For the fonts I’m using Noto sans for Headings. And the Ubuntu font For everything else as well as the title.

Colour Scheme

For the Backgound I used a dark gray or #404040 to be more specific. For text I used #dfdfdf or a kind of sligtly dark white as you can see.

The power of CSS

The theme i’m using is a boilerplate theme so it’s very basic by default.

without adding css this what the website looks like.

Before adding CSS

css

I think it looks much better now unless this is more your style :)

You can copy and paste this for your own use if you want.


a#titlelink{
    text-decoration: none;
    color: #55c560;
    font-family: ubuntu, sans-serif;
    font-size: 40px;
    }

body {
    margin: 45px auto;
    max-width: 650px;
    background-color: #404040;
    line-height: 1.6;
    font-size: 18px;
    color: #dfdfdf;
    padding: 0 10px;
    font-family:  ubuntu, 'Noto Sans', sans-serif;
}
h1,h2,h3{
    font-family: 'Noto Sans', sans-serif  ;
    color: #dfdfdf;
}

h4,h5,h6{
    font-family:  ubuntu, sans-serif;
    color: #dfdfdf;
    }
a{
color: #2c2;
}
ul.pagination {
    list-style-type: none;
    text-align: center;
    padding: 0;
}
ul.pagination > li {
    padding: 0 8px;
    display: inline-block;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
picture {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Embeding youtube videos and images

With hugo you wirte your content in markdown. While markdown does have support for embeding images and youtube videos I found it be flaky at best but luckly we can embed HTML directly in markdown

For Images

<img src="/posts/img/your-image.filetype" alt="test" style="width:200;height:px:150;">

2d-head

for Webp images I found this great answer on Stackoverflow

Webp test

To embed youtube videos i followed this answer on Stackoverflow

It’s working well so far

I’m very pleased with how it turned out

Thanks for reading!

Article last updated on November 25th 2019