Astro Basics

business-tipsautomationsmall-businessdevelopment

Prerequisites

Before we begin, make sure you have the following installed on your Windows machine:

  1. Node.js: You’ve mentioned you already have this.
  2. Visual Studio Code (VS Code): You’ve mentioned you already have this.
  3. Git: If you haven’t installed Git yet, we’ll cover that in Step 1.

Step 1: Install Git

Git is a version control system that we’ll use to manage your code and push it to GitHub.

  1. Download Git for Windows:
    • Visit the Git for Windows download page.
    • Click on the “64-bit Git for Windows Setup” link to download the installer.
  2. Install Git:
    • Run the downloaded installer (Git-2.xx.x-64-bit.exe).
    • Setup Wizard:
      • Click “Next” on the initial welcome screen.
    • Select Destination Location:
      • Leave the default location and click “Next”.
    • Select Components:
      • Leave the defaults checked and click “Next”.
    • Start Menu Folder:
      • Leave the default and click “Next”.
    • Choosing the default editor used by Git:
      • Select “Use Visual Studio Code as Git’s default editor”.
      • Click “Next”.
    • Adjusting your PATH environment:
      • Select “Git from the command line and also from 3rd-party software”.
      • Click “Next”.
    • HTTPS settings:
      • Leave the default “Use the OpenSSL library” and click “Next”.
    • Configuring the line ending conversions:
      • Leave the default “Checkout Windows-style, commit Unix-style line endings” and click “Next”.
    • Terminal emulator to use with Git Bash:
      • Leave the default “Use MinTTY (the default terminal of MSYS2)” and click “Next”.
    • Default behavior of ‘git pull’:
      • Leave the default “Default (fast-forward or merge)” and click “Next”.
    • Credential helper:
      • Leave the default “Git Credential Manager Core” and click “Next”.
    • Extra options:
      • Leave the default options checked and click “Next”.
    • Experimental options:
      • Uncheck any experimental options unless you want to try them.
      • Click “Install”.
    • Wait for the installation to complete.
    • Click “Finish”.
  3. Verify Git Installation:
    • Open the Command Prompt:
      • Press Windows Key + R, type cmd, and press Enter.
    • Type git --version and press Enter.
    • You should see something like git version 2.xx.x.windows.1, confirming Git is installed.

Step 2: Create a GitHub Account

If you don’t already have a GitHub account, follow these steps:

  1. Sign Up for GitHub:

    • Visit GitHub Sign Up.
    • Enter your email address and click “Continue”.
    • Create a password and click “Continue”.
    • Choose a username and click “Continue”.
    • Follow the prompts to complete the sign-up process, including verifying your email address.

  2. Log In to GitHub:

    • Visit GitHub Login.
    • Enter your username/email and password to log in.

Step 3: Create a New Astro Project

Astro is a modern static site builder. We’ll create a new project using JavaScript (no TypeScript).

  1. Open Command Prompt:
    • Press Windows Key + R, type cmd, and press Enter.
  2. Navigate to Your Desired Directory:
    • Decide where you want to create your project (e.g., Desktop).
    • In the Command Prompt, type: 
       cd %USERPROFILE%\Desktop
      Press Enter.
  3. Run the Astro Project Creation Command:
    • Type the following command and press Enter: 
       npm create astro@latest
      This command initiates the Astro project setup wizard.
  4. Answer the Setup Wizard Questions:
    • Project Directory:
      • You’ll be prompted with Where would you like to create your new project?.
      • Type your project name (e.g., my-astro-site) and press Enter.
    • Template:
      • You’ll see a list of templates.
      • Use the arrow keys to select “Empty” or “Minimal”, which is the base project.
      • Press Enter.
    • Use TypeScript?:
      • When asked, Would you like to use TypeScript with this project?, select “No, use JavaScript”.
      • Use the arrow keys to select and press Enter.
    • Install Dependencies?:
      • When asked, Install dependencies?, select “Yes”.
      • Press Enter.
    • Initialize a new git repository?:
      • When asked, select “Yes”.
      • Press Enter.
  5. Wait for Installation to Complete:
    • The wizard will set up your project, install dependencies, and initialize a Git repository.

