A personal blog and portfolio website built with Astro.js, showcasing technical articles and projects. The site is automatically deployed to a VPS using GitHub Actions.
Visit the live site: remybarranco.fr
- Fast, static site generation with Astro.js
- Blog posts with MDX support
- Project portfolio showcase
- Mathematical content support with KaTeX
- Responsive design
- Automatic asset optimization
- Internationalization support (
/en/and/fr/URLs) - RSS feed generation
- Sitemap generation
- Automatic deployment via GitHub Actions
- Astro.js - Static site generator
- MDX - Enhanced Markdown for components
- KaTeX - Math typesetting
- Bun - JavaScript runtime and package manager
- GitHub Actions - CI/CD pipeline
- SCP - Secure file transfer to VPS
-
Clone the repository:
git clone https://github.com/Phaired/Blog.git cd Blog -
Install dependencies:
# Using npm npm install # Or using Bun bun install
Start the development server:
# Using npm
npm run dev
# Or using Bun
bun run devThe site will be available at http://localhost:4321.
Build the site for production:
# Using npm
npm run build
# Or using Bun
bun run buildPreview the production build:
# Using npm
npm run preview
# Or using Bun
bun run previewThe site is automatically deployed to a VPS when changes are pushed to the main branch. The deployment process is handled by GitHub Actions and uses SCP to transfer the built files to the server.
To set up your own deployment:
-
Configure the following secrets in your GitHub repository:
HOST: Your server's hostname or IP addressUSERNAME: SSH usernameSSHKEY: SSH private keyPORT: SSH port (usually 22)SERVER_FOLDER: Target directory on the server
-
Push to the main branch to trigger the deployment.
Add new blog posts as Markdown or MDX files in the src/content/blog/ directory.
Each post should include frontmatter with metadata:
---
title: "Your Post Title"
description: "A brief description of your post"
pubDate: "Month Day Year"
updatedDate: "Month Day Year" # Optional
heroImage: "/path/to/image.webp" # Optional
---
Your content here...Add new projects as Markdown or MDX files in the src/content/projects/ directory.
Pages are organized under /[lang]/ where lang is en or fr. Strings are stored in src/i18n/ui.ts. Use the same keys for each language and retrieve them with useTranslations(lang) in your pages or components. To add a new translation, duplicate the content file with the .fr.md or .en.md suffix and set the lang frontmatter field.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.