DEV Community

loading...
Cover image for How I developed and deployed my optimized website within a day

How I developed and deployed my optimized website within a day

gmlunesa profile image gmlunesa Originally published at gmlunesa.com ・3 min read

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.

Options

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.

Comparison

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

My site's Lighthouse scores

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:

GitHub logo 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.

Discussion (34)

Collapse
ethanosullivan profile image
Ethan O'Sullivan

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).

Collapse
gmlunesa profile image
gmlunesa Author

Impressive sites, Ethan! I love how the hosting is free, as well. Saves so much on the cost while reaping all additional benefits! 🤩

Collapse
ethanosullivan profile image
Ethan O'Sullivan

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).

Collapse
johnbetong profile image
John Betong

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:

  1. test to see if a cached web-page exists
  2. if the cached file exists then render the cached web-page contents
  3. otherwise fall through, generate the web-page and cache contents

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.

Collapse
gmlunesa profile image
gmlunesa Author

Thanks for this insight, John!

Collapse
phongduong profile image
Phong Duong

The starter is nice and simple. Really like it

Collapse
gmlunesa profile image
gmlunesa Author

Thank you for taking time to visit and giving your feedback, Phong!

Collapse
phongduong profile image
Phong Duong

Can I use your starter to create a Gridsome starter?

Thread Thread
gmlunesa profile image
Thread Thread
phongduong profile image
Phong Duong

Thank you

Collapse
yjdoc2 profile image
YJDoc2 • Edited

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?

Collapse
gmlunesa profile image
gmlunesa Author

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~

Collapse
guvenaltunsoyy profile image
guven

your website template looks like fun  👍🏾

Collapse
gmlunesa profile image
gmlunesa Author

Thank you @guven! I'm glad you like it 😊

Collapse
funmitoblessed profile image
Olúwafúnmitọ́ Blessed • Edited

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. 🛰 👨‍🚀

Collapse
gmlunesa profile image
gmlunesa Author

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! 🌙

Collapse
sejutisharmin profile image
Sejuti Sharmin

Loved your writing and your website is very cool.

Collapse
gmlunesa profile image
gmlunesa Author

Thank you for your feedback, Sejuti!

Collapse
victorekpodecodedigital profile image
Collapse
ardunster profile image
Anna R Dunster

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.

Collapse
gmlunesa profile image
gmlunesa Author

That would be awesome! There are lots of templates you can play around with! Let me know if I can help~

Collapse
ardunster profile image
Anna R Dunster

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 ;)

Collapse
adnanashraf77 profile image
Adnan Ashraf

Very impressive.. thanks for sharing ideas..

Collapse
gmlunesa profile image
gmlunesa Author

Thank you for your kind words, Adnan!

Collapse
mitya profile image
Dima

How long have you been studying js?

Collapse
gmlunesa profile image
gmlunesa Author

Hi Dima! I learned a little about NodeJS a couple of years ago, but I am not consistent with coding with JavaScript unfortunately! It's only recently that I've explored it more 😊

Collapse
arealsamurai profile image
An actual, Real Samurai

You have a bunch of errors on your console, including your console logs where you expose your service workers...

You've also pushed an unminified and unoptimized version of your js on production.

Collapse
gmlunesa profile image
gmlunesa Author

Hello! Can you describe the console logs that you are seeing? I am only seeing the preloading warning both on Chrome and Firefox (running on Win10).

The service workers are unfortunately out of my control, I am using the official gatsby-plugin-offline (gatsbyjs.com/plugins/gatsby-plugin...). It might be worth bringing up this issue to them!

As for the unminified files, can you please check if you can disable the source maps. gatsby build automatically minifies the files. More information on that here: github.com/gatsbyjs/gatsby/issues/...

Thanks for reading my article and for giving feedback!

Collapse
jmonterroso profile image
Jayson Monterroso

Thanks for sharing!

Collapse
gmlunesa profile image
gmlunesa Author

Thank you, Jayson!

Collapse
marcelkatz profile image
marcelkatz

Very good article, and very nice website Goldy!

Collapse
gmlunesa profile image
gmlunesa Author

Thank you for checking it out and giving your kind words, @marcelkatz !

Collapse
fmsthird profile image
fmsthird

Kahanga hanga 🎉🎉🎉

Collapse
gmlunesa profile image
Forem Open with the Forem app