mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Migrate to astro

Browse Source
This commit is contained in:
Marios Antonoudiou
2026-06-15 13:13:57 +03:00
parent 1a844c57df
commit 8c4c4af56a
81 changed files with 6200 additions and 5069 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
README.md
View File

@@ -1,166 +1,115 @@
# Astroship - Astro SAAS Starter Website Template
# mariosant.dev
Astroship is a free starter astro website template for saas, startups, marketing websites, landing pages & blogs. Built with Astro & TailwindCSS.
Personal site and writing log for [Marios Antonoudiou](https://mariosant.dev) — AI product engineer.
This Free Template is sponsored by [Web3Templates](https://web3templates.com)
Migrated from a Nuxt 4 + `@nuxt/content` setup to **Astro 5** + **Tailwind CSS 4**, preserving every URL and the dark-mode design of the original.
## Live Demo
## Stack
**[https://astroship.web3templates.com/](https://astroship.web3templates.com/)**
- [Astro 5](https://astro.build) — static site generation
- [Tailwind CSS 4](https://tailwindcss.com) — utility CSS
- [astro-icon](https://github.com/natemoo-re/astro-icon) — Iconify icons
- [astro-seo](https://github.com/jonasmerlin/astro-seo) — `<SEO>` component
- [@astrojs/sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/) — sitemap
- [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) — MDX content
- [Inter Variable](https://fontsource.org/fonts/inter) via `@fontsource-variable/inter`
**[Download Astroship Template](https://web3templates.com/templates/astroship-starter-website-template-for-astro)**
## Upgrade to Astroship Pro Version
**[https://astroship-pro.web3templates.com/](https://astroship-pro.web3templates.com/)**
**[Purchase Astroship Pro — $49](https://web3templates.com/templates/astroship-pro-astro-saas-website-template)**
<!-- prettier-ignore -->
| Feature | Free Version | Pro Version |
| --- | ------ | --- |
| Astro v3 | ✅ | ✅ |
| Content Collections | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| Mobile Responsive | ✅ | ✅ |
| Working Contact Page | ✅ | ✅ |
| Pro Layouts & Features | ❌ | ✅ |
| Blog with Pagination | ❌ | ✅ |
| View Transitions | ❌ | ✅ |
| Advanced Homepage Design | ❌ | ✅ |
| Features Page | ❌ | ✅ |
| Integrations Page | ❌ | ✅ |
| Elegant 404 Page | ❌ | ✅ |
| 6 Months Support| ❌ | ✅ |
| Free Updates | ✅ | ✅ |
| License | GPL-2.0 | Commercial |
| &nbsp; | &nbsp;| &nbsp;|
| Pricing| Free|**$49**|
| &nbsp; | [Deploy for free](https://vercel.com/new/surjithctly/clone?demo-description=Starter%20template%20for%20startups%2C%20marketing%20websites%20%26%20blogs%20built%20with%20Astro%20and%20TailwindCSS.&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5dB0dDqBr1BfvIoNOmffVB%2F784984a8d3fe5e3db123e7c655166046%2Fastroship_-_Tony_Sullivan.jpg&demo-title=Astroship&demo-url=https%3A%2F%2Fastroship.web3templates.com%2F&from=templates&project-name=Astroship&repository-name=astroship&repository-url=https%3A%2F%2Fgithub.com%2Fsurjithctly%2Fastroship&skippable-integrations=1) | [Purchase Pro](https://web3templates.com/templates/astroship-pro-astro-saas-website-template) |
<a href="https://web3templates.com/templates/astroship-pro-astro-saas-website-template">
<img width="160" alt="Upgrade to Pro" src="https://user-images.githubusercontent.com/1884712/199181300-37c2128e-d033-4145-a906-16fa5263a53b.png">
</a>
## Deploy this template
You can instantly clone this to your GitHub and deploy the site by clicking the below buttons to deploy to your chosen providers!
Click here to deploy on Vercel:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsurjithctly%2Fastroship&project-name=astroship&repository-name=astroship&demo-title=Astroship%20-%20Astro%20Starter%20Template&demo-description=Astroship%20is%20a%20starter%20template%20for%20startups%2C%20marketing%20websites%20%26%20landing%20pages.%20Built%20with%20Astro%2C%20TailwindCSS&demo-url=https%3A%2F%2Fastroship.web3templates.com%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F1884712%2F200831799-10ef2456-a02e-4068-b580-4b5326f0b33b.png)
Click here to deploy on Netlify:
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/surjithctly/astroship)
## Preview
![image](https://user-images.githubusercontent.com/1884712/200831799-10ef2456-a02e-4068-b580-4b5326f0b33b.png)
## Pro Version Preview
![preview](https://github.com/surjithctly/astroship/assets/1884712/25665c02-d2a7-43dc-89b2-34a8ae37ade9)
### Pagespeed Score
[![pagespeed](https://user-images.githubusercontent.com/1884712/210250214-7aa98167-7993-4b90-8138-326b8fa0c223.png)](https://pagespeed.web.dev/report?url=https%3A%2F%2Fastroship.web3templates.com%2F)
## Installation
If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a `git clone` to clone it to your local system.
Alternatively, you can clone the project directly from this repo to your local system.
### 1. Clone the repo
## Scripts
```bash
git clone https://github.com/surjithctly/astroship.git myProjectName
# or
git clone https://github.com/surjithctly/astroship.git .
pnpm install # install dependencies
pnpm dev # start the dev server at http://localhost:4321
pnpm build # build the static site to ./dist
pnpm preview # preview the built site locally
```
The `.` will clone it to the current directory so make sure you are inside your project folder first.
### 2. Install Dependencies
```bash
npm install
# or
yarn install
# or (recommended)
pnpm install
```
### 3. Start development Server
```bash
npm run dev
# or
yarn dev
# or (recommended)
pnpm dev
```
### Preview & Build
```bash
npm run preview
npm run build
# or
yarn preview
yarn build
# or (recommended)
pnpm preview
pnpm build
```
We recommend using [pnpm](https://pnpm.io/) to save disk space on your computer.
### Other Commands
```bash
pnpm astro ...
pnpm astro add
pnpm astro --help
```
## Project Structure
Inside of your Astro project, you'll see the following folders and files:
## Project structure
```
/
├── public/
│ └── ...
├── src/
│ ├── components/
│ │ └── ...
│ ├── layouts/
│ │ └── ...
│ └── pages/
│ └── ...
└── package.json
src/
├── components/ # Astro components
│ ├── home/ # Home page sections
│ ├── button.astro # Button primitive
│ ├── container.astro # UContainer equivalent
│ ├── footer.astro
│ ├── link.astro # ULink equivalent
│ ├── previous-role.astro
│ ├── project.astro
│ └── top-nav.astro
├── content/
│ └── articles/ # Markdown articles
├── content.config.ts # Content collection schema
├── layouts/
│ └── Layout.astro # Single layout (default + content)
├── pages/
│ ├── 404.astro
│ ├── index.astro
│ └── articles/
│ ├── index.astro
│ └── [...slug].astro
├── styles/
│ └── global.css
└── utils/
└── date.ts # "15th of June 2026" formatter
public/ # Static assets (avatar, logos, favicon)
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
## Authoring an article
Any static assets, like images, can be placed in the `public/` directory.
1. Drop a new file in `src/content/articles/`, e.g. `2026-07-01-my-post.md`.
2. Add frontmatter that matches the schema in `src/content.config.ts`:
```yaml
---
title: My Post
date: 2026-07-01
coverImage:
author: Photographer Name
authorUrl: https://unsplash.com/@photographer # optional
url: https://images.unsplash.com/photo-...
---
```
3. Write the body in Markdown.
4. The new article will appear at `/articles/2026-07-01-my-post` and on the `/articles` index automatically.
## TailwindCSS
## Deployment
TailwindCSS is already configured in this repo, so you can start using it without any installation.
The site is fully static. Build with `pnpm build` and deploy the `dist/` directory to any static host (Vercel, Netlify, Cloudflare Pages, GitHub Pages, etc.).
## Credits
### Build settings (most hosts)
[Hero Illustration](https://www.figma.com/community/file/1108400791662599811) by [Streamline](https://www.streamlinehq.com/)
| Setting | Value |
|---|---|
| Build command | `pnpm build` |
| Output directory | `dist` |
| Node version | 20+ |
## 👀 Want to learn more?
### Recommended cache headers
Feel free to check out [Astro Docs](https://docs.astro.build) or jump into our [Discord Chat](https://web3templates.com/discord).
For `/_astro/*` (hashed bundles):
[![Built with Astro](https://astro.badg.es/v1/built-with-astro.svg)](https://astro.build)
```
Cache-Control: public, max-age=31536000, immutable
```
For `/articles/*` (HTML, sitemap-referenced):
```
Cache-Control: public, max-age=3600, must-revalidate
```
Configure these via your host's preferred mechanism (`vercel.json`, `_headers` for Netlify, `_headers` for Cloudflare Pages, etc.).
### SEO surface
- `sitemap-index.xml` + `sitemap-0.xml` — auto-generated by `@astrojs/sitemap`, all 13 routes
- `robots.txt` — points at the sitemap
- `rss.xml` — feed of all articles
- JSON-LD `Person` schema on the home page
- JSON-LD `Article` + `BreadcrumbList` schema on each article page
- Open Graph + Twitter Card meta on every page
- Canonical URLs on every page
- `<link rel="alternate" type="application/rss+xml">` autodiscovery
### Open Graph image
The default OG image is `public/mariosant.webp` (a 512×512 avatar). For best display on Twitter/LinkedIn (1200×630 recommended), drop a `public/og-image.png` and update `src/utils/seo.ts`'s default or pass it explicitly to the `Layout`.