added gh pages deploy actions

osharper · Feb 3, 2024 · 025df76 · 025df76
1 parent 61ec869
commit 025df76
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 4 deletions.
diff --git a/.github/workflows/deploy-action.yml b/.github/workflows/deploy-action.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy Vite+Vue to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions 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:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { initParticlesEngine } from "@tsparticles/solid/src/index";
 
 import styles from './App.module.css';
 import particlesConfig from './particles-config.json';
+import photoUrl from './assets/me.jpg';
 
 const App = () => {
     const [init, setInit] = createSignal(false);
@@ -39,11 +40,11 @@ const App = () => {
                 />
             )}
             <div class={`${styles.content} container mx-auto px-4 flex flex-col items-center max-w-7xl`}>
-                <nav class="font-bold py-4 code text-xs bg-white w-full text-center border border-slate-200">
-                    Hello world!
-                </nav>
+                <header class="font-bold py-4 text-xs bg-white w-full text-center border border-slate-200">
+                    <code>{`> Hello world! _`}</code>
+                </header>
                 <figure class="flex my-8 bg-white w-full px-4 py-2 border border-slate-200">
-                    <img class="w-32 h-32 rounded-full ml-auto mr-4 border-4 border-slate-300" src="/src/assets/me.jpg" alt="Oleg Dolotov" />
+                    <img class="w-32 h-32 rounded-full ml-auto mr-4 border-4 border-slate-300" src={photoUrl} alt="Oleg Dolotov" />
                     <figcaption class="text-lg mr-auto ml-4 py-4">
                         <h1 class="text-3xl">Oleg Dolotov</h1>
                         <h2 class="mt-4 text-2xl">Fullstack web developer with {yearsOfExperience} years of experience</h2>