Portfolio Platforms and Hosting — Choose Where to Showcase Your Work

In this tutorial, you will learn about Portfolio Platforms and Hosting. We cover key concepts, practical examples, and best practices to help you master this topic.

Portfolio platforms are the tools and services you use to host and present your technical writing portfolio, including static site generators, hosting providers, and domain configuration.

In this tutorial, you will learn about the most popular portfolio platforms, their advantages and disadvantages, how to set up each platform, and how to choose the right one based on your technical skills and career goals.

What You'll Learn

You will understand the differences between GitHub Pages, Hugo, Jekyll, and other platforms, learn how to set up a portfolio site on each platform, discover design best practices for portfolio websites, and make an informed choice based on your needs.

Why It Matters

Your portfolio platform affects how hiring managers perceive you. A clean, fast, professionally designed site signals attention to detail. A cluttered or broken site undermines your writing samples. DodaTech's hiring team notes the quality of portfolio sites during candidate evaluation.

Real-World Use

DodaTech's documentation team reviewed two candidates with similar samples. One used a clean Hugo site with fast load times. The other used a generic portfolio platform with ads and slow navigation. The first candidate was invited for an interview based partly on the professional presentation.

flowchart LR
  A[Choose Platform] --> B[GitHub Pages]
  A --> C[Hugo Site]
  A --> D[Jekyll]
  A --> E[Custom Domain]
  B --> F[Setup Repository]
  C --> F
  D --> F
  E --> F
  F --> G[Add Samples]
  G --> H[Configure Domain]
  H --> I[Test and Launch]
  I --> J[Maintain and Update]
  A:::current
  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px

Teacher Mindset

Choosing a platform feels overwhelming because there are so many options. Start simple. GitHub Pages with a clean theme works for 90 percent of technical writers. You can always migrate to a more sophisticated setup later. The content matters more than the platform.

Code Example: GitHub Pages Setup

# Create a new repository named yourusername.github.io
mkdir yourusername.github.io
cd yourusername.github.io
git init
echo "Hello, I am a technical writer." > index.html
git add .
git commit -m "Initial portfolio site"
git remote add origin https://github.com/yourusername/yourusername.github.io
git push -u origin main

# Your site is live at https://yourusername.github.io

Code Example: Hugo Site Configuration

# config.yaml for Hugo portfolio site
baseURL: "https://yourusername.github.io"
languageCode: "en-us"
title: "Your Name — Technical Writer"
theme: "hextra"

params:
  description: "Technical writer specializing in API documentation, tutorials, and developer guides."
  author: "Your Name"
  showReadingTime: true
  showBreadcrumbs: true

menu:
  main:
    - name: "Samples"
      url: "/samples/"
      weight: 1
    - name: "Case Studies"
      url: "/case-studies/"
      weight: 2
    - name: "About"
      url: "/about/"
      weight: 3
    - name: "Contact"
      url: "/contact/"
      weight: 4

Code Example: Portfolio Page Structure

# Website Structure for Technical Writing Portfolio

## Pages
- Home: Brief intro, featured samples, call to action
- Samples: 3 to 5 writing samples with context
- Case Studies: 1 to 3 case studies with metrics
- About: Bio, experience, skills, and interests
- Contact: Email, LinkedIn, and contact form

## Design Principles
- Clean, minimal layout
- Fast loading (under 2 seconds)
- Mobile responsive
- Easy navigation
- No ads or distractions
- Clear call to action on every page

Common Mistakes With Portfolio Platforms

1. Using a Platform With Ads or Branding

Free portfolio platforms that display ads or third-party branding make you look unprofessional. Use a clean platform like GitHub Pages where you control the full experience.

2. No Custom Domain

Using yourusername.github.io is acceptable but a custom domain like yourname.com looks more professional. Custom domains cost about $10 per year and are worth the investment.

3. Slow Page Load Times

A portfolio site that takes more than 3 seconds to load loses visitors. Optimize images, use a fast static site generator, and choose a reliable hosting provider.

4. Poor Mobile Experience

Hiring managers often browse portfolios on mobile devices. Ensure your portfolio site is responsive and readable on all screen sizes.

5. No Analytics Tracking

Without analytics, you cannot know how many people visit your portfolio or which samples they view. Install a simple analytics tool to track engagement and optimize your portfolio.

Practice Questions

1. What is the best platform for a technical writing portfolio? GitHub Pages with a static site generator is the most popular choice. It is free, fast, and gives you full control over design and content. Customize it with a theme that presents your samples professionally.

2. Why should you use a custom domain for your portfolio? A custom domain like yourname.com looks professional and is easy to share. It also gives you ownership of your URL regardless of the hosting platform.

3. What pages should a technical writing portfolio include? Home, samples, case studies, about, and contact pages. Each page serves a specific purpose in guiding hiring managers from introduction to action.

4. How fast should your portfolio site load? Under 2 seconds for the initial page load. Use static site generators, optimize images, minimize JavaScript, and use a CDN for fast global performance.

5. Challenge: Set up a portfolio site on GitHub Pages with a static site generator. Configure a custom domain. Create pages for home, samples, case studies, about, and contact. Add one writing sample and publish the site.

FAQ

Mini Project

Set up your portfolio site. Choose GitHub Pages with Hugo or a similar static site generator. Configure a custom domain. Create the core pages: home, samples, case studies, about, and contact. Add one writing sample and one case study. Test the site on mobile and desktop. Install analytics tracking.

What's Next

Portfolio Narrative and Branding in the next lesson. Then Resume and LinkedIn Optimization.