Next.js + serverless personal webpage in a couple of hours — Development Environment Setup (Part 1)

Published in

Level Up Coding

3 min readFeb 21, 2021

I have been out of the personal webpage game for a couple of years. Back in the day, I was hosting mine in my university network. Deployment was through SSH and it was hard to make changes.

It’s 2021 and my new year resolution is to start blogging and also recreate my associated personal webpage. Things have changed a lot these couple of years. While it has gotten much easier to get code deployed to the internet for free, there is a learning curve to know enough about all those frameworks, service integration and serverless to get something as simple as hello world deployed. In this series, I’m going to document all the learning and steps I took to set up jeremychan.net from scratch in a couple of hours.

Before I start I had a few goals in mind:
1. I’m going to spend an evening on this max (excluding the time to curate the content)
2. I’m not ready to spend money on hosting yet, so will look for a free solution
3. I want to be able to make changes, test and deploy quickly

At the end of the evening I would say I achieved all my goals. It was indeed an eye-opening experience of how quickly you can get something up an running in a production environment in 2021.

An overview of all the series of blog posts:

Part 1: Development Environment Setup (📍 You are here)
Part 2: Purchasing your own domain name and set up email forwarding
Part 3: Bootstrapping the app with Next.js
Part 4: Deploying to Production with Vercel
Part 5: Integrate your contact form with Formspree
Part 6: Pulling blog posts from Medium with a serverless function

Getting your Development Environment up and running (20 mins)

I have been a Windows user for many years and still prefer it to a Mac for daily tasks (more on this later). Although things have improved a lot over the years (e.g., Powershell, Windows Terminal, etc.) the Windows environment is still not very developer friendly.

This is no longer true with Windows Subsystem for Linux. I absolutely love WSL2.

You can skip this post if you are working in Mac or Linux.

Getting WSL2 installed

To be able to use WSL2 your computer needs to support Hyper-V Virtualization. If you are using an older machine, you may be able to use WSL instead of WSL2, you would still be able to follow all the steps in the tutorial.

The installation steps for WSL2 are unfortunately, not exactly straight-forward. I’m not sure why Microsoft made something that great to use but doesn’t provide a more user-friendly experience for setting up 🤷.

The documentation on https://docs.microsoft.com/en-us/windows/wsl/install-win10 is unnecessarily complicated, I found this other tutorial with much better follow-along steps.

You can pick your Linux distro of choice. I went for Ubuntu.

First install some essential tools:

sudo apt update
sudo apt install git nodejs npm npx vercel

Setting up VS Code with WSL extension

While you can use vim or emacs directly in WSL shell, you will normally want to edit code using an IDE on your Windows host.

I normaly prefer Jetbrains IDEs, but VS Code offers much better integration with WSL. With other IDEs you will have to put your project in /mnt/c inside WSL so it is accessible in Windows, and you will run into pathing issues and other cross-OS challenges. VS Code + WSL extension offers a much more seamless experience.

Follow https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-vscode to install VS Code and the Remote Development extension pack.

Once everything is set up, you can put your project directory anywhere and simply run this inside the project root

code .

to launch VS Code in your Windows host and start editing.

In Part 2 we will deal with the logistics of purchasing a domain name and setting up email forwarding.

Next.js + serverless personal webpage in a couple of hours — Development Environment Setup (Part 1)

Getting your Development Environment up and running (20 mins)

Written by Jeremy Chan