PTENES
TRACK 6

🚀 Deploy & Portfolio

Git, GitHub, Pages, and portfolio: take your project from your computer to the world in minutes. Version control, free publishing, and strategies for keeping the project alive.

4
Modules
24
Topics
~3h
Duration
⚡
Intermediate
LOCAL git add commit push GITHUB repository branches deploy PAGES user .github.io 🌐 LIVE PORTFOLIO promote · improve · version FROM CODE TO THE WORLD git · github · pages · portfolio 💻 🐙 🚀

Learning path map

Detailed content

6.1 ~40 min

🌿 Essential git

Version control from scratch: init, commit, branches, and how to let Claude Code work with git for you.

What it is:

A distributed version control system that saves "snapshots" of your project over time, letting you browse the history and work in parallel.

Why learn:

Without git, you have no way to undo mistakes, collaborate, or publish. It's the foundation of all modern development — professional projects depend on it.

Key Concepts:

Repository (repo), commit (snapshot), HEAD (current position), working tree (files on disk), staging area (next commit).

What it is:

git init creates the repository, git add prepares files for commit, git commit -m "msg" saves the snapshot permanently.

Why learn:

These are the commands run dozens of times a day. Automating them with Claude Code is even more productive—it automatically generates descriptive commit messages.

Key Concepts:

Flow: modify → git add . → git commit -m "feat: descrição". Staged vs. unstaged. Atomic commits (one logical change per commit).

What it is:

git log shows all commits; git diff shows changes; git show displays details of a specific commit.

Why learn:

Understanding the history makes auditing, debugging, and reverting bugs possible. Knowing where the project was yesterday is valuable in any situation.

Key Concepts:

git log --oneline (summary), commit hash (SHA-1), git diff HEAD~1 (changes from the last commit), git status (current state).

What it is:

A branch is an independent line of development. git branch list, git checkout -b nome creates and switches, git merge joins.

Why learn:

Lets you experiment with features without risking the main code. Workflows such as feature branches and GitHub Flow rely on branches.

Key Concepts:

main/master (main branch), feature branch, merge, merge conflict, git stash (temporarily save changes).

What it is:

File .gitignore at the project root, lists file patterns that git should ignore — never track or send to GitHub.

Why learn:

Prevents credentials, passwords, and large files from leaking. Keeps the repository free of automatically generated files (node_modules, .env, __pycache__).

Key Concepts:

Glob patterns (*.log, dist/), comments with #, denial with !, global gitignore (~/.gitignore_global).

What it is:

Claude Code automatically runs git add/commit/push and generates messages in the Conventional Commits format (feat:, fix:, docs:) at the end of each task.

Why learn:

Reduces friction and makes descriptive messages effortless. The history is easy for anyone reviewing it later to understand.

Key Concepts:

Conventional Commits (tipo(escopo): descrição), --no-verify (bypass hooks), an imperative message ("add X," not "added X").

View Full
6.2 ~45 min

🐙 GitHub and repositories

Create repos, configure remotes, push, SSH vs. HTTPS, gh CLI, PRs, and collaboration — everything you need to work with GitHub for real.

What it is:

A GitHub repository is the remote (cloud) version of your local repo. You can create one through the web interface or via gh repo create.

Why learn:

A remote repository is a backup, a portfolio showcase, and a publishing point. Every professional project lives on GitHub.

Key Concepts:

Public vs. private, initial README, license (MIT, Apache), .gitignore template, fork vs. clone.

What it is:

git remote add origin URL connects your local repo to the remote one. git push -u origin main pushes commits and configures tracking.

Why learn:

It's the required step for syncing your work to the cloud — and the foundation for Pages, CI/CD, and collaboration.

Key Concepts:

origin (default remote), upstream, fetch vs pull, git push --force-with-lease (safe), tracking branch.

What it is:

SSH uses a public/private key pair to authenticate without entering a password. HTTPS uses a personal access token (PAT). SSH is recommended for daily use.

Why learn:

Without SSH configured, every push asks for credentials. With SSH, the workflow is seamless — essential for automation and Claude Code to operate without interruptions.

Key Concepts:

ssh-keygen -t ed25519, add public key to GitHub, ssh -T git@github.com (test), git credential helper (HTTPS password cache).

What it is:

gh is GitHub's official CLI: it creates repos, PRs, and issues, manages releases, and much more — all without opening the browser.

Why learn:

Claude Code uses gh extensively to create PRs, check status checks, and make releases. Understanding the commands makes it easier to audit and customize what Claude does.

Key Concepts:

gh auth login, gh repo create, gh pr create, gh issue list, gh release create.

What it is:

A PR is a proposed change: you develop in a separate branch and open a PR to review and merge into main. The standard process on any team.

Why learn:

PRs are the universal code review mechanism. Even when you work solo, the PR workflow requires a review before deployment—reducing bugs in production.

Key Concepts:

Base branch vs. head branch, draft PR, review (approve/request changes), merge strategies (squash, rebase, merge commit), PR template.

What it is:

README.md is the repository's home page on GitHub. Written in Markdown, it describes the project, how to install and use it, and how to contribute.

Why learn:

A good README doubles project engagement. Recruiters and contributors judge a project by its README before looking at any code.

Key Concepts:

Badges (shields.io), screenshots/GIFs, standard sections (install, usage, contributing), LICENSE, code of conduct.

View Full
6.3 ~40 min

