lora-sys/lora

This is my website!!

Blog

A modern, fast, and responsive blog built with Astro.

🌟 Features

• Fast and Lightweight: Powered by Astro for optimal performance
• Responsive Design: Works on all device sizes
• Dark Mode: Automatic theme switching based on system preferences
• Search Functionality: Built-in search with Pagefind
• Syntax Highlighting: Beautiful code blocks with Expressive Code
• Math Support: LaTeX math rendering with KaTeX
• SEO Optimized: Sitemap, RSS feed, and meta tags
• Smooth Navigation: Page transitions with Swup
• Custom Components: Rehype components for admonitions and GitHub cards
• Reading Time: Estimated reading time for posts
• Excerpts: Automatic post excerpts
• Social Media Cards: Open Graph and Twitter meta tags
• i18n Support: Internationalization ready
• Accessibility: WCAG compliant markup
• Content Management: In-browser editing with Decap CMS

🚀 Tech Stack

• Astro - The web framework for content-driven websites
• Svelte - Component framework for interactive UI
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Typed JavaScript
• Pagefind - Static search library
• Expressive Code - Syntax highlighter
• KaTeX - Math typesetting library
• Swup - Page transition library

📁 Project Structure

/
├── public/                 # Static assets
│   ├── favicon/            # Favicon files
│   └── banner.png          # Banner image for README
├── src/
│   ├── components/         # Reusable components
│   │   ├── global/         # Global components
│   │   ├── layout/         # Layout components
│   │   └── ui/             # UI components
│   ├── layouts/            # Page layouts
│   ├── pages/              # Blog pages and posts
│   │   ├── posts/          # Blog post markdown files
│   │   ├── about.astro     # About page
│   │   ├── archive.astro   # Archive page
│   │   └── index.astro     # Home page
│   ├── plugins/            # Custom remark/rehype plugins
│   ├── styles/             # Global styles
│   └── config.ts           # Configuration file
├── scripts/                # Utility scripts
│   └── new-post.js         # Script to create new posts
├── .github/
│   └── workflows/          # GitHub Actions workflows
├── .astro/                 # Astro cache directory
├── dist/                   # Built output (generated)
├── astro.config.mjs        # Astro configuration
├── tailwind.config.cjs     # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── vercel.json             # Vercel configuration
├── .env.example            # Environment variables example
├── .vercelignore           # Vercel ignore file
├── README.md               # This file
├── CONTRIBUTING.md         # Contribution guidelines
└── package.json            # Project dependencies and scripts

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm new-post	Create a new blog post
pnpm format	Format code with Biome
pnpm lint	Lint code with Biome
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm run deploy	Deploy to Vercel (requires Vercel CLI)

🔐 Environment Variables

To use environment variables, copy the .env.example file to .env and fill in your values:

cp .env.example .env

Then edit the .env file with your configuration.

📝 Writing Blog Posts

Blog posts are written in Markdown and located in src/pages/posts/. Each post should include frontmatter with the following properties:

---
title: Your Post Title
description: A brief description of your post
pubDate: 2023-01-01
updatedDate: 2023-01-02  # Optional
tags: ["tag1", "tag2"]
---

Your content here...

Special Features

