author: Angel Nieves

Building a Blog with the Astral Framework: A Beginner's Guide

In this article, we will explore the process of creating a blog using the Astral framework. This project aims to enhance our development skills and familiarize ourselves with new technologies. Let's dive into what Astral framework is and why it was chosen for this project.

Introduction to Astral Framework

The Astral framework is an all-in-one web development framework designed for speed. Its main goal is to optimize content delivery and provide a seamless user experience. By visiting their website, astro.build, we can learn more about its features and benefits.

Learning Objectives

To give you an overview of what we will cover in this tutorial series, here are the main learning objectives:

Setting up our development environment
- Exploring online code spaces or using local machine tools like VS Code for coding and file editing.
Creating pages and blog posts
- Utilizing one of Astral's templates for efficiency.
Building custom Astro components
- Exploring the process of designing and implementing unique components.
Working with local files
- Learning how to edit and modify HTML files or content on specific pages, such as the home page.
Committing and uploading changes
- Understanding how to save and push local changes to make them live on the website.
Adding interactivity features
- Enhancing the website with interactive elements like buttons and links.
Deploying the website
- Utilizing Netlify to publish the site on the web.

It is important to note that all these steps can be achieved at no cost. You do not need to invest in hosting services or subscriptions to follow along. However, if you wish to personalize your domain name, purchasing one is an option.

Taking a Sneak Peek

Once the blog is created and deployed, we will delve deeper into creating content. This includes generating ideas, structuring categories and subcategories, and building an engaging about us page. We will cover these topics in the next segments of this tutorial series.

Starting with Astral Framework

To begin, we need to visit the Astral website by accessing astro.build. Once there, we click on "Get Started" to proceed. This will take us to the documentation page, docs.astro.build, which provides extensive information on getting started with Astral.

Understanding Astral's Positioning

Before we delve into the tutorial, it's essential to understand why Astral is a valuable choice. Astral's five design principles showcase the framework's focus on content-rich websites, speed, ease of use, and flexibility.

Main Principles of Astral Framework

Content-Focused: Astral prioritizes content-rich websites, making it an ideal platform for setting up a blog.
Speed: By rendering HTML on the server-side, Astral ensures faster loading times for websites by default.
Beginner-friendly: Astral is designed to be beginner-friendly, allowing users with minimal experience in web development to create impactful websites.
Fully Featured and Flexible: With built-in component syntax, asset handling, and build processing, Astral offers a complete web development solution. It also supports integrating other front-end frameworks like React, Preact, Solid, Svelte, Vue, and Lit.

The Tutorial Experience

While exploring the Astral documentation, we discovered an intriguing aspect - the tutorial section. There is a dedicated tutorial called "Build a Blog," which allows users to follow a step-by-step process in creating a blog using Astral. As part of this article, we will evaluate the tutorial and share our feedback.

Tutorial Breakdown

The tutorial covers all key features while guiding us through the process of building a fully functional blog from scratch. Here is an overview of what the tutorial entails:

Setting up the development environment.
Creating pages and blog posts.
Building Astro components.
Working with local files.
Committing and uploading changes.
Adding interactivity features.
Deploying the website.

Previewing the Final Project

For your convenience, you can preview the final project on GitHub or StackBlitz to get an idea of the end result. StackBlitz is an online code editor that runs the project in a container. It allows us to experience the full functionality before we start building our own blog.

Setting up Your Astro Project

In this article, we will guide you through the process of setting up your Astro project. Whether you are a beginner or an experienced user, this tutorial will help you get started.

Prerequisites

Before we begin, make sure you have the following:

Basic familiarity with HTML, Markdown, CSS, and JavaScript.
A GitHub account for publishing your project to the web. If you don't have one, you can create a GitHub account by following the provided link.

Using the Checklist

To make the setup process easier, we have included a checklist at the bottom of each page. Simply check off the tasks as you complete them.

Unit 1: Setup

In this unit, we will set up the tools required for your Astro project. If you are already comfortable with your environment and workflow, feel free to skip ahead.

Using StackBlitz

If you prefer to use an online code editor, you can visit astro.new and click on "Empty Project" to open it in StackBlitz.

Getting Started

To get started, we need to create a new project stored online in GitHub and connected to Netlify.

