[Tutorial] Create your own website for free

Simple tutorial how to create your own website for free, it has some limitations and it requires some previous knowledge, so it’s mainly focused for developers.

Disclaimer

This tutorial requires to know about git and some knowledge of Markdown language (.md files), so it’s mainly intended for developers. I have added a bonus section to set your own domain.

Intro

There are already many tutorials, websites and providers that can teach/offer a free website, but in most cases you are limited. You have to read their terms and conditions to know that they won’t take your content away, specially in the digital era where content and ideas can have a huge impact. Others offer sites for less than 5 dollars a month, but they make you sign a contract for years; which at the beginning can work, but you never know how famous your site can be and trying to upgrade the service plan can be a little tedious.

This tutorial tries to be a little different. First of all, it’s not for everyone, because it requires to know some tools and languages that I will describe later; second, it applies some concepts of micro-services (if you are a developer you should already know this) but the site will be technically a static site, and third, why not trying something different?

Concepts (optional reading)

Here you can find some ideas behind this little tutorial that can help you understand it better, but you can skip it if you want.

Micro-services

When you develop a system/software/program/app, you have many ways to do it, in the past (and some outdated companies do it currently), everything was build into one single project. To use an example, imagine you want to create a system similar to Wordpress, let’s name it SentenceNews.

In the project, there will be people working on the User Interface, database (where information is saved), logic (login, permissions, posts, register, validations), server settings and many more things. Every time some bug or new feature appears, developers/engineers will simply add it in the best suited area, develop it and ship it after testing.

Every thing goes perfect, except for when something fails. Imagine you have a problem with your database and you can’t register new users, would you expect that the whole system fails or just affect the new users, while users who already logged in can still do their work? I’m pretty sure, everyone (or the majority) will prefer the latest, so for that it was suggested the micro-services architecture.

Micro-services focus on separating different logic in different services, so you have a service dedicated to login and registration, other related to posts, other for comments, and so on. Finally all of that is wrapped up in a UI (separated from the previous services), so everything still looks the same, just that as everything is a different service, if one fails others can still be up and running. Obviously, this requires that your infrastructure is divided and encapsulates each service in its own, but many cloud providers (like AWS) have a solution for that.

Representation of different services connected to one

Micro-services

This is a summary of micro-services, but what we are going to achieve is similar. Although our website is static, it can still call other services like disqus to have the ability to add a comment section, this way you can keep everything neat and clean, focusing on what really matters, your content.

Static site generator

The main language to show information to the user through websites is HTML, regardless what you do in the backend server, it will always be html (this includes javascript/typescript frameworks). The problem is that html usually is not dynamic, it won’t know if your user is named “SexyBeast26” unless you set a variable, which is retrieved using a backend. Apart from that, it requires that you copy-paste most content (like a menu), as it can’t be generated automatically, which leads to the next problem, if you update one single tab in your menu, you have to do it in every page; so in the end, it works (it’s used today by all browsers), but not by itself, so we are using a static site generator.

This site generator uses a template, you create your content with pictures, videos and more, then it’s processed and generates the html code. The benefit is that you can just focus in your next social media trend, without to worry of all the problems editing your html can bring.

Requirements

  1. Github account: You can create one for free entering to www.github.com
  2. Git: A git client and knowledge how to use it. Some tutorials
  3. Markdown language*: This is a “suggested” requirement, but you can still do it without knowing it.
  4. A computer: You can’t do this in your phone as you will require a bigger screen. 5.

Steps

  1. Download and install Hugo. This will be our static site generator, because it’s fast to build (literally seconds).

  2. Pick a Hugo theme. Choose whichever, but for this tutorial I will be using Creative Portfolio, some steps might change, but the overall steps are the same.

  3. Create a folder (anywhere in your computer), where you will have your website.

  4. Open a command prompt or terminal and navigate where the folder, created in the previous step, is located.

  5. Execute this command to create the folder structure inside of it. It’s necessary the dot (.) at the end of the command

    hugo new site .
    
  6. Download your picked theme changing the THEME-GIT-URL according to yours. You can use your favorite git client

    git clone --depth 1 --recursive THEME-GIT-URL themes
    

    Example:

    git clone --depth 1 --recursive https://github.com/kishaningithub/hugo-creative-portfolio-theme.git themes
    
  7. Access your themes folder and its theme inside of it.

  8. Using the README.md file, learn how to use your theme. Generally, new posts are create using

    hugo new FOLDER/POST.md
    
  9. In case you need help, they also provide a site example, to show you how to use it, just read the README.md file. Also you can use this video as reference.

  10. CREATE YOUR CONTENT. Use the next command to create an auto-reload server in your computer, all the content you update it will appear automatically in http://localhost:1313 (make sure your post has draft = false)

    hugo server -w
    
  11. Once you like how it looks it’s time to publish it. For that, we will use Github pages, which allow to host your static content for free. To create it, just create a Git repository in Github using setting your repository name following this pattern username.github.io. Example eagle2990.github.io

  12. Clone the recently created repository setting it’s name to public.

    git clone https://github.com/username/username.github.io public
    
  13. Compile your site, executing

    hugo
    
  14. Access the public folder

  15. You will see that your site is created, now it’s time to publish it

    git add --all
    git commit -m "First publish"
    git push -u origin master
    
  16. Enter to your website using http://username.github.io and it’s live.

Extra steps

  • This is just the UI, if you want to add a comment section to your site, it will depend on your theme. In case of creative-portfolio, I just needed to create a disqus account, get my id and set it in a variable inside config.toml, so there is no specific step for it.
  • The whole site, should be saved in another repository, so you can have a backup of the site generator.
  • Create a robots.txt file for SEO.

Tips

  • Don’t use GIT LFS in the public folder, as it will break your website.
  • Hugo is really easy to modify, just read carefully online or hit me with some questions, probably I can help.
  • For regular use, you won’t need https.

Bonus: Custom domain

Some people want to have their own custom domain, this might require an extra cost depending on what you want. There are some free .tk domains, but if you want to be able to use .com or in my case .studio, then you have to pay.

I have used namecheap.com (this one is using my affiliate code, if you want to support the cause 😄) and they have a tutorial how to set it up with Github page, which you can find it here. This might take some minutes to show the changes using your domain, but once it’s set up, all the future changes made to your github page will be updated immediately.

comments powered by Disqus