Creating your own website with modern technologies can be simple and cheap. Basically I just paid for the domain and that’s all. You don’t have to subscribe to any monthly subscriptions.

In the last period I have made up my mind to create a personal website which it had to have at least these 3 requirements:

• A homepage
• A page about who I am (a sort of CV)
• A Blog page

I inquired a little online and decided to share my experience.

INSTALLATION

First you need to install Visual Studio https://visualstudio.microsoft.com/it/vs/.

Install Hugo (choose the package according to your operating system) https://www.itnota.com/installing-hugo-windows/.

From the Visual Studio terminal, after installing Hugo, you have to check if it has been installed by entering the following command:

 hugo version

ACCOUNTS REQUIRED

1. GitHub account.
2. Netlify to host files and add a custom domain.
3. Forestry account to maintain the site without having to write code anymore.
4. Web domain (I recommend buying it here https://domains.google.com/).

SITE CREATION

Open the terminal and select the folder where you want to save your WEB site. For example:

 cd C:\Users\luca\Site\

Create your new site with the following command:

 hugo new site NuovoSito

At this point you have created your site, but it will be empty. To start from a base, avoiding writing the whole site from scratch, I recommend using one of the themes on the site https://themes.gohugo.io/.

Once you find the theme you like best, clone the theme you like best in your account, by clicking to the button fork on the top right. I used this https://github.com/themefisher/kross-hugo as a starting point.

Go back to the VisualStudio terminal and write this command to add the theme to your site. For example:

 git submodule add https://github.com/luka2288/kross-hugo themes / kross-hugo

To carry out a first test of your site, copy all the files contained in the examplesite folder (in my case is themes/kross-hugo/examplesite) and also the layouts and static folders in the main folder. After copying these files use this command:

 hugo server

Go to the browser in the following address http://localhost:1313/. Here you can see the preview of your site with the theme the you have chosen.

Now you can go to edit the various html (page code), md (file for blog articles) and yml (html page configuration files) files to configure your site as you wish. By saving the files you edit you will see the result directly on the browser.

ADD THE REPOSITORY ON GITHUB

Download and install GitHub Desktop from https://desktop.github.com/.

Synchronize the site folder with the GitHub Desktop application.

ADD THE REPOSITORY ON FORESTRY.IO

Log in to forestry with your Github account. Click on import to Forestry. Declare your config.toml file and fill up basic settings.

Now mark everything as done, then go to configuration to change the base url . You can put any url but this have to similar as netlify . So for now put a name which you are going to put in netlify as netlify subdomain.
On the left of the page you will find all the blog pages to be edited.

NETLIFY SETUP

Here comes the last step. Go to your netlify account and click add new site. Choose your git repository to import your website in netlify. Follow the steps. Then go to site settings for change the site name and put your subdomain name here what you put on forestry as base url. Save it and go to deploy from top menu.
Wait a while and click on site preview or just simply go to the subdomain you put as base url.

BOOM! Your site is live. Now you can go to forestry and add, remove or customize every setting and content.

For the DNS configuration of your website I recommend you to watch this video.