ساختن یک وبلاگ مدرن با Next.JS ، MDX و Tailwind CSS

ek3nk4r 2025-03-02

0 5 خواندن این مطلب 22 دقیقه زمان میبرد

ساختن یک وبلاگ مدرن با Next.JS ، MDX و Tailwind CSS

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

چرا وقتی می توانید از ابزارهایی استفاده کنید که وبلاگ نویسی را صاف و سرگرم کننده می کند ، استرس نسبت به تنظیمات پیچیده است؟ Next.jsبا MDXوت Tailwind CSS یک تیم رویایی برای ساختن یک وبلاگ هستند که هم در همان زمان قدرتمند و هم شیک است. Next.JS با استفاده از پس زمینه و مسیریابی ، MDX به شما امکان می دهد پست های پویا و تعاملی ایجاد کنید ، و Tailwind CSS یک سیستم طراحی تمیز و قابل تنظیم به شما می دهد.

با هم ، آنها به شما امکان می دهند ضمن نگه داشتن سریع ، انعطاف پذیر و بصری وبلاگ ، روی ایجاد محتوا تمرکز کنید. به علاوه ، ویژگی هایی مانند چاپ نگاری وت سبک/تاریک گزینه های حالت فقط خوب نیستند-آنها وبلاگ شما را جذاب تر و کاربر پسند تر می کنند. این که آیا شما تازه شروع به کار کرده اید یا قصد رشد را دارید ، این پشته شما را پوشانده است. آماده شروع کار هستید؟ بیایید چیزی عالی بسازیم.

فهرست مطالب

1. چرا این پشته فناوری؟

انتخاب ابزارهای مناسب برای ساختن یک وبلاگ عالی بسیار مهم است. دسته کوچک موسیقی جاز بعد. jsبا MDXوت Tailwind CSS تنظیم صاف و با کارایی بالا و انعطاف پذیر را ارائه می دهد. در اینجا به همین دلیل کار می کند:

جدید next.js: ستون فقرات وبلاگ شما

بعد. js توسعه وب را با رندر سمت سرور (SSR) وت تولید سایت استاتیک (SSG)، اطمینان از زمان بار سریع و سئو بهتر. مسیریابی مبتنی بر پرونده آن باعث می شود سازمان محتوا به نسیم و بهینه سازی های داخلی به شما امکان می دهد تا روی محتوا تمرکز کنید ، نه عملکرد.

جدید MDX: جایی که محتوا با تعامل روبرو می شود

MDX با این امکان که به شما اجازه می دهد مؤلفه های React را مستقیماً در پست ها قرار دهید ، علامت گذاری را افزایش می دهد. نمودارهای تعاملی ، دکمه ها یا عناصر سفارشی را بدون زحمت اضافه کنید و وبلاگ خود را هم آموزنده و هم جذاب کنید.

جدید Tailwind CSS: طراحی بدون محدودیت

Tailwind CSS از یک روش کاربردی اول استفاده می کند و طرح های سریع و زیبا را قادر می سازد. عناصر سبک به طور مستقیم در نشانه گذاری شما – خواه تایپوگرافی تمیز یا حالت تاریک باشد. مضمون آن وبلاگ شما را ثابت و منحصر به فرد خود نگه می دارد.

جدید روی محتوا تمرکز کنید ، نه پیچیدگی

این پشته به شما امکان می دهد تا روی محتوا تمرکز کنید. Next.JS عملکرد را کنترل می کند ، MDX پست های پویا را امکان پذیر می کند ، و Tailwind یک طراحی جلا را تضمین می کند. با هم ، آنها یک وبلاگ سریع ، انعطاف پذیر و ضد آینده ایجاد می کنند.

2 تنظیم محیط توسعه خود

قبل از غواصی به قسمت مهیج ساخت وبلاگ خود ، اطمینان حاصل کنیم که محیط توسعه شما آماده است. در این بخش شما را از طریق تنظیم ابزارها و وابستگی های بنیادی مورد نیاز برای شروع پروژه خود راهنمایی می کند. نگران نباشید – راحت تر از آن است که به نظر برسد!

