DEV Community

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

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (21)

Collapse
 
jvmvl profile image
jvmvl

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

Collapse
 
geocine profile image
Aivan Monceller

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

Collapse
 
jvmvl profile image
jvmvl • Edited

I think the problem is in :

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

So my question is does it work on windows?

Thread Thread
 
geocine profile image
Aivan Monceller

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

Thread Thread
 
jvmvl profile image
jvmvl

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

Thread Thread
 
geocine profile image
Aivan Monceller

I'll check on Windows and get back to you

Thread Thread
 
jvmvl profile image
jvmvl

Great thanks

Thread Thread
 
geocine profile image
Aivan Monceller

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/* ../",
}
Thread Thread
 
jvmvl profile image
jvmvl • Edited

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

Thread Thread
 
geocine profile image
Aivan Monceller

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
Collapse
 
lucianomariani profile image
Luciano Mariani

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",
Collapse
 
geocine profile image
Aivan Monceller • Edited

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

Collapse
 
thelordofth3cloud profile image
Israel Del Angel

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

Collapse
 
geocine profile image
Aivan Monceller

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

Collapse
 
peterwitham profile image
Peter Witham • Edited

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.

Collapse
 
geocine profile image
Aivan Monceller

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

Collapse
 
ambriel2016 profile image
Cristian Reynoso-Betancourt • Edited

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:

Collapse
 
geocine profile image
Aivan Monceller

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

Collapse
 
joelvarty profile image
Joel Varty

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.

Collapse
 
zeptobook profile image
ZeptoBook

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

Collapse
 
ambriel2016 profile image
Cristian Reynoso-Betancourt

Another Screenshot