برنامه نویسی

صفحات React + Next.js + tailwind Github

مرحله 1. پروژه Next.js خود را راه اندازی کنید

1-0. پروژه Next.js خود را راه اندازی کنید:

$ npx create-next-app@latest
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1-1. دامنه داشت

$ cd my_project_directory
$ echo -e 'sidcode.me' > public/CNAME
$ cat public/CNAME         
sidcode.me
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1-2. به روز رسانی next.config.js یا next.config.mjs

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

export default nextConfig;
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1-3. به روز رسانی postcss.config.js یا postcss.config.mjs

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

export default config;
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1-3-1. نصب خودکار پیشوند

 $ npm install autoprefixer --save-dev
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1-4. Github

git init
git add .
git commit -m "Initial commit"
git remote add origin https://id>:@github.com//.git
git push -u origin master
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: استقرار در صفحات GitHub

2-1. نصب gh-pages: را نصب کنید gh-pages بسته برای کمک به استقرار برنامه شما:

$ npm install --save-dev gh-pages
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2-2. به روز رسانی package.json: اسکریپت های زیر را به خود اضافه کنید 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회성

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2-3. برنامه خود را مستقر کنید: دستور زیر را برای استقرار برنامه خود در صفحات GitHub اجرا کنید:

$ npm run deploy-npm
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثل این!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا