इसे छोड़कर कंटेंट पर जाएं

Astro को नियमावली रूप से इंस्टॉल करें

यह मार्गदर्शिका आपको एक नयी Astro परियोजना को नियमावली रूप से इंस्टॉल और कॉन्फ़िगर करने के चरणों के बारे में बताएगी।

आवश्यक निर्भरताएँ

शीर्षक आवश्यक निर्भरताएँ
  • Node.js - v18.17.1 या v20.3.0 या उससे उच्चतर। (v19 समर्थित नहीं है।)
  • टेक्स्ट एडीटर - हम अपने आधिकारिक Astro एक्सटेंशन के साथ VS Code की अनुशंसा करते हैं।
  • टर्मिनल - Astro का उपयोग उसके कमांड-लाइन इंटरफ़ेस(CLI) के माध्यम से किया जाता है।

इंस्टॉलेशन

शीर्षक इंस्टॉलेशन

यदि आप हमारे स्वचालित create astro CLI का उपयोग नहीं करना चाहते हैं, तो आप नीचे दिए गए मार्गदर्शिका का पालन करके अपनी परियोजना स्वयं शुरू कर सकते हैं।

1. अपनी निर्देशिका बनाएं

शीर्षक 1. अपनी निर्देशिका बनाएं

अपने परियोजना के नाम के साथ एक खाली निर्देशिका बनाएं और फिर उसमें नेविगेट करें।

Terminal window
mkdir my-astro-project
cd my-astro-project

एक बार जब आप अपनी नई निर्देशिका में हों, तो अपने परियोजना की package.json फ़ाइल बनाएं। इस प्रकार आप Astro सहित अपनी परियोजना की निर्भरताओं का प्रबंधन करेंगे। यदि आप इस फ़ाइल स्वरूप से परिचित नहीं हैं, तो एक फ़ाइल बनाने के लिए निम्न आदेश चलाएँ।

Terminal window
npm init --yes

2. एस्ट्रो इंस्टॉल करें

शीर्षक 2. एस्ट्रो इंस्टॉल करें

सबसे पहले, अपने परियोजना के अंदर Astro के परियोजना निर्भरताएँ इंस्टॉल करें।

Terminal window
npm install astro

फिर, अपने package.json के किसी भी स्थानधारक “स्क्रिप्ट” अनुभाग को निम्नलिखित से बदलें:

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },

आप Astro को शुरू करने और इसके विभिन्न कमांड चलाने के लिए बाद में मार्गदर्शिका में इन स्क्रिप्ट का उपयोग करेंगे।

3. अपना पहला पेज बनाएं

शीर्षक 3. अपना पहला पेज बनाएं

अपने टेक्स्ट एडिटर में, अपनी निर्देशिका में src/pages/index.astro पर एक नई फ़ाइल बनाएं। इस परियोजना में यह आपका पहला Astro पृष्ठ होगा।

इस मार्गदर्शिका के लिए, निम्नलिखित कोड स्निपेट (--- डैश सहित) को अपनी नई फ़ाइल में कॉपी और पेस्ट करें:

src/pages/index.astro
---
// Astro में आपका स्वागत है! इन ट्रिपल-डैश कोड बाड़ के बीच सब कुछ
// आपका "अवयव फ्रंटमैटर" है। यह ब्राउज़र में कभी नहीं चलता.
console.log('यह आपके टर्मिनल में चलता है, ब्राउज़र में नहीं!');
---


<!-- नीचे आपका "अवयव टेम्पलेट" है। यह सिर्फ HTML है, लेकिन साथ ही में
     बेहतरीन टेम्पलेट बनाने में आपकी सहायता के लिए कुछ जादू का छिड़काव किया गया है। -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. अपनी पहली स्थिर संपत्ति बनाएं

शीर्षक 4. अपनी पहली स्थिर संपत्ति बनाएं

आप अपनी स्थिर संपत्तियों को संग्रहीत करने के लिए एक public/ निर्देशिका भी बनाना चाहेंगे। Astro हमेशा इन परिसंपत्तियों को आपके अंतिम निर्माण में शामिल करेगा, ताकि आप उन्हें अपने अवयव टेम्पलेट्स के अंदर से सुरक्षित रूप से संदर्भित कर सकें।