Install the necessary tools for building your Astro site.
- Terminal: You will need a command line terminal, which can be built into your code editor.
- Node.js: Make sure you have Node.js version 16.12 or later installed on your system. You can check your current version by running the command node -v in your terminal. If your version is lower, update to the latest version.
Choose a code editor: For this tutorial, we will be using VS Code. However, feel free to use any code editor that you are comfortable with.

Creating Your Astro Project

Now that you have all the necessary tools set up, let's proceed with creating your Astro project.

Launch the Astro Setup Wizard by running the command astro create in your terminal.
Follow the prompts and provide the required information to customize your project.

Getting Started with Astro: Creating your First Astro Project

To start working with Astro, we need to ensure that Node.js is installed on our system. We can run the following command in our terminal to check the version of Node.js we have:

node -v

If Node.js is successfully installed, we will see the version number displayed. In my case, I have version 18.12.1 installed.

To create our first Astro project, we will use the Astro Setup Wizard. This wizard will guide us through the process of creating a new Astro site. To launch the setup wizard, we need to run the following command in the terminal:

npm create astro@latest

This command will install the latest version of Astro and initiate the setup wizard. We will be presented with a series of prompts. When asked if we want to install Astro, we should press "y" to confirm.

Next, the setup wizard will ask us where we would like to create our new project. We should enter the name of the folder where we want to create our project. For example, we can use "astroblog" as the folder name.

The setup wizard will then present us with a list of starter templates to choose from. We can navigate through the list using the arrow keys and select the desired template by pressing "return". In this case, I recommend using the blog template, as it provides a good starting point for our project.

Once the template is selected, the setup wizard will install the necessary dependencies for the chosen template. When prompted, we should press "y" to install the dependencies.

After the dependencies are installed, the setup wizard will generate the files required for the project. If you wish to write TypeScript, you can select "yes" when asked. Otherwise, select "no".

Once the setup wizard is complete, we no longer need the terminal running the wizard. We can now open our project in VS Code. To do this, we should open the folder that we created during the setup wizard. VS Code may prompt us to install recommended extensions. We should click on the notification and choose the "Astro language support" extension.

Now that our project is set up, we can start the development server to preview our website. To do this, we need to open the terminal in VS Code and run the following command:

npm run dev

This will start the Astro development server. In the terminal, we will see a confirmation that Astro is running in dev mode. We can then click on the localhost link provided in the terminal to see a live preview of our new Astro website.

By default, Astro uses localhost:3000 to preview our project. The preview will display our website, including any templates or content we have implemented. In our case, we have utilized a blog template, which generates a sample blog page and an about us page with filler content.

While the Astro server is running in dev mode, we will receive feedback in the terminal rather than being able to run commands. To make changes and preview those changes locally, we can navigate through our website using the localhost link, making adjustments as needed.

It is important to note that the terminal pane in VS Code is dedicated to providing feedback from the Astro development server, and we should avoid running commands within this terminal while the server is running.

Now that we have our Astro project set up and running, we are ready to start building and customizing our website.

Editing and Previewing Your Astro Site

Once you have set up your Astro project and started the dev server, you can begin making changes to your website content. Here's how you can edit your homepage and see the changes in the browser preview:

Open your code editor and navigate to the Source/pages/index.astro file. This is where you will find the homepage of your blog.
Within the index.astro file, locate the <h1> tag that contains the heading text. This is the main heading of your homepage.
Edit the heading text to your desired content. For example, replace "Hello astronaut, welcome to the official Astro site" with "Hello, fellow astronaut! Welcome to my first Astro blog". You can add additional text or elements as needed.
Save the changes in your code editor by pressing Ctrl + S or using the save command in your editor.
In the terminal, run the command npm run dev to start the dev server and generate the updated content.
Open your browser and navigate to the preview URL provided by the dev server. Refresh the page to see the updated heading on your homepage.

By following these steps, you can easily edit and preview your website content in real-time. Remember to save your changes and refresh the browser preview to see the updates.

Committing Changes to GitHub

To store your project repository online and enable version control, you can use GitHub. Follow these steps to commit your local code to GitHub:

