How I Built This blog

A Litte Background

I’ve been runing my Own Website since may 5 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

The Theme i’m using is 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 magic 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. ……………………………………………………………………

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{
    font-family: 'Noto Sans', sans-serif  ;
    color: #dfdfdf;
    font-weight: 700
}
h2{
    font-family: 'Noto Sans', sans-serif;
    color: #dfdfdf;
    font-weight: 700
}

h3 {
    font-family:  'Noto Sans', sans-serif  comic sans ms,;
    color: #dfdfdf;
    font-weight: 700
}
h4{
    font-size: 22px;
    font-family:  comic sans ms, ubuntu, sans-serif;
    color: #dfdfdf;
    font-weight: 700
}
a{
color: #2c2;
}
a#titlelink{
text-decoration: none;
color: #55c560;
font-family: ubuntu, sans-serif;
font-weight: 700;
font-size: 40px;
}


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;">

The blog's mascot

I used this Website To Convert Images to Base64.

The blog's Logo

for Webp images I found this great answer on Stackoverflow

Webp test

To embed youtube videos i followed this answer on Stackoverflow

Hosting

I’m hosting this site on Netlify I use the Netlify CLI tools to manually upload the site rather then a Git repo at the moment. I’ve had no real issuses with Netlify so far and the 100gb a month is plenty for a small site like this one.

It’s working well so far

I’m very pleased with how it turned out I’ve not yet implermented ads or analytics but i’ll probably implament them in the future.

Thanks for reading!