🚀 GitHub Pages: Publish for Free

Enable GitHub Pages in minutes and put your project at usuario.github.io/repo/. Custom domain, cache, and verification that it's live.

What it is:

GitHub Pages serves static files (HTML/CSS/JS) directly from the repository as a public website. Free, with automatic HTTPS and a CDN.

Why learn:

Zero cost for portfolios, course projects, and demos. Ideal for projects you create with Claude Code—publishing takes one line of configuration.

Key Concepts:

Static vs. dynamic sites, GitHub's CDN (Fastly), free HTTPS (Let's Encrypt), 1GB repository limit, and 100GB/month bandwidth.

What it is:

Under Settings → Pages, choose the source: a specific branch (main or gh-pages) and folder (/ or /docs), or GitHub Actions for custom builds.

Why learn:

Setup takes 2 minutes through the interface. Using the gh CLI is even faster and easier to automate—it fits well into the Claude Code workflow.

Key Concepts:

Source branch, deployment source (legacy vs. Actions), dedicated gh-pages branch, /docs folder for projects with code + site in the same repo.

What it is:

Every activated repository generates the URL usuario.github.io/nome-do-repo/. The special repo usuario.github.io (without a slash) is in usuario.github.io.

Why learn:

It's the address you share in interviews, on social media, and on your resume. Memorable and professional, even without your own domain.

Key Concepts:

User site vs. project site, required index.html, customizable 404.html, trailing slash, case sensitivity.

What it is:

File CNAME at the repo root with your domain (meusite.com) + a DNS CNAME record pointing to usuario.github.io.

Why learn:

A custom domain builds credibility. Buying a domain costs ~R$50/year. GitHub Pages with a custom domain is still free to host.

Key Concepts:

CNAME record, A record (apex domain), www vs. apex, "Enforce HTTPS" on GitHub, DNS propagation (up to 48h), domain verification.

What it is:

Pages has a CDN cache, and deployment takes 1-10 minutes after the push. The browser also caches content. Force a hard refresh (Ctrl+Shift+R) and wait for the build to finish.

Why learn:

The most common frustration when getting started: "I pushed, but the site hasn’t changed." Understanding caching saves hours of unnecessary debugging.

Key Concepts:

Build queue, Actions logs, Cache-Control header, asset versioning (query string ?v=2), Service Worker invalidation.

What it is:

After the push, monitor the deploy in Actions (a tab on GitHub) or via gh run watch. The site goes live when the "pages build and deployment" workflow completes.

Why learn:

Knowing how to interpret deploy status avoids wondering, “Did it work?” Error logs in Actions show exactly what broke.

Key Concepts:

gh run list, gh run view, Actions workflow "pages", status badge (shields.io), monitoring with UptimeRobot.

View Full
6.4 ~35 min

📣 Improve and share

Deployment was the beginning, not the end. Iterate, version releases, build your portfolio, document, and keep the project alive. Course wrap-up.

What it is:

Iteration is the feedback → improvement → deployment cycle. Active projects have regular commits; dead projects stay at v1.0 forever.

Why learn:

The first version is never the best. Real users reveal what's missing. Claude Code speeds up every improvement cycle — from hours to minutes.

Key Concepts:

1–2 week sprints, issue tracker, public roadmap, changelog, hotfix vs. feature, SemVer (major.minor.patch).

What it is:

A Git tag marks a specific commit as a version. A GitHub Release is a public page with release notes, downloadable assets, and a formatted changelog.

Why learn:

Releases communicate progress to users and recruiters. They show that the project has a healthy life cycle and active maintenance.

Key Concepts:

git tag v1.0.0, gh release create v1.0.0, automatic release notes (GitHub generates them from PR history), pre-release vs stable.

What it is:

A portfolio is a public collection of projects that demonstrates your skills. It can be your GitHub profile, a dedicated Pages site, or both.

Why learn:

A portfolio practically replaces certificates: it shows what you actually do. With Claude Code, creating impressive projects is accessible to beginners.

Key Concepts:

GitHub profile README (user/user), pinned repos, contribution graph, personal site (user.github.io), featured projects with descriptions.

What it is:

Documentation covers: a README with installation and usage instructions, code comments for non-obvious parts, and a GitHub Wiki or CONTRIBUTING.md file.

Why learn:

Without documentation, even you won't understand your own project in 3 months. Claude Code can automatically generate initial documentation.

Key Concepts:

Well-structured README, CHANGELOG.md, ADR (Architecture Decision Records), Docusaurus for extensive docs, JSDoc/docstring comments.

What it is:

Sharing means posting the project in relevant communities (dev.to, Reddit r/programming, Twitter/X, LinkedIn) and asking real users for honest feedback.

Why learn:

Real feedback > assumptions. Users reveal bugs you’d never find on your own and features that improve the project’s direction.

Key Concepts:

Product Hunt, GitHub Discussions, Show HN (Hacker News), star count as a traction metric, issues as a structured feedback channel.

What it is:

A living project has regular commits, answered issues, updated dependencies, and a roadmap that evolves with feedback. It doesn’t need big sprints—just steady, small improvements.

Why learn:

Most projects die after the excitement of the first deploy. Staying consistent is what separates average portfolios from impressive ones.

Key Concepts:

Dependabot (automatic updates), contribution guidelines, Good First Issues (to attract contributors), milestone planning, "archive" when wrapping up.

View Full
←Track 5: Projects 🏆 Complete the course→