مرحله 1: node.js و یک مدیر بسته بندی را نصب کنید

برای شروع ، شما نیاز دارید node.js، که شامل می شود npm (مدیر بسته گره) به طور پیش فرض. از طرف دیگر ، می توانید استفاده کنید جنجال یا PNPM اگر یک مدیر بسته سریعتر یا کارآمدتر را ترجیح می دهید.

node.js را نصب کنید: به وب سایت رسمی Node.js بروید و آخرین نسخه پایدار را بارگیری کنید. در حین نصب ، آن را اطمینان حاصل کنید npm همچنین نصب شده است.
اختیاری: اگر ترجیح می دهید از نخ یا PNPM استفاده کنید ، آنها را با استفاده از دستورات زیر در سطح جهان نصب کنید:

npm install -g yarn   # For Yarn
npm install -g pnpm   # For pnpm

پس از نصب ، تنظیمات خود را با اجرا تأیید کنید:

node -v && npm -v

این باید نسخه های Node.js و NPM (یا مدیر بسته انتخابی شما) را نشان دهد.

مرحله 2: یک پروژه بعدی جدید ایجاد کنید

با وجود Node.js در محل ، وقت آن است که یک پروژه جدید Next.js را داربست. ترمینال خود را باز کنید و دستور زیر را اجرا کنید:

npx create-next-app@latest my-blog

تعویض کردن my-blog با نام پروژه مورد نظر خود با چند سؤال در مورد TypeScript ، Eslint و سایر تنظیمات از شما خواسته می شود. در حال حاضر ، احساس راحتی کنید که پیش فرض ها را بپذیرید یا بر اساس ترجیحات خود سفارشی کنید.

پس از اتمام تنظیم ، به فهرست پروژه خود بروید:

cd my-blog

در این مرحله ، می توانید برنامه Next.js جدید خود را با اجرای: آزمایش کنید:

npm run dev

بازدید http://localhost:3000 در مرورگر خود ، و باید صفحه Welcome را به صورت پیش فرض Next.js مشاهده کنید. موفقیت!

مرحله 3: وابستگی های MDX و Tailwind CSS را اضافه کنید

اکنون که پروژه Next.js شما در حال اجرا است ، بیایید وابستگی های لازم را برای آن اضافه کنیم MDX وت Tailwind CSSبشر

پشتیبانی MDX را نصب کنید

برای فعال کردن MDX در پروژه خود ، بسته های مورد نیاز را نصب کنید:

npm install @next/mdx @mdx-js/loader

این بسته ها به Next.js اجازه می دهند تا پردازش شوند .mdx پرونده های یکپارچه

CSS Tailwind را نصب کنید

Tailwind CSS نیاز به تنظیم کمی بیشتر دارد ، اما نگران نباشید – این ساده است. دستور زیر را برای نصب Tailwind و وابستگی های همسالان آن اجرا کنید:

npm install tailwindcss postcss autoprefixer

بعد ، پرونده های پیکربندی Tailwind را اولیه کنید:

npx tailwindcss init

این دو پرونده ایجاد می کند: tailwind.config.js وت postcss.config.jsبشر بعداً اینها را پیکربندی خواهیم کرد.

مرحله 4: تنظیم خود را تأیید کنید

پروژه شما اکنون تمام وابستگی های اصلی را نصب کرده است. در اینجا سریعاً از آنچه تاکنون انجام داده ایم آورده شده است:

node.js نصب شده و یک مدیر بسته.
یک پروژه جدید Next.js ایجاد کرد.
پشتیبانی اضافه شده از MDX و Tailwind CSS.