अपने टेक्स्ट एडिटर में, public/robots.txt पर अपनी निर्देशिका में एक नई फ़ाइल बनाएं। robots.txt एक साधारण फ़ाइल है जिसमें अधिकांश साइटें Google जैसे खोज बॉट को यह बताने के लिए शामिल होंगी कि आपकी साइट का उपयोग कैसे किया जाए।

इस मार्गदर्शिका के लिए, निम्नलिखित कोड स्निपेट को अपनी नई फ़ाइल में कॉपी और पेस्ट करें:

public/robots.txt
# उदाहरण: सभी बॉट्स को अपनी साइट को स्कैन और अनुक्रमित करने की अनुमति दें।
# पूर्ण सिंटैक्स: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. astro.config.mjs बनाएं

शीर्षक 5. astro.config.mjs बनाएं

Astro को astro.config.mjs का उपयोग करके कॉन्फ़िगर किया गया है। यदि आपको Astro कॉन्फ़िगर करने की आवश्यकता नहीं है तो यह फ़ाइल वैकल्पिक है, लेकिन आप इसे अभी बनाना चाह सकते हैं।

अपने परियोजना के मूल निर्देशिका (~) में astro.config.mjs बनाएं और नीचे दिए गए कोड को उसमें कॉपी करें:

astro.config.mjs
import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({});

यदि आप UI फ्रेमवर्क अवयवों जैसे React, Svelte, इत्यादि को शामिल करना चाहते हैं या अपने परियोजना में Tailwind or Partytown जैसे अन्य उपकरण का उपयोग करना चाहते हैं, तो यह वह जगह है जहां आप नियमावली रूप से एकीकरण आयात और कॉन्फ़िगर करेंगे।

अधिक जानकारी के लिए Astro के API कॉन्फ़िगरेशन संदर्भ पढ़ें।

6. TypeScript समर्थन जोड़ें

शीर्षक 6. TypeScript समर्थन जोड़ें

TypeScript को tsconfig.json का उपयोग करके कॉन्फ़िगर किया गया है। भले ही आप TypeScript कोड न लिखें, यह फ़ाइल महत्वपूर्ण है ताकि Astro और VS Code जैसे उपकरण जान सकें कि आपके परियोजना को कैसे समझा जाए। कुछ सुविधाएँ (जैसे npm package imports) tsconfig.json फ़ाइल के बिना संपादक में पूरी तरह से समर्थित नहीं हैं।

यदि आप TypeScript कोड लिखने का इरादा रखते हैं, तो Astro के strict या strictest टेम्पलेट का उपयोग करने की अनुशंसा की जाती है। आप astro/tsconfigs/ पर तीन टेम्पलेट कॉन्फ़िगरेशन की देख और तुलना कर सकते हैं।

अपने परियोजना के मूल में tsconfig.json बनाएं और नीचे दिए गए कोड को उसमें कॉपी करें। (आप अपने TypeScript टेम्पलेट के लिए base, strict या strictest का उपयोग कर सकते हैं):

tsconfig.json
{
  "extends": "astro/tsconfigs/base"
}

अंत में, Astro परियोजना में उपलब्ध परिवेश प्रकारों के बारे में TypeScript को बताने के लिए src/env.d.ts बनाएं:

src/env.d.ts
/// <reference types="astro/client" />
अधिक जानकारी के लिए Astro की टाइपस्क्रिप्ट सेटअप गाइड पढ़ें।

7. अगले कदम

शीर्षक 7. अगले कदम

यदि आपने उपरोक्त चरणों का पालन किया है, तो आपकी परियोजना निर्देशिका अब इस तरह दिखनी चाहिए:

  • Directorynode_modules/
    • …
  • Directorypublic/
    • robots.txt
  • Directorysrc/
    • Directorypages/
      • index.astro
    • env.d.ts
  • astro.config.mjs
  • package-lock.json or yarn.lock, pnpm-lock.yaml, etc.
  • package.json
  • tsconfig.json

बधाई हो, अब आप Astro का उपयोग करने के लिए तैयार हैं!

यदि आपने इस गाइड का पूरी तरह से पालन किया है, तो आप सीधे चरण 2: Astro शुरू करें पर जा सकते हैं जारी रखने के लिए और पहली बार Astro चलाना सीखें।