As a Technical Content Writer, I was always looking for a simple solution for creating a fast, minimal, and beautiful blog. WordPress was always a heavy and mass option: I don't need that much of features and I could not disable them. Then I noticed Astro!

Astro is an awesome web framework that helps you to create websites for publishing your content. It's fast, simple, and customizable. Aside from these features it can be used to make SPA and PWA applications and has a great support of APIs.

Let's dive into Astro by introducing the features.

Astro Features

Astro is a feature-rich web framework that is an excellent tool for a wide range of users. Let's explore some of its capabilities:

Zero JS, by default

Astro is trying to be the fastest Javascript framework but how? By shipping less! As Official docs say, Astro by default does not use any JS code in the final build. With less JS code, your app will run much more quickly than before. So Astro renders your project 100% Static by default (Only HTML and No Javascript).

Content Focused

Content-rich websites like blogs, docs, publishings, portfolios, etc. can use Astro to build their sites. As Astro introduces itself as a Content-first web framework, it can be the best option for making such websites.

Fully-featured

Astro is an All-in-one framework that brings you everything you want to make a fantastic web application. Component syntax, file-based routing, asset handling, bundling, optimizations, data-fetching, and so many more features will help you to access many things. Another important feature is that you can integrate Astro with other frameworks and libraries like React, Vue, Tailwind CSS, etc.

SEO By default

Astro can handle SEO by default. After you build your project you can have a sitemap, RSS feed, pagination, and other related things.

Astro Islands

Astro Islands is one of the main features of the Astro framework. By using Islands instead of forcing your entire page to become a SPA (Javascript Required) you can use Javascript (React, Vue, Svelte Components) features just on one element of your static page. Using Astro most of your page remains static and light, and you can build an isolated island of interactivity without affecting on rest of your page. To find out more please read Astro Island Docs.

Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. The idea of “islands architecture” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019, and expanded on in this post by Preact creator Jason Miller.

Getting Started

To get started you can use Astro on Stackblitz or use it locally. To install Astro on your machine you need Nodejs V18 installed. After installing Nodejs latest version you can install Astro using NPM:

# create a new project with npm
npm create astro@latest

After running this you should see a step-by-step installation with some recommendations for your project. After finishing you'll see a new directory that shows your project. cd into the directory and run the bellow code for running the project in localhost:

npm run dev

After this, you can enter http://localhost:4321/ in your browser.

For building your Pages and creating a beautiful website check the Documentations.

VSCode Setup

Astro officially introduces an Extension for VSCode to support .astro files. This extension brings some features like:

• Syntax highlighting for .astro files

• TypeScript type information for .astro files

• Intellisense for code completion, hints, and more.

• Formatting

• Code Folding

For installing Astro on your VSCode you can use "Astro Extension".

Migrating

If you already have a website and you want to use Astro there's no need to build it from scratch. Migrate is one of the most useful Astro features that helps you to transfer your data from the previous website into your new Astro website.

Astro supports a wide range of services and CMS for migrating. WordPress, GitBook, Hugo, Pelican, etc. You can watch a complete list here. Besides content, you can use your old UI, Stylesheets, and Markdown too.

Using CMS

Astro is not a CMS and doesn't serve you a rich editor and other options that a CMS normally does. So you can build your website using Astro and manage your content through a Headless CMS like Strapi, Ghost, or WordPress. For doing this you should be familiar with REST API and work with them. To see a complete list of supported CMS visit this Page.

Of course, you don't need any sort of CMS necessarily because Astro supports Markdown. You can write and publish your posts in .md files. For more information about managing content in Astro Read the Docs.

Deploy

Deploying a project in Astro is really simple. You can use a lot of services to deploy your project. You can see a complete list of services Here. Also, when you create your project the CLI asks you to build a repository for your app. By letting the CLI make a repository you can later use this repository to deploy your application more quickly. Just push your repository on some Online Git services like Github, Gitlab, or Bitbucket and deploy your project using their Static Host services, for example, Github Pages.

Conclusion: So Many Features...

Astro is a brand-new framework and already brings a lot of nice features to help you build your next content-rich website. By reading docs you can explore these features and see the Astro power in action.

Also, you can use the step-by-step tutorial on how to make a blog using Astro. To read this you can navigate to Build a Blog on Official Docs.