diff --git a/absolute-beginners/git-github-beginner/more-github/_category_.json b/absolute-beginners/git-github-beginner/more-github/_category_.json new file mode 100644 index 0000000..4ce7675 --- /dev/null +++ b/absolute-beginners/git-github-beginner/more-github/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "GitHub More Topics", + "position": 7, + "link": { + "type": "generated-index", + "title": "GitHub More Topics for Absolute Beginners", + "description": "Explore more GitHub topics for absolute beginners, including advanced features, best practices, and tips to enhance your GitHub experience. Learn about branching, pull requests, GitHub Actions, and more to take your GitHub skills to the next level." + } +} \ No newline at end of file diff --git a/absolute-beginners/git-github-beginner/more-github/github-actions.mdx b/absolute-beginners/git-github-beginner/more-github/github-actions.mdx new file mode 100644 index 0000000..66c202b --- /dev/null +++ b/absolute-beginners/git-github-beginner/more-github/github-actions.mdx @@ -0,0 +1,77 @@ +--- +title: "Introduction to GitHub Actions" +sidebar_label: "1. GitHub Actions" +sidebar_position: 1 +description: "Learn how to automate your software development workflows directly in your GitHub repository. From running tests to deploying your website, GitHub Actions has you covered." +tags: ["github", "automation", "ci/cd", "devops", "workflow"] +keywords: ["github actions", "automation", "ci/cd", "devops", "workflow", "yml", "events", "jobs", "actions"] +--- + +In a professional workflow, we don't want to manually run tests or deploy our website every time we make a change. We want a system that does it for us. + +**GitHub Actions** is an automation platform that allows you to create custom software development life cycle (SDLC) workflows directly in your GitHub repository. + +:::info What is GitHub Actions? +GitHub Actions is a powerful tool that lets you automate tasks like testing, building, and deploying your code whenever certain events happen in your repository. It's like having a robot assistant that takes care of the repetitive tasks for you. +::: + +## How it Works: The "Robot Assistant" + +Think of GitHub Actions as a **Robot Assistant** that follows a simple rule: +> **"When [This Event] happens, do [This Job]."** + +* **The Event:** Someone pushes code, opens a Pull Request, or even stars your repo. +* **The Job:** Run security scans, check for code errors, or deploy the site to a server. + +## The Core Concepts + +To master Actions at **CodeHarborHub**, you need to understand these four terms: + +1. **Workflows:** The automated process (stored in a `.yml` file). +2. **Events:** The "Trigger" that starts the workflow (e.g., `push`). +3. **Jobs:** A set of steps that execute on the same runner (a virtual computer). +4. **Actions:** Reusable building blocks (like a "Login to AWS" block or "Install Node.js" block). + +## Creating Your First Workflow + +GitHub Actions are defined in **YAML** files. You must place them in a specific folder in your project: `.github/workflows/`. + +```yaml title=".github/workflows/welcome.yml" +name: CodeHarborHub Welcome +on: [push] # The Trigger + +jobs: + greet-developer: + runs-on: ubuntu-latest # The Virtual Machine + steps: + - name: Say Hello + run: echo "Automation is running successfully for CodeHarborHub!" +``` + +## The CI/CD Pipeline + +GitHub Actions is most commonly used for **CI/CD**: + + * **Continuous Integration (CI):** Automatically building and testing code so that errors are caught immediately when a developer pushes a branch. + * **Continuous Deployment (CD):** Automatically "Pushing" the code to a live server (like Vercel, Netlify, or AWS) after the tests pass. + +## Why use Actions at CodeHarborHub? + +| Benefit | Description | +| :--- | :--- | +| **No More "Works on my machine"** | Tests run on a clean cloud computer every time. | +| **Speed** | Robots work 24/7. Your site deploys the second you merge a PR. | +| **Security** | Automatically scan your code for leaked passwords or vulnerable packages. | +| **Free for Open Source** | GitHub provides free minutes for public repositories\! | + +## Monitoring Your Actions + +Once you push a workflow file, you can watch it run in real-time: + +1. Go to your repository on GitHub. +2. Click the **Actions** tab. +3. Click on a specific "Workflow Run" to see the logs and status. + +:::tip +Don't reinvent the wheel! Visit the [GitHub Marketplace](https://github.com/marketplace?type=actions) to find thousands of pre-written Actions created by the community that you can drop into your own projects. +::: \ No newline at end of file diff --git a/absolute-beginners/git-github-beginner/more-github/github-cli.mdx b/absolute-beginners/git-github-beginner/more-github/github-cli.mdx new file mode 100644 index 0000000..309b95f --- /dev/null +++ b/absolute-beginners/git-github-beginner/more-github/github-cli.mdx @@ -0,0 +1,116 @@ +--- +title: "Installing and Using GitHub CLI" +sidebar_label: "2. GitHub CLI (gh)" +sidebar_position: 2 +description: "Learn how to install and use the GitHub CLI (gh) to manage your repositories, issues, and pull requests directly from the command line. This guide covers installation steps for Windows, macOS, and Linux, as well as essential commands to streamline your workflow." +tags: ["GitHub CLI", "gh", "Command Line", "GitHub Tools", "Developer Workflow"] +keywords: ["GitHub CLI", "gh", "Command Line Interface", "GitHub Tools", "Developer Workflow"] +--- + +While the GitHub website is beautiful and easy to use, professional developers often find it faster to perform tasks directly from the command line. The **GitHub CLI (`gh`)** is the official tool that brings GitHubโ€™s issues, pull requests, and other features to your terminal. + +At **CodeHarborHub**, we use `gh` to streamline our workflow and keep our focus on the code. + +:::tip +Don't worry if you're new to the command line! The GitHub CLI is designed to be user-friendly, and this guide will help you get started step by step. By the end, you'll be able to manage your GitHub projects without ever leaving your terminal. +::: + +## Why use the CLI? + +1. **Context Switching:** You don't have to leave VS Code or your terminal to open a Pull Request. +2. **Automation:** You can write scripts to create repositories or check status automatically. +3. **Speed:** Most common actions (like cloning a repo or checking a PR) are 3x faster with a single command. + +## Installation + + + + +Open PowerShell or Command Prompt and run: + +```bash +winget install --id GitHub.cli +``` + + + + +Use Homebrew: + +```bash +brew install gh +``` + + + + +For Debian/Ubuntu: + +```bash +type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y) +curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg +sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg +echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null +sudo apt update +sudo apt install gh -y +``` + + + + +## Getting Started: Authentication + +Once installed, you need to link the CLI to your GitHub account. Run: + +```bash +gh auth login +``` + +Follow the interactive prompts: + + * Select **GitHub.com** (unless you're using GitHub Enterprise). + * Choose **HTTPS** or **SSH**. + * Select **Login with a web browser** (this will open a page to authorize the app). + +## Essential Commands for Daily Work + +| Task | Command | Description | +| :--- | :--- | :--- | +| **Repo Status** | `gh repo view` | Shows the README and basic info for the current repo. | +| **List PRs** | `gh pr list` | Lists all open Pull Requests in the repository. | +| **Check out PR** | `gh pr checkout ` | Downloads a teammate's PR to your PC to test it. | +| **Create PR** | `gh pr create` | Opens a new Pull Request for your current branch. | +| **View Issues** | `gh issue list` | Shows all open bugs or tasks. | + +## Common Workflow Example + +Imagine you want to start a new project for **CodeHarborHub**. Instead of clicking through the website: + +1. **Create a new repo:** + ```bash + gh repo create my-new-project --public --clone + ``` +2. **Change into the folder:** + ```bash + cd my-new-project + ``` +3. **Open in VS Code:** + ```bash + code . + ``` + +*You just set up a full project in 5 seconds!* + +## The "Status" View + +One of the best features of `gh` is the **Dashboard** view. Run this to see everything happening with your work: + +```bash +gh status +``` + +It shows your relevant Pull Requests, their review status, and if your **GitHub Actions** tests passed or failed. + +:::tip +You can use the `--web` flag with almost any command (e.g., `gh pr view --web`) to instantly open that specific page in your browser if you need to see the full UI. +::: \ No newline at end of file diff --git a/absolute-beginners/git-github-beginner/more-github/index.mdx b/absolute-beginners/git-github-beginner/more-github/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/git-github-beginner/more-github/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/git-github-beginner/more-github/markdown.mdx b/absolute-beginners/git-github-beginner/more-github/markdown.mdx new file mode 100644 index 0000000..f45c079 --- /dev/null +++ b/absolute-beginners/git-github-beginner/more-github/markdown.mdx @@ -0,0 +1,204 @@ +--- +title: "Markdown for GitHub Documentation" +sidebar_label: 3. Markdown +sidebar_position: 3 +description: "Learn the syntax and best practices for writing professional documentation on GitHub. This guide covers headings, emphasis, lists, code formatting, links, images, and more to help you create clear and effective README files, issue descriptions, and pull request comments." +tags: ["Markdown", "Documentation", "GitHub README", "Developer Communication", "Best Practices"] +keywords: ["Markdown", "Documentation", "GitHub README", "Developer Communication", "Best Practices"] +--- + +In the developer world, your code is only as good as your documentation. **Markdown** is a lightweight markup language that allows you to add formatting (headings, lists, links, images) using plain text. + +At **CodeHarborHub**, we use Markdown for everything: README files, Issue descriptions, Pull Request comments, and even these tutorial pages! + +:::tip +Don't worry if you've never heard of Markdown before! It's designed to be simple and intuitive. This guide will cover all the basics you need to know to create professional documentation that stands out on GitHub. +::: + +## 1. Structure: Headings + +Headings create a hierarchy in your document, making it "scannable." Use the `#` symbol followed by a space. + +```markdown title="Heading Syntax" +# H1: Project Title (Only use one per file) +## H2: Major Sections (About, Installation) +### H3: Sub-sections +#### H4: Minor Details +``` + +It's best practice to use only one H1 per file (usually the project title) and then use H2s and H3s to organize your content. This helps readers quickly find the information they need. + +## 2. Emphasis: Bold, Italic, and Strikethrough + +Highlighting key terms helps learners focus on what's important. + +| Result | Syntax | +| :--- | :--- | +| **Bold Text** | `**Bold Text**` | +| *Italic Text* | `*Italic Text*` | +| ~~Strikethrough Text~~ | `~~Strikethrough Text~~` | +| ***Bold & Italic (Combined) Text*** | `***Bold & Italic (Combined) Text***` | + +## 3. Lists: Organized Thoughts + +### Unordered Lists + +Use an asterisk `*`, hyphen `-`, or plus `+`. + + + + +**Code Example:** + +```markdown +* Item 1 +* Item 2 +``` + +**Preview:** + +* Item 1 +* Item 2 + + + + +**Code Example:** + +```markdown +- Item 1 +- Item 2 +``` + +**Preview:** + +- Item 1 +- Item 2 + + + + +**Code Example:** + +```markdown ++ Item 1 ++ Item 2 +``` + +**Preview:** + ++ Item 1 ++ Item 2 + + + + +### Ordered Lists + +Use numbers followed by a period. + +**Code Example:** + +```markdown +1. First step +2. Second step +``` + +**Preview:** + +1. First step +2. Second step + +### Task Lists (Checklists) + +Perfect for tracking project progress at **CodeHarborHub**. + +**Code Example:** + +```markdown +- [x] Create repository +- [ ] Write documentation +- [ ] Push to main +``` + +**Preview:** + +- [x] Create repository +- [ ] Write documentation +- [ ] Push to main + +In this example, the first task is completed (checked), while the others are still pending. + +## 4. Code: Inline and Blocks + +This is the most important feature for developers. + +### Inline Code + +Use a single backtick (`` ` ``) to mention a variable or command like `git status` inside a sentence. + +### Code Blocks + +Use triple backticks (` ``` `) to create a standalone block. You can add the language name for syntax highlighting. + +**Example:** + +````md +```javascript +function greet() { + console.log("Welcome to CodeHarborHub!"); +} +``` +```` + +**Preview:** + +```javascript +function greet() { + console.log("Welcome to CodeHarborHub!"); +} +``` + +This will render a nicely formatted JavaScript code block, making it easier for readers to understand and copy your code. + +## 5. Links and Images + +Markdown makes it easy to connect resources. + +**Links:** +`[Clickable Text](https://codeharborhub.github.io)` + +**Images:** +`![Alt text for screen readers](https://codeharborhub.github.io/img/hero-img.png)` + +## 6. Blockquotes and Horizontal Rules + +**Blockquotes** are great for tips or warnings: + +> "Open Source is about collaboration, not just code." โ€” CodeHarborHub + +**Horizontal Rules** create visual breaks: +Use three dashes: `---` + +## 7. Tables: Comparing Data + +Tables are perfect for listing project dependencies or comparison charts. + +```markdown +| Feature | Basic | Pro | +| :--- | :--- | :--- | +| Storage | 1GB | Unlimited | +| Support | Email | 24/7 Live | +``` + +## Best Practices for CodeHarborHub + +1. **Use H1 for Titles Only:** Use only one `#` at the top of your file. +2. **Meaningful Alt-Text:** When adding images, describe the image in the `[]` so visually impaired developers can understand your docs. +3. **Preview Before Committing:** In VS Code, press `Ctrl + Shift + V` to see how your Markdown looks before you push it to GitHub. + +:::tip +GitHub supports "Emoji Codes"! You can add personality to your READMEs by typing things like `:rocket:` (๐Ÿš€), `:white_check_mark:` (โœ…), or `:tada:` (๐ŸŽ‰). +::: + +Now that you know the basics of Markdown, you can create professional documentation that not only looks great but also helps other developers understand and use your projects effectively. \ No newline at end of file