david-phx / portfolio Goto Github PK

$ npm create vite@latest project-name -- --template react

$ cd project-name
$ npm install

export default defineConfig({
    ...
    base: '/project-name/',
    ...
})

$ npm run dev

$ npm run build
$ npm run preview

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    ...
}

$ npm install react-router-dom

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <BrowserRouter basename='/project-name/'>
            ...

name: Deploy to GitHub Pages

on:
  # Runs on pushes and pull requests to "main" branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allow to run manually from the Actions tab
  workflow_dispatch:

# Set permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

$ git init
$ git add --all
$ git commit -m "Initial commit"