My portfolio needed an update for a long time and I wanted to make it happen in Gatsbyjs. It's been delayed for one another reason. But finally, it's completed and I am happy to share updates on how I build it.
1. Why Gatsby 
Gatsbyjs is powerful and popular static site generator out there and the only one which I have tried. It does not need an introduction. Though, I put my thoughts on it.
It's blazing fast ⚡️
It's easy if you already know react 🖌
99 percent of time you think of implementing something and gatsby gets you covered with their rich plugin ecosystem 🙋♂️
Basic SEO and performance is out of the box so you can concentrate more on building 🍳
Initially, I struggled a bit. But once I understand few parts it's get easier day by day.
It took me long to get it completed,as i think it was my learning curve. But now I am confident enough to produce new site very fast. Though, I am not an expert on it. Exploring new things as I am building.
Let's check out my processes
2. My processes
I follow simple processes throughout building an application.
🎮Design- yes, I can produce simple and clean design.
📇UX development on top of my design. Believe me if you have design in front of you. It helps in scoping your requirements.
🥨Gatsby integration - Settings up the pages and basic structure of all pages. Setting up page queries to source data from contentful. Gatsby has plugin to pull you contentful space into graphql API. So you can structure your page queries to pull necessary information.
🌾Building contentful model- I am using contentful to source my entire site. So in future if there are updates I can handle it via contentful.
🚀Deployment with Netlify and Gatsby cloud. I have added a webhooks for both environments so whenever I make changes to contentful data modal the build is created automatically and for github page I dont have any automation. So I build the site locally and commit to the master so github pages can update the site.
So, Overall I am happy with this process and will continue with this for next projects.
🖥 Final Result
vish448.github.io
🐞Github Repo
vish448
/
vish448.github.io
Build a personal portfolio page with github
Top comments (0)