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 -
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.
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.
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!
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
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.
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 -
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.
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