본문 바로가기
    개발/기타

    githubpage 배포시 설정 (새로고침, url)

    by 지미의 생각 2023. 7. 4.

    publc에 404.html 파일 추가

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Single Page Apps for GitHub Pages</title>
      <script type="text/javascript">
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini,  licensed under the MIT License
        //  ---------------------------------------------- ------------------------
        // This script takes the current url and  converts the path and query
        // string into just a query string, and then  redirects the browser
        // to the new url with only a query string  and hash fragment,
        // e.g. http://www.foo.tld/one/two?a=b& c=d#qwe, becomes
        // http://www.foo.tld/?p=/one/two&  q=a=b~and~c=d#qwe
        // Note: this 404.html file must be at least  512 bytes for it to work
        // with Internet Explorer (it is currently >  512 bytes)
    
        // If you're creating a Project Pages site  and NOT using a custom domain,
        // then set segmentCount to 1 (enterprise   users may need to set it to > 1).
        // This way the code will only replace the  route part of the path, and not
        // the real directory in which the app  resides, for example:
        //  https://username.github.io/repo-name/one/two?  a=b&c=d#qwe becomes
        // https://username.github.io/repo-name/? p=/one/two&q=a=b~and~c=d#qwe
        // Otherwise, leave segmentCount as 0.
        var segmentCount = 1;
    
        var l = window.location;
        l.replace(
          l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
          l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
          l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
          l.hash
        );
    
      </script>
    </head>
    
    <body>
    </body>
    
    </html>

    index.html 에 아래 코드 추가

    <script src="https://accounts.google.com/gsi/client" async defer></script>
    
    <script type="text/javascript">
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // This script checks to see if a redirect is present in the query string
        // and converts it back into the correct url and adds it to the
        // browser's history using window.history.replaceState(...),
        // which won't cause the browser to attempt to load the new url.
        // When the single page app is loaded further down in this file,
        // the correct url will be waiting in the browser's history for
        // the single page app to route accordingly.
        (function (l) {
          if (l.search) {
            var q = {};
            l.search.slice(1).split('&').forEach(function (v) {
              var a = v.split('=');
              q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
            });
            if (q.p !== undefined) {
              window.history.replaceState(null, null,
                l.pathname.slice(0, -1) + (q.p || '') +
                (q.q ? ('?' + q.q) : '') +
                l.hash
              );
            }
          }
        }(window.location))
      </script>

    index.js에 BrowerRouter 추가

    <BrowserRouter basename={isDev ? "/" : "/developer-talks-frontend/"}> </BrowserRouter>

    package.json 수정

    "deploy": "env-cmd -f .env.production react-scripts build && gh-pages -d build",

    댓글