This tutorial shows you how to create a Website using Astro JS SSG.

Requirement:

  • NodeJS installed
  • Node and Npm commands work

How do I create an Astro project?

The following are steps to create an Astro site project.

  • Open Terminal and run the following command
npm create astro@latest

It contains below steps to take input from the user as given below

  • next, It asks for the project name as given below
E:\myblogs>npm create astro@latest

 astro   v2.8.2 Launch sequence initiated.

   dir   Where should we create your new project?
         astro_app
  • Asks for Project templates to choose from a given file, choose Use blog template
E:\myblogs>npm create astro@latest

 astro   v2.8.2 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro_app

  tmpl   How would you like to start your new project?
         > Include sample files (recommended)
         — Use blog template
         — Empty
  • It asks for install dependencies or not
E:\myblogs>npm create astro@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

 astro   v2.8.2 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro_test_app

  tmpl   How would you like to start your new project?
         Empty
      ✔  Template copied

  deps   Install dependencies? (recommended)
         ● Yes  ○ No
  • Next, It asks for Typescript or JavaScript
E:\myblogs>npm create astro@latest

 astro   v2.8.2 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro_app

  tmpl   How would you like to start your new project?
         Use blog template
      ✔  Template copied

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with npm...
      ▲  error Request timed out after one minute
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         ● Yes  ○ No
  • Follow the next steps as given below to
E:\myblogs>npm create astro@latest

 astro   v2.8.2 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro_app

  tmpl   How would you like to start your new project?
         Use blog template
      ✔  Template copied

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with npm...
      ▲  error Request timed out after one minute
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff is confirmed. Explore your project!

         Enter your project directory using cd ./astro_app
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro adds.

         Stuck? Join us at https://astro.build/chat

It creates an astro_app folder in the current directory with all NPM dependencies installed and creates predefined template files.

Astro project folder structure

Following is a directory structure and files created with the initial project creation.


|   .gitignore
|   astro.config.mjs
|   package-lock.json
|   package.json
|   README.md
|   tsconfig.json
|
+---.vscode
|       extensions.json
|       launch.json
|
+---node_modules
|
+---public
|       favicon.svg
|       placeholder-about.jpg
|       placeholder-hero.jpg
|       placeholder-social.jpg
|
\---src
    |   consts.ts
    |   env.d.ts
    |
    +---components
    |       BaseHead.astro
    |       Footer.astro
    |       FormattedDate.astro
    |       Header.astro
    |       HeaderLink.astro
    |
    +---content
    |   |   config.ts
    |   |
    |   \---blog
    |           first-post.md
    |           markdown-style-guide.md
    |           second-post.md
    |           third-post.md
    |           using-mdx.mdx
    |
    +---layouts
    |       BlogPost.astro
    |
    +---pages
    |   |   about.astro
    |   |   index.astro
    |   |   rss.xml.js
    |   |
    |   \---blog
    |           index.astro
    |           [...slug].astro
    |
    \---styles
            global.css

Folders:

  • public: Contains static assets such as favicon, logo and blog images, sitemap.xml, and robots files
  • node_modules: Contains installed dev and build dependencies
  • src: Astro components
  • components: Reusable Astro components
  • pages: Dynamic and static pages
  • layouts: It contains layout reusable files such as header, footer, sidebar, and body
  • content: All Markdown content files with a nested directory structure
  • styles: CSS and Sass Styles
  • dist: distribution folder created during the build process

Files:

  • astro.config.mjs : Astro configuration files that contain integrations, build configurations
  • package-lock.json: node dependencies with direct and transitive
  • package.json: Node dependencies
  • README.md : Readme project for documentation build and deployment
  • tsconfig.json : typescript configuration

Now, You are ready to start the development server

run the npm run dev command in the terminal to start the dev server.

It starts the server at 3000 port

E:\myblogs\astro_app>npm run dev

> [email protected] dev
> astro dev

   astro  v2.8.2 started in 1497ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

10:06:49 pm [content] Watching src/content/ for changes
10:06:50 pm [content] Types generated

How to build astro project for production deployment

run npm run build command in build and generate static assets. This is also called production build. Build command takes input markdown files and generates HTML files

HTML files created in dist folder

E:\myblogs\astro_app>npm run build

> [email protected] build
> astro build

10:09:28 pm [content] Types generated 1.05s
10:09:28 pm [build] output target: static
10:09:28 pm [build] Collecting build info...
10:09:28 pm [build] Completed in 1.62s.
10:09:28 pm [build] Building static entrypoints...
10:09:32 pm [build] Completed in 3.57s.

 generating static routes
▶ src/pages/index.astro
  └─ /index.html (+73ms)
λ src/pages/rss.xml.js
  └─ /rss.xml (+61ms)
▶ src/pages/about.astro
  └─ /about/index.html (+48ms)
▶ src/pages/blog/index.astro
  └─ /blog/index.html (+40ms)
▶ src/pages/blog/[...slug].astro
  ├─ /blog/markdown-style-guide/index.html (+34ms)
  ├─ /blog/using-mdx/index.html (+99ms)
  ├─ /blog/first-post/index.html (+158ms)
  ├─ /blog/third-post/index.html (+247ms)
  └─ /blog/second-post/index.html (+304ms)
Completed in 650ms.

@astrojs/sitemap: `sitemap-index.xml` is created.

10:09:32 pm [build] 8 page(s) built in 5.96s
10:09:32 pm [build] Complete!

You can also preview production using the below command

npm run preview