React + Next.js + tailwind Github pages

#react #nextjs #github #tailwindcss

Step 1. Set Up Your Next.js Project

1-0. Initialize Your Next.js Project:

$ npx create-next-app@latest

1-1. had domain

$ cd my_project_directory
$ echo -e 'sidcode.me' > public/CNAME
$ cat public/CNAME         
sidcode.me

1-2. Update next.config.js or next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  reactStrictMode: true,
  assetPrefix: '.',
};

export default nextConfig;

1-3. Update postcss.config.js or postcss.config.mjs

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

export default config;

1-3-1. autoprefixer install

 $ npm install autoprefixer --save-dev

1-4. Github

git init
git add .
git commit -m "Initial commit"
git remote add origin https://<id>:<token>@github.com/<username>/<repo>.git
git push -u origin master

Step 2: Deploy to GitHub Pages

2-1. Install gh-pages: Install the gh-pages package to help deploy your app:

$ npm install gh-pages --save-dev

2-2. Update package.json: Add the following scripts to your package.json:

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "build": "next build",
    "deploy": "touch out/.nojekyll && gh-pages -d out -t true",
    "deploy-npm": "npm run build && npm run deploy"
  },

//    "deploy": "gh-pages -d out -f" // one time force / 안될때 1회성