Can We Really Make a Gatsby Portfolio in 10 Minutes?

one of the most important projects a web developer can work on is their portfolio website they can showcase their skills their projects and possibly catch the eye of a future employer let's get to it thank you for joining me this is zach with zac os tech and today we'll be looking at how to build a portfolio website with gatsby there's a couple things that we're going to need before we dive into editing the code so if you can go to the link i put in the comments and download node.js that will allow you to run the npm command that we need in order to get gatsby running on this computer so once you have that you can do node dash dash version and npm-version okay they should both say something in there if if they do then that's good and then we can run the command npm install g gatsby cli and i'll link to this in the in the comments as well so you can copy and paste it into your your code editor so this is just going to run through and quickly install everything that needs to be installed for the template that we're going to use to build your portfolio website all right so if that installed correctly you'll see a success message here and don't worry if it gives you warnings it's it's okay now we're going to want to pick the template that we're going to use to get our gatsby portfolio started so go to google or whatever browser you use and search gatsby templates okay the first option is going to be starter templates and that's what we're going to be looking right now so this is a bunch of templates that people have made for gatsby specifically and we can filter the categories on the left hand side here by what type of website we're wanting to build so there's actually a checkbox for portfolio we're going to check that and gatsby version 2 just to make sure everything's completely up to date and if you see there's 99 different templates that you can look through and choose from so i encourage you to just go through this and find something that catches your eye that that kind of resembles your personality so that your portfolio website can be unique and if you click on these you can hit visit demo up here and actually look at what this website looks like i think i'm going to choose this one yeah i like this one i think it's cool that the the background moves and it's it's very fluid all right so i'm going to go back and they explain how to install it here at the bottom so you can actually copy this code and then go back to your code editor and you can just paste it in there i'm going to change the name of this project from my gatsby project to portfolio and hit enter so now this is going to go through the the setup process of installing all of the dependencies that gatsby runs on and i will see you back here in a minute all right so now we have a success message that our project finished installing and it's actually telling us to do cd portfolio or whatever you named your project and hit enter and then gatsby develop and what that's going to do is it's going to run the commands necessary to spin up the website and actually get this running all right so now we have another success message but this one is giving us a link that we can follow so i'm gonna hold ctrl and click and this should open awesome so let's open the website exactly the way that it looked for us in in the demo so now we just got to jump into the code and change these things so that it reflects our own portfolio projects all right let's minimize this okay so i actually just opened up the portfolio folder in vs code and that uh killed the session that was running so to get the site back up and running we have to run gatsby develop one more time and then this will allow it to real time update whenever we make changes so you can see the things that you're changing so as you can see there's a lot of folders and a lot of files in this and it actually gets quite complicated when you when you start digging into all this which is exactly why we use something like a template when we're getting this set up because this this makes it a lot easier for us to get these things up and running i don't know how many hours it would take us to write all of this ourselves like so instead we can we can use gadsby and we can use the template to to do all the heavy lifting for us and we just have to pass in some of the information and make minor tweaks here and there so one thing we can do is go to where we found this template and click on source and that'll usually contain information for how to change things on on this project so i'm gonna just look through this real quick and see if i can find where they document how to change the content changing content okay so this this actually gives a lot of good information so for this one specifically we need to add projects.mdx about.mdx and contact.mdx to the sections folder so new file okay so that is we're going to use these four files to change everything that all the details that we need and the links and things like that for our site hi i'm jane dill let's change that to hi i'm zac oskins or switch it to whatever your name is don't put zach hoskins we don't need a bunch of zack hoskins out there a front end developer making awesome websites and teaching others how to do the same all right let's check this out hype zach hoskins all right so that one is done what about the contact section i know that's at the very end but that's the the next easiest part that we can do i'm actually going to open this up just as a reference what this is doing is it's using markdown to style the text that's getting put in so it uses this hashtag or pound sign to specify that that is a header so we'll do the same thing in contact and we will say let's just copy this get in touch with me on github now they added links here and and one way you could do that with markdown is by using a special type of formatting where you put this around square brackets and you put the link that you want it to go inside parentheses so it's not updating for some reason i'm going to try doing ctrl and c to kill the session that's running and run gatsby develop one more time sometimes there's changes that are made in gatsby that require a full refresh so sometimes we have to do gatsby develop one more time all right now let's take a look connect with me on twitter or github awesome so now i can put my my github link in there as well and if you if you saw that it just made it a link once i hit save and since this isn't a complete change it's just changing the file that's already in place it'll allow us to to make that change okay switch to dark mode and if you notice there's there's no about section anymore because we we have that saved here as a blank about section and there's no project section here either so those are the next two things that we need to work on just for the sake of time i'm going to just make the same about section that they had before okay you can add your own about section to here just explain who you are and and what you love about code what you do for fun this is where people are just trying to learn more about you and trying to connect with you as a person all right let's get these projects in here and then we should be done after that so let's go back to the documentation because they said you have to use this special component inside the projects.mdx to display the cards so i'm just going to copy this as an example so that we can actually see what that looks like there we go so i actually want to have four projects on mine so i'm going to highlight this and if you do alt shift and down it'll copy that down four times all right and you're going to put your projects that you have on on github or or on codepen or wherever you have them stored and you don't have to have four you can start with just one and then continue to add them as you go through this 52 projects or if you continue to make different projects on your own you can add those to this so that you can show off what you've been working on so i'm just going to quickly fill this out with my information okay so i finished adding all the details for my projects and if you notice over here now just added four different cards but if i hit save that'll run through and and rebuild all right so if we go back to localhost 8000 hi i'm zach hoskins scroll down for my projects here got an about section about me and a way for people to follow up and keep in touch with me to just to connect so i think this is a pretty good uh starter portfolio website and if you can figure out how to to make these have background images i'd love for you to share that because i think that would be a nice addition otherwise you can change the values in here to like to left or you can change the different color values that are are listed in there and so that'll just change it up a little bit and make it to where it's not the exact same thing four times one thing you can do now is push this project to github and then from there you can actually host it on github pages so it would be hosted at github.com your name slash portfolio or something like that and then you can give that link to different places that you apply or you can share with your friends and family if you would like me to create a video on how to do that i would love to just leave a comment below and if we get enough people interested i'll definitely make a video on how we can host this portfolio website on github pages so thank you for joining me today i hope you found this helpful and i look forward to seeing your different projects please share it in the comments and just continue to add your projects to this portfolio website when you finish them don't forget to like and subscribe and i will see you in the next video [Applause] [Music] [Applause] [Music] you

Channel: zachOS Tech

Views: 1,921

Rating: 4.8888888 out of 5

Keywords: portfolio website, static site generator, Gatsby, Jamstack, web development, gatsby portfolio, gatsby portfolio tutorial, gatsby portfolio site, github pages, how to make a portfolio website, personal portfolio website, responsive personal portfolio website, how to make a website, porfolio website, portfolio website html css, gatsby.js tutorial, gatsby.js portfolio, web portfolio, web portfolio site

Id: JxB_MY7IkME

Length: 10min 35sec (635 seconds)

Published: Thu Jan 28 2021