# How to Organize Folders Inside a GitHub Repository - Tool: GitHub - Difficulty: Beginner - Time required: 5 minutes - Compatibility: Any GitHub account (Free, Pro, Team, Enterprise) — works in all modern browsers - Last updated: March 2026 ## TL;DR GitHub does not have a "create folder" button, but you can create folders using a simple trick: click Add file, then Create new file, and type a folder name followed by a slash (/) in the filename field. GitHub instantly creates the folder. You can nest folders by typing multiple slashes, like src/components/Button.tsx. This works entirely in the browser — no terminal needed. ## The Slash Trick — Creating Folders Directly on GitHub GitHub does not store empty folders. In Git, folders only exist if they contain at least one file. That is why there is no "create folder" button on the GitHub website. Instead, you create a folder by creating a file inside it — and GitHub provides a clever shortcut to make this easy. When you type a slash (/) in the filename field, GitHub splits the text: everything before the slash becomes a folder name, and you keep typing the rest of the filename. This is often called the "slash trick" and it works for creating deeply nested structures in one step. For example, typing "src/components/ui/Button.tsx" creates three nested folders and a file. Understanding folder organization is especially important if you are connecting your repo to AI tools like Cursor or Lovable, which expect specific folder structures (like src/components/ for React projects). ## Before you start - A free GitHub account (sign up at github.com) - A repository where you have write access - A plan for how you want to organize your project files ## Step-by-step guide ### 1. Open your repository and click Create new file Go to your repository on github.com. Click the green "Add file" button near the top-right of the file list. Select "Create new file" from the dropdown menu. GitHub opens a new page with an empty filename field at the top and an empty editor below it. **Expected result:** You see an empty filename field with a blinking cursor and an empty code editor below it. ### 2. Type your folder name followed by a slash In the filename field, type the name of the folder you want to create, then type a forward slash (/). Watch what happens: GitHub immediately converts the text before the slash into a folder label in the breadcrumb path above the filename field. The filename field is now empty again, ready for you to type the next part. For example, type "docs/" and you see the breadcrumb change to "your-repo / docs / (filename field)." **Expected result:** The breadcrumb path shows your new folder(s) and the filename field is ready for the file name. ### 3. Add a file inside the new folder Every folder needs at least one file. Type a filename like "README.md" or ".gitkeep" in the filename field. In the editor below, add some content. For a README.md, type a heading like "# Components" or a brief description of what this folder will contain. A .gitkeep file can be left empty — it is a convention used to track otherwise-empty folders in Git. **Expected result:** You have a complete file path showing in the breadcrumb (e.g., your-repo / docs / README.md) with content in the editor. ### 4. Commit the new folder and file Click the green "Commit changes..." button in the top-right. In the dialog, write a commit message like "Add docs folder with README" or "Create component folder structure." Make sure "Commit directly to the main branch" is selected (or create a branch if you prefer). Click "Commit changes." **Expected result:** GitHub creates the folder and file. You are redirected to the new file inside the new folder. ### 5. Move existing files into folders using github.dev (optional) If you have files at the repo root that should be in a folder, press the period key (.) on your repo page to open github.dev. In the file explorer sidebar, right-click a file and select "Cut." Right-click the target folder and select "Paste." Or simply drag files between folders in the sidebar. When finished, click the Source Control icon in the left sidebar, type a commit message, and click the checkmark to commit your moves. **Expected result:** Files are moved to their new folder locations in a single commit. ## Complete code example File: `README.md` ```markdown # Project Structure This repository follows a standard web project layout: ``` / ├── src/ # Source code │ ├── components/ # Reusable UI components │ │ └── ui/ # Base design system components │ ├── pages/ # Page-level components │ ├── hooks/ # Custom React hooks │ ├── utils/ # Helper functions │ └── config/ # Configuration files ├── public/ # Static assets served as-is │ └── images/ # Image files ├── docs/ # Documentation and specs ├── design/ # Design files and mockups └── supabase/ # Supabase configuration └── functions/ # Edge Functions ``` ## Conventions - Use lowercase folder names with hyphens - Each folder has a README.md explaining its purpose - Code folders mirror the structure expected by the framework ``` ## Common mistakes - **Trying to create an empty folder without any file inside it** — undefined Fix: Git does not track empty folders. Always create at least one file inside the folder — use .gitkeep or README.md as a placeholder. - **Using spaces or special characters in folder names** — undefined Fix: Stick to lowercase letters, numbers, and hyphens. Spaces in folder names cause issues with many tools and frameworks. - **Creating a deeply nested structure that is hard to navigate** — undefined Fix: Keep nesting to 3-4 levels maximum. Flat structures are easier to navigate, especially for non-technical team members. - **Moving files without updating import paths in code** — undefined Fix: If you move a code file, search for any lines that import it (using github.dev search with Ctrl+Shift+F) and update the paths to match the new location. ## Best practices - Use lowercase folder names with hyphens (e.g., my-components, not MyComponents or My Components). - Add a README.md inside each major folder explaining what it contains. - Follow the folder conventions of your framework (src/components/ for React, pages/ for Next.js). - Keep the root level of your repo clean — most files should live inside folders. - Limit folder nesting to 3-4 levels to keep paths manageable. - Use .gitkeep files to preserve empty folders that will be filled later. - Plan your folder structure before you start building — reorganizing later is more work. ## Frequently asked questions ### Can I create a folder without the slash trick? The slash trick is the only way to create folders through the GitHub web interface. You can also use github.dev (press the period key) which has a right-click menu with a "New Folder" option in the file explorer sidebar. ### What happens if I delete the only file in a folder? The folder disappears. Git does not track empty folders, so if you delete the last file in a folder, the folder is removed from the repository. To keep it, add a .gitkeep file. ### Can I rename a folder on GitHub? There is no direct rename option. The easiest approach is to use github.dev (press the period key), then drag files from the old folder to a new folder with the desired name, and delete the old folder's files. ### Does folder structure matter for AI tools like Lovable or V0? Yes. Lovable expects src/components/, src/pages/, and supabase/functions/ folders. V0 generates Next.js projects with app/ and components/ folders. Using the correct structure helps these tools understand and modify your code. ### Can I upload a folder from my computer to GitHub? Yes. When you drag a folder from your file explorer into the GitHub upload zone, it preserves the folder structure and uploads all contained files. ### Can RapidDev help me restructure my GitHub repository? Yes. RapidDev helps non-technical founders organize their repositories with the correct folder structure for their framework, set up proper conventions, and ensure compatibility with AI tools like Lovable and Cursor. --- Source: https://www.rapidevelopers.com/github-for-non-tech/how-to-organize-folders-inside-a-github-repo © RapidDev — https://www.rapidevelopers.com/github-for-non-tech/how-to-organize-folders-inside-a-github-repo