How I made a no-hosting-fee website

Just a static websites? no need to pay for hosting

TL; DR (Too long, don’t read)

I built static website
I used Gatsby
I deployed on Netlify (you can also use Gatsby cloud, firebase hosting or any other static site hosting services that provide generous free plan)
all done!

Who should skip this blog?

one who don’t want to face any code, if you want a website like this you can contact me on my facebook or use Wix/Wordpress
one who have built a JAMstack site (you probably know everything in this blog already)

Who should read this blog?

one who want to create a blog without hosting fee
one who have fundamental knowledge of HTML, CSS, Javascript, command line (Know React and GraphQL is a big plus!)
one who know how to use git (just clone, add, commit and push is fine)

(you can learn more abouut them in freeCodeCamp or check this website out)

Static website? What is it?

Websites can be separated into two different types: static and dynamic.

Dynamic website

Most websites nowaday are dynamic websites. The data shown came from database, so when the data changed, the website changed.

For example, if I have a dynamic website that show name “A” from database.

Once I change the name in database to “B”, the website changed accordingly

The most widely-used example is Wordpress site which is 65% of all content websites or 41.9% of all websites in the world!! (from Usage statistics and market share of WordPress, W3techs June, 2021)

Wordpress is good choice for non-developer user. The themes I recommended are any theme from Seedtheme. It’s very fast and SEO-friendly theme. (I had used it for a game website, my blog appeared on the first page in Google in 1 day without any coding!)

Static website

Unlike dynamic website, the static website are just HTML files without database.

so it really FAST and more SECURE

Why most websites are dynamic?

It’s hard to maintain for a big website and not possible to implement some feature

it’s very easier to maintain by anyone just change the data and all done.

JAMstack, a modern way to build website (& apps)!

Why pulled data from database, render in a template then process to HTML in every request? Should it be re-rendered only when the content changed?

THEN prebuild all the markup up front and serve it directly to the browser !

JAMstack

Learn more from the e-book: Modern Web development in the JAMstack

There are many ways to use JAMstack e.g. Next.js, Nuxt.js and Gridsome. I choose Gatsby for my blog because

I want to use React.js (lol)
I love to store content in Markdown language so I can move my content easily from site to site (just copy files!)
Many plugins available and they are FREE :)

Start building

After installing development environment

The recommended way to build a Gatsby site is using Gatsby Starters

Explore for the site you like and use it by cloning the code to your computer using gatsby command

For example,

if you want to use starter, you can name it as my-blog-wow-fantastic instead of my-gatsby-project or anything else without space or any special character

run this in terminal

gatsby new my-blog-wow-fantastic https://github.com/fabe/gatsby-universal

then go to the folder cloned

cd my-blog-wow-fantastic

then push project’s initial commit to a repository in Github

install dependencies

yarn

then start developing with

gatsby develop

Go LIVE

there are many alternatives for FREE static hosting

TIP:

Wordpress is still a good choice for blogging in many situations. consider Pros and Cons before choosing
you can build a wordpress website, export to a static site and deploy it for free :) just use a plugin like WP2Static or Simply static. (I haven’t use it in my project but I think it’s fine. Shifter.io also a great choice to have a look)
you can easily manage static site content with NetlifyCMS, an open-source (free) CMS. It’s work with any JAMStack site :)
if you are a Vue.js fan, check out Gridsome. It has the same idea as gatsby. I have used it before and love it.
if you just want to make a document. VuePress is a good choice too.

thanks for thumbnail image from Jean-Marc Denis!