DEV Community

sidcode
sidcode

Posted on • Edited on

3

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

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up