How do I put all of my html, css, and javascript files inside of one src folder for better organization?

[DylanDevelops]

Select Topic Area

Question

Body

I've been working on my website for over a year now, and recently, I realized how messy the root directory had become. I want to move all the src files into a `src' directory. When I tried, it didn't load those but only displayed my readme.

Is there a way to have all those files in a folder called src?

You can view the repository in question here: https://github.com/DylanDevelops/dylanravel.com

[seyLu]

Hi @DylanDevelops,

There is an npm package gh-pages that allows us to deploy to github pages programmatically.

After moving all your files under src/ directory, install gh-pages then add to your package.json:

npm i -D gh-pages

"scripts": { + "deploy": "gh-pages -d src",

Run the deploy script:

npm run deploy

This will create a gh-pages branch in your repo and put the stuff in your src/ directory to this branch. Then you'll have to configure in your repo settings to build and deploy from the gh-pages branch.

By this point, things should work as expected (albeit manual) and you can ignore the next step(s).

---

Butttttttttttt, there's always room for automation. We can leverage the power of GitHub actions to automate stuff. In .github/workflows/deploy.yaml:

name: Build & Deploy
run-name: Deploying ${{ github.repository }}

on:
  push:
    branches:
      - main

permissions:
  contents: write
  deployments: write
  pages: write

jobs:
  lint:
    name: Perform Build & Deploy
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: ["18"]

    steps:
      - name: Harden Runner
        uses: step-security/harden-runner@ea8b747819ff6d82907eb4018229f1a75c174697 # v2.6.1
        with:
          egress-policy: audit

      - name: Checkout repository
        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1

      - name: Set up Node ${{ matrix.node-version }}
        uses: actions/setup-node@5ef044f9d09786428e6e895be6be17937becee3a # v4.0.0
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"

      - name: Install Dependencies
        run: npm ci --prefer-offline

      - name: Build & Deploy
        run: |
          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npx gh-pages -d src -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

[DylanDevelops]

I tried doing your first steps and I'm getting this error:

[seyLu]

Error: The pattern in the 'src' property didn't match any files

Hmmm, there's nothing to deploy, 0 files/dirs under src/ directory.

Try moving your stuff to src/ directory first.

mv -iv *.{html,css,js} CNAME Assets/ favicon/ hack-the-spy/ src/

Or just drag and drop

Before running the deploy script.

npm run deploy

Check if there is a gh-pages branch created. If there is and it's not empty, then cool!

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