Gatsby is Great: Develop a Beautiful, Responsive Portfolio Site in 3 Easy Steps
Creating a personal portfolio website is a critical element of building your brand as a young professional. Gatsby + Netlify are the perfect tools for the job.
Opinions — developers have plenty! If you think American politics is rough, just try wading into the discourse regarding the “right” way to build a website in 2020. Between the warring JavaScript framework factions, non-technical “NoCode” evangelists, and principled PHP purists, it is far too easy for the novice web developer to become paralyzed by the paradox of choice, overwhelmed with the sheer abundance of programming practices.
For this reason, I feel a puzzling mix of both pride and shame in proclaiming I’ve finally discovered the perfect process for deploying a new website (at least, perfect for my own skill level). If you’re looking to quickly deploy a blog, portfolio, or any other content-focused static site, congratulations, you’ve stumbled across yet another master of the web universe. This short tutorial assumes you have some background in navigating git/GitHub and the command line, but will otherwise attempt to guide you entirely through the 3(ish) steps necessary in deploying your very own corner of the World Wide Web.
Choosing a Gatsby Starter Template
First, I’m going to assume you probably didn’t bother to click on the hyperlink above (which explains the many benefits of leveraging static site technologies), so I’ll summarize the advantages in just two words: fast, and easy. Static sites load in your browser far more rapidly than bulkier, more complex deployment models (including the multitude of code-free site builders out there), and there’s a rich ecosystem of resources available to help simplify the process.
GatsbyJS is a handy tool for helping developers easily generate static sites, and as an added bonus it’s based on React, the web’s most popular JavaScript framework. The Gatsby community has also developed a staggering number of starter templates, allowing even the most inexperienced developers to hit the ground running. The development environment is easy to set up, so once you have the Gatsby CLI installed it’s simply a matter of choosing a template and cloning it with the gatsby new command on your terminal. Now, you’ll have a locally available copy of the template, ready for you to make your own. Time to spice things up!
Git Your New Website Personalized
Okay, I’ll admit, awful pun — but don’t let that dampen your enthusiasm, this part is the most fun. Once you’ve cloned the starter template to your machine, navigate to the corresponding directory via your command line and run npm install, then gatsby develop. Within a few moments, the local version of your template will be running in your browser (usually at http://localhost:8000/) and you’ll be able to see live updates to the changes you make in the code. After that, boot up your favorite code editor (mine is, unquestionably, Visual Studio Code) and begin customizing the content on your homepage.
I won’t go into too much detail here — for the most part, it’s as simple as using the CMD-F search function on each file in the src folder to find the tidbits of text you’d like to alter, in addition to reconfiguring a few links and replacing a handful of images. With each revision, be sure to git add and git commit your changes to permanently save them to your local version control history. For those that need a refresher, Atlassian offers a pretty detailed explanation of how the git workflow works. Finally, create a Github repository and git push your newly-personalized site to the remote repo.
Behold the Magic of Netlify!
The final stage of deploying a static site has always been my least favorite part of the process, and as a result, my GitHub account is littered with the broken corpses of abandoned projects (frankly, probably for the best — does the world really need another podcast, Parker?!). Thankfully, after discovering Netlify, deployment would quickly become the most seamless element of my entire development experience.
After signing up for an account, simply link it to your Github profile, point it to your site’s repository, and click deploy. Boom! Within a few minutes, your portfolio/blog/meme gallery is live on the web for the whole world to see, so hopefully you didn’t include anything too embarrassing. As an added bonus, Netlify offers a domain registration service, so you can even link the site to a custom .com like all the cool kids do — although, admittedly, I purchase most of my domains on GoDaddy so I can earn those sweet, sweet Bitcoin cashback rewards from Lolli.
Congratulations! As long as you didn’t screw something up along the way (paging Dr. StackOverflow?) your very own custom website should be live and ready to share. Time to go FLEX on your friends and coworkers!
Follow me on Twitter and LinkedIn, and be sure to check out my own personal portfolio site.
