How to Create a Simple Portfolio Website

Create a GitHub Account

GitHub stores and shares your code. Create an account if you don't have one.

Create a GitHub Repository

Create a new repository titled portfolio-website:

• Select Private repository (can be made public later)
• Don't create a README (we'll add one later)
• Click "Create repository"

Open Your Repository in Codespaces

1. Navigate to your repository on GitHub
2. Click the green "Code" button
3. Select the "Codespaces" tab
4. Click "Create codespace on main"

Create Your Portfolio File

1. Right-click in the file explorer panel
2. Select "New File" and name it index.html

Get the Portfolio Code

Use my complete portfolio template:

To use this template:

1. Visit the repository link above
2. Click on the index.html file
3. Click the "Copy raw contents" button (looks like a clipboard)
4. Paste the code into your index.html file in Codespaces

Customize Your Content

Personalize your portfolio:

• Add your actual name
• Add social media links
• Write an "About Me" section
• Customize colors in the CSS

Preview Your Website

See your website in action:

1. Open terminal in Codespaces (Terminal → New Terminal)
2. Run: python3 -m http.server 8000
3. Click "Open in Browser" in the terminal

Your website will be accessible at an obscure url like https://your-codespace-name-username.github.dev:8000/

Tip: If you close the website tab, click the "PORTS" button in the terminal area and click "Open in Browser" for port 8000.

Method 1: Using the Web IDE GUI (Recommended)

The easiest way to commit and push your changes:

1. Click the "Source Control" icon in the left sidebar (looks like a branch)
2. You'll see your index.html file listed as "Changes"
3. Click the "+" button next to the file to stage it
4. Type a commit message in the text box (e.g., "Initial portfolio website")
5. Click the checkmark button to commit
6. Click the "..." menu and select "Push" to upload to GitHub

Pro Tip: You can use AI to write better commit messages. In the commit message box, try describing what you changed, and GitHub Copilot (if enabled) can suggest a professional commit message.

Method 2: Using the Terminal

If you prefer command line:

1. Add all files to the staging area:

   git add .

2. Create a commit with a message:

   git commit -m "Initial portfolio website"

3. Push your changes to GitHub:

   git push

Verify Your Code is on GitHub

After pushing, refresh your GitHub repository page. You should see your index.html file listed. Your code is now safely stored and ready for deployment!

Create a Cloudflare Account

1. Go to Cloudflare Pages
2. Click "Sign up" and create a free account
3. Verify your email address

Connect Your GitHub Repository

1. Click "Create a project"
2. Select "Connect to Git"
3. Choose GitHub as your Git provider
4. Authorize Cloudflare to access your GitHub account
5. Select your portfolio-website repository

Configure Build Settings

For static websites, use these minimal settings:

• Project name: Choose a name (e.g., "my-portfolio")
• Production branch: main
• Build command: Leave empty
• Build output directory: Leave empty

Deploy Your Site

Click "Save and Deploy". Cloudflare will:

1. Pull your code from GitHub
2. Build your website
3. Deploy

Purchase Through Cloudflare Registrar

Since you're using Cloudflare Pages, purchasing through Cloudflare Registrar simplifies setup:

1. In your Cloudflare dashboard, go to "Registrar"
2. Search for your desired domain name
3. Add to cart and complete purchase

Making Updates

To update your website, edit the index.html file in your GitHub repository, commit, and push. Cloudflare will automatically deploy your changes.

Next Steps

Enhance your portfolio:

• Add projects: Include new projects as you build them
• Improve design: Experiment with colors, layouts, and animations
• Add blog section: Share your thoughts on technology
• Include contact form: Make it easy for employers to reach you
• Optimize for mobile: Ensure great experience on all devices