The Simplest Way to Deploy Your Own Updatable Portfolio Site
The Simplest Way to Deploy Your Own Updatable Portfolio Site êŽë š
Letâs say youâve got a set of static files (HTML, CSS, JavaScript, images, etc) that build your website. Perhaps itâs your portfolio website, thanks to having taken Jen Kramerâs course Web Development Project: Personal Portfolio Website, for example, but it could be anything.
index.html, script.js, and style.css, with their sizes and types displayed.Hey, what do you know, Iâve got some static files that make a nice personal portfolio page right here.
Weâve covered the very fastest way to get those files turned into a deployed website on the internet already, using Netlifyâs tool. That totally works, but we can take things a little further to make things easier on our future selves.
Websites tend to need to be updated. Technically, you can keep using that tool to drag-and-drop your entire site again. But since weâre here to learn to be a better developer, letâs do better than that. Weâre going to start using Git and GitHub. Letâs do the steps.
Article Series
Git?
Git is the name of the technology weâll use, which is what they call a VCS or Version Control System. Weâll put our files in Git, then when we change anything, Git will know about it. Git allows us to âcommitâ those changes, which gives us a history of what changed. That alone is a great feature. But crucially, Git allows us to work with others (they can âpullâ those commits) and most importantly for us today: connect other apps to Git. For example, when changes are pushed up, âdeployâ the changes to the live website.
1) Make sure you have a GitHub account
There is a 99.99% chance youâll need/want a GitHub account in your developer career. If you donât already have one, get one:
The accessibility of this page just got improved while retaining a great design, good job team.
2) Get the GitHub Desktop App
Weâre baby-steppinâ here, and I think it will be easier for us to use the official GitHub app than it will be to use what developers call âthe command lineâ to work with Git (but someday you can level up).
Itâs free.
Honestly, Iâve been using Git for a hot long while and I still use GUI apps like this (literally this) to work with Git as I prefer the visual nature of it. This is true of many of the talented developers I work with, who are are very capable of command line usage as well.
3) Make a Repo
âRepoâ is just short for ârepositoryâ. You could make one locally and push it up to GitHub as a second step, but for whatever reason I prefer making it on GitHub, âpulling it downâ and going from there.
You likely donât need anything but the defaults here.
4) Pull the Repo from GitHub to your Local Computer
One reason to use the GitHub Desktop app we downloaded is that the GitHub website is nicely integrated with it, giving us a quick button to click:
I have a folder just called âGitHubâ I put all my repos in.
This folder will essentially be empty. (In truth, it has a .git folder inside of it, but most operating systems and code editors hide folders and files that start with a . by default so you donât see it while browsing files.)
5) Put your static files in the folder you just pulled down
Now you can drag your static files into that âemptyâ folder that is your repo. When the files are in there, GitHub Desktop (and really, Git itself) will âseeâ those files as changes to the repo. So youâll see this:
(That .DS_Store file is just an awkward thing macOS does. Try right-clicking that file and ignoring it and seeing what that does.)
6) Push your static files to the Repo
All those files are now selected (see the checkmarks). Type in a commit message (where it says âSummary (required)â in GitHub Desktop) and then clicking the blue Commit button.
After committing, you will no longer see any local changes, but youâll see that âcommitâ you just did under the History tab. Your job now is to click the Publish branch button on in the upper right.
After youâve done that, youâll see the files you âpushedâ up right on GitHub.com in your repo URL:
7) Now that your website files are on GitHub, we can deploy them to a live website
Just so youâre aware, GitHub has a product called GitHub Pages where we could just make GitHub itself the home of your website. That can be a good option, but weâre also fans of Netlify here and generally think thatâs the best option for projects like this, so sign up for a free account at Netlify if you donât have one.
8) Make a New Projects on Netlify
One youâre in, go to Projects and add a new one by selecting Import an existing project.
Now you pick the URL for it, which for now will be your-chosen-name**.netlify.app. You donât need to change any other settings, so scroll down and Deploy it.
9) Your Website will Go Live
Netlify will work on deploying it, which should be pretty fast probably.
You can click that green link like you see above to see the website.
You can share that URL with anyone in the world and theyâll be able to see it. Thatâs the power of the world wide web. Itâs awesome. Hereâs a view of the files I uploaded:
10) Make Some Changes
Another wonderful part of working on websites is you can easily change them at any time. Thatâs part of why weâre working with Git, because we can push up those changes and keep track of them. We can also efficiently deploy only changed files and such.
If I change the files locally, the GitHub Desktop app will show me what has changed. I can check out those changes, confirming itâs exactly as I want, then type in a commit message and commit them, then click Push origin to both push the changes to GitHub and deploy the site on Netlify.
You really are a web designer and front-end developer now!
Next time weâll take things just a smidge further, adding in a tool to help us build slightly more complex websites, which will make more clear why weâre using Netlify. And weâll use a ârealâ domain name entirely of our own.