Step 4: Open the Project in VS Code

  1. Navigate to Your Project Directory:

    • In the Command Prompt, type: 
       cd my-astro-site
      Replace my-astro-site with your actual project name. Press Enter.

  2. Open the Project in VS Code:

    • Type the following command and press Enter: 
       code .
      • If this command doesn’t work, you need to add VS Code to your system PATH:
        • Open VS Code.
        • Press Ctrl + Shift + P to open the Command Palette.
        • Type shell command and select “Shell Command: Install ‘code’ command in PATH”.
        • Restart the Command Prompt and try the code . command again.
    • Alternatively, you can open VS Code manually:
      • Open VS Code.
      • Click on “File” > “Open Folder…”.
      • Navigate to your project directory (e.g., Desktop\my-astro-site) and click “Select Folder”.

Step 5: Initialize Git Repository (If Not Already Done)

If the Astro setup wizard didn’t initialize a Git repository, you can do it manually.

  1. Open Terminal in VS Code:
    • In VS Code, press Ctrl + ` (the backtick key) to open the integrated terminal.
  2. Initialize Git Repository:
    • Type the following command and press Enter: 
       git init
  3. Add All Files to Git:
    • Type: 
       git add .
      Press Enter.
  4. Commit the Files:
    • Type: 
       git commit -m "Initial commit"
      Press Enter.

Step 6: Create a GitHub Repository and Push Your Code

  1. Create a New Repository on GitHub:
    • Go to GitHub and make sure you’re logged in.
    • Click the ”+” icon in the top-right corner and select “New repository”.
    • Repository Name:
      • Enter the same name as your project (e.g., my-astro-site).
    • Description (optional):
      • Add a description if you like.
    • Public or Private:
      • Choose “Public” if you want others to see your code, or “Private” if not.
    • Initialize Repository:
      • Do not check “Add a README file”, “Add .gitignore”, or “Choose a license” since we already have a local repository.
    • Click “Create repository”.
  2. Connect Your Local Repository to GitHub:
    • After creating the repository, GitHub will provide you with instructions under “…or push an existing repository from the command line”.
    • In VS Code’s terminal, type the following commands one by one (replace yourusername and my-astro-site with your GitHub username and repository name): 
       git remote add origin https://github.com/yourusername/my-astro-site.git
 git branch -M main
 git push -u origin main
      • Note: If prompted, enter your GitHub username and password. GitHub may require you to use a Personal Access Token instead of a password:
  3. Verify the Code on GitHub:
    • Go back to your GitHub repository page.
    • Refresh the page to see your code has been uploaded.

Step 7: Deploy the Site to Netlify

  1. Sign Up for Netlify:
    • Visit Netlify and click “Sign up”.
    • You can sign up using your GitHub account for easier integration.
      • Click “GitHub” under “Continue with”.
      • Authorize Netlify to access your GitHub account if prompted.
  2. Create a New Site from Git:
    • Once logged in, you’ll be taken to the Netlify dashboard.
    • Click on “Add new site” and select “Import an existing project”.
  3. Connect to GitHub:
    • Under “Continuous Deployment”, click “GitHub”.
    • If prompted, authorize Netlify to access your GitHub repositories.
    • Select Repository:
      • Netlify will display a list of your GitHub repositories.
      • Find and select “my-astro-site” (or the name of your repository).
  4. Configure the Build Settings:
    • Basic Build Settings:
      • Branch to deploy: Ensure it says main.
      • Build command: Netlify should auto-detect, but if not, enter: 
         npm run build
      • Publish directory: Should be set to dist.
    • Advanced Build Settings (optional):
      • You can leave these as default for now.
  5. Deploy the Site:
    • Click “Deploy site”.
    • Netlify will start the build process. You can view the progress in the “Deploys” tab.
    • Wait for the deployment to complete. This may take a few minutes.
  6. Access Your Live Site:
    • Once deployed, Netlify will assign a random name to your site (e.g., wonderful-hopper-123456).
    • Click on the generated URL to view your live site.
    • Customize Site Name (optional):
      • In Netlify, go to “Site settings” > “Change site name”.
      • Enter a custom name (e.g., my-astro-site) and save.

Step 8: Verify Your Site

  1. Visit Your Site:
    • Open a web browser and navigate to your Netlify site URL.
    • You should see your Astro website displayed.
  2. Test Updates:
    • Make a change in your Astro project (e.g., edit src/pages/index.astro).
    • Save the changes.
    • In VS Code’s terminal, commit and push the changes: 
       git add .
 git commit -m "Updated homepage"
 git push
    • Netlify will automatically detect the changes and redeploy your site.
    • Wait for the deployment to complete and refresh your site to see the updates.

Congratulations!

You’ve successfully:

Additional Tips

Working with Git:

Netlify Features:

Learning Resources:

Troubleshooting

Git Errors:

Netlify Build Failures:

Astro Issues: