According to Facebook creator Mark Zuckerberg, a software developer should have a personal blog. I also think the same way because you can write whatever you are learning in your blog. It can also serve as your portfolio. So in this article, I will be showing you how to create a blog without spending a single dollar. So let’s dive in, We are going to use Netlify and CMS frameworks.
What are my requirements to follow this article? Nothing except willing to learn.
What are we going to learn in this article?
- What is a blog?
- Why you should have a blog?
- How to get a free domain?
- How to get free hosting?
- How to create a beautiful-looking blog?
- Pointing your domain to your blog?
- How to add a completely free comment system (Without ads)?
- Conclusion
- References
So let’s start with the first question.
What is a blog?
In old times people used to write their thoughts in a personal journal. But as we all know it’s the internet world, so people use blogs to write their thoughts. Other people can read your thoughts. So a blog is a place where people can write their thoughts on an online website (which we call a blog) and other people can read them. There are other ways of sharing your thoughts like Video. Video blogs are also called ‘vlogs’. Thanks to google and other online advertising platforms some people are earning handsome money by writing blogs.
According to wikipedia,
A blog (a truncation of “weblog”) is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order, so that the most recent post appears first, at the top of the web page.
A blog is a collection of articles written by a person or group of people.
Twitter is a microblogging service that enables users to post and read short 140-character messages, called “tweets”.
Why you should have a blog?
There are many reasons why you should have a blog. The most important of them is that It is your journal where you log things you do every day. It can be helpful in your next job hunt because anyone can see your potential without even asking you. You can take the example of the famous Jose Valim (Creator of Elixir programming language) or Chris Mccord (Creator of phoenix framework). Some other reasons can be.
- If you are famous then you can earn a handsome amount of money from it.
- You can be a famous personality.
- You will learn so much by just writing blogs. Believe me, you will.
How to get a free domain?
What is a domain?
According to wikipedia,
A domain name is an identification string that defines a realm of administrative autonomy, authority, or control within the Internet.
In simple terms, Domain is a uniquely identified address/string for your website that redirects to your website’s IP address using DNS. Or we can say it’s a wrapper for your IP address.
DNS is a domain name server, it is responsible for sending you to correct IP if you are accessing your domain.
Free Domain
There are several ways of getting a domain one of them is freenom.com. Go to this website and purchase a domain, you can see there is a handful number of freely available domains.
I have another blog post showing steps on how to purchase a free domain. If you wanna take a look here is the link.
I would suggest purchasing top-level domains because they will rank higher in the google search engine and other search engines. Believe me, going for .com or .org does matter. I would suggest checking out namecheap or godaddy for this purpose.
At this point I hope you have a domain, let’s move to the next step.
How to get free hosting?
Every website needs to be placed where it can be accessed by the world. The place which never sleeps, and can provide us uninterrupted access to our website. Another important thing is the IP address.
IP address is a unique identifier for every computer on the internet.
In the old times, people used to use their machine and setup at the office/house, and make it always running. It was expensive. Expensive because they need to buy commercial servers which can work for months or years without being touched. They also needed people to manage those servers. Again it was expensive.
But this is not the case anymore. Because of cloud hosting, we can have our website hosted on a cloud server. AS a trial purpose, they provide us with a free server. For example Digital Ocean, Heroku, or AWS. There is one more that we are going to use in this article Netlify.
Netlify
Using Netlify is pretty easy just create a free account using any of the login methods presented.
There is a difference between Netlify and other hosting services. Netlify is a website that can host only a static website and not a dynamic website while other hosting services can host both static and dynamic websites for example Heroku, digital ocean, AWS, etc. I think that’s what we need to host our blog because the blog doesn’t need to be dynamic. At least not if you are starting a personal blog. You can switch to a dynamic blog if you are getting a lot of traffic.
There are some more websites like Netlify for example Contentful but they are not free. So we are going to use netlify.
But, there are a lot of tools available open-source to make this static website interactive. Like Gatsby, Next.js, Hugo, Jekyll, etc. They are static website generators. They will convert our website written in markdown into a static website. They all are open source. So that’s what we need.
Ok so at this point we have a free domain and free hosting. We also know why we need to use netlify not others. Let’s move to the next step.
How to create a beautiful-looking blog?
There is more than one option to create a beautiful-looking blog.
- Writing it from scratch with HTML and CSS and javascript.
- Using a theme for HTML and CSS.
- Using a static website generator like Gatsby, Hugo, Jekyll, Next.js, etc.
The problem with options 1 and 2 is that you need to learn a lot of HTML and CSS and a little bit of javascript. Whenever you need to create another post or article you need to write it again using a whole lot of HTML and CSS. Of course, we need to think about the SEO of the website.
Another problem with options 1 and 2 is that it’s hard to change the theme.
That’s why we need to use option 3.
Why should we use a static website generator?
A static website generator is a tool that converts a website written in Markdown into a static website.
There are a few points that make a static website generator better than options 1 and 2.
- It’s easy to use. You don’t need to learn a lot of HTML and CSS.
- It’s easy to change the theme. There are a lot of themes available for static website generators. Most of them are open source.
- It’s easy to manage. You don’t need to be a programmer. You can manage the website using a tool like Netlify.
- It’s easy to manage SEO. Which itself is a very big task for bloggers.
- Markdown is a simple language, you might have been using it for a long time.
I think these are enough pros of static website generators. Do you want another one? Okay, this theme that I am using is also a free theme with Hugo.
Static website generator and Themes
There are a lot of static website generators available to use like Gatsby, Hugo, Jekyll, Next.js, etc. There are a lot of websites that provide free themes for static website generators. for example jamstackthemes.dev You can even check the preview of themes.
Select a theme that you like and download it. There must have been a setup guide for that. Do the setup.
Do the changes that you want in the theme’s config file, it can be of any type. You can also write your first blog post.
Stackbit as your development environment
If you are struggling with the setup part of the static website generator, then for some of the themes you can use stackbit. It’s a one-click setup. It’s a free service (at least in the beginning).
You can directly visit stack bit and simply click on the theme that you like. Because they are single-click install themes. Do the changes that you want in the theme’s config file, it can be of any type. You can also write your first blog post.
Ok at this point we have a project ready to work on. Let’s move to the next step.
Deploying to Netlify
Stackbit will automatically deploy your website to netlify when you publish your changes.
To Deploy things using Netlify follow these steps.
- Push your local changes to your online repository, it can be GitHub, GitLab, bitbucket, etc.
- Create a new website in Netlify.
- Authorize your GitHub account with netlify.
- Select the repository that you pushed your changes to.
- Click Deploy.
Things will take some time depending on your selection of framework. After successful deployment, you will see an URL pointing to your website. It should be something like https://your-website-name-42738972.netlify.com/ You might get an error if you have done something wrong or there is some issue with the theme.
Ok at this point we have our live website but it’s on a subdomain. Let’s move to the next step.
Pointing your domain to your blog?
Free SSL certificate
SSL certificate is a security feature of the internet. It’s a way to encrypt your website. It’s a must to get a rank for your website. The good thing is Netlify provides free SSL certificates for all of their websites.
Setup
To leverage this, we need to point our domain to your netlify DNS. Go to the C-Panel of your domain providers and click on DNS. Paste the following values in the DNS section.
dns1.p01.nsone.net
dns2.p01.nsone.net
dns3.p01.nsone.net
dns4.p01.nsone.net
There is a blog post from netlify which is very helpful. Link is here.
How to add a completely free comment system (Without ads)?
As a bonus, I am including this section. There are a lot of comment systems available for static websites like Disqus, CommentLuv, Metype, etc. But they are not completely free. Either you need to pay for them or they will force ads on your website. These ads are nasty.
So I came up with a solution which is utterances of the comment system. It’s completely free and open source.
It will look something like this.
How does it works?
It uses GitHub issues to store comments. It creates a new issue for every post and then posts comments to your blog posts as comments to the issue. A pretty neat way to do it. Isn’t it?
They have an easy way to set up. Just follow the steps. It’s very simple.
Conclusion
Having a personal blog is good to have a tool for your belt. It can be used as a side business if you have the skills. We learned a lot about how to build a blog that costs you nothing.
As creating one is completely free then I would suggest you create one.
Note: I will be updating new posts related to this topic in near future. So stay tuned.
As Always if you have any comments or suggestions, please let me know via comments. If you have any questions, please feel free to ask me.
If you like this post, share it with your friends, employees, employer, and colleagues. Happy Coding! Bye 👋
References
- Netlify: https://netlify.com/
- Jamsstackthemes: https://jamstackthemes.dev/
- Stackbit: https://stackbit.com/
- Utterances: https://utteranc.es/
- Wikipedia: https://en.wikipedia.org/
- Heroku: https://www.heroku.com/
- Godaddy: https://www.godaddy.com/
- Namecheap: https://www.namecheap.com/
- Digital Ocean: https://www.digitalocean.com/
- Freenom: https://www.freenom.com/
- AWS: https://aws.amazon.com/