شما آماده هستید تا به مراحل بعدی بروید ، جایی که ما MDX و Tailwind CSS را پیکربندی می کنیم تا هماهنگ با هم همکاری کنیم. اما قبل از آن ، لحظه ای را مرتکب تنظیم اولیه خود به GIT (اگر از کنترل نسخه استفاده می کنید):

git init
git add .
git commit -m "Initial setup with Next.js, MDX, and Tailwind CSS"

با پایه و اساس ، شما به خوبی در ساخت یک وبلاگ مدرن و دارای ویژگی هستید. بیایید ادامه دهیم!

4. پیکربندی MDX برای محتوای پویا

اکنون که پروژه شما تنظیم شده است ، بیایید به پیکربندی MDX بپردازیم تا تمام پتانسیل های خود را باز کند. MDX به شما امکان می دهد سادگی Markdown را با قدرت اجزای React ترکیب کنید و به شما این امکان را می دهد تا پست های وبلاگ پویا و تعاملی ایجاد کنید. در اینجا نحوه شروع کار آورده شده است.

مرحله 1: پیکربندی `next.config.js` برای پشتیبانی MDX

برای فعال کردن .mdx پرونده ها در برنامه بعدی خود. js ، شما باید به روز کنید next.config.js پرونده پرونده را باز کرده و آن را اصلاح کنید تا پیکربندی زیر را شامل شود:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

این تنظیم به Next.js می گوید .mdx پرونده ها به عنوان صفحات و مؤلفه های معتبر. فایل را ذخیره کنید ، و برنامه شما اکنون آماده پردازش محتوای MDX است.

مرحله 2: یک پست وبلاگ را با فرمت MDX ایجاد کنید

با پیکربندی MDX ، بیایید اولین پست وبلاگ خود را ایجاد کنیم. در داخل pages دایرکتوری ، یک پوشه جدید به نام ایجاد کنید posts برای سازماندهی محتوای خود سپس پرونده ای به نام اضافه کنید my-first-post.mdx با محتوای زیر:

---
title: "My First Blog Post"
date: "2023-10-01"
---

# Welcome to My Blog

This is my very first post written in **MDX**! MDX allows you to write Markdown while embedding React components for dynamic content. 

Here’s an example of a styled button:

توجه کنید که چگونه ما تعبیه کرده ایم



  مرحله 4: از نسبت های کنتراست در دسترس اطمینان حاصل کنید


هنگام طراحی برای حالت تاریک ، دسترسی مهم است. از ابزارهایی مانند Webaim Contrast Checker استفاده کنید تا اطمینان حاصل کنید که ترکیبات رنگی شما مطابق با استانداردهای WCAG است. به عنوان مثال:

متن روی پس زمینه تاریک باید نسبت کنتراست حداقل 4.5: 1 داشته باشد.
از ابزارهای Opacity Tailwind استفاده کنید (opacity-75، و غیره) برای نرم کردن رنگ ها بدون به خطر انداختن خوانایی.


  چرا Tailwind CSS طراحی را بی دردسر می کند


با استفاده از کلاسهای ابزار Tailwind ، می توانید به سرعت نمونه اولیه و طرح وبلاگ خود را بدون نوشتن CSS سفارشی تصفیه کنید. از تایپوگرافی تمیز گرفته تا طرح های پاسخگو و پشتیبانی از حالت تاریک ، Tailwind شما را قادر می سازد تا یک وبلاگ بصری خیره کننده و کاربر پسند ایجاد کنید. این که آیا شما در حال جابجایی فاصله ، آزمایش با رنگ ها و یا اطمینان از دسترسی هستید ، انعطاف پذیری Tailwind تضمین می کند که طراحی شما همچنان سازگار و حرفه ای باشد.
با وجود سیستم طراحی شما ، وبلاگ شما اکنون آماده است تا خوانندگان را با زیبایی شناسی و عملکرد خود مجذوب خود کند. بیایید به سمت ساختار محتوای خود حرکت کنیم!


  6 ساختار وبلاگ خود


