Practice and reinforce the concepts from Lesson 3
This workshop guides you through creating a professional GitHub presence that demonstrates your skills to potential employers and collaborators. You'll establish industry-standard practices for repository management, documentation, and security.
Time Required: 2-3 hours
Prerequisites: Completed Git fundamentals (Activities 1-2)
By completing this workshop, you will:
Your GitHub username is your professional identity in the developer community. Choose wisely as it becomes part of your permanent online presence.
Username Best Practices:
john-smith, jsmith-dev)smith2024 is less professional than smithdev)# After creating your account at https://github.com
# Verify these critical settings:
# Set your global Git configuration to match GitHub
git config --global user.name "Your Full Name"
git config --global user.email "your.professional@email.com"
# Verify configuration
git config --list | grep user
Your GitHub profile is often the first thing recruiters and potential collaborators see. Optimize it for maximum professional impact.
Required Profile Elements:
| Element | Professional Standard | Example |
|---|---|---|
| Profile Photo | Professional headshot or branded avatar | LinkedIn photo or consistent avatar |
| Bio | 2-3 sentences highlighting expertise | "Full-stack developer specializing in React and Node.js. Open source contributor. Building scalable web applications." |
| Location | City, Country | "San Francisco, CA" |
| Company | Current employer or "Open to opportunities" | "Software Engineer @ TechCorp" or "Available for hire" |
| Website | Portfolio or professional blog | "https://johnsmith.dev" |
| Social Links | LinkedIn, Twitter (if professional) | Verified social accounts |
SSH keys provide secure, password-less authentication. This is the industry standard for Git operations.
# Generate a strong ED25519 key (recommended over RSA)
ssh-keygen -t ed25519 -C "your.professional@email.com" -f ~/.ssh/github_ed25519
# Add custom SSH config for GitHub
echo "Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/github_ed25519
AddKeysToAgent yes" >> ~/.ssh/config
# Set correct permissions
chmod 600 ~/.ssh/github_ed25519
chmod 644 ~/.ssh/github_ed25519.pub
# Add to SSH agent
ssh-add ~/.ssh/github_ed25519
# Copy public key to clipboard
# macOS
pbcopy < ~/.ssh/github_ed25519.pub
# Linux
xclip -sel clip < ~/.ssh/github_ed25519.pub
# Windows (Git Bash)
cat ~/.ssh/github_ed25519.pub | clip
Adding SSH Key to GitHub:
WorkMachine-ED25519-2024 (descriptive name)💡 💡 Security Best Practice Use different SSH keys for different machines and rotate them annually. This limits exposure if a device is compromised.
Professional repositories follow consistent patterns that make them immediately understandable to other developers.
Repository Naming Conventions:
project-namereact-task-manager not my-appnodejs-rest-apitest, demo, sampleProfessional Repository Setup:
# Create and initialize a professional project structure
mkdir professional-portfolio && cd professional-portfolio
# Initialize with a comprehensive gitignore
curl -o .gitignore https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# Create essential files
touch README.md LICENSE CONTRIBUTING.md CODE_OF_CONDUCT.md
# Create standard directories
mkdir -p src tests docs .github/workflows
# Initialize Git repository
git init
git add .
git commit -m "Initial commit: Professional repository structure"
# Project Name
[](https://opensource.org/licenses/MIT)
[](https://github.com/username/repo/actions)
[](https://codecov.io/gh/username/repo)
## Overview
Brief, compelling description of what this project does and why it matters.
## Features
- ✅ Key feature 1
- ✅ Key feature 2
- ✅ Key feature 3
## Quick Start
\`\`\`bash
# Clone the repository
git clone https://github.com/username/project-name.git
# Install dependencies
npm install
# Run the application
npm start
\`\`\`
## Documentation
See the [docs](./docs) directory for detailed documentation.
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
Your license choice signals your intentions to potential employers and collaborators. Here's a professional guide:
| License | Use Case | Permissions | Example Projects |
|---|---|---|---|
| MIT | Most permissive, business-friendly | Commercial use, modification, distribution | React, jQuery, Rails |
| Apache 2.0 | Patent protection included | Same as MIT + patent grant | Kubernetes, Android |
| GPL v3 | Ensure derivatives remain open | Copyleft, requires source disclosure | Linux, WordPress |
| BSD 3-Clause | Similar to MIT, with attribution | Commercial use with attribution | Django, Flask |
| No License | All rights reserved | None - viewers can only look | Private/proprietary work |
# Add MIT License (recommended for portfolios)
curl -o LICENSE https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt
# Update the LICENSE file with your information
sed -i '' 's/\[year\]/2024/g' LICENSE
sed -i '' 's/\[fullname\]/Your Name/g' LICENSE
# Commit the license
git add LICENSE
git commit -m "Add MIT License"
💡 💡 Pro Tip For portfolio projects, MIT or Apache 2.0 licenses are preferred. They show you understand open source while allowing companies to use your code.
Security configuration demonstrates professional awareness and protects your code and credentials.
Navigate to Settings -> Security
Enable Security Features:
Configure Branch Protection:
# Settings → Branches → Add rule
# Branch name pattern: main
# Protection settings:
- [x] Require pull request reviews before merging
- [x] Dismiss stale pull request approvals
- [x] Require status checks to pass
- [x] Require branches to be up to date
- [x] Include administrators
- [x] Restrict who can push to matching branches
Create .github/SECURITY.md:
# Security Policy
## Supported Versions
| Version | Supported |
| ------- | ------------------ |
| 1.x.x | ✅ |
| < 1.0 | ❌ |
## Reporting a Vulnerability
Please report security vulnerabilities to: security@yourdomain.com
You can expect:
- Acknowledgment within 48 hours
- Assessment within 1 week
- Resolution timeline within 2 weeks
Please do not disclose publicly until resolved.
# Never commit sensitive data
echo ".env" >> .gitignore
echo "*.key" >> .gitignore
echo "*.pem" >> .gitignore
echo "config/secrets.yml" >> .gitignore
# Use GitHub Secrets for CI/CD
# Settings → Secrets → Actions → New repository secret
⚠️ ⚠️ Security Alert Never commit API keys, passwords, or tokens. Use environment variables and GitHub Secrets for sensitive data.
Set up automated workflows to demonstrate DevOps awareness.
Create .github/workflows/ci.yml:
name: CI Pipeline
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x, 18.x, 20.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Run linter
run: npm run lint
- name: Build project
run: npm run build
- name: Upload coverage reports
uses: codecov/codecov-action@v3
with:
token: ${{ secrets.CODECOV_TOKEN }}
Enable automatic deployment for portfolio projects:
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install and Build
run: |
npm ci
npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
Add status badges to your README:
[](https://codecov.io/gh/username/repo)
Your GitHub profile is your professional portfolio. Optimize it for maximum impact.
Create a repository named exactly as your username, then add this template:
# Hello, I'm [Your Name] 👋
## Professional Summary
[2-3 sentences describing your expertise and current focus]
## 🛠️ Tech Stack
### Languages
### Frameworks & Tools
## 📈 GitHub Statistics
<a href="https://github.com/anuraghazra/github-readme-stats">
<img align="center" src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=minimal" />
</a>
<a href="https://github.com/anuraghazra/github-readme-stats">
<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=minimal" />
</a>
## 🚀 Featured Projects
### [Project Name](https://github.com/username/project)
Brief description of the project and its impact. Include key technologies used.
### [Another Project](https://github.com/username/project2)
Description highlighting the problem solved and your approach.
## 📫 Connect With Me
- LinkedIn: [linkedin.com/in/yourprofile](https://linkedin.com/in/yourprofile)
- Portfolio: [yourwebsite.com](https://yourwebsite.com)
- Email: professional@email.com
Pin Your Best Repositories:
Repository Topics: Add relevant topics to improve discoverability:
javascript, python, golangreact, nodejs, djangomachine-learning, web-development, devopsproduction-ready, portfolio-projectCreate a production-ready repository from scratch:
# 1. Create project directory
mkdir professional-api && cd professional-api
# 2. Initialize with professional structure
git init
npm init -y
# 3. Set up ESLint and Prettier
npm install --save-dev eslint prettier eslint-config-prettier
npx eslint --init
# 4. Create comprehensive .gitignore
curl -o .gitignore https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# 5. Add standard files
touch README.md LICENSE CONTRIBUTING.md
mkdir -p src tests docs .github/workflows
# 6. Create initial commit
git add .
git commit -m "feat: Initial project setup with linting and structure"
# 7. Create GitHub repository via CLI
gh repo create professional-api --public --source=. --remote=origin --push
# 1. Set up pre-commit hooks
npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
# 2. Configure lint-staged
echo '{
"*.js": ["eslint --fix", "prettier --write"],
"*.md": ["prettier --write"]
}' > .lintstagedrc.json
# 3. Add security scanning
npm audit
npm install --save-dev snyk
npx snyk test
# 4. Create .env.example
echo "NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/dbname" > .env.example
# 5. Commit security configurations
git add .
git commit -m "chore: Add security scanning and pre-commit hooks"
Create a complete GitHub Actions workflow:
# .github/workflows/complete-ci.yml
name: Complete CI/CD
on:
push:
branches: [ main, develop ]
pull_request:
types: [opened, synchronize, reopened]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0 # For SonarCloud
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linter
run: npm run lint
- name: Run tests with coverage
run: npm run test:coverage
- name: SonarCloud Scan
uses: SonarSource/sonarcloud-github-action@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
- name: Build
run: npm run build
- name: Upload artifacts
uses: actions/upload-artifact@v3
with:
name: build-artifacts
path: dist/
Each repository must include:
Create professional-github-setup.md documenting:
# Professional GitHub Setup Documentation
## Profile Configuration
- Username: [your-username]
- Profile URL: https://github.com/[your-username]
- Professional headline: [Your title/focus]
## Repository Showcase
1. **[Project Name]** - [Brief description]
- Technologies: [List]
- Live Demo: [URL if applicable]
- Key Features: [List]
## Security Measures Implemented
- [ ] SSH key authentication
- [ ] 2FA enabled
- [ ] Signed commits (GPG)
- [ ] Secret scanning enabled
- [ ] Dependabot configured
## CI/CD Pipelines
- [ ] Testing workflow
- [ ] Linting and formatting
- [ ] Security scanning
- [ ] Automated deployment
## Professional Metrics
- Repositories: [Count]
- Contributions: [This year]
- Languages: [Top 3]
- Most starred repo: [Name and count]
Create a GitHub Action that automatically updates your profile README:
# .github/workflows/update-readme.yml
name: Update README
on:
schedule:
- cron: '0 0 * * *' # Daily at midnight
workflow_dispatch:
jobs:
update-readme:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Generate README
run: |
node scripts/generate-readme.js
- name: Commit changes
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add README.md
git diff --quiet && git diff --staged --quiet || git commit -m "chore: Update README statistics"
git push
Deploy a dynamic portfolio using GitHub Pages:
// scripts/generate-portfolio.js
const fs = require('fs');
const { Octokit } = require('@octokit/rest');
const octokit = new Octokit({
auth: process.env.GITHUB_TOKEN
});
async function generatePortfolio() {
const { data: repos } = await octokit.repos.listForAuthenticatedUser({
sort: 'updated',
per_page: 100
});
const portfolio = repos
.filter(repo => !repo.fork && !repo.private)
.map(repo => ({
name: repo.name,
description: repo.description,
url: repo.html_url,
language: repo.language,
stars: repo.stargazers_count,
topics: repo.topics
}));
fs.writeFileSync('portfolio.json', JSON.stringify(portfolio, null, 2));
}
generatePortfolio();
Build a simple app that uses GitHub OAuth:
// server.js
const express = require('express');
const axios = require('axios');
const app = express();
app.get('/auth/github', (req, res) => {
const redirect_uri = 'http://localhost:3000/auth/github/callback';
const client_id = process.env.GITHUB_CLIENT_ID;
res.redirect(`https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}`);
});
app.get('/auth/github/callback', async (req, res) => {
const { code } = req.query;
const response = await axios.post('https://github.com/login/oauth/access_token', {
client_id: process.env.GITHUB_CLIENT_ID,
client_secret: process.env.GITHUB_CLIENT_SECRET,
code
}, {
headers: { Accept: 'application/json' }
});
// Use access token to fetch user data
const { access_token } = response.data;
const userResponse = await axios.get('https://api.github.com/user', {
headers: { Authorization: `token ${access_token}` }
});
res.json(userResponse.data);
});
SSH Authentication Failures
# Debug SSH connection
ssh -vT git@github.com
# Common fixes:
# 1. Ensure SSH agent is running
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/github_ed25519
# 2. Check key permissions
chmod 600 ~/.ssh/github_ed25519
# 3. Verify correct key in GitHub
ssh-keygen -lf ~/.ssh/github_ed25519.pub
Branch Protection Conflicts
# If you accidentally protect main and can't push:
# 1. Temporarily disable protection in Settings
# 2. Or use a pull request workflow:
git checkout -b fix/update
git push origin fix/update
# Then create PR through GitHub UI
GitHub Actions Failures
# Common debugging steps:
- name: Debug Information
run: |
echo "Node version: $(node --version)"
echo "NPM version: $(npm --version)"
echo "Current directory: $(pwd)"
echo "Files in directory: $(ls -la)"
Large File Issues
# If you accidentally committed a large file:
# 1. Remove from history
git filter-branch --force --index-filter \
"git rm --cached --ignore-unmatch path/to/large-file" \
--prune-empty --tag-name-filter cat -- --all
# 2. Use Git LFS for large files
git lfs track "*.psd"
git add .gitattributes
git commit -m "Configure Git LFS"
After completing this workshop:
Remember: Your GitHub profile is a living resume. Keep it professional, active, and showcase your best work. Quality over quantity always wins.
Workshop Completion: Submit your professional GitHub setup documentation to demonstrate mastery of industry-standard practices.