Motivation

Just like other bored developers, I decided to create my own portfolio website (because why not? 😀). To make it even more fun, I threw in some unfamiliar tech stack too. (What could go wrong?) To make it easy to manage, let’s add a Content Management System (CMS) too. After all, what’s the point of a blog if you can’t manage it on the fly.

After combining all the above elements, this is the tech stack I came up with - 

1. React (never used it before but all cool kids use it)
2. Typescript (hey it has good code completion at least and I already use it with Angular)
3. Material-UI (Do you really think I will create all UI components from scratch?)
4. Gatsby (for generating static sites and you guessed it right, never used this before too)
5. Netlify cms (i heard it provides CMS which can be self-hosted)

Ok, I got all the ingredients, now it’s time to start cooking … uh I mean coding.

After a few sleepless nights, I finally managed to complete the website and learned a few important lessons along the way.

1. React is a cool lightweight UI library and very flexible. It gives a huge developer freedom compared to Angular but at the same time suffers from overwhelming choices. Building simple forms in React eventually ended up taking more time than I thought compared to Angular where forms are tightly coupled with the framework.
2. Typescript isn’t great with especially higher-order functions unless you have all your types clearly defined.
3. Sometimes things take a lot longer than expected. Never underestimate the work. (ok! This might be personal)

This is the website I finally came up with https://kronosdevstudio.com/ I update it rarely so all info is pretty old.

To ensure other people won’t have to undergo the same pain, I converted this website into a template to make similar websites with minimal effort.

https://gatsby-material-portfolio-starter.pages.dev/

The dependencies are of older versions since I created my website a few years ago. Newer versions require breaking changes to which I will migrate in the future … hopefully! 

Create from template

I am writing this blog as a guide for other people who can use this template to create their own portfolio website. The project has an MIT license which is completely free for anyone’s use. As a part of this guide, I will create a website for one of my friends 

I am using node v14 at the time of writing.

To create our own website, we need to clone the template with project name. In this guide, I am using aroraujjwal as the project name.

npx gatsby new aroraujjwal https://github.com/ManpreetSingh80/gatsby-material-portfolio-starter

Then cd to the project and start the development server

cd aroraujjwal
npm start

Make it your own

Edit the config/SiteConfig.js file as per your own project details.

Site title, description, etc. will be shown on the home page and will also be used for SEO.

You can add/update assets at /static/img/ directory including your logo.

pathPrefix can be used if you are planning to host on Github pages.

You can fill in Facebook ID, Google Analytics ID if you want to use these services, otherwise leave it blank.

For comments, this template uses Disqus which provides social login. Comments can be enabled/disabled at an individual page level. (more on this below). To enable comments, you need to create an account and enable it for your website.

You can also enable short links with icons for your social handle. 

To update the global theme, update the colors at /gatsby-config.js

Also, update component theme color at /src/theme.ts

All pages are generated from /content folder. You can update about.md file with your info. You can add your projects in the same folder.

All files under /content/blog folder will be displayed under the blog section of the website.

Each file contains special attributes which makes it easily configurable for various use cases like SEO.

comments - Enable/disable comments on this page

suggestion - show this page as a suggestion on other pages

socials - display social icons at page end for easy share 

tags - pages can be searched/indexed with different tags

category - Project is displayed under this category on the home page.

You can see existing pages for reference.

Once you are happy with your content, you can build it to static files with below command

npm run build

The static files will be generated under the public folder.

Deployment

We have numerous options to host our static website. We can use a premium service like AWS CloudFront, Azure static websites, etc. or we can use GitHub pages to host it for free.

I chose Cloudflare for the following reasons -

1. Free hosting on CloudFlare Pages
2. CI/CD - Build & Deploy on each commit to GitHub
3. Custom Domain support
4.  Analytics
5. It’s free!

To use Cloudflare, just register an account and go to Pages. Click on Create a Project

Link your Github account for access then select your project.

Click on Begin Setup

Configure your Project name and Branch

Under Build Settings, select Gatsby as Framework and click Save and Deploy

In a few minutes, it will start building your project and deploy it to the configured URL. You can customize this URL with a custom domain.

To do any changes to the website, just push a commit to master. An automatic build will be generated and deployed by Cloudflare.

Ending Notes

That’s all for this part. Now you have your own personal website which you can flaunt everywhere. However, adding more content/blog posts by writing in Markdown format is still not the best experience. In the next part, We will go over on how to add Content Management System (CMS) to our website