یک وبلاگ خوب سازمان یافته پایه و اساس یک تجربه عالی کاربر است. در این بخش ، ما چگونگی ساختار پست های وبلاگ خود را به طور مؤثر و از مسیریابی پویا Next.JS برای واکشی و نمایش یکپارچه محتوا بررسی خواهیم کرد. در پایان این بخش ، سیستمی وجود دارد که تمام پست های خود را در صفحه اصلی لیست کنید و پست های فردی را به صورت پویا ارائه دهید.

  مرحله 1: سازماندهی پست های وبلاگ


برای مرتب نگه داشتن پروژه خود ، مهم است که یک ساختار پوشه روشن را برای خود ایجاد کنید .mdx پرونده ها یک رویکرد مشترک برای ذخیره تمام پست های وبلاگ خود در یک فهرست اختصاصی ، مانند postsبشر در اینجا یک ساختار مثال وجود دارد:

/pages
  /posts
    my-first-post.mdx
    another-post.mdx
    yet-another-post.mdx



    
    



هر یک .mdx پرونده یک پست وبلاگ واحد را نشان می دهد. همچنین می توانید با استفاده از FrontMatter ، ابرداده (مانند عنوان ، تاریخ و برچسب ها) را در بالای هر پرونده قرار دهید. به عنوان مثال:

---
title: "My First Blog Post"
date: "2023-10-01"
tags: ["nextjs", "mdx", "tailwindcss"]
---

# Welcome to My Blog

This is the content of my first post!



    
    



این ابرداده بعداً برای نمایش خلاصه در صفحه اصلی و سازماندهی پست ها توسط برچسب ها یا دسته ها استفاده می شود.

  مرحله 2: واکشی و نمایش پست ها به صورت پویا


next.js باعث می شود که پست های وبلاگ خود را به صورت پویا واکشی و نمایش دهید. بیایید با ایجاد یک صفحه اصلی که تمام پست های شما را لیست می کند ، شروع کنیم.

  لیست تمام پست ها در صفحه اصلی


یک پرونده به نام ایجاد کنید index.js در داخل pages دایرکتوری این به عنوان صفحه اصلی وبلاگ شما خدمت می کند. استفاده کردن getStaticProps برای واکشی همه .mdx پرونده های posts دایرکتوری و ابرداده خود را استخراج کنید:

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