Log in to GitHub.com in your browser and click the plus icon in the upper right-hand corner to create a new repository.
Choose a name for your repository, such as "Astro Blog". You can leave the other settings at their default values.
Click the "Create repository" button to create your repository. Make note of the URL of your repository as you will need it later.
At this stage, you will be presented with various setup steps, but you can exit the page without making any changes.
In your code editor, navigate to the Source Control icon in the sidebar and click the three dots menu. From the options, choose "Remote" and then "Add Remote".
If necessary, go through any authentication steps prompted by the code editor, and then return to your editor.
Paste the URL of your GitHub repository into the provided field. This will establish a connection between your local code and the online repository.

Now that you have committed and connected your local code to GitHub, you can continue making changes to your Astro site and easily sync them with your online repository. This allows you to keep track of your project's history and collaborate with others if needed.

By following these steps, you are well on your way to becoming an Astro developer. The rest of the unit will guide you through version control and publishing your website for others to see. Congratulations on your progress so far!

Deploying Your Site on Astro

In this section, we will guide you through the process of deploying your site on Astro. By following these steps, you will be able to connect your GitHub repository to Netlify and deploy your Astro site live on the web.

Step 1: Create a Netlify Account

Before we begin, you will need to create a Netlify account if you don't already have one. Simply go to netlify.com and sign up for a free account. If you already have an account, you can skip this step.

Step 2: Connect GitHub Repository

Once you have your Netlify account, log in and make sure to connect your GitHub repository to Netlify. To do this, go to the Sites section in your Netlify dashboard. Then, click on Add new site and select Import from an existing project. Choose Connect to Git provider and select GitHub as your provider. Make sure to authorize Netlify to access your repositories.

Step 3: Deploy Your Site

Now that your GitHub repository is connected to Netlify, you can proceed to deploy your Astro site. On the Sites overview page in Netlify, you will see a list of your repositories. Select your Astro blog repository and click on Deploy site. Netlify will then build and deploy your site live on the web.

Step 4: Update Project Name

After the deployment is complete, you will see a randomly generated project name and website URL for your site. To make it more memorable, you can change your project name. In your site settings, look for the Site name option and enter a name of your choice. This will automatically update your URL.

Step 5: View Your Website

To view your newly deployed Astro website, you can either click on the URL in your Netlify settings or type it directly into your browser. This will open your website and allow you to see it live on the web. You can also share this URL with others to showcase your project.

Step 6: Custom Domain (Optional)

If you want to use a custom domain for your Astro site, you have the option to purchase a domain and set it up. In your Netlify settings, you can configure a custom domain to replace the autogenerated URL. This will give your website a more professional and personalized touch.

Congratulations! You have successfully deployed your Astro site using Netlify. Your website is now live on the web for everyone to access. In the next section, we will cover how to update and make changes to your site.

How to Create and Update Pages in Astro

Astro is a powerful static site builder that allows developers to create and update web pages easily. In this article, we will walk you through the steps to create and update pages using Astro.

Getting Started

Open up your terminal and run the command create Astro to create a new Astro project.
Visit the specified URL to update the homepage reaction page.
Make sure you have made the necessary changes to the index.astro file and commit and push the changes to GitHub.

Checking Your Progress

At this point, you should check your code against the provided example to ensure everything is set up correctly. However, since you started from a template, this step may not be necessary.

Creating Your First Page

Now it's time to create your first actual page. Even though you have already built your website using a template, this section will guide you through the process.

Create a new Astro file for your new page. You can create multiple pages, such as "About" and "Blog".
Add navigation links to your page to improve website navigation.
Update the preview in the address bar to check if the page loads correctly.

Example: Updating the About Page

Let's assume you want to update the "About" page. Here's how you can do it:

Open the about.astro file located in the same folder as your other Astro files.
Remove the placeholder content and update it with your own content.
Save the changes and commit them using your local editor.
Push the changes to your GitHub repository.
Visit your website to see the updated About page.

Customizing Your Page

In addition to updating the content, you can also customize other aspects of your page. For example, if you want to remove a hero image from the About page, follow these steps:

Locate the hero image placeholder in the about.astro file.
Remove the code that references the image or replace it with your desired image.
Save the changes and commit them using your local editor.
Push the changes to your GitHub repository.
Check your website to confirm the removal of the hero image.

Advantages of Astro

Astro offers several advantages over other site builders like WordPress or Squarespace. Some of these advantages include:

