DEV Community

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

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