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 filesnode_modules
: Contains installed dev and build dependenciessrc
: Astro componentscomponents
: Reusable Astro componentspages
: Dynamic and static pageslayouts
: It contains layout reusable files such as header, footer, sidebar and bodycontent
: All Markdown content files with nested directory structurestyles
: CSS and Sass Stylesdist
: 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