DEV Community

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

Goldy Mariz Lunesa (@gmlunesa) on October 30, 2020

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...
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
Goldy Mariz Lunesa (@gmlunesa)

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
Goldy Mariz Lunesa (@gmlunesa)

Thanks for this insight, John!

Collapse
 
phongduong profile image
Phong Duong

The starter is nice and simple. Really like it

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

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
Goldy Mariz Lunesa (@gmlunesa)

Sure!

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
Goldy Mariz Lunesa (@gmlunesa)

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
 
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
Goldy Mariz Lunesa (@gmlunesa)

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
 
sejutisharmin profile image
Sejuti Sharmin

Loved your writing and your website is very cool.

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

Thank you for your feedback, Sejuti!

Collapse
 
victorekpodecodedigital profile image
victorekpo-decodedigital

Great job!

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
Goldy Mariz Lunesa (@gmlunesa)

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
 
guvenaltunsoyy profile image
guven

your website template looks like fun Β πŸ‘πŸΎ

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

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

Collapse
 
adnanashraf77 profile image
Adnan Ashraf

Very impressive.. thanks for sharing ideas..

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

Thank you for your kind words, Adnan!

Collapse
 
mitya profile image
Dima

How long have you been studying js?

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

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
Goldy Mariz Lunesa (@gmlunesa)

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
Goldy Mariz Lunesa (@gmlunesa)

Thank you, Jayson!

Collapse
 
marcelkatz profile image
marcelkatz

Very good article, and very nice website Goldy!

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

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

Collapse
 
fmsthird profile image
fmsthird

Kahanga hanga πŸŽ‰πŸŽ‰πŸŽ‰

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

Salamat!