{"id":5784,"date":"2025-05-29T09:38:30","date_gmt":"2025-05-29T14:38:30","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5784"},"modified":"2025-07-01T09:44:16","modified_gmt":"2025-07-01T14:44:16","slug":"the-simplest-way-to-deploy","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-simplest-way-to-deploy\/","title":{"rendered":"The Simplest Way to Deploy Your Own Updatable Portfolio Site"},"content":{"rendered":"\n

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 Getting Started with CSS<\/a> where you literally build a portfolio, for example, but it could be anything.<\/p>\n\n\n\n

\"A
Hey, what do you know, I’ve got some static files that make a nice personal portfolio page right here.<\/figcaption><\/figure>\n\n\n\n

We’ve covered the very fastest way<\/a> to get those files turned into a deployed website on the internet already, using Netlify’s tool<\/a>. That totally works, but we can take things a little further to make things easier on our future selves. <\/p>\n\n\n\n

Websites tend to need to be updated. <\/em>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<\/strong> than that. We’re going to start using Git and GitHub. Let’s do the steps.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Exactly How to Deploy Local Files to Make a Live Website<\/a>\n <\/li>\n
  2. \n The Simplest Way to Deploy Your Own Updatable Portfolio Site<\/a>\n <\/li>\n
  3. \n Deploy a Site with a Build Process & a Custom Domain Name<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Git?<\/h2>\n\n\n\n

    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. <\/p>\n\n\n\n

    1) Make sure you have a GitHub account<\/h2>\n\n\n\n

    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<\/a>:<\/p>\n\n\n\n

    \"GitHub
    The accessibility of this page just got improved<\/a> while retaining a great design, good job team.<\/figcaption><\/figure>\n\n\n\n

    2) Get the GitHub Desktop App<\/h2>\n\n\n\n

    We’re baby-steppin’ here, and I think it will be easier for us to use the official GitHub app<\/a> than it will be to use what developers call “the command line” to work with Git (but someday you can level up<\/a>).<\/p>\n\n\n\n

    \"Screenshot
    It’s free.<\/figcaption><\/figure>\n\n\n\n

    Honestly, I’ve been using Git for a hot long while and I still use GUI apps like this (literally this<\/a>) 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.<\/p>\n\n\n\n

    3) Make a Repo<\/h2>\n\n\n\n

    “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<\/a>, “pulling it down” and going from there. <\/p>\n\n\n\n

    \"Screenshot
    You likely don’t need anything but the defaults here. <\/figcaption><\/figure>\n\n\n\n

    4) Pull the Repo from GitHub to your Local Computer<\/h2>\n\n\n\n

    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:<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n
    \"Screenshot
    I have a folder just called “GitHub” I put all my repos in.<\/figcaption><\/figure>\n\n\n\n

    This folder will essentially be empty. (In truth, it has a .git<\/code> folder inside of it, but most operating systems and code editors hide folders and files that start with a .<\/code> by default so you don’t see it while browsing files.)<\/p>\n\n\n\n

    5) Put your static files in the folder you just pulled down<\/h2>\n\n\n\n

    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:<\/p>\n\n\n\n

    \"Screen<\/figure>\n\n\n\n

    (That .DS_Store<\/code> file is just an awkward thing macOS does. Try right-clicking that file and ignoring it and seeing what that does.)<\/p>\n\n\n\n

    6) Push your static files to the Repo<\/h2>\n\n\n\n

    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. <\/p>\n\n\n\n

    After committing, you will no longer see any local changes, but you’ll see that “commit” you just did under the History<\/strong> tab. Your job now is to click the Publish branch<\/strong> button on in the upper right.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    After you’ve done that, you’ll see the files you “pushed” up right on GitHub.com in your repo URL:<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    7) Now that your website files are on GitHub, we can deploy them to a live website<\/h2>\n\n\n\n

    Just so you’re aware, GitHub has a product called GitHub Pages<\/a> where we could just make GitHub itself the home of your website. Jen demonstrates this in her course.<\/a><\/p>\n\n\n\n

    We’re also fans of Netlify<\/a> here and generally think that’s the best option for projects like this, so sign up for a free account at Netlify<\/a> if you don’t have one.<\/p>\n\n\n\n

    8) Make a New Projects on Netlify<\/h2>\n\n\n\n

    One you’re in, go to Projects<\/strong> and add a new one by selecting Import an existing project.<\/strong><\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    Then select GitHub as that’s where our project lives.<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    You may need to grant Netlify permissions on GitHub:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    Once Netlify is authorized, you’ll see a list of your repos. Find the porfolio one we’re working with and click it.<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    Now you pick the URL for it, which for now will be your-chosen-name<\/strong>.netlify.app<\/code>. You don’t need to change any other settings, so scroll down and Deploy <\/em><\/strong>it.<\/p>\n\n\n\n

    9) Your Website will Go Live<\/h2>\n\n\n\n

    Netlify will work on deploying it, which should be pretty fast probably. Maybe a few minutes at worst. <\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    Then it will be live!<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    You can click that green link like you see above to see the website. <\/p>\n\n\n\n

    You can share that URL with anyone in the wor<\/strong><\/em>ld and they’ll be able to see it.<\/em><\/strong> That’s the power of the world wide web. It’s awesome. Here’s a view of the files I uploaded:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    10) Make Some Changes<\/h2>\n\n\n\n

    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. <\/p>\n\n\n\n

    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 <\/em><\/strong>to both push the changes to GitHub and deploy the site on Netlify.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n
    \"Screenshot<\/figure>\n\n\n\n

    You really are a web designer and front-end developer now!<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    \n\n\n
    \n
    \n

    Article Series<\/h3>\n <\/header>\n
    \n
      \n
    1. \n Exactly How to Deploy Local Files to Make a Live Website<\/a>\n <\/li>\n
    2. \n The Simplest Way to Deploy Your Own Updatable Portfolio Site<\/a>\n <\/li>\n
    3. \n Deploy a Site with a Build Process & a Custom Domain Name<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      For the true beginners out there! We’ll put the files in a GitHub repo and connect it to Netlify to host it.<\/p>\n","protected":false},"author":1,"featured_media":6023,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[175,269,31,351],"class_list":["post-5784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-deployment","tag-hosting","tag-html","tag-portfolio"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/The-Simplest-Way-to-Deploy-Your-Own-Updatable-Portfolio-Site.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5784"}],"version-history":[{"count":14,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5784\/revisions"}],"predecessor-version":[{"id":6423,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5784\/revisions\/6423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/6023"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}