Days ago, I decided that my personal website needed updating, as some things weren't working anymore. The old version was written in plain HTML and CSS (as I am a front-end newbie), and I wanted to try out the popular Javascript libraries everyone seems to be talking aboutβ React and Vue. As I did my research, I discovered more frameworks built on top of those, as well as a technology called static site generators. If you want to build a website fast without compromising speed and quality, then this article might be for you.
Exploring our options
Perhaps, the easiest way to publish your website is to download free HTML templates, edit them with your information and upload them to Github pages or your own server. However, this method leaves out important aspects such as SEO and performance optimization.
There are also multiple website builders available in the market. Most of them offer free tiers, but in my experience and observation, websites built through free tiers load slower and do not offer many customization options.
Static Site Generators and Gatsby
This is where static site generators come in. A static site generator (SSG) is a tool that takes your source files and content, apply it to your template, then generate a structure of static HTML pages that are ready to be viewed by the users.
Let's compare this to a dynamic content management system (like Wordpress), which manage and store content in a database. When a user requests for a particular page
- data has to be retrieved from the database
- integrate it to the template files
- generate an HTML page and serve it to the user.
Sounds like a longer process for each page view, right? With static site generators, when a user requests for a particular page, the server just serves the generated static HTML pages, thus, removing the latency of database processes.
There are already multiple static site generators available. After reading comparisons, I chose to go with Gatsby due to the optimization options it offers as well as the rich ecosystem of tools and plugins.
There are also so many Gatsby starters available, which work similar to HTML templatesβ you download a Gatsby template, customize it with your information and upload your website to the web! These are the added benefits to your site:
- π¨ Fast - no need to wait for the server runtime to generate your pages, since the pages are already generated during build time
- π Secure - no database queries that might compromise your security
- πΈ Inexpensive - companies like Netlify, Vercel and even Github offer free hosting for your Gatsby or SSG-powered sites
- π Better SEO - due to site speed, search engines can give your site a better rating
It can be the same effort as coding a standard HTML site, but with 1000x power! Important things like site optimization and speed already gets taken care of, so you can focus more on customizing the visual components and writing the content for your site.
Moving forward
So that's how you can utilize static site generators to help you develop and deploy a fast and optimized site in just a day! Web development technologies have come so far, you better not miss out.
If you are looking for a minimalist personal website, you can check out the starter that I made:
gmlunesa
/
gatsby-starter-personal-portfolio
A clean and easy to use GatsbyJS starter.
β¨ Demo website here
It has dark mode, super fast speed, high Google Lighthouse rating, and beginner-friendly code! Check out my site (gmlunesa.com) to see what you can do with the starter.
With that being said, it will take more than a day to achieve a fully featured website and master web development skills. Gatsby and static site generators offer a good starting point in deploying your own website, for personal or prototype purposes.
Top comments (34)
Well done. I also made the switch myself for my personal and business websites after have more security and performance issues with WordPress. Static site generators are the way to go. Especially when it's used with a template and then tweaked to your liking.
As a result, I have a faster and more secure website with a cost of $0 for hosting (via GitHub + Netlify).
Impressive sites, Ethan! I love how the hosting is free, as well. Saves so much on the cost while reaping all additional benefits! π€©
Thanks. Especially if you are a techie, it's easy enough to create and host a website for free (outside of buying a domain name).
When using a "dynamic content management system" consider retrieving and saving the static web-page content to a cached directory because... two lines in an Apache2 .htaccess file can:
johns-jokes.com/chuck-norris
To demonstrate this in action the above very old site uses this simple technique.
There are over 3,000 webpages, each displays the last cached date (on the right, just above the page title). Refreshing the page will not change the date.
Thanks for this insight, John!
The starter is nice and simple. Really like it
Thank you for taking time to visit and giving your feedback, Phong!
Can I use your starter to create a Gridsome starter?
Sure!
Thank you
Hey!
Great article π
Your website looks amazing, specially the typing effect in about page π€©π€©
Would it be fine if I used the template to create my own website?
Also, I had a question, if Gatsby compiles everything to static files, how are you handling the forms?
Thank you for checking the article and giving your feedback! Please go ahead and use the template and please contact me if you need any help in setting up π
For my forms, I just implemented it through React. Gatsby has a really nice guide here gatsbyjs.com/docs/adding-forms/
I used Formspree to receive the messages β they give a unique key you can add to the site.
My inbox is open in case you need help~
Thanks for sharing. Reminds me I wanted to redo my website and get rid of WordPress. Maybe I can take a stab at that this week.
That would be awesome! There are lots of templates you can play around with! Let me know if I can help~
Thanks! I'm looking at Python solutions - probably Pelican unless I try it and don't like it - since I already am pretty familiar with Python. I think I'll be happier with a custom generated static page than WordPress, though..... it wouldn't take much ;)
Loved your writing and your website is very cool.
Thank you for your feedback, Sejuti!
Great job!
Really helpful article here. I also just started updating my personal website (funmitoblessed.com) that's been online for over two years and it has dragged on since forever. Your website is really cool. Will definitely try my hands on Gatsby.
By the way, I also dream of becoming an Astronaut one day or at the least, travel to space. π° π¨βπ
I love your site as well! I have a penchant for resume-style one page sites. π€© Please do check out Gatsby... and let's see each other on the moon! π
your website template looks like fun Β ππΎ
Thank you @guven! I'm glad you like it π
Very impressive.. thanks for sharing ideas..
Thank you for your kind words, Adnan!