Basic web portfolio example
GitHub repo

Publishing a simple web portfolio on Netlify

You don't need to follow this walkthrough exactly. If you know what you're doing, skip around. The worst thing that can happen is your site doesn't go live. Which means you get to troubleshoot and make it better. ✨

If you want to use a different text editor, repository host, or other tool/service, go for it! However, I'll only cover Visual Studio Code (VS Code) and Netlify in this walkthrough.

For those who want a simple step-by-step guide, follow along and you'll have your own website up and running quickly. No particularly technical skills needed and no paid tools or services recommended.

What you will need

What you won't need

Set up GitHub

GitHub is a git repository host. You can think of it as a sort of file storage service. There's a lot more to it than that, but we won't get into the details of git or GitHub in this walkthrough.

Creating a GitHub account

  1. If you don't have a GitHub account, go to On the main page, enter your information, then click Sign up for GitHub.

    GitHub sign up form with prominent call to action button.

    Note: You may need to verify that you're a human at this point.

  2. On the Welcome to GitHub page, select your answers, then select Complete Setup.

  3. Verify your email address.

Creating a repo in GitHub

  1. After signing into GitHub, on the home page (, select Create repository.

  2. Ensure you're the repository owner and enter a repository name.

  3. Optionally, you can add a description for the repository.

  4. Choose whether you want the repository to be visible to other people (public or private).

  5. Optionally, choose to include a README file, .gitignore file, or a license.

    • You should definitely include a README file to document your work.

    • If you don't know what a .gitignore file is, you probably don't need it.

    • If you don't know what license to choose, the MIT or Mozilla Public License are good places to start.

  6. After all of that, click Create repository. You should see something like this:

    GitHub sign up form with prominent call to action button.

You can do a lot of things with a GitHub account. We'll come back to this repository later in the guide, but will make minimal use of it. If you want to learn more about GitHub (and git), check out the following Resources section.


Set up Netlify

Netlify will host your web portfolio for free. If you have your own domain name, you can set up Netlify to work with it. If you don't, Netlify will give you a Netlify sub-domain for free.

Tip: Netlify offers automatic free HTTPS certificates for sites hosted on their platform with custom domains.

For further details refer to this section's resources.

Creating a Netlify account

  1. Go to and click Sign up.

  2. Select the GitHub option.

    This will link your Netlify and GitHub accounts, streamlining the publishing process for your portfolio.

  3. Authorize Netlify on your GitHub account by selecting Authorize Netlify.

    GitHub sign up form with prominent call to action button.

Pointing Netlify at your GitHub repository

  1. In Netlify, on the Team overview page, select the New site from git button.

    GitHub sign up form with prominent call to action button.
  2. Under Continous deployment, select GitHub.

  3. Give Netlify permissions to verify your identity and act in GitHub on your behalf by selecting Authorize Netlify.

  4. Set the scope of the Netlify integration by choosing** Select repositories only**, then click Install.

    Note: You can optionally install Netlify for all repositories on this GitHub account. I don't recommend that, as it's not necessary.

    GitHub sign up form with prominent call to action button.
  5. Under Continuous Deployment: GitHub App, click on your portfolio repository.

  6. Confirm your deployment settings (the defaults should be fine if you've followed this walkthrough), then click Deploy site.


Set up your local workspace

Install VS Code

  1. Download and install VS Code.

  2. Open VS Code, and select the extensions icon GitHub sign up form with prominent call to action button. from the left-hand menu.

  3. Search for "live server" and install the Live Server extension.

    GitHub sign up form with prominent call to action button.

Creating a local project

Now that you have VS Code installed, it's time to set up a project. I put together a starter for you as a simple reference.

Dowloading a GitHub project

  1. Go to the WTD-simple-portfolio created by user Bobby Pancakes (an alias I created for this project).

  2. Click the green Code button, then select Download ZIP.

  3. Extract the downloaded folder somewhere on your local computer.

  4. In VS Code, open the downloaded project. It should look something like this:

    Project structure

Previewing your site locally

One benefit of web development is quickly seeing how your changes affect your site. With the Live Server extension installed, you can preview your site before you upload it to GitHub. Read on to see how.

  1. In VS Code, right-click the index.html file the left-hand navigation, then select Open with Live Server.

  2. Live Server should automatically open a new tab in your browser and you'll see your site. If not, enter localhost:<portNumber> in your browser's URL bar.

    Live Server indicates which port you can preview your site on.

    Note: Typically, Live Server uses localhost:5000, but if that's not available, it'll be different. You can find your port in VS Code's lower-right status bar.

Making the magic

This is where you get creative. Start with the design and layout or write your content, then design around it. This is your portfolio, build it however you want. If you're not sure where to start, take a look at this section's resources and the Portfolio examples section.

When you're ready, move on to Uploading your files to GitHub.

VS Code extensions

There are many useful VS Code extensions. Here are some that I recommend.




Add your HTML and CSS to your GitHub repo

Now that you have your site ready, it's time to upload it GitHub!

Uploading your files to GitHub

  1. On the GitHub website, navigate to the repository you created earlier in this walkthrough.

  2. Click the Add filefile, then select Upload files.

  3. Select all files and folders in your VS Code project or drag them into the GitHub website's GUI.

  4. Add a commit message, like "Initial upload", and a description if you want, then click Commit changes.

You're almost there! Congratulations on making it this far.


Review your live website and make changes as necessary

After you've uploaded your HTML, CSS, and any other files (like images and sample docs), Netlify will automatically update your site.

It does this by watching your GitHub repository. When there's a change, it automatically pulls the updated files and builds your site.

Checking your site's publishing status

  1. In Netlify, on the Site overview tab, find the Production deploys section.

    Netlify shows deploy statuses.
  2. Check the status of the lates deploy. It should have one of the following tags:

    • Published. Successfully deployed and ready to view at your site's URL.

    • Building. Processing your GitHub repo's files and setting up deployment.

    • Failed. Something didn't work. Check the deployment logs for details.

After your site is published, all you need to do is refresh your browser to see the updates.

Viewing your portfolio

Well, you did all of that work. So, how do you view it? If you didn't set up a custom domain name, Netlify automatically creates a random URL for your website. This URL won't change after it's assigned to your site.

  1. In Netlify, on the Site overview tab, find the site information card.

    Netlify site URL location.
  2. Click the link in the site information card, or copy it and share it with others.

Portfolio examples

Here are some writer portfolio examples. These are not technical writer portfolios. However, they all have strong design and good UX.

I don't know any of these people. I came across their sites by googling for writer portfolios.