Learn how to create your own static site easy without using a website builder
There are many reasons why you should blog. The main focus point of a blog is its content. And content is king. There are some options on where to post. However, if you have decided to create a personal blog site then these are some of your options:
Use a content management system
Create your own website from scratch
In the past I have used WordPress. However as a developer I find it very frustrating how complex some of these content management systems are. Some of the drawbacks:
- adding custom plugins requires some knowledge of the system
- can be pretty slow for a such a simple use case
- hosting can be expensive (£6.99/month or £83.88 per annum on Basic)
In this post:
I’ll answer why I chose Gatsby.js
I will show you how I built my site using Gatsby.js
I will show you how I deployed my site for free (without counting the price of domain register)
For this post some familiarity with web development (HTML, CSS, Javascript), Markdown, React.js and GraphQL would be beneficial. However you can learn and deep diver into the technology stack after the post too.
Why use Gatsby.js
Gatsby.js is a React based framework to create static websites. If that is all new to you know this:
React is a framework to write UIs in Javascript
Gatsby.js uses React as the tool to write UIs and then converts those into static HTML pages with its associated CSS files.
The user visiting your website then only fetches those files and renders it straight on the browser.
Person browsing a static site (personal artwork 😅)
It’s simple. It’s fast. It’s perfect for a blog offering nothing more than content that does not change.
Assuming you are already familiar with web development or willing to learn then Gatsby.js is a great tool for your blog site.
**
Static vs Dynamic vs Single Page App website**
I mentioned that Gatsby.js is framework to build static websites. That means that the code is converted to HTML and CSS once. Then those files are deployed and accessed by the visitor. What are the alternatives of serving a website? There is:
Dynamic websites
Singe Page App
Both of these options requires code to be executed to build the page.
With dynamic website the user requests the page and then the server executes code to build the website and then deliver the HTML and CSS files (and maybe some code to execute on the clients browser. The user will need to wait until the page is rendered and then send this back to the client.
As for Single Page Apps the server delivers code to executed on the clients web browser. The code then constructs the page. The code can be quite large at times so the user might need to wait for some time before the page renders.
These options have benefits when the page renders content that changes frequently between requests or offers customised experiences and services for the individual.
For a blog whose content changes only when you add a new post these are unnecessary.
**
Build a blog site using Gatsby.js**
In this section we’ll take a step by step approach on building a blog site using Gatsby.js. We won’t delve into Javascript, React, HTML and CSS. I assume you are already familiar with the basics of web development.
Here are the steps we’ll take in this section:
Adding posts to your site
Making changes to the looks of your post
Adding a contact page
Top comments (0)