Server-side rendering: Astro renders the website on the server side, reducing the browser's resources it requires and improving site speed.
Customization: Astro allows you to customize every aspect of your website without unnecessarily bloating it with JavaScript.
Component-based architecture: With Astro, you can create and reuse components easily, improving code organization and maintainability.

By following these steps and utilizing the features of Astro, you can create and update your web pages efficiently while enjoying the benefits it offers.

Note: The instructions provided in this article are based on the assumption that you have already set up an Astro project and are familiar with basic Git commands. If you are new to Astro or Git, we recommend referring to their official documentation for more information.

[Additional Information]: Astro is gaining popularity among web developers due to its flexibility and speed. The ability to create pages quickly and efficiently makes it an ideal choice for both small personal websites and larger enterprise applications. Furthermore, Astro's component-based architecture allows developers to build complex web applications by combining and reusing smaller components. This not only improves code organization but also enhances collaboration among team members. Overall, Astro is a highly recommended tool for web developers who value performance, customization, and efficiency.

Creating and Editing Components in Astro

One of the main features of Astro is its component-based architecture, which allows for easy reusability and customization. In this section, we will explore how to create and edit components within Astro.

The Header Component

Before diving into the process of creating and editing components, let's first understand the structure of the header component. In the header component, we have our site title, navigation links, and other elements. To see it in action, let's take a look at the live view of our home page.

On the home page, we can observe the site title, but interestingly, the navigation links are not visible on the page. However, when we inspect the web page, we can see the navigation links present. This is because the header component, which contains the navigation, is imported into the page.

To edit the header, navigate to the components folder in the source code. Within this folder, you will find the header.astro file. By opening this file, you can see the code responsible for rendering the header component, including the navigation links.

Modifying the Header Component

To modify the navigation links in the header, simply edit the header.astro file. In this file, you will find the header links defined within the component. In the example given, the navigation includes links for the home page, blog, about, and external links to Twitter and GitHub.

If you want to remove any of the links, simply delete the corresponding code. For instance, if you don't want to include the Twitter and GitHub links, remove those lines from the code.

Once you have made your desired changes to the header component, save the file. The changes will be reflected on the website shortly after the code is saved.

Customizing the Site Title and Description

The site title and description are essential elements of any website. In Astro, these values are stored in a constant variable called site title, which is imported from the const.ts file.

To modify the site title, open the header.astro file and locate where the site title is rendered. You will see that it is using an imported constant variable, site title.

To change the site title, navigate to the const.ts file and edit the value of the site title constant. Similarly, you can modify the site description by editing the corresponding variable in the same file.

Once you have made the changes, save the file, and the site title and description will be updated across all the pages where they are referenced.

Creating New Pages and Writing Markdown Blog Posts

Astro allows you to create new pages and write blog posts using markdown formatting. Markdown is a widely used format for structuring text and is highly popular among developers.

To create a new blog post, navigate to the Source directory, and in the Content folder, locate the Blog directory. This is where the existing blog posts are stored. You can create a new markdown file within this directory to add a new blog post.

In the markdown file, you can structure your blog post using markdown syntax. You will have the option to include a title, description, publish date, hero image, and more. Additionally, you can link to your blog post from your blog page to make it accessible to readers.

By following these steps, you can successfully create new pages and write markdown blog posts in Astro. The flexibility and user-friendliness of Astro's component-based architecture make it an excellent choice for building dynamic websites.

Adding and Publishing Blog Posts with Markdown

In this section, we will explore how to add and publish blog posts using Markdown.

The Blog Structure

Before diving into the process of adding blog posts, it's important to understand the structure of our blog. The blog layout is based on a predefined template that consists of a hero image, a navigation section, and a site title. Additionally, the blog is structured to display the posts in a sequential manner, starting from the first post to the latest one.

Creating a New Blog Post

To add a new blog post, we need to create a new Markdown file. This can be easily done by following these steps:

Create a new file with the .md extension.
Name the file according to the desired title of the blog post.
Open the new file and structure the content using Markdown syntax.

For example, let's say we want to create a new blog post titled "Fourth Post". We would create a new file named "fourth-post.md" and fill it with the desired content. Markdown provides us with a user-friendly way to format our blog post by using tags such as headings, paragraphs, links, images, etc. These tags can be easily understood and implemented by referring to the style guide or by searching for Markdown syntax online.

Previewing and Publishing the Blog Post

