loading...
Cover image for A Beginner's Guide on Creating a Portfolio Website with Github and Gatsby

A Beginner's Guide on Creating a Portfolio Website with Github and Gatsby

geocine profile image Aivan Monceller Updated on ・6 min read

As someone who is trying to build a presence online, having a website should be on top of your priority list. It is also a fun learning experience which will help you explore your inner creative child.

This guide will help you build a portfolio website and host it online for everyone to see. To be able to follow through, you must at least have some working knowledge about HTML, CSS, and JavaScript.

Setting up your Computer

We will be setting up our JavaScript development environment. The following software needs to be installed and setup on your computer.

NodeJS

NodeJS will be used to build the source code of our website and download packages that we need. Note that npm will be installed with NodeJS.

  1. Download NodeJS. At the time of writing, this is the latest version. If you are using Windows, this page will show Windows downloads. NodeJS
  2. Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.
  3. If you have successfully installed NodeJS you should be able to verify it by opening your Terminal/Command Prompt and type the following commands.
node -v     # will show currently installed version of NodeJS
npm -v      # will show currently installed version of npm

VS Code

VS Code is a source-code editor. It includes support for embedded Git control and GitHub.

  1. Download VS Code. If you are using Windows, this page will show Windows downloads. VS Code
  2. Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.

Git and Github

Git will help us save versions of our source code to GitHub. You must create a GitHub account and setup Git after by following the instructions below:

Creating a Github Account

  1. Go to https://github.com. Enter a username, email and password. Github1
  2. There will be three (3) steps until you reach this page. Github2

Creating the Repository

Once you have verified your email, you will be redirected to this page. Here we will create a repository named username.github.io so example in my case it would be geocine.github.io

Github3

Setting up your SSH Key

To be able to upload the files from our computer to GitHub, we need to create an SSH key and set it up on GitHub.

Generating a new SSH Key

  1. Open your Terminal/Git Bash
  2. Enter the text below, substitute the email with your email
  3. When you're prompted to "Enter a file in which to save the key," press Enter. This accepts the default file location.
  4. At the prompt, type a secure passphrase. Note that nothing will show while you are typing.

Adding a new SSH key to your GitHub account

If you have properly followed the instructions above, a file will be generated on your ~/.ssh folder:

  1. Go to your ~/.ssh folder on Mac or C:/Users/YOUR_USER_NAME/.ssh on Windows. You will see a file named id_rsa.pub. Open it and copy its contents.
  2. Go to the settings page of your GitHub account. GitHub4
  3. Click on SSH and GPG Keys > New SSH Key GitHub5
  4. Add your SSH Key from Step 1 then press Add SSH Key GitHub6
  5. If prompted, confirm your GitHub password.

Choosing a Template

Let us open the Gatsby Starters page and choose a template. You'll be able to see something like this:

Gatsby Starters

I'll be using the gatsby-starter-portfolio create by LekovicMilos

Setting up your Git Repository

We will be using our GitHub account to create a website, we shall be hosting it on username.github.io so example in my case it would be geocine.github.io

  1. Create a folder on your computer, use your GitHub username. In my case, I will create geocine.github.io
  2. Go to the template of your choice, scroll down. Click on the Source link. Gatsby Template
  3. Copy the link as shown on the screenshot below: Github Link
  4. Go inside your folder, in my case it's geocine.github.io. Clone the starter

    git clone git@github.com:LekovicMilos/gatsby-starter-portfolio.git
    
  5. Once the cloning process is done. Your folder structure should look like this
    FolderStructure1

  6. We will rename gatsby-starter-portfolio to gatsby. Now your directory structure should look like this
    FolderStructure2

  7. Create a .gitignore file on your root directory and paste the following:

    FolderStructure13
  8. While you are root folder, let us initialize git

    git init
    
  9. Now go inside the gatsby folder and delete the .git folder

    rm -rf .git
    
  10. While you are inside the gatsby folder, let us install the dependencies.

  11. Open the package.json file and edit the scripts portion. Add a clean property and edit the build property:

  12. Go back to the root folder. Open the GitHub repository you have created a while ago from Creating the Repository and copy the command highlighted.
    Github7

  13. While on the root folder, execute the command from Step 12

    git remote add origin git@github.com:geocine/geocine.github.io.git
    
  14. Go back to the gatsby folder. Let us build the project

    npm run build
    
  15. Go back to the root folder. Now let us commit our code and push it.

  16. Now you should be able to see your site at username.github.io. Mine should be at geocine.github.io

