Deploying Gatsby site to GitHub Pages

gatsby-config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  pathPrefix: '/Portfolio',
   plugins: [
     `gatsby-plugin-sass`,
     `gatsby-plugin-react-helmet`,
@@ -29,7 +30,7 @@ module.exports = {
         background_color: `#fff`,
         theme_color: `#02aab0`,
         display: `standalone`,
-        icon: 'src/images/favicon.png',
+        icon: 'src/images/logos/cpp-logo.png',
       },
     },
   ],

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {
+    "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
@@ -49,6 +50,7 @@
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "gatsby-plugin-image": "^3.12.3",
+    "gh-pages": "^6.1.1",
     "lint-staged": "^10.2.11",
     "prettier": "^2.0.5"
   },

src/components/About/About.jsx

@@ -10,8 +10,8 @@ class About extends React.Component {
 
     // Initial state
     this.state = {
-      isDesktop: window.innerWidth > 869,
-      isMobile: window.innerWidth <= 869,
+      isDesktop: typeof window !== 'undefined' ? window.innerWidth > 869 : false,
+      isMobile: false,
     };
 
     // Variants for desktop (side fade)
@@ -28,7 +28,10 @@ class About extends React.Component {
   }
 
   getAnimationVariants() {
-    return window.matchMedia('(pointer: coarse)').matches;
+    if (typeof window !== 'undefined') {
+      return window.matchMedia('(pointer: coarse)').matches;
+    }
+    return false;
   }
 
   componentDidMount() {

src/components/Footer/Footer.jsx

@@ -7,7 +7,7 @@ import GithubButtons from './GithubButtons';
 const Footer = () => {
   const { footer } = useContext(PortfolioContext);
   const { networks } = footer;
-  const isMobile = window.matchMedia('(pointer: coarse)').matches;
+  const isMobile = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 
   return (
     <footer className="footer navbar-static-bottom">

src/components/Hero/Hero.jsx

@@ -12,17 +12,10 @@ import {
 class Header extends React.Component {
   constructor(props) {
     super(props);
-    if (window.innerWidth > 869) {
-      this.state = {
-        isDesktop: true,
-        isMobile: false,
-      };
-    } else {
-      this.state = {
-        isMobile: true,
-        isDesktop: false,
-      };
-    }
+    this.state = {
+      isDesktop: typeof window !== 'undefined' ? window.innerWidth > 869 : false,
+      isMobile: false,
+    };
   }
 
   componentDidMount() {
@@ -40,7 +33,8 @@ class Header extends React.Component {
       cta: "Let's talk ?",
     };
     const { isDesktop } = this.state;
-    const isMobile = window.matchMedia('(pointer: coarse)').matches;
+    const isMobile =
+      typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 
     // Variants for desktop (left fade)
     const desktopVariants = {

src/components/Projects/Projects.jsx

@@ -92,7 +92,7 @@ const CustomArrow = ({ direction, onClick }) => {
 };
 const carouselProps = {
   showArrows: true,
-  autoPlay: false,
+  autoPlay: true,
   infiniteLoop: true,
   showStatus: false,
   showIndicators: false,