Update fake posts.
parent
0853681daa
commit
2f041985f6
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
@ -1,123 +0,0 @@
|
||||
---
|
||||
layout: '@/layouts/Post.astro'
|
||||
title: Getting Started with Astro
|
||||
publishDate: 2025-06-07
|
||||
description: |
|
||||
Discover the power of Astro, a modern web framework that delivers
|
||||
lightning-fast websites with zero JavaScript by default.
|
||||
tags: ['astro', 'web-development', 'javascript', 'performance', 'static-site']
|
||||
---
|
||||
|
||||
Astro is revolutionizing the way we build websites by prioritizing performance and developer experience. Unlike traditional frameworks that ship JavaScript by default, Astro follows a **zero-JavaScript** approach, only adding interactivity when you explicitly need it.
|
||||
|
||||
## What Makes Astro Special?
|
||||
|
||||
### 🚀 Lightning Fast Performance
|
||||
|
||||
Astro generates static HTML at build time, resulting in incredibly fast loading times. Your users get the content they need without waiting for JavaScript to load and execute.
|
||||
|
||||
### 🏝️ Islands Architecture
|
||||
|
||||
With Astro's unique **Islands Architecture**, you can use components from different frameworks (React, Vue, Svelte) on the same page, but they remain isolated and only hydrate when needed.
|
||||
|
||||
```astro
|
||||
---
|
||||
// You can mix and match frameworks!
|
||||
import ReactCounter from './ReactCounter.jsx'
|
||||
import VueCalendar from './VueCalendar.vue'
|
||||
import SvelteChart from './SvelteChart.svelte'
|
||||
---
|
||||
|
||||
<main>
|
||||
<h1>My Astro Page</h1>
|
||||
<ReactCounter client:load />
|
||||
<VueCalendar client:visible />
|
||||
<SvelteChart client:idle />
|
||||
</main>
|
||||
```
|
||||
|
||||
### 📝 Content-First Approach
|
||||
|
||||
Astro excels at content-heavy sites like blogs, documentation, and marketing pages. It supports:
|
||||
|
||||
- **Markdown** out of the box
|
||||
- **MDX** for interactive content
|
||||
- **Content Collections** for type-safe content management
|
||||
|
||||
## Key Features
|
||||
|
||||
> Astro combines the best of static site generation with the flexibility of modern component frameworks.
|
||||
|
||||
1. **Zero JavaScript by Default** - Only add JS when you need it
|
||||
2. **Framework Agnostic** - Use React, Vue, Svelte, or plain HTML
|
||||
3. **Built-in Optimizations** - Image optimization, CSS bundling, and more
|
||||
4. **TypeScript Support** - First-class TypeScript support
|
||||
5. **Excellent DX** - Fast dev server, hot reloading, and great tooling
|
||||
|
||||
## Mathematical Expressions
|
||||
|
||||
Astro works great with mathematical content too! Here's the famous Euler's identity:
|
||||
|
||||
$$e^{i\pi} + 1 = 0$$
|
||||
|
||||
This equation beautifully connects five fundamental mathematical constants:
|
||||
|
||||
- $e$ (Euler's number)
|
||||
- $i$ (imaginary unit)
|
||||
- $\pi$ (pi)
|
||||
- $1$ (multiplicative identity)
|
||||
- $0$ (additive identity)
|
||||
|
||||
## Code Example
|
||||
|
||||
Here's how you can create a simple Astro component:
|
||||
|
||||
```astro
|
||||
---
|
||||
// Component Script (runs at build time)
|
||||
const greeting = 'Hello, Astro!'
|
||||
const currentYear = new Date().getFullYear()
|
||||
---
|
||||
|
||||
<!-- Component Template -->
|
||||
<div class="greeting-card">
|
||||
<h2>{greeting}</h2>
|
||||
<p>Welcome to the future of web development!</p>
|
||||
<footer>
|
||||
<small>© {currentYear} - Built with Astro</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.greeting-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
Ready to try Astro? Here's how to create your first project:
|
||||
|
||||
<p class="text-center">
|
||||
<a class="button" href="https://docs.astro.build/en/getting-started/">Start Building</a>
|
||||
</p>
|
||||
|
||||
## Conclusion
|
||||
|
||||
Astro represents a paradigm shift in web development, prioritizing performance without sacrificing developer experience. Whether you're building a blog, documentation site, or marketing page, Astro provides the tools you need to create fast, modern websites.
|
||||
|
||||
The combination of static generation, islands architecture, and framework flexibility makes Astro an excellent choice for your next project. Give it a try and experience the difference!
|
||||
|
||||
---
|
||||
|
||||
_Happy coding! 🚀_
|
||||
@ -0,0 +1,186 @@
|
||||
---
|
||||
layout: '@/layouts/Post.astro'
|
||||
title: This is the first post of my new Astro blog.
|
||||
publishDate: 2025-06-04
|
||||
description: |
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, obcaecati
|
||||
quos. Odit fugiat exercitationem cupiditate adipisci ipsa praesentium
|
||||
voluptas? Nam rerum quas, veniam repellat accusantium sit suscipit
|
||||
asperiores exercitationem quae.
|
||||
tags: ['tag1', 'tag2', 'tag3', 'tag4']
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
|
||||
Praesent libero $\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$
|
||||
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
|
||||
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue
|
||||
|
||||
$$
|
||||
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
|
||||
$$
|
||||
|
||||
neque. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales,lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
# H1 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
## H2 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
### H3 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
#### H4 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
##### H5 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
###### H6 For example
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
## Emphasis
|
||||
|
||||
Emphasis, aka italics, with _asterisks_ or _underscores_.
|
||||
|
||||
Strong emphasis, aka bold, with **asterisks** or **underscores**.
|
||||
|
||||
Strikethrough uses two tildes. ~~Scratch this.~~
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> Blockquotes are very handy in email to emulate reply text. This line is part
|
||||
> of the same quote.
|
||||
|
||||
Quote break.
|
||||
|
||||
> This is a very long line that will still be quoted properly when it wraps. Oh
|
||||
> boy let's keep writing to make sure this is long enough to actually wrap for
|
||||
> everyone. Oh, you can _put_ **Markdown** into a blockquote.
|
||||
|
||||
## Horizontal separator
|
||||
|
||||
This is a horizontal separator:
|
||||
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit.
|
||||
|
||||
---
|
||||
|
||||
## List types
|
||||
|
||||
### Ordered list
|
||||
|
||||
1. List item 1
|
||||
2. List item 2
|
||||
1. Nested list item A
|
||||
2. Nested list item B
|
||||
3. List item 3
|
||||
|
||||
### Unordered list
|
||||
|
||||
- List item
|
||||
- List item
|
||||
- Nested list item
|
||||
- Nested list item
|
||||
- Double nested list item
|
||||
- Double nested list item
|
||||
- List item
|
||||
|
||||
### Mixed list
|
||||
|
||||
1. First ordered list item
|
||||
2. Another item
|
||||
- Unordered sub-list.
|
||||
3. Actual numbers don't matter, just that it's a number
|
||||
1. Ordered sub-list
|
||||
4. And another item.
|
||||
|
||||
## Links
|
||||
|
||||
[Inline-style link](https://www.google.com)
|
||||
|
||||
[Inline-style link with title](https://www.google.com "Google's Homepage")
|
||||
|
||||
[Reference-style link][arbitrary case-insensitive reference text]
|
||||
|
||||
[You can use numbers for reference-style link definitions][1]
|
||||
|
||||
Or leave it empty and use the [link text itself].
|
||||
|
||||
Some text to show that the reference links can follow later.
|
||||
|
||||
[arbitrary case-insensitive reference text]: https://www.mozilla.org
|
||||
[1]: http://slashdot.org
|
||||
[link text itself]: http://www.reddit.com
|
||||
|
||||
## Images
|
||||
|
||||
Images included in _\_posts_ folder are lazy loaded.
|
||||
|
||||
Inline-style: 
|
||||
|
||||
## Table
|
||||
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ---: |
|
||||
| col 3 is | right-aligned | 1600 |
|
||||
| col 2 is | centered | 12 |
|
||||
| zebra stripes | are neat | 1 |
|
||||
|
||||
| Markdown | Less | Pretty |
|
||||
| -------- | --------- | ---------- |
|
||||
| _Still_ | `renders` | **nicely** |
|
||||
| 1 | 2 | 3 |
|
||||
|
||||
## Syntax highlight
|
||||
|
||||
```ts title="astro.config.mjs" showLineNumbers {1-2,5-6}
|
||||
import { defineConfig } from 'astro/config'
|
||||
import vercelStatic from '@astrojs/vercel/static'
|
||||
|
||||
export default defineConfig({
|
||||
output: 'static',
|
||||
adapter: vercelStatic({
|
||||
webAnalytics: {
|
||||
enabled: true,
|
||||
},
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non
|
||||
molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis
|
||||
culpa, et odit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
|
||||
vero esse non molestias eos excepturi, inventore atque cupiditate. Sed
|
||||
voluptatem quas omnis culpa, et odit. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque
|
||||
cupiditate. Sed voluptatem quas omnis culpa, et odit.
|
||||
|
||||
```python showLineNumbers
|
||||
s = "Python syntax highlighting"
|
||||
print s
|
||||
```
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
layout: '@/layouts/Post.astro'
|
||||
title: Getting Started with Poisson Astro Template
|
||||
publishDate: 2025-06-07
|
||||
description: |
|
||||
This article will guide trough the configuration of the Astro template for Poisson
|
||||
tags: ['astro', 'web-development', 'javascript', 'performance', 'static-site']
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. **Clone or download this template**
|
||||
|
||||
```bash
|
||||
git clone https://git.phc.dm.unipi.it/phc/poisson-template-astro.git
|
||||
cd poisson-template-astro
|
||||
```
|
||||
|
||||
2. **Install dependencies:**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# or
|
||||
bun install
|
||||
```
|
||||
|
||||
3. **To edit the site locally:**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **Edit the configuration:**
|
||||
|
||||
- Update `src/config.ts` with your information
|
||||
- Modify the site title and other settings
|
||||
|
||||
5. **Add your content:**
|
||||
|
||||
- Create posts in `src/pages/posts/`
|
||||
- Add notes in `src/pages/appunti/`
|
||||
- Include any static files in `public/materiale/`
|
||||
|
||||
## Content Creation
|
||||
|
||||
### Blog Posts
|
||||
|
||||
Create new markdown posts in `src/pages/posts/` with the following frontmatter:
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: 'Your Post Title'
|
||||
description: 'Brief description of the post'
|
||||
tags: ['tag1', 'tag2']
|
||||
publishDate: '2025-06-08'
|
||||
draft: false
|
||||
---
|
||||
|
||||
Your content goes here...
|
||||
```
|
||||
|
||||
### Mathematical Content
|
||||
|
||||
The template supports mathematical expressions using [KaTeX](https://katex.org/):
|
||||
|
||||
- Inline math: `$E = mc^2$`
|
||||
|
||||
- Display math: `$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$`
|
||||
|
||||
## Deployment
|
||||
|
||||
### Deploy to Poisson Server
|
||||
|
||||
The template is pre-configured for deployment to the PHC Poisson server:
|
||||
|
||||
1. **Build for Poisson:**
|
||||
|
||||
```bash
|
||||
npm run build:poisson
|
||||
```
|
||||
|
||||
2. **Update the Poisson configuration:**
|
||||
|
||||
- Edit the `build:poisson` script in `package.json`
|
||||
- Replace `ncognome` with your actual username
|
||||
- Update the site URL accordingly
|
||||
|
||||
3. **Upload the built files:**
|
||||
|
||||
- The build creates a `dist/` folder
|
||||
- Upload the contents to your Poisson web directory, for example using `scp`:
|
||||
|
||||
```bash
|
||||
scp -r dist/* ncognome@poisson.phc.dm.unipi.it:/home/ncognome/public_html/
|
||||
```
|
||||
|
||||
or with `rsync`:
|
||||
|
||||
```bash
|
||||
rsync -avz dist/ ncognome@poisson.phc.dm.unipi.it:/home/ncognome/public_html/
|
||||
```
|
||||
|
||||
4. **Access your site:**
|
||||
|
||||
- Visit `https://poisson.phc.dm.unipi.it/~ncognome/` to see your deployed site
|
||||
|
||||
### Deploy to GitHub Pages
|
||||
|
||||
For GitHub Pages deployment, follow these steps:
|
||||
|
||||
1. **Configure Astro for GitHub Pages:**
|
||||
|
||||
Update `astro.config.mjs` to include your GitHub Pages settings:
|
||||
|
||||
```javascript
|
||||
export default defineConfig({
|
||||
site: 'https://yourusername.github.io',
|
||||
base: '/your-repo-name', // Only if not deploying to yourusername.github.io
|
||||
// ... other config
|
||||
})
|
||||
```
|
||||
|
||||
2. **Create GitHub Action workflow:**
|
||||
|
||||
Create `.github/workflows/deploy.yml`:
|
||||
|
||||
```yaml
|
||||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout your repository using git
|
||||
uses: actions/checkout@v4
|
||||
- name: Install, build, and upload your site
|
||||
uses: withastro/action@v3
|
||||
|
||||
deploy:
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
3. **Enable GitHub Pages:**
|
||||
|
||||
- Go to your repository's **Settings** → **Pages**
|
||||
- Select **GitHub Actions** as the source
|
||||
- Commit and push your changes
|
||||
|
||||
4. **Configure for custom domain (optional):**
|
||||
- Add a `CNAME` file in the `public/` directory with your domain
|
||||
- Update the `site` config to use your custom domain
|
||||
- Remove the `base` configuration
|
||||
|
||||
## Configuration Options
|
||||
|
||||
### Site Configuration
|
||||
|
||||
Edit `src/config.ts` to customize:
|
||||
|
||||
- Site title
|
||||
- Post frontmatter types
|
||||
- Other site-wide settings
|
||||
|
||||
### Build Scripts
|
||||
|
||||
- `npm run dev` - Start development server
|
||||
- `npm run build` - Build for production
|
||||
- `npm run build:poisson` - Build for Poisson server deployment
|
||||
- `npm run preview` - Preview the built site
|
||||
|
||||
## Contributing
|
||||
|
||||
This template is designed for academic use at the University of Pisa. Feel free to customize and extend it for your needs.
|
||||
Loading…
Reference in New Issue