Note that we pushed the build files on the master branch and saved gatsby on a subdirectory because username.github.io only serves from the master branch. See more details here

Development Workflow

Now that your site is up and running. I will describe the development workflow

Editing/Development

You must be inside the gatsby folder when you are developing. To further know what can be configured on the template you downloaded. Just visit the repository and follow the README.

I will not be able to give you specific instructions on how to use a starter. Starter authors have different ways of configuring the starters they have created.

Editing

Open the gatsby folder in VS Code

Development

To run gatsby in development mode. While you are inside the gatsby folder, open your Terminal/Command Prompt and run this command:

npm run develop

Deployment

Once you are finished with editing things on the starter template, you need to deploy it to GitHub.

Build

First, you need to build gatsby so that it will generate all the necessary static files for your website. While you are on the gatsby directory, execute the following command:

npm run build

Deployment

You need to be on the root directory which is the username.github.io or geocine.github.io in my case to push things to Github. Execute the following commands:

git add .
git commit -m "your message"
git push -u origin master

If you have any questions regarding the setup or need any help with yours, please leave a comment.

Posted on by:

geocine profile

Aivan Monceller

@geocine

Building frontend applications, web APIs, system utilities and development tools

Discussion

markdown guide
 

Changing the script part gives the following :

*\Desktop\jvmvl.github.io\gatsby>npm run build
npm ERR! file *\Desktop\jvmvl.github.io\gatsby\package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 1147 while parsing '{
npm ERR! JSON.parse "name": "portfolio-website-gatsby",'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR! *\AppData\Roaming\npm-cache_logs\2019-09-16T13_43_16_484Z-debug.log

 

May you paste your package.json I will take a look what's wrong.

 

I think the problem is in :

"clean": "del -f \"../!(gatsby)*\" && rm -rf public"

So my question is does it work on windows?

Oh I don't think it will on the command line, have you tried from git bash / wsl / cygwin / mingw on windows?

Just tried it with git bash and it didn't work

I'll check on Windows and get back to you

Hi you can try this on windows git bash I have modified the script

{
  "clean": "del-cli -f \"../!(gatsby)*\" && rm -rf public && rm -rf .cache",
  "build": "npm run clean && gatsby build && cp -a public/* ../",
}

Tested using git bash

$ npm run build

portfolio-website-gatsby@1.0.0 build **\jvmvl.github.io\gatsby
npm run clean && gatsby build && cp -a public/
../

portfolio-website-gatsby@1.0.0 clean **\jvmvl.github.io\gatsby
del-cli -f "../!(gatsby)
" && rm -rf public && rm -rf .cache

success open and validate gatsby-configs — 0.005 s
success load plugins — 0.169 s
error Plugin gatsby-transformer-sharp returned an error

