1. Register for Netlify
First, open the official Netlify website click here to jump
Choose a way to register and log in. Here I choose GitHub login, which is the first method.
Then we authorize the use of GitHub login.
After that, some pages for filling in information will pop up. The content inside represents name, plan, role, etc. We can write roughly and check the tags.
If we select the Personal option in How are you planning to use Netlify?, which is the personal project option, at the end we will be asked to create a project name, which can later be used as an identifier in the URL. Here we can design it according to our personalized needs.
After completion, click Continue to deploy, and a popup will appear asking us to set up the first project. Here we click Skip this step for now, which means skip this step.
After the above steps, we have successfully registered for Netlify.
2. Install Astro
First, we visit the official Astro documentation website, click here to jump
Then we click “Install Astro”
On the new page, it shows there are three prerequisites:
According to the prerequisites in the documentation, we need a Node.js environment, a text editor, and a terminal.
The installation and configuration of the Node.js environment can refer to the following tutorial:
Node.js Installation Tutorial, click to jump
The latter two can use the system’s built-in ones. Considering a more comfortable coding environment, we can download and use VSCode, a text editor. The download and installation method can refer to the following tutorial:
VSCode Installation Tutorial, click to jump
After all the above prerequisites are completed, we officially start the Astro installation.
We first create a blank folder
Then enter cmd in the address bar and press Enter
In the popped-up terminal, enter the following command and enter y in the popped-up prompt:
npm create astro@latest
After waiting for a while, it will prompt to select the directory for the new project. We can enter ./glader-blog, which means creating a new folder glader-blog in the current directory and storing the project here.
After that, we press Enter 3 times in a row to enter the project initialization waiting
When the following content is prompted, it means the project initialization has ended. At this time, our folder will have an additional glader-blog directory, and our project is stored in it:
Then we enter the created project and use npm install to install dependencies, as follows:
Astro has a built-in server. After waiting for the installation to complete, we run the command npm run dev to run the server.
We can enter http://localhost:4321 in the browser to access the preview.
After entering this URL in the browser and running, the result is as follows, which indicates that the Astro project was successfully installed.
3. Familiarize with Astro’s Development Environment
For our convenience in writing code, we use VSCode, a text editor. First, we open VSCode and use VSCode to open the newly created project, which is glader-blog, as follows. At this time, the Astro extension installation will pop up in the lower right corner, and we click to install:
If this prompt doesn’t pop up, we can click the extension icon and search to install:
After the installation is complete, we return to the project directory and find an additional npm script option in the lower left corner. We can directly click on the content inside to help us run npm scripts. For example, there is a dev option inside. Clicking this is equivalent to running npm run dev in the project directory just now.
You can see that the effect is the same as entering the command directly in the small black window just now.
4. Write a Simple Blog
Under src/pages/ in the project directory, there is an index.astro file, which is the main page of the website.
We can try to delete all the code in this file, then rewrite a piece of code in this file, the code is as follows:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type ="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content = {Astro.generator} >
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
At this time, we can find in the browser that the content of the webpage has become the content in our code.
Astro is essentially a static website generator that can be compatible with native HTML code. For the convenience of demonstration, here we first roughly write a main interface of a blog, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<!-- Navigation Bar -->
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Me</a></li>
<li><a href="/posts">Blog Posts</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- Main Content Area -->
<main>
<section class="intro">
<h1>Welcome to My Blog!</h1>
<p>Here I record my thoughts and sharing about programming, technology, and life.</p>
</section>
<!-- Latest Articles List -->
<section class="posts">
<h2>Latest Articles</h2>
<ul>
<li><a href="">Test Article 1</a></li>
</ul>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2025 My Blog. All Rights Reserved.</p>
</footer>
</body>
</html>
This is a basic blog structure. You can continue to expand and customize it according to your needs.