The portfolio uses Astro’s configuration system to manage site settings and build options.
Astro Configuration
The main configuration file is located at astro.config.mjs in the project root.
Current Configuration
import { defineConfig } from 'astro/config'
export default defineConfig({
site: 'https://juanroccia.github.io'
})
Configuration Options
Site URL
The site option defines the base URL where your portfolio will be deployed:
export default defineConfig({
site: 'https://juanroccia.github.io'
})
The site URL is critical for:
- Generating correct canonical URLs
- Creating proper sitemaps
- Ensuring RSS feeds have absolute URLs
- GitHub Pages deployment
Base Path (Optional)
If deploying to a subdirectory, add a base option:
export default defineConfig({
site: 'https://juanroccia.github.io',
base: '/portfolio' // For https://juanroccia.github.io/portfolio
})
Build Configuration
Customize the build output:
export default defineConfig({
site: 'https://juanroccia.github.io',
outDir: './dist', // Default output directory
build: {
format: 'directory', // Creates /page/ instead of /page.html
assets: '_assets' // Custom assets directory name
}
})
Development Server
Configure the development server:
export default defineConfig({
site: 'https://juanroccia.github.io',
server: {
port: 4321, // Default port
host: true, // Listen on all addresses
open: true // Auto-open browser
}
})
TypeScript Configuration
The project uses Astro’s base TypeScript configuration:
{
"extends": "astro/tsconfigs/base"
}
- Proper type checking for Astro components
- Content collections type safety
- Modern JavaScript/TypeScript features
Custom TypeScript Options
You can extend the base configuration:
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"]
}
}
}
Environment Variables
Create a .env file in the project root for sensitive configuration:
PUBLIC_SITE_TITLE="Juan Roccia Portfolio"
PUBLIC_SITE_DESCRIPTION="Full-stack developer and audio engineer"
Only variables prefixed with PUBLIC_ are exposed to the browser. Never prefix sensitive API keys with PUBLIC_.
const siteTitle = import.meta.env.PUBLIC_SITE_TITLE
Adding Integrations
Extend Astro with integrations:
npm run astro add react
npm run astro add tailwind
npm run astro add sitemap
astro.config.mjs:
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import tailwind from '@astrojs/tailwind'
import sitemap from '@astrojs/sitemap'
export default defineConfig({
site: 'https://juanroccia.github.io',
integrations: [react(), tailwind(), sitemap()]
})
Common Customizations
Configure URL format:export default defineConfig({
site: 'https://juanroccia.github.io',
trailingSlash: 'always' // or 'never' or 'ignore'
})
Next Steps
