DEV Community

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

Aivan Monceller on August 24, 2019

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 ...

Read full post

jvmvl • Sep 16 '19

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

Aivan Monceller • Sep 17 '19

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

jvmvl • Sep 19 '19 • Edited

I think the problem is in :

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

So my question is does it work on windows?

Aivan Monceller • Sep 20 '19

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

jvmvl • Sep 20 '19

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

Aivan Monceller • Sep 20 '19

I'll check on Windows and get back to you

jvmvl • Sep 20 '19

Great thanks

Aivan Monceller • Sep 21 '19

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/* ../",
}

jvmvl • Sep 21 '19 • 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

Aivan Monceller • Sep 21 '19

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

Luciano Mariani • Oct 31 '19

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",

Aivan Monceller • Dec 22 '19 • Edited

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

Israel Del Angel • Oct 24 '19

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

Aivan Monceller • Oct 31 '19

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

Peter Witham • Aug 25 '19 • 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.

Aivan Monceller • Aug 26 '19

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

Cristian Reynoso-Betancourt • Dec 1 '19 • 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:

Aivan Monceller • Dec 22 '19

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

Joel Varty • Aug 29 '19

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.

ZeptoBook • Sep 4 '19

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

Cristian Reynoso-Betancourt • Dec 1 '19

Another Screenshot