export default function Home({ posts }) {
  return (
    <div>
      <h1 className="text-4xl font-bold mb-8">My Blog</h1>
      <ul>
        {posts.map((post, index) => (
          <li key={index} className="mb-6">
            <a href={`/posts/${post.slug}`} className="text-blue-500 hover:underline">
              <h2 className="text-2xl font-semibold">{post.data.title}</h2>
            </a>
            <p className="text-gray-600">{post.data.date}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  const files = fs.readdirSync(path.join('pages/posts'))
  const posts = files.map((filename) => {
    const slug = filename.replace('.mdx', '')
    const markdownWithMeta = fs.readFileSync(path.join('pages/posts', filename), 'utf-8')
    const { data } = matter(markdownWithMeta)
    return { slug, data }
  })

  return {
    props: { posts },
  }
}



    
    



این کد همه را می خواند .mdx پرونده ها ، ابرداده خود را استخراج می کنند و آن را به مؤلفه صفحه اصلی منتقل می کنند. هر پست به عنوان یک پیوند قابل کلیک نمایش داده می شود که به صفحه مربوطه خود حرکت می کند.

  ارائه پست های انفرادی به صورت پویا


برای ارائه پست های فردی به صورت پویا ، یک پرونده به نام ایجاد کنید [slug].js در داخل pages/posts دایرکتوری این فایل از مسیریابی پویا برای واکشی و نمایش محتوای یک پست خاص بر اساس slug آن استفاده می کند:

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

const PostPage = ({ source, frontmatter }) => {
  return (
    <div>
      <h1 className="text-4xl font-bold mb-4">{frontmatter.title}</h1>
      <p className="text-gray-600 mb-8">{frontmatter.date}</p>
      <article className="prose lg:prose-xl dark:prose-invert">
        <MDXRemote {...source} />
      </article>
    </div>
  )
}

export async function getStaticPaths() {
  const files = fs.readdirSync(path.join('pages/posts'))
  const paths = files.map((filename) => ({
    params: { slug: filename.replace('.mdx', '') },
  }))

  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const markdownWithMeta = fs.readFileSync(
    path.join('pages/posts', `${params.slug}.mdx`),
    'utf-8'
  )
  const { data, content } = matter(markdownWithMeta)
  const mdxSource = await serialize(content)

  return {
    props: { source: mdxSource, frontmatter: data },
  }
}

export default PostPage



    
    



این تنظیمات استفاده می کند getStaticPaths برای تولید مسیرها برای هر پست و getStaticProps برای واکشی مطالب و ابرداده برای پست درخواست شده. در MDXRemote مؤلفه محتوای MDX را به صورت پویا ارائه می دهد و به شما امکان می دهد قطعات React را یکپارچه تعبیه کنید.

  چرا مسیریابی پویا اهمیت دارد


مسیریابی پویا با اضافه کردن محتوای بیشتر ، مقیاس های وبلاگ شما را با زحمت تضمین می کند. به جای ایجاد صفحات به صورت دستی برای هر پست ، Next.js همه چیز را به طور خودکار بر اساس ساختار پوشه و ابرداده شما انجام می دهد. این نه تنها باعث صرفه جویی در وقت می شود بلکه پروژه شما را نیز سازمان یافته و حفظ می کند.
با ترکیب یک ساختار پوشه تمیز با روشهای قدرتمند و قدرتمند Data.JS ، اکنون یک سیستم قوی برای مدیریت و نمایش پست های وبلاگ خود ایجاد کرده اید. خوانندگان می توانند صفحه اصلی شما را مرور کنند ، روی یک پست کلیک کنند و از یک تجربه خواندن یکپارچه لذت ببرند – همه در حالی که شما روی نوشتن مطالب عالی تمرکز می کنید. بیایید به سمت افزایش تجربه کاربر با ویژگی های اضافی حرکت کنیم!


  7. افزایش تجربه کاربر


یک وبلاگ عالی فقط مربوط به محتوا و طراحی نیست – همچنین در مورد جزئیات کمی که باعث می شود تجربه کاربر صاف ، جذاب و در دسترس باشد. در این بخش ، ویژگی های دیگری را که می توانید اضافه کنید برای بالا بردن وبلاگ خود ضمن حفظ دسترسی در خط مقدم فرآیند ساخت شما ، بررسی خواهیم کرد.

  برجسته سازی نحو برای بلوک های کد


اگر وبلاگ شما شامل قطعه کد است ، برجسته سازی نحو یک ویژگی ضروری برای بهبود خوانایی است. کتابخانه ها دوست دارند منشور یا شیکی یکپارچه با MDX و Tailwind CSS ادغام شوید. به عنوان مثال ، می توانید استفاده کنید react-syntax-highlighter برای سبک کردن بلوک های کد خود به صورت پویا:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism'

const CodeBlock = ({ children, language }) => {
  return (
    <SyntaxHighlighter language={language} style={tomorrow} className="rounded-md">
      {children}
    </SyntaxHighlighter>
  )
}

export default CodeBlock



    
    



این مؤلفه را در پرونده های MDX خود جاسازی کنید تا اطمینان حاصل شود که تمام قطعه های کد از نظر بصری جذاب و آسان برای خواندن هستند. این پیشرفت کوچک می تواند برای توسعه دهندگان که پست های فنی شما را می خوانند ، تفاوت بزرگی ایجاد کند.

  بهینه سازی سئو با برچسب های ابرداده


بهینه سازی موتور جستجو (SEO) برای رانندگی ترافیک به وبلاگ شما بسیار مهم است. از Next.js ساخته شده استفاده کنید  component to add metadata tags like titles, descriptions, and Open Graph images to each page. For example:


import Head from 'next/head'

const PostPage = ({ frontmatter }) => {
  return (
    <>
      <Head>
        <title>{frontmatter.title} | My Blog</title>
        <meta name="description" content={frontmatter.excerpt || 'A blog post about web development'} />
        <meta property="og:title" content={frontmatter.title} />
        <meta property="og:description" content={frontmatter.excerpt || 'A blog post about web development'} />
        <meta property="og:image" content="/images/og-image.png" />
      </Head>
      {/* Rest of your post content */}
    </>
  )
}



    
    



این برچسب ها به موتورهای جستجو کمک می کنند تا محتوای شما را بهتر درک کنند و دید وبلاگ شما را در نتایج جستجو بهبود بخشند.

  دکمه های اشتراک اجتماعی و ادغام تحلیلی


خوانندگان را ترغیب کنید تا با اضافه کردن دکمه های اشتراک اجتماعی ، پست های خود را به اشتراک بگذارند. شما می توانید از کتابخانه ها استفاده کنید react-share برای ایجاد دکمه های قابل تنظیم برای سیستم عامل هایی مانند Twitter ، LinkedIn و Facebook. به عنوان مثال:

import { TwitterShareButton, LinkedinShareButton } from 'react-share'

const ShareButtons = ({ url, title }) => {
  return (
    <div className="flex space-x-4 mt-8">
      <TwitterShareButton url={url} title={title}>
        Share on Twitter
      </TwitterShareButton>
      <LinkedinShareButton url={url} summary={title}>
        Share on LinkedIn
      </LinkedinShareButton>
    </div>
  )
}



    
    



علاوه بر این ، ابزارهای تحلیلی مانند Google Analytics یا قابل قبول برای پیگیری رفتار بازدید کنندگان و به دست آوردن بینش در مخاطبان خود. از next.js استفاده کنید _app.js پرونده برای اولیه سازی اسکریپت Analytics در سطح جهان.

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


در طول فرآیند ساخت ، دسترسی را در اولویت قرار دهید تا اطمینان حاصل شود که وبلاگ شما برای همه فراگیر و قابل استفاده است. از عناصر HTML معنایی مانند استفاده کنید 

با وت 
 برای ساخت منطقی صفحات خود. تضاد رنگ کافی برای متن و عناصر تعاملی را تضمین کنید و سایت خود را با خوانندگان صفحه نمایش آزمایش کنید تا مسائل احتمالی را شناسایی کنید. کلاسهای ابزار Tailwind CSS مانند sr-only وت focus-visible می تواند به شما در اجرای مؤثر ویژگی های دسترسی کمک کند.
با درج این پیشرفت ها – برجسته سازی Syntax ، بهینه سازی سئو ، دکمه های اشتراک اجتماعی ، تجزیه و تحلیل و بهترین روشهای دسترسی – شما فقط ساختن یک وبلاگ نیستید. شما در حال ایجاد تجربه ای هستید که خوانندگان را خوشحال می کند و آنها را برای بازگشت بیشتر باز می گرداند. بیایید با استقرار کارها را بپوشانیم!


  8. استقرار وبلاگ خود


استقرار وبلاگ شما آخرین گام در زنده کردن کار سخت شما است و با ابزارهای مدرن ، این کار ساده تر از همیشه است. این راهنمای گام به گام را دنبال کنید تا وبلاگ خود به صورت زنده زندگی کنید و از استقرار مداوم و ساختهای اتوماتیک استفاده کنید.

  مرحله 1: پروژه را به صورت محلی بسازید


قبل از استقرار ، اطمینان حاصل کنید که پروژه شما با ساخت آن به صورت محلی آماده تولید است. دستور زیر را در ترمینال خود اجرا کنید:

npm run build



    
    



این یک نسخه بهینه شده از وبلاگ شما در .next پوشه ساخت و ساز را با دویدن آزمایش کنید:

npm start



    
    



بازدید http://localhost:3000 برای تأیید همه چیز همانطور که انتظار می رود. اگر همه چیز خوب به نظر می رسد ، شما آماده حرکت هستید.

  مرحله 2: کد را به یک مخزن GIT فشار دهید


در مرحله بعد ، کد خود را به یک مخزن GIT مانند Github ، GitLab یا Bitbucket فشار دهید. اگر هنوز یک مخزن را اولیه نکرده اید ، این کار را با اجرای این کار انجام دهید:

git init
git add .
git commit -m "Initial commit"



    
    



سپس یک مخزن جدید بر روی پلت فرم انتخابی خود ایجاد کنید و آن را به پروژه محلی خود پیوند دهید:

git remote add origin https://github.com/your-username/your-repo-name.git
git branch -M main
git push -u origin main



    
    



این تضمین می کند که کد شما با خیال راحت ذخیره شده و برای استقرار آماده است.

  مرحله 3: مخزن را به بستر استقرار وصل کنید


اکثر سیستم عامل های استقرار مدرن یکپارچه با مخازن GIT ادغام می شوند و هر زمان که به روزرسانی می کنید ، ساخت و استقرار اتوماتیک را امکان پذیر می کنند. به سکوی انتخابی خود (به عنوان مثال ، Vercel ، NetLify یا Pages CloudFlare) بروید و این مراحل را دنبال کنید:

وارد حساب خود شوید و “پروژه جدید” یا “افزودن سایت” را انتخاب کنید.
مخزن GIT خود را با اجازه دسترسی به حساب خود وصل کنید.
مخزن حاوی وبلاگ خود را انتخاب کرده و تنظیمات استقرار را پیکربندی کنید (بیشتر سیستم عامل ها پروژه های بعدی را تشخیص می دهند.
اولین استقرار را با کلیک بر روی “استقرار” یا فشار آوردن تعهد جدید به شعبه اصلی انجام دهید.

پس از اتمام مراحل استقرار ، وبلاگ شما زنده خواهد بود و یک URL برای به اشتراک گذاشتن با جهان دریافت خواهید کرد.

  استقرار مداوم و ساخت خودکار


یکی از بزرگترین مزایای این گردش کار سهولت استقرار مداوم است. با اتصال مخزن خود ، هر بار که به شعبه اصلی تغییر می کنید ، این پلتفرم به طور خودکار بازسازی می شود و وبلاگ خود را مستقر می کند. این بدان معنی است که شما می توانید بدون نگرانی در مورد به روزرسانی های دستی ، روی نوشتن و بهبود مطالب خود تمرکز کنید. علاوه بر این ، بسیاری از سیستم عامل ها ویژگی هایی مانند محیط پیش نمایش را برای درخواست های کشش ارائه می دهند ، به شما امکان می دهد قبل از ادغام آنها در تولید ، تغییرات را آزمایش کنید.
با استفاده از این ابزارها ، اطمینان می دهید که وبلاگ شما همیشه به روز ، اجرا کننده و آماده برای رسیدن به مخاطبان خود است. با وبلاگ خود که اکنون زنده است ، وقت آن است که دستاورد خود را جشن بگیرید و ایده های خود را با جهان به اشتراک بگذارید!


  9. بسته بندی!


ساختن یک وبلاگ با Next.JS ، MDX و Tailwind CSS یک تغییر دهنده بازی برای توسعه دهندگان و سازندگان محتوا به طور یکسان است. این پشته قدرتمند انعطاف پذیری ، عملکرد و گزینه های سفارشی بی نظیر را ارائه می دهد و شما را قادر می سازد تا یک وبلاگ را تهیه کنید که هم کاربردی باشد و هم بصری خیره کننده. با استفاده از مسیریابی و بهینه سازی Next.js ، MDX محتوای پویا را با سادگی نشانه گذاری می کند ، و CSS Tailwind که یک روش کاربردی را برای طراحی فراهم می کند ، تمام ابزارهایی را که برای ایجاد یک وبلاگ لازم دارید ، دارید. 
این که آیا شما در حال نوشتن آموزش های فنی ، به اشتراک گذاشتن داستان های شخصی یا نمایش پروژه های خود هستید ، این پشته به شما این امکان را می دهد تا روی آنچه مهم است – محتوای خود را متمرکز کنید. اکنون زمان مناسبی برای آزمایش با سفارشی سازی ، کشف ویژگی های جدید و ایجاد وبلاگ خود واقعاً بی نظیر است. خلاقیت های خود را با جامعه به اشتراک بگذارید و به دیگران الهام بخشید تا در سفر به وبلاگ نویسی خود شروع کنند. آماده گرفتن شیرجه هستید؟ امروز ساخت وبلاگ خود را شروع کنید!

  10. نکات پاداش (بخش اختیاری)


حفظ و مقیاس گذاری وبلاگ شما به همان اندازه ساخت آن مهم است و با چند نکته استراتژیک می توانید اطمینان حاصل کنید که با بزرگ شدن مخاطبان خود ، قوی و سازگار است. در اینجا چند ایده سریع برای انتقال وبلاگ خود به سطح بعدی آورده شده است:

  پشتیبان گیری خودکار


با تنظیم پشتیبان گیری خودکار برای محتوای و پایگاه داده خود (در صورت کاربرد) از کار سخت خود محافظت کنید. برای برنامه ریزی عکس های منظم از مخزن خود از ابزارهایی مانند اقدامات GitHub یا خدمات شخص ثالث استفاده کنید. برای امنیت بیشتر ، صادرات خود را در نظر بگیرید .mdx پرونده ها به صورت دوره ای و ذخیره آنها در راه حل های ذخیره سازی ابری مانند AWS S3 یا Google Drive.

  کاوش در تنظیمات پیشرفته Tailwind


Tailwind CSS فوق العاده همه کاره است و غواصی عمیق تر در پیکربندی آن می تواند حتی بیشتر از پتانسیل ها برای وبلاگ شما باز شود. با ویژگی هایی مانند افزونه های سفارشی ، برنامه های طراحی پاسخگو و پالت های رنگی پیشرفته برای اصلاح سیستم طراحی خود ، آزمایش کنید. به عنوان مثال ، می توانید با استفاده از Tailwind اجزای قابل استفاده مجدد ایجاد کنید @apply دستورالعمل یا تم خود را گسترش دهید تا مقیاس های تایپوگرافی منحصر به فرد را شامل شود که با هویت برند شما مطابقت داشته باشد.

  ادغام گزینه های CMS برای مشارکت کنندگان غیر فنی


اگر قصد همکاری با مشارکت کنندگان غیر فنی دارید ، ادغام CMS بدون سر مانند محتوا یا عقل می تواند روند ایجاد محتوا را ساده تر کند. این سیستم عامل ها به کاربران این امکان را می دهند تا در حالی که یکپارچه به برنامه Next.js شما از طریق API ها وصل می شوند ، پست ها را از طریق یک رابط بصری بنویسند و مدیریت کنند. با ترکیب انعطاف پذیری MDX با سهولت CMS ، می توانید تیم خود را توانمند کنید تا بدون نگرانی در مورد کد ، روی قصه گویی تمرکز کند.
با اجرای این نکات پاداش ، نه تنها وبلاگ خود را ضد آب می کنید بلکه مدیریت و مقیاس را با گذشت زمان آسان تر می کنید. این که آیا شما در حال اتمام گردش کار ، پالایش طراحی خود هستید یا همکاری را فعال می کنید ، این استراتژی ها به شما کمک می کند تا حضور جلا و حرفه ای را بصورت آنلاین حفظ کنید.