• Math: Use `$inline math# Blog

A modern, fast, and responsive blog built with Astro.

• Astro - The web framework for content-driven websites
• Svelte - Component framework for interactive UI
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Typed JavaScript
• Pagefind - Static search library
• Expressive Code - Syntax highlighter
• KaTeX - Math typesetting library
• Swup - Page transition library

📁 Project Structure

/
├── public/                 # Static assets
│   ├── favicon/            # Favicon files
│   └── banner.png          # Banner image for README
├── src/
│   ├── components/         # Reusable components
│   │   ├── global/         # Global components
│   │   ├── layout/         # Layout components
│   │   └── ui/             # UI components
│   ├── layouts/            # Page layouts
│   ├── pages/              # Blog pages and posts
│   │   ├── posts/          # Blog post markdown files
│   │   ├── about.astro     # About page
│   │   ├── archive.astro   # Archive page
│   │   └── index.astro     # Home page
│   ├── plugins/            # Custom remark/rehype plugins
│   ├── styles/             # Global styles
│   └── config.ts           # Configuration file
├── scripts/                # Utility scripts
│   └── new-post.js         # Script to create new posts
├── .github/
│   └── workflows/          # GitHub Actions workflows
├── .astro/                 # Astro cache directory
├── dist/                   # Built output (generated)
├── astro.config.mjs        # Astro configuration
├── tailwind.config.cjs     # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── vercel.json             # Vercel configuration
├── .env.example            # Environment variables example
├── .vercelignore           # Vercel ignore file
├── README.md               # This file
├── CONTRIBUTING.md         # Contribution guidelines
└── package.json            # Project dependencies and scripts

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm new-post	Create a new blog post
pnpm format	Format code with Biome
pnpm lint	Lint code with Biome
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm run deploy	Deploy to Vercel (requires Vercel CLI)

🔐 Environment Variables

To use environment variables, copy the .env.example file to .env and fill in your values:

cp .env.example .env

Then edit the .env file with your configuration.

📝 Writing Blog Posts

Blog posts are written in Markdown and located in src/pages/posts/. Each post should include frontmatter with the following properties:

---
title: Your Post Title
description: A brief description of your post
pubDate: 2023-01-01
updatedDate: 2023-01-02  # Optional
tags: ["tag1", "tag2"]
---

Your content here...

or $block math$

• Code Blocks: Syntax highlighting with line numbers and copy button
• Admonitions: Use :::note, :::tip, :::warning, etc.
• GitHub Cards: Use ::github{repo="username/repo"}
• Collapsible Sections: Use Expressive Code's collapsible sections

📚 Documentation

For more detailed information about the project, check out the documentation files in the docs/ directory:

• Project Structure - Detailed explanation of the project's file organization
• Deployment Guide - Instructions for deploying to various platforms
• Writing Blog Posts - Guide to creating and formatting blog posts
• Development Workflow - Guide for contributing to the project
• Tech Stack - Overview of technologies used in the project
• Customization Guide - Instructions for customizing the blog
• Troubleshooting Guide - Solutions to common issues
• Frequently Asked Questions - Answers to common questions
• Changelog - History of changes to the project
• Decap CMS Setup - Instructions for setting up Decap CMS

🚀 Deploy

Deploy to Vercel (Recommended)

The easiest way to deploy your Astro blog is to use the Vercel Platform from the creators of Astro.

Option 1: Deploy with Vercel CLI

1. Install Vercel CLI:

   npm install -g vercel

2. Login to your Vercel account:

   vercel login

3. Deploy your project:

   vercel

4. For subsequent deployments to production:

   vercel --prod

Option 2: Deploy with GitHub and Vercel Integration

1. Push your code to a GitHub repository
2. Create a new project on Vercel
3. Connect your GitHub repository
4. Deploy!

Vercel will automatically detect your Astro project and configure the build settings.

Option 3: Automated Deployments with GitHub Actions

This project includes GitHub Actions workflows for automated building and deployment:

• .github/workflows/build.yml - Builds and tests the project on every push
• .github/workflows/deploy.yml - Deploys to Vercel (requires Vercel secrets)

To enable automated deployments:

1. Add the following secrets to your GitHub repository:
   • VERCEL_TOKEN - Your Vercel token
   • VERCEL_ORG_ID - Your Vercel organization ID
   • VERCEL_PROJECT_ID - Your Vercel project ID

Deploy to Other Platforms

You can also deploy your site to platforms like Netlify, Cloudflare Pages, or GitHub Pages.

🤝 Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Please make sure to follow our Code of Conduct and Contributing Guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• Astro for the amazing web framework
• Vercel for the deployment platform
• All the open source projects that made this blog possible