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.
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.
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?
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.
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.
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.
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.
Download and install Hugo. This will be our static site generator, because it’s fast to build (literally seconds).
Create a folder (anywhere in your computer), where you will have your website.
Open a command prompt or terminal and navigate where the folder, created in the previous step, is located.
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 .
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
git clone --depth 1 --recursive https://github.com/kishaningithub/hugo-creative-portfolio-theme.git themes
Access your themes folder and its theme inside of it.
Using the README.md file, learn how to use your theme. Generally, new posts are create using
hugo new FOLDER/POST.md
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.
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
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
Clone the recently created repository setting it’s name to public.
git clone https://github.com/username/username.github.io public
Compile your site, executing
Access the public folder
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
Enter to your website using http://username.github.io and it’s live.
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