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.
- Download NodeJS. At the time of writing, this is the latest version. If you are using Windows, this page will show Windows downloads.
- Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.
- 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.
- Download VS Code. If you are using Windows, this page will show Windows downloads.
- 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
- Go to https://github.com. Enter a username, email and password.
- There will be three (3) steps until you reach this page.
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
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
- Open your Terminal/Git Bash
- Enter the text below, substitute the email with your email
- When you're prompted to "Enter a file in which to save the key," press Enter. This accepts the default file location.
- 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:
- 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.
- Go to the settings page of your GitHub account.
- Click on SSH and GPG Keys > New SSH Key
- Add your SSH Key from Step 1 then press Add SSH Key
- 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:
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
- Create a folder on your computer, use your GitHub username. In my case, I will create geocine.github.io
- Go to the template of your choice, scroll down. Click on the Source link.
- Copy the link as shown on the screenshot below:
-
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
Once the cloning process is done. Your folder structure should look like this
We will rename gatsby-starter-portfolio to gatsby. Now your directory structure should look like this
-
Create a .gitignore file on your root directory and paste the following:
-
While you are root folder, let us initialize git
git init
-
Now go inside the gatsby folder and delete the .git folder
rm -rf .git
-
While you are inside the gatsby folder, let us install the dependencies.
-
Open the package.json file and edit the scripts portion. Add a clean property and edit the build property:
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.
-
While on the root folder, execute the command from Step 12
git remote add origin git@github.com:geocine/geocine.github.io.git
-
Go back to the gatsby folder. Let us build the project
npm run build
-
Go back to the root folder. Now let us commit our code and push it.
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.
Top comments (21)
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
Great thanks
Hi you can try this on windows
git bash
I have modified the scriptTested using git bash
$ npm run build
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 doIf its still not working on your machine for some reason, then install
sharp
manuallyMake a few changes on scripts provided to make it work properly for me
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:
And this is the package.json file:
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...
Another Screenshot