This tutorials shows you how to create an Website using Astro JS SSG.

Requirement:

  • NodeJS installed
  • Node and Npm commands works

How do I create an Astro project?

Following are steps to create an Astro site project.

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

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

  • next, It asks for 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 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 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 add.

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

It creates a astro_app folder in the current directory with all NPM dependencies installed, created predefined template files .

Astro project folder structure

Following is a directory structure and files created with 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 nested directory structure
  • styles: CSS and Sass Styles
  • dist: distribution folder created during build process

Files:

  • astro.config.mjs : Astro configuration files that contains 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 npm run dev command in terminal to start dev server.

It starts 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 below command

npm run preview