rozsazoltan/#-GitHub-Pages-Help.md

## #-GitHub-Pages-Help.md

      
    Raw
  

              #-GitHub-Pages-Help.md
            
          
Github Pages Help

Minden kérés átirányítása az index.html fájlra

Ismertetés: Vue/React app statikus meghívás - 404 error

Ha nem statikus html oldalakban gondolkozol, hanem valamilyen JavaScript keretrendszerrel készített applikációt szeretnél publikálni a Github Pages felületén, akkor bizonyára számodra is felmerült a kérdés: Az applikációba beépített Router-ben deffiniált útvonalak statikus meghívásakor, miért kapsz 404-es hibakódot.
Példa

Az applikációd két oldallal rendelkezik:

Főoldal, ami a https://username.github.io/ linken érhető el (ahol az index.html található).
Bemutatkozó oldal, ami a https://username.github.io/about linken érhető el (azonban a repository-dban nem létezik about mappa, így nem talál index.html-t a github, ezért hibára fut).

Megoldás a problémára

Nincs lehetőség .htaccess fájl elhelyezésére. (Egy szerveren mindenféleképpen ez lenne a legjobb megoldás.)
A Github Pages engedélyezi a hiba oldalak deffiniálását, azok nézeteinek személyre szabását, így a 404 error oldalét is.
404.html

---
permalink: /404.html
---

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cím</title>
	
  <script>
    // Függvény a projekted megtalálásához
    const findProject = () => {
      // Aktuális link lekérdezése: https://username.github.io/about
      const url = window.location.href;
      // Domain deklarálása
      const domain = 'https://username.github.io';
      // Repositoryban tárolt applikációk (több esetén mappa neveket kell felsorolni, pld. ['portfolio', 'todoapp'])
      const folders = [];

      // Ha több projekt van a repositoryban (és/vagy 1 project ami almappában található)
      if (folders.length > 0) {
        for (const folder of folders) {
          // Jelenlegi projekt mappája
          const current = `${domain}/${folder}`;
          // Ha a meghívott a link a jelenlegi projekthez kapcsolódik, oda irányítjuk a felhasználót
          if (url.startsWith(current)) {
            location.href = `${current}/index.html?${url.replace(`${current}/`, '')}`;
            return;
          }
        }

        // Ha egyik sem egyezik meg a meghívott linkkel, akkor a legelső projekhez irányítjuk a felhasználót
        location.href = `${domain}/${folders[0]}`;
      }
      
      // Ha csak 1 projekt van a repositoryban (almappa nélkül), oda irányítjuk a felhasználót
      // Példa: https://username.github.io/about meghívása esetén --> https://username.github.io/index.html?about kerül meghívásra
      location.href = `${domain}/index.html?${url.replace(`${current}/`, '')}`;
    };
    
    // Automatikus átirányításhoz meghívjuk a függvényünket
    findProject();
  </script>
</head>
<body>
  <!-- Ha mégsem sikerült valamilyen oknál fogva 1 átirányítás sem, úgy megjelenítünk egy kevés információt a felhasználónak -->
  <div id="prod">
    <div>username.github.io</div>
    <hr>
    <div>Engedélyezze a JavaScript használatát!</div>
    <hr>
    <a href="https://username.github.io"><button>Tovább az oldalra</button></a>
  </div>
</body>
</html>

  
## Vue-Help-remove-index-html-from-url.js
/**
 * Vue segítség
 * - index.html eltávolítása az URL címből
 */

// Vue-Router használata esetén
import { useRouter } from 'vue-router'

// URL cím ellenőrzése
// - a függvény elhelyezhető az App.vue-ba ahol "onBeforeMount" esemény lefutásakor kell meghívni
const checkUrl = () => {
  // Kapott útvonal értelmezése - pld. /index.html?about --> /about
  const base_folder = '' // vagy a mappa neve, amiben a projekt található, pld.: 'almappa'
  const path = ((url.match(new RegExp(`\\b.github.io\/${base_folder}(.*)$`, 'i')) ?? [])[1] ?? '')

  // Jelenlegi cím meghatározása
  // index.html és ? eltávolítása (külön-külön fontos!)
  const route = path.replace('index.html', '').replace('?', '')

  // Ha a jelenlegi cím hosszabb mint 1 karakter, tehát nem '/'
  if (route.length > 1) {
    // Átírjuk a böngésző fejlécében az URL címet, de továbbra is a meghívott index.html fog futni (így szebb URL címet érünk el)
    useRouter().push(route)
  }
}