Introduction

I always wanted to have an website to put some thoughts and notes about some projects and personal hobbies to maybe help or motivate someone with the same ideas. I wanted some simple and without the bloated stuff of sites today so i thought to create and host my site.

Requirements

• Domain - to have a personal website its necessary a domain name it for it to be accessible on the internet
• Web Server - when the client access our domain domain its necessary to exist an web server to respond to client requests
• Certificates - To encrypt the communication we need to use HTTPs, so we need to create an certificate
• Static Site Generator - We will use Hugo that is one of the most popular open source static site generator.

The Choose

I choose to host a Debian machine on a VPS (virtual private server). Nowadays i dont have any equipment left to use as a server and i didn’t want to invest on something like as raspberry pi to host the site. I thought to use Cloudflare tunnels but my internet and electricity are not very reliables. So i choose Hetzner, an Germany VPS for 4€/month with a static public ipv4 address.

Domain

First we need to buy a domain name. Nowadays there is various domain registrars so you can pick one that you like the most. I have choosed the Namecheap to buy one.

Namecheap

You can access the namecheap site here . After the domain acquisition and verification we need to add the host records to our machine where the web server is located. Host Records are a way to link domains to ip adresses, so we need to add the A records (ipv4) and AAA Records (IPv6).

Web Server

Nginx

On debian we used the good old one nginx to server as web server.

apt install nginx

Hugo

To create an a site, we can use Hugo, to generate static web site quickly. Here you can find all the hugo docs.

Making a quick site

Find a directory where you want to store your site, and run: hugo new site <site name> where site name is the name of the folder your site will be created in.

Browse this extensive list of Hugo themes until you find one you like. Find it on github, and simply clone it into your themes directory. Here, I chose the m10c theme. cd mysite git clone https://github.com/vaga/hugo-theme-m10c themes/m10c

Then add the following line to your config.toml file in your website’s root folder

theme = "m10c"

Adding a post

To create a new post, simply run

hugo new posts/my-first-post.md

This will create a post called my-first-post in the content/posts folder. Edit this as you please.

Finally, we need to run the site. Change directory into the projects root and run

hugo server -t m10c -D

Finally, visit localhost:1313 to see the site.

Configuring NGINX

Now we are going to create and edit a configuration file for our site.

cd /etc/nginx/sites-available/
cp default mysite
vim mysite

here are a lot of comments, but your server configuration should look something like this:

server {
       listen 80;
       listen [::]:80;

       server_name mysite.com www.mysite.com;

       root /home/username/mysite/public/; #Absolute path to where your hugo site is
       index index.html; # Hugo generates HTML

       location / {
               try_files $uri $uri/ =404;
       }
}

To enable this site, we need to create a symlink from your site into sites-enabled. Use absolute filepaths to avoid symlink confusion.

 rm /etc/nginx/sites-enabled/default
 ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/mysite

We can run and enable NGINX with the following commands:

 systemctl start nginx
 systemctl enable nginx

Certificates

SSl is a must these days, and its never been easier to maintain.

We need to install certbot:

apt-get install certbot python-certbot-nginx

And finally we run the setup script:

certbot --nginx`

You can check the certificates lines on the site configuration:

Conclusion

The steps were easy to conclude, and nowadays its very fast to have a personal/company site for a budget price.