Logo

#2 My Website - GetSetUI.com

August 24th 2024 | 3 min read

66 |  3

Logo

Tech stack and local setup

Hello Everyone,
Welcome back to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ️🫶.

Introduction

In the previous blog, we discussed the Content Management System used for my website. If you missed out, please check here.

In this blog, let's discuss the tech stack used in my website.

Tech Stack

Folks, It is a great learning experience while building my website. I have used some cool and latest technologies which include,

  • Next JS (Server Side Rendering)
  • Firebase
  • Yarn (Package Manager)
  • Tailwind CSS (CSS styling)
  • Netlify (Hosting)
  • Github (Version Control)
  • Ghost (CMS)

But Why???

To answer this, let me tell you the thought process before starting with the development of GetSetUI,
I kept a target that I need to explore or learn at least one technology during the entire process and I have chosen my tech stack according to my target.

The primary thing is to keep it really simple and make use of each tech stack as well as possible.

NextJS

If you have noticed, There is no backend framework mentioned either in this blog or the previous one but I have a backend setup as well.

Ghost CMS acts as a Backend for my website and it provides me with an API endpoint that gives me the details of my blog that are published. (Refer to the previous blog).

At this point in time, I don't want my Backend i.e. Ghost CMS to be any external hosting site and this led me to choose Server Side Framework i.e. NextJS.

I wanted to run my local Ghost CMS and create a build that generates static files that eventually get hosted.

But Why NextJS?
As I told you that I wanted to learn and explore at least one technology i.e. NextJS and it has gained some serious traction these days.
Honestly, I was familiar with React and the learning curve was also low. Therefore I have chosen NextJS over other server-side frameworks.

Firebase

I have used Firebase for a couple of things

  1. Storage - I have stored all the images of my previous blogs published on different Platforms in Firebase and listed them on my website with external links. Apart from Storing Images, I have also used Firebase Real-time storage for storing the likes and views that my blogs (that are published in GetSetUI) gained.
  2. Analytics - Although I am not good at analytics, I wanted to gain some knowledge about it and wanted to know about user engagement and other metrics.

Other Technologies

  1. TailwindCSS - Most popular CSS framework and it makes styling easy.
  2. yarn - Another popular Package manager
  3. Netlify - Deployment and Hosting
  4. GitHub - Repository to push my code.

Development & Publishing Process

I have designed my pages using NextJS, and TailwindCSS. Now we are left with creating our own Blog Content and publishing it and making it available to everyone. Let's discuss that in detail in this section.

  • Start your Ghost CMS in your local ghost start
  • Our Ghost Admin is up in the browser and it is available in http://localhost:2368/ghost
  • Click on New Post
  • As Ghost CMS has inbuilt options like importing images, markups, code snippets, etc.
  • Once you are done with your blog content, you have the option to publish it in the right corner.
  • Once you publish, it can be accessed through the API that Ghost provides you.

http://localhost:2368/ghost/api/content/posts?key=132336c5c8dfdbe6307e752b40&include=tags

  • From your NextJS, hit this API and get the blog content from the API and render it on your screen and verify your changes as well as look and feel.
  • After verifying, run yarn build and it generates static file generation.
  • That's it, you can deploy the same using Netlify or other hosting websites.
  • Your changes are live and enjoy the moment 😎😎😎.

High-Level Architecture Diagram

Conclusion

Finally, we have come to the end of this blog.
Although there is so much to explore and even more to improve. I won't stop learning and strive to make my website even better and continue
"My website - GetSetUI series" with my new learnings and improvements.

I know there is too much of a manual process currently but I am still exploring to automate my deployment process with the current setup I have. I will keep you folks updated if I find something.

Here we go, That’s it folks for this short blog.
I hope everyone liked this blog.
If Yes, please share it with your friend.

As always follow me 🎯 and support me for more exciting frontend content.
Let's Learn, Explore and Excel together :)

via GIPHY

Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning 📖✍️.

Abhishek Kovuri, UI developer