Create a portfolio website

To build my portfolio website, I have used a Gatsby starter template. Gatsby is a static site generator that builds HTML pages by compiling data with components. Gatsby has a starter library from which you can pick a template of your choice and modify it to fit your needs. The template I chose was from konstantinmuenster.

Before you start

If you're entirely new to version control systems( for example, Git ), IDEs, and command line worlds, as I was a year ago, you need to consider the following:

• a Git repository so that you can host your website later
• an IDE to modify the template
• a command line tool to push and commit your change to the remote repository

For the above purposes, I have used the following:

• GitHub
• Visual Studio Code
• GitHub Desktop

In addition, you need to download Node.js to run a Gatsby project, as Gatsby is built with Node.js. Node.js comes with the npm package manager. Gatsby uses npm to run command line interface(CLI) tasks.

Tip: If you're a first-timer, create a GitHub repository and clone it locally.

Get started

1. Open your repository in IDE and navigate to the terminal.
2. Run the following commands to ensure that node and npm are installed: node --version
npm --version
   
3. Run the npm command to install Gatsby CLI.
   npm install -g gatsby-cli

You will see a success message that the Gatsby CLI is installed.

Select your template

1. Go to the Gatsby starter library.
2. Optionally, filter for portfolio to show only portfolio templates.
3. Click the portfolio of your choice.
   

   Tip: You can visit the demo and see what it looks like.

4. Under Install with gatsby-cli field, copy the code.

Build the project

1. Go to your IDE terminal.
2. Paste the template code you copied.
   

   Tip: You can change the project's name in the copied code to one of your choice.

3. Run the code. This will install all the Gatsby dependencies you need to run the project.
4. After you get the success message, run the command:
   cd {your project name}
5. To build the project, run the command:
   gatsby develop
   This command builds the website and provides a link to view the website locally.
6. Click the link and view the build.

Modify the template

You can now go back to the code and modify the project to fill in your details.

Tip: If unsure, change some text in the code and run it and see if it works locally. You can also go to the Gatsby starter library, where you found the template, and click the Source to take you to the repository. There you will have instructions on how to modify the template.