TL;DR at the bottom.
I've just finished building my new portfolio and it's a simple one. Veeery simple (I'm a simple guy :). So simple that Gatsby is probably, definitely an over-kill, for the development side and for the client side as well. I don't need that much JavaScript.
So why did I do it?
To learn. I finally got the energy to really learn JavaScript and the ecosystem around it, starting with React. So when building my portfolio, I grabbed the chance to expand my knowledge on the subject a bit more.
I also decided to add a few more things to the mix: Strapi, a Node.js CMS that I hosted on Heroku and an AWS S3 Bucket to store the images for Strapi.
It has been a very fun journey on learning so many different technologies and how they work.
What am I saying
With this I just want to share with you the idea of taking the opportunity to learn wherever you can, even if it wouldn't be your first choice.
What do you think of this? Would you do the same or would you stick to the best tools for the job?
TL;DR: I overengineered my personal website to learn more JavaScript.
Top comments (13)
Great portfolio! Especially like how the details of each project "pop over" the page on mobile; gives it an almost native feel ✨
Totally agree on Gatsby feeling overkill though (but it's a great opportunity to use React!). I actually did a little experiment with Pug templating instead of React on my own portfolio, and really liked the result. Basically, you get to write components, but without the JS bundle shipped at the end. More on that experiment here in case you whip up more static sites in the future!
Before building your next static site with React, consider this
Ben Holmes ・ Jul 7 ・ 8 min read
Hi, Ben! I actually read your post while I was writing my own. Pug and Eleventy (IIRC you mentioned it in your post) is actually how I usually scaffold my websites, I wanted to take the opportunity to have a bit more under my wing :)
Oh haha, good to know! I feel like I learned these approaches backwards, moving from frameworks back to more fundamental templating approaches. I'll drop a follow since you probably have more wisdom on the topic than I do atm 😁
Hey Pedro,
Great work on your website I like the looks of it. I am also in the Gatsby world so please share any weird experiences you may had haha.
One question about your approach. You said you use an AWS S3 bucket for the images as a CDN. I assume you use the free tier right? Do you have any other interesting ways to use AWS for a personal blog project?
I'm not Ben, thought, Ben is the other guy that commented :)
As for the AWS, it's the first time I have used it. It's the free tier, yes. For now I'm only saving the images, but I guess you can store whatever you need there.
I'm really not used to it, it was a bit daunting to get started. I would have chosen another content storing platform, but I want to learn about the most "industry standard" technologies I can and AWS fits the bill :)
Apologies Pedro. I corrected it and hoped you wouldn’t notice :)
Awesome approach! Have you checked Lambdas?
Ah don't worry :) It stayed as Ben on the notification :P
I know about Lambdas and I used one a few years ago but it was the senior front-end that set it up, I was still very lost at JavaScript. I'll definitely check them for a future project!
Hey thanks for sharing. Why did you use Strapi? What do you solve with that approach or what are the benefits over statically hosted text+images in the Gatsby build process. Thanks
It doesn't solve anything for myself because I would definitely be comfortable with editing Markdown files, of course. I did it first for (I'm sorry for repeating this so much) the chance to learn a NodeJS CMS that I may in the future use for clients because they may need to have an easy-to-use platform to update their sites, instead of using WordPress. As it's NodeJS, any change or configuration will be with JavaScript so... you know... I'll learn something on the way :)
And also, now I can just open up the Strapi admin and add a project, instead of having to open the editor, run gatsby develop, make changes, commit it and upload. I don't need it but it's nice to have.
I also learn a bit more about constraints and planning for future needs.
Hey thanks, Ok so to understand that fully... The site is mostly statically built with Gatsby but now some content comes from the CMS during page load so it can be edited online in realtime or do you have to then query the CMS and then build Gatsby and deploy it again?
Oh, yes, it is built again and the images are served from Gatsby to the user. AWS only stores the images for the CMS and because of how Gatsby works, it downloads and compresses images and serves them from wherever you host Gatsby. I really didn't think that through :)
So in the end, AWS is only for the CMS to store content. This is needed if you upload to a server like Heroku because Heroku doesn't allow you to write files to the filesystem. If you host it on a "regular" server you won't need the S3 bucket, you can save the images on the server. Then Gatsby would do the same, fetch the images and host them itself.
So, as you asked, Gatsby is re-built everytime I hit Save on Strapi through a Webhook. The point of having Gatsby is to build a static site, it doesn't make sense to fetch content in real-time. You would use a regular React webapp in that case.
Hope it helps! Ask me anything else, I am not an expert and this conversation helps very much :)
Dude i loved your portfolio really awesome..
also prolly gatsbyjs has a lot of free showcase we can use to not create our portofolio from scratch