Error: Cannot find module '../build/Release/sharp.node'

  • loader.js:581 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:581:15

  • loader.js:507 Function.Module._load
    internal/modules/cjs/loader.js:507:25

  • loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  • v8-compile-cache.js:159 require
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:159:20

  • constructor.js:10 Object.
    [gatsby]/[sharp]/lib/constructor.js:10:15

  • v8-compile-cache.js:178 Module._compile
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:178:30

  • loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  • loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  • loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  • loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  • loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  • v8-compile-cache.js:159 require
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:159:20

  • index.js:3 Object.
    [gatsby]/[sharp]/lib/index.js:3:15

  • v8-compile-cache.js:178 Module._compile
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:178:30

  • loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  • loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio-website-gatsby@1.0.0 build: npm run clean && gatsby build && cp -a public/* ../
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio-website-gatsby@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! ***\Roaming\npm-cache_logs\2019-09-21T10_21_33_887Z-debug.log

You can try, Deleting node_modules, .cache, public then do

npm cache clean --force
npm install

If its still not working on your machine for some reason, then install sharp manually

npm install sharp --unsafe-perm
 

Make a few changes on scripts provided to make it work properly for me

    "clean": "del -f \"../!(gatsby)*\" ",
    "build": "gatsby build  && npm run clean && cp -a public/* ../  && rm -rf public",
 

May I know what is your operating system? I will update the article

 

Hey! this is a great step by step tutorial but i have really serious trouble when i try to build a portfolio if you can help me i appreciate.

I work on windows with GitBash and when i try to running npm run build throws the following error:

> gatsby-starter-mate@2.5.1 build 
  C:\Users\israe\Documents\isra.github.io\gatsby
> gatsby build && npm run clean && cp -a public/* ../


 ERROR #10123  CONFIG

We encountered an error while trying to load your site's gatsby-config. 
Please fix the error and try again.

TypeError: Expected parameter accessToken

  - contentful.node.js:7381 Module.createClient
    [gatsby]/[contentful]/dist/contentful.node.js:7381:11

  - gatsby-config.js:7 Object.<anonymous>
    C:/Users/israe/Documents/isra.github.io/gatsby/gatsby-config.js:7:27

  - v8-compile-cache.js:178 Module._compile
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:789 Object.Module._extensions..js
    internal/modules/cjs/loader.js:789:10

  - loader.js:653 Module.load
    internal/modules/cjs/loader.js:653:32

  - loader.js:593 tryModuleLoad
    internal/modules/cjs/loader.js:593:12

  - loader.js:585 Function.Module._load
    internal/modules/cjs/loader.js:585:3

  - loader.js:692 Module.require
    internal/modules/cjs/loader.js:692:17

  - v8-compile-cache.js:159 require
    [gatsby]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - get-config-file.js:24 getConfigFile
    [gatsby]/[gatsby]/dist/bootstrap/get-config-file.js:24:20

  - index.js:90 module.exports
    [gatsby]/[gatsby]/dist/bootstrap/index.js:90:36

  - build.js:70 build
    [gatsby]/[gatsby]/dist/commands/build.js:70:13

  - create-cli.js:154 cli.command.handler.getCommandHandler
    [gatsby]/[gatsby]/[gatsby-cli]/lib/create-cli.js:154:14

  - create-cli.js:89 argv
    [gatsby]/[gatsby]/[gatsby-cli]/lib/create-cli.js:89:24

  - create-cli.js:25 Object.args [as handler]
    [gatsby]/[gatsby]/[gatsby-cli]/lib/create-cli.js:25:19

  - command.js:238 Object.runCommand
    [gatsby]/[gatsby]/[yargs]/lib/command.js:238:44


⠋ open and validate gatsby-configs
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-mate@2.5.1 build: `gatsby build && npm run clean 
&& cp -a public/* ../`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-mate@2.5.1 build script.
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\israe\AppData\Roaming\npm-cache\_logs\2019-10- 
24T22_11_49_686Z-debug.log

And this is the package.json file:

{
    "name": "gatsby-starter-mate",
    "version": "2.5.1",
    "description": "Gatsby v2 starter to create a top notch portfolio!",
    "main": "index.js",
    "scripts": {
        "fix-medium-plugin": "sed -i' ' 's/\\/latest//g' 
./node_modules/gatsby-source-medium/gatsby-node.js",
        "prepare": "npm run fix-medium-plugin && gatsby clean",
        "clean": "del-cli -f \"../!(gatsby)*\" && rm -rf public && rm -rf 
.cache",
        "build": "npm run clean && gatsby build && cp -a public/* ../",
        "develop": "npm run prepare && gatsby develop",
        "start": "npm run develop",
        "serve": "npm run build && gatsby serve -p 9000",
        "lint": "eslint ./src",
        "setup": "node ./bin/setup.js",
        "e2e:open": "cypress open",
        "e2e:ci": "DETERMINISTIC=true start-server-and-test serve 
http://localhost:9000 'percy exec -- cypress run'"
    },

Please Help Me!
CODE THE WORLD

 

Can you give me link to your repo so I can help you

 

Yep, a great step by step to getting set up and started.
I love seeing people share these kinds of posts as we all often do these workflows without thinking and never stop and go back to document them for others.

 

You are right, its tedious to come up with something like this. But, it's a pleasure to help people who are starting out.

 

Hi there. I followed all step-by-step but I unable to deploy the portfolio website. Here is my repo:

github.com/ambriel2016/crb.github.io

Also, here are some screenshots with the following errors:

 

Hi just saw your message, wanted to help you but I don't see the screenshots and your repository anymore.

 

Great intro article to help folks get started using Gatsby!

As a next step, I highly recommend looking into a Headless CMS to manage the content on your websites as they get bigger.

 

Here is a step by step guide about how to create your blog site using Gatsby.
zeptobook.com/create-your-blog-sit...