Once the blog post is created, we can preview it on our local development environment before publishing it. To do this, we need to access the blog preview in our browser. The preview can be accessed by adding "/posts/fourth-post" to the local host URL.

However, it's important to note that any changes made without saving the file will not be reflected in the preview. Therefore, it's crucial to save the file before accessing the blog preview.

If everything looks good in the preview, we can then proceed to publish the blog post. To publish the post, we need to commit the changes we made to the repository. By committing the changes, the blog post will be published on the live site.

Customizing the Blog Post Layout

The layout of the blog post, such as the inclusion of the author's name, tags, or additional properties, can be customized according to our preferences. This can be done by modifying the blog post layout file. By updating the variables and properties in the layout file, we can add or remove elements from the blog post display.

For instance, we can include the author's name, add tags, or define custom properties for our blog posts. This flexibility allows us to tailor our blog posts to our specific needs and create a unique reading experience for our readers.

Adding Dynamic Content to Your Astro Blog

Once you have set up your Astro blog and created the necessary pages, it's time to add dynamic content to make your website more engaging and interactive. Astro allows you to easily incorporate dynamic elements using variables and JavaScript expressions.

Using Variables

In Astro, variables can be used to add dynamic information to your blog. For example, you can use variables to display the site title, site description, or any other custom information. This is done by utilizing the front matter, which is the content at the top of your markdown file enclosed within code fences. To add variables, simply place the code within the front matter section.

---
title: My Awesome Astro Blog
description: Welcome to my blog---

You can customize these variables according to your needs and they will be injected into your blog as it is compiled into HTML.

Incorporating JavaScript Expressions

Astro also allows you to write JavaScript expressions directly within your markdown files. By using JavaScript expressions, you can add more advanced dynamic functionalities to your blog.

To utilize JavaScript expressions, you again add the code within the front matter, between code fences. This allows you to interact with data, manipulate content, and create personalized experiences for your visitors.

Conditional Rendering

Astro also provides the ability to conditionally render elements based on certain criteria. While we won't delve deep into this topic here, it's worth mentioning that Astro offers this powerful feature, allowing you to display different content based on various conditions.

Building Out Content

Now that you have a basic understanding of how to add dynamic content to your Astro blog, it's time to develop engaging content for your website. Consider conducting topic research, building a category structure, and generating article ideas to ensure your content is valuable and relevant to your audience.

Additionally, make sure to spell properly and present your articles in a well-organized manner. A properly structured sitemap can enhance your website's indexing by search engines, such as Google.

In the upcoming tutorial, we will focus on creating content for the blog, including topic research, category structure, article ideas, and generating a sitemap. We will also explore how to get your blog indexed on search engines.

If you have any questions or need further guidance, please feel free to leave a comment. Stay tuned for the next part of the tutorial, where we will dive deeper into content creation for your Astro blog.

If you enjoyed this article, make sure to check out my other videos and articles on tech and marketing. You can find them on my channel or website.In this part, we introduced the idea of creating a blog using the astral framework. we outlined the learning objectives and provided an overview of the astral framework's positioning and features. additionally, we explored the tutorial experience available for building a blog with astral. in the next part of this tutorial series, we will walk you through the process of setting up your development environment. stay tuned for an engaging and enriching learning journey!
In this part of the article, we covered the setup process for your astro project. by following the checklist and installing the necessary tools, you are now ready to create your first astro site. in the next part of the article, we will explore how to customize your project and publish it on the web. stay tuned!

additional information

throughout the tutorial, we will provide additional information and explanations to help you understand the concepts and techniques used in building astro projects. don't hesitate to reach out to our discord server if you need any assistance or have any questions during the process.

providing feedback

at the end of the tutorial, we encourage you to provide feedback about your experience. your feedback will help us improve the tutorial and make it even more beginner-friendly.
Deploying your site on astro with netlify provides a seamless and easy way to make your website available to the public. by following the steps outlined in this article, you can ensure that your astro site is accessible to viewers worldwide. now that your site is live, you can focus on creating and refining your content to engage your audience effectively.
In this section, we have learned how to add and publish blog posts using markdown. markdown provides us with a simple and efficient way to format our content, making it easy to create and customize our blog posts. by following the steps outlined above, we can ensure that our blog posts are well-structured, visually appealing, and accessible to our audience.