backgroundLayer 1tukangdev
tech

Building an online portfolio with Next.js & deploy to Now.sh

Amin Roslan
bees
Building an online portfolio with Next.js & deploy to Now.sh

Hello! In this first blog post I am going to share with you how this site was build. I hope some of you out there may find this article helpful, especially those who are actually planning to learn Next.js.

Hello! In this first blog post I am going to share with you how this site was build. I hope some of you out there may find this article helpful, especially those who are actually planning to learn Next.js.

I'll be honest, I spent 2 months trying to decide what framework I should use to build my portfolio site & spent 1 week on how I want it to look like. It was tough, I created and deleted repos, many have sacrifice themselves to the Github lords. Until one day, I felt...........what's Next? (pun intended)

So this site is built with Next.js, which is a React Framework that supports server side rendering (SSR). Reason why I am using Next.js is because recently I was tasked by my company to rebased their whole SPA client app into a Universal App (which basically involves SSR). In result, this will improve the app's performance & is more SEO friendly. Next.js is kind of advanced, so for those who are kind of new to React, I suggest having a good sense of how React works first, before diving into Next.js

Anyway, for the blog engine, I am using ButterCMS's blog engine. They have good support & pricing for their plans. I am currently on the Personal Plan. This is actually the first CMS I've ever integrated with so I can't give any comparisons. I'll leave that up to you.

Tech Stack:

  1. I started this build using Create-Next-App. It gives you a starter tree of Next.js Framework.
  2. For CSS framework I use React Semantic UI. I did a little custom overrides here and there to make it unique to my style.
  3. I have reusable components built whenever I need to set a template. 
  4. I use ButterCMS for my blog. ButterCMS has a good free plan & a good blog engine.
  5. I have a custom Express server to use for development. I use it solely for URL masking. I don't deploy it with production build however, find out why.
  6. I deploy my site on Now.sh . They have a very good Free Plan. Their Premium Plan is not bad too. My portfolio isn't really scalable on it's own but I will use it on my next projects.

If you have anymore questions, hit me up here!


Share this post:
backgroundLayer 1tukangdev© 2019 — Designed & developed by Amin Roslan
💩