Skip to main content

I host this website for $0, and here's how I did it

· 7 minute read · SEO Docusaurus Programming
Kunanon Srisuntiroj

When you are talking about creating a hobby of blogging, the benefits of sharing your thoughts, and your new ideas, your passion is there, and it serves everyone. Even though it is not your main objective, the benefits of public exposure are there for you to grab. You will be known as a person who do blogging and you can brag that to all your friends that you get exposed by international or well-known companies.

And that is me. I want to express my knowledge and try to practice my writing, programming, and learning skills to the test with all of this blogging. But how can I do that?

Commitment to the habit

In my experience, you have to commit to the habit of blogging and start thinking about what you want to write. If you have no idea what do you want to write, maybe start from the concept of 'this is me trying to build a blogging habit' or 'this is my first blog post'. This makes sure you are starting small and warming up your brain with a clear path toward expertise.

The first time I was doing a blog, it was me explaining what I experience in planning a trip to the Kyushu region in Japan. I took at least an hour to create a 6-minute read. And I was very happy with that. People come here and read my content, and I kept thinking about what to write next. That was my first baby step toward the end goal of creating exposure to the public.

But you are a new blogger, if you want to start these habits, you can start by using popular blogging sites like Medium, Hashnode, and self-hosting WordPress. Even though you won't have full control over how you want your content to look and feel, it is still your biggest move for you to change the way you represent yourself.

Raising the sky to the clouds

When you get to the point where you feel that blogging is becoming you, you will feel that you want to do more than just create content. You want readers to feel the experiences that you are feeling during blogging. So you might start looking for something you want to be different from other Content Creator. Something that people can't experience from somewhere else. Something people can remember you on, not just another content they use to Google and leave.

This is me. I am already there. I've tried them all and I'm not happy with the inability to customize, the consistency of fixing server issues, and the poor reading experience for my readers getting from paywalls and advertisements. I've been blogging for about 3 years now and I've been through most of the nooks and crannies of all these services. Believe me, you want more when you know you can.

This is how I met my perfect companion

So during my studies on software development for my career, I have experience with the ReactJS framework; and I once told that this framework is the pioneer of making website development to be component-based. It feels like there is a huge support for this framework, and it feels like everyone got you if you have any questions. This is a huge benefit from being new to Software Developer, where you have zero understanding of what you are doing right now, and the idea of optimizing a code still confuses you.

And during that process, I learned that they also have something called 'Docusaurus'. and it works by converting your writing in .txt, .md, or .mdx into an HTML file (aka website page) so that everyone can read your content on the internet while you have full control over how your content is styled.

It was at this moment that I struck gold with my blogging problem, and I am in the process of migrating everything I own that are not ByteSide.one to here.

This is my website now

blog.sagelga.com website (updated: 3 August 2023)

While most people will think that this is very early to call it a perfect tool to blog, but for me, this is what I am getting:

  • Complete customization of styling and functionality
  • Content is static, so no need to host your content on a server, making you free from hosting a server.
  • Lightning-fast page load times from not loading ads or doing heavy user analytics
  • No paywall for viewers
  • Integrates with your GitHub repository, so it stores a history of your content forever
  • Active Docusaurus and ReactJS community, making Docusaurus the best choice to receive long-time support
  • Unlock the power of ReactJS component within your blog, not a server limit or website rule
  • ... and show off your knowledge of computer programming languages including ReactJS, JavaScript, CSS, and HTML

Why do we need to do all of that?

There are so many reasons for users to leave your website, but the most important thing is 'how easy can the user leave your website?'. On iPhone and other Apple devices, users can easily swipe left and they are done. If it was that easy, so how can you retain the user from not leaving your website and eventually brings more people to your website?

How much is Docusaurus?

None. Nil. Zilch. Zero. Docusaurus is open source, which means you can use its framework for free. What you are spending right now is mostly your time and effort to making this habbit healthy.

But you can still go extra miles and customize it even more. Some of them will be, and always be free, while others will be paid. I have to say most of the expense is going to pay you off if you are in a Software Development career.

blog.sagelga.com website

For example, you can optionally purchase a custom domain (like this website sagelga.com), a website deployment service automation (Netlify, GitHub Actions), and a content hosting website (Amazon S3, GitHub, GitHub Pages). These services ensures that your user will get the best out of Docusaurus and the Internet.

Making my blog exists

This is the part where I should talk about how I make this website, blog.sagelga.com exists. So if you are not familar with these services, maybe it is time to learn more about them or move towards WordPress to host your website and mainly focuses on your habit.

So what you need to start is:

  • Basic knowledge of HTML and CSS, just enough for you to cut, copy, paste things around
  • Understanding of how JavaScript / TypeScript programming language to be use in combination with ReactJS and Docusaurus
  • Clear understanding of how you can write a blog post with Markdown language, which is very similar to every blogging platform and note-taking application. This ensures you know how to separate a post headings, contents, images / videos, and other stuff

And you also need tools to make your website exist. But this is my technology stacks to make it happens:

  • GitHub to store my blog content and related code that builds Docusaurus website.
  • Netlify to deploy my code and blog posts from GitHub so it can be viewed.
  • CloudFlare to improve content delivery, DNS, and other things needed to get these content to my readers as fast as possible.
  • Google Search Console & Microsoft Bing Search Console to get the search engine to start crawling and showing my site on search results.
  • Microsoft Clarity, an alternative to Google Analytics, for website analytics.

Again, this solution is not for everyone, so if you want to focus less of a programming, and more on blogging, you can learn more about WordPress. Check out this blog post. It should be helpful for you to create a cost-effective solutions for your blog.

How to start developing Docusaurus

If you are interested in creating a blog with Docusaurus, read it here: https://blog.sagelga.com/how-to-docusaurus.

And to deploy it with Netlify, you can also read it here: https://blog.sagelga.com/deploy-docusaurus-netlify.

But what's next?

There is still a lot of work to be done in Docusaurus. It happend to me that I love the simplicity of other blogging website, but that complexity kinda kills itself from being fast and resource-efficient.

Let me share you some of my milestones to improve this blogging website:

  • Improve look and feel of the website color, for both light and dark mode
  • Optimize Google Fonts load to improve overall page loading time by moving import in CSS to HTML
  • Adding page preview image, including default image just in case I forgot to add a specific one to one of my post
  • Fix the footer so it do something more than just links to other website
  • Add a search bar to make it easier to find the post
  • Streamline blogging experience with Cloudinary CDN
  • Migrate all non ByteSide.one content to this website

If you want to suggest what should I do next, please let me know by creating a Issue in this repository's GitHub. I will reach out to you as soon as possible!