Skip to content

block-core/angor-blog

Folders and files

NameName
Last commit message
Last commit date
Jan 16, 2025
Dec 18, 2024
Feb 24, 2025
Feb 20, 2025
Mar 5, 2025
Dec 18, 2024
Dec 18, 2024
May 8, 2024
Feb 19, 2025
Dec 18, 2024
Dec 18, 2024
Dec 18, 2024
Feb 3, 2025
Feb 3, 2025
Dec 18, 2024
Dec 18, 2024
Dec 18, 2024
Dec 18, 2024
May 8, 2024

Repository files navigation

✨ Welcome to the Angor Blog

πŸš€ Getting Started

1. Clone the Repository

To begin, clone the repository and navigate into the project directory:

git clone https://github.com/your-repo/angor-blog.git
cd angor-blog

2. Install Dependencies

Next, install the necessary dependencies:

pnpm install
pnpm add sharp

If pnpm is not already installed, you can install it globally using:

npm install -g pnpm

🧞 Available Commands

All commands should be executed from the root directory of the project using a terminal:

Command Description
pnpm install AND pnpm add sharp Install project dependencies
pnpm dev Start the local development server at localhost:4321
pnpm build Build the production site into the ./dist/ directory
pnpm preview Preview the built site locally before deploying
pnpm new-post <foldername> Create a new blog post
pnpm astro ... Execute Astro CLI commands like astro add, astro check
pnpm astro --help Display help information for the Astro CLI

✍️ Creating a New Post

1. Create Post Structure

Run the following command to create a new post:

pnpm new-post my-awesome-post

This will create:

src/content/posts/
└── my-awesome-post/
    β”œβ”€β”€ index.md
    └── images/

2. Configure Post Metadata

Edit the frontmatter in index.md:

---
title: "My Awesome Post"     # The title that appears at the top of your post
published: 2024-02-19       # Publication date (auto-filled)
description: "A detailed introduction to blockchain technology"  # Brief description
image: "./images/cover.jpg" # Post cover image (relative path)
tags: ["Blockchain", "Technology", "Crypto"]  # Related topics
category: "Technology"      # Main category
draft: false               # Set to true to hide from production
lang: "en"                # Language code (en, fa, etc)
---

3. Add Images

  1. Place your post images in the images folder
  2. Reference them in your markdown using relative paths:
![Image description](./images/example.jpg)

4. Write Content

Below the frontmatter, write your post content using Markdown:

## Introduction

This is a paragraph with **bold** and *italic* text.

### Code Examples
​```javascript
console.log("Hello World!");
​```

### Lists
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2

### Links
[Visit our website](https://example.com)

### Tables
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

5. Preview Your Post

  1. Run the development server:
pnpm dev
  1. Open http://localhost:4321 in your browser
  2. Navigate to your new post

6. Publishing

  1. Set draft: false in the frontmatter
  2. Build the site:
pnpm build

7. Post Organization Tips

  • Keep image files under 1MB when possible
  • Use descriptive image filenames
  • Organize content with clear headings (H2, H3, etc.)
  • Add relevant tags for better discoverability
  • Include a meaningful description for SEO

βš™οΈ Frontmatter of Posts

Each post file (index.md) should start with frontmatter in YAML format. Here is an example:

---
title: My First Blog Post
published: 2024-05-08
description: This is the first post.
image: /images/cover.jpg
tags: [Bitcoin, Investment, Angor]
category: Cryptocurrency
draft: false
---

Frontmatter Fields Explained

  • title: The title of your blog post.
  • published: The date when the post is published.
  • description: A brief description of the post.
  • image: Path to the cover image of the post.
  • tags: An array of tags relevant to the post.
  • category: The category under which the post falls.
  • draft: Set to false when the post is ready to be published.