Publish a Web Portfolio Directly to Netlify

What you will need

In this guide, I'll use Visual Studio Code (VS Code) and Netlify. If you want to use a different text editor or other tool/service, go for it!

• Netlify account
• Text editor
• Basic HTML
• Basic CSS

What you won't need

• Paid tools or services
• JavaScript
• Command line
• Servers
• CMS

Set up your local workspace

To get started on your portfolio site, you need to the right tools. These are all free tools that are commonly used by professionals, but you don't need any experience to get started with them.

Install VS Code

1. Download and install VS Code.

2. Open VS Code, and select the extensions icon () from the left-hand menu.

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

   

Create 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 basic reference.

Download a GitHub project

1. Go to the WTD-basic-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:

   

Preview 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. Replace <portNumber> with the port number you can find in VS Code:

   

   Note: Typically, Live Server uses localhost:5000, but it'll be different if something else is using the default port. 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 Upload your site to Netlify.

VS Code extensions

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

Utilities

• Prettier. A linter that supports auto formatting for many programming languages.
• Live Server. Makes it easy to preview your website on your laptop.

Themes

• Panda Theme
• Nord
• Nord Light
• One Dark Pro

Resources

HTML

• Meet the Ipsums. A collection of Lorem Ipsum generators from around the internet.
• FreeCodeCamp article about semantic HTML5. This is a good primer for HTML5 elements and how, why, and when you should use them.
• W3 chapter about the history of the internet. If you want to take a deep dive into why HTML is the way it is.

CSS

• Grid by Example. Fantastic resource for learning CSS Grid, which I highly recommend.
• Color Designer. A great free web-based tool for building color themes. Also, check out Colormind.
• CSS Tricks. One of the best places to learn about CSS. Extensive library of articles about anything you could think of - almost always with examples.

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.

Upload your site to Netlify

1. Go to Netlify.com and select Sign up.

2. Select Sign up for free, then Sign up with email.

3. Enter your email address and desired password, then select Sign up.

4. Find the email that Netlify sent to your email address and select Verify email.

5. Fill out the form, then select Continue to deploy.

6. On the next page, under Get started another way, select Try Netlify Drop.

7. Upload your website's folder by drag and drop or selecting browse to upload.

   Netlify will automatically host your site for you with a random site name on a Netlify subdomain.

Resources

• Netlify docs
• Setting up your own domain name on Netlify

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 make your site available on the internet.

To update your site, you'll need to upload all of your site's files again.

Check your site's publishing status

1. In Netlify, on the Sites tab, select your site, then select Deploys.

   

2. Check the status of the latest deploy. It should have one of the following tags:

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

   • Building. Processing your site'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.

View 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.

   

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

Portfolio examples

Here are some portfolio examples you can draw inspiration from. They all have strong design and good UX.

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

• Stephanie Chizoba Odili.

  Basic, but effective design. Could easily be done with just HTML and CSS.

• Craig Wright - Freelance Technical Writer.

  Comprehensive website that could be made with just HTML. Includes a portfolio, case studies, and other content

• Kayla Lewkowicz.

  Effective layout that's easy to do without any JavaScript.

• Chelsea Palmer.

  Elegant layout with some fun style. No JavaScript required.