DEV Community

sidcode
sidcode

Posted on • Updated on

React + Next.js + tailwind Github pages

Step 1. Set Up Your Next.js Project

1-0. Initialize Your Next.js Project:

$ npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

1-1. had domain

$ cd my_project_directory
$ echo -e 'sidcode.me' > public/CNAME
$ cat public/CNAME         
sidcode.me
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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

export default config;
Enter fullscreen mode Exit fullscreen mode

1-3-1. autoprefixer install

 $ npm install autoprefixer --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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회성

Enter fullscreen mode Exit fullscreen mode

2-3. Deploy Your Pages: Run the following command to deploy your Pages to GitHub Pages:

$ npm run deploy-npm
Enter fullscreen mode Exit fullscreen mode

Like this!

Image description

Top comments (2)

Collapse
 
ali_raza_52ff666176c99648 profile image
Ali Raza

great

Collapse
 
mahesh_jangalagi_020ba855 profile image
mahesh jangalagi

great