📦 SETUP • ⚙️ CONFIGURATION • ️️️🛰️ FEATURES
|
Tired of sluggish websites and SEO headaches? Unleash the power of lightning-fast performance and built-in optimization with this Astro template builder! Crafted for developers who value speed and simplicity, this robust toolkit empowers you to build stunning websites that soar in search engines and captivate users. Ditch the struggle and focus on what matters most - crafting impactful content that drives engagement. Welcome to the future of web development - where SEO and performance work hand-in-hand.
(
|
About
Features
Requirements
Installation
Configuration
Usage
Scripts
Browser support
(
Back to top
)
Astro- Astro Framework
Typescript- Extremely strict type checking
Absolute imports- No more bad imports
Sass- Css framework for ui development-
BEMIT- Arquitecture for sass -
Mobile firts- Best performance for css -
Reset- Reset css for match style between browsers -
Join media queries- Join media queries for small file size -
Vendor prefixes- Vendor prefixes for all support -
Remove unused css- Remove unused css in build
Clean arquitecture- For clean code and scalablility
SEO- SEO meta data, open graph and more-
Sitemap- Sitemap generator -
RSS- RSS generator -
Open graph- Advanced open graph SEO -
Robot- Robot txt configuration -
Canonical- Auto canonical url -
Google search console- For SEO stadistics -
Google analytic- For analytics of the webpage
i18n- Internationalization and translations
Linter- Linter and formatting all kind of files-
Eslint- Litner and formatting ts and js files -
Stylelint- Linter css files
Git- Control version and more-
Github issue template- Github issues organization -
Githooks- Git hook for validate code quality -
Changelog- Changelog and realese for github -
Sematic release- Automatization of releases
Configuration- Vscode, env variables and more-
Vscode configuration- Vscode recommendations, extensions and more -
Env validation- Enviroment variables validation -
Htaccess snipets- Differents htaccess for all kind of situations
Components-
Image- Ready to use optimize image component -
Show- Ready to use conditional render component -
For- Ready to use for map components -
Link- Ready to use for redirect external and internal links
Performance-
Web worker (partytown)- For lazy-loaded large libraries -
Bundler analizer- Analize your bundle size -
Compress- Compress images, font, css, js, and html -
Non blocking- Non blocking js, css and more -
Font optimization- Font transformation and declaration
Bun- Fast package manager
Perfect lighthouse score- Because performance matters
(
Back to top
)
node >= 20.10.0- git >= 2.38
- bun >= 1.1.0
aws cli >= 2.17.8
(
Back to top
)
After cloning the repo run this command to install all the dependencies.
bun i
(
Back to top
)
The configuration needed for this project is to set up the env variables and also the site configuration object here are the examples:
This file is located in src/global/configuration/site_configuration.ts
siteName- Global title of the webpagedescription- Global description of the webpageautor- Author object that appears in a meta tagauthor.name- Name of the authorauthor.email- Email of the authorauthor.web- Web of the author
copyright- Copyright of the owner of the websitegoogleAnalyticId- Id of the google analyticsdefaultLocale- Default locale of the webpagelanguages- Object with all the languages you want to supportexample-languages: { en: 'English' }
This environment variables are located in src/global/env/**.env
file: .example.dev.env
PORT=4321
BASE_URL=http://localhost:$PORTfile: .example.prod.env
BASE_URL=file: .example.staging.env
PORT=4321
BASE_URL=http://localhost:$PORT1.- To start using i18n in this project you have to add the languages you want to support in the configuration file src/global/configuration/site_configuration.ts, here you will find an object with the key languages, also remenber to ser the default language to your preferences, you can set the languages like this:
const siteConfiguration =
{
defaultLanguage: 'en',
languages:
{
en: 'English',
es: 'Español'
}
}2.- Next you will create in the src/pages a directory called [language], here you will duplicate and put all the pages of your project, this is an example:
- /pages
- /[language]
- about-us.astro
- index.astro
- 404.astro
- about-us.astro
- index.astro
3.- The pages inside this directory will need to add an aditionnal validation for know if the language is correct and it is listeng in the configuration, you can add tis like this
pages/[language]/index.astro
---
import { getStaticLanguage } from '@global/util/language';
export const getStaticPaths = getStaticLanguage;
---4.- Next you will create the translation files, we recommend to use ts files instead of json but you can aslo use json files
const aboutUsLocale =
{
en:
{
welcome: 'Hello world',
},
es:
{
welcome: 'Hola mundo',
}
};
export { aboutUsLocale };5.- To end you will use this file and make the translation, use this inside you component page and not in the pages/** components
---
import { getI18n, getStaticLanguage, getLanguageFromUrl } from '@global/util/language';
import { aboutUsLocale } from '@module/landing/locale/about_us';
const language = getLanguageFromUrl(Astro.url);
const i18n = getI18n(language, aboutUsLocale);
---
<h1>{i18n.welcome}</h1>6.- Create the file src/middleware.ts and add the following code, this will redirect the default language urls to the base urls, and examples of this is, /en/about-us redirect to /about-us
import { getLanguagePathname, validateDefaultLanguage } from '@global/util/language';
import { defineMiddleware } from 'astro/middleware';
const onRequest = defineMiddleware(async (context, next) =>
{
if(validateDefaultLanguage(context.url))
{
const pathname = getLanguagePathname(context.url);
const redirectCode = 302;
return Response.redirect(new URL(pathname, context.url), redirectCode);
}
return next();
});
export { onRequest };That's all the configuration nedeed for i18n in this project.
(
Back to top
)
Before installing all the dependencies you can run the project with
pnpm devTo see the production ready page you can run
pnpm stagingBuilds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes, also it compress all the assets and images in the dist folder.
Your app is ready to be deployed.
(
Back to top
)
The following scripts are available in the package.json:
preinstall: Enforces the use of pnpm as the exclusive package manager.postinstall: Sets up Git hooks to validate code on commit.check: Performs a comprehensive type check for the entire project.lint: A combined script for formatting and linting all files.lint:eslint: Specifically lints and formats TypeScript and JavaScript files.lint:stylelint: Lints and formats CSS and related stylesheet files.
dev: Starts the development server with live reloading.prod: Runs a full production pipeline: type checks, linting, asset compression, and a final build.build: Creates a production-ready build of the project.
compress:convert: A master script for optimizing typography, images, and illustrations.compress:svg: Compresses SVG images, icons, and illustrations.convert:typography: Converts TTF font files to WOFF and WOFF2 formats.convert:image: Converts PNG images to WebP and AVIF formats.
deploy: Runs a production build and synchronizes the output to an S3 bucket.deploy:sync: Syncs the build output to an S3 bucket.deploy:invalidate: Invalidates the CloudFront cache to propagate changes.
(
Back to top
)
Here is the list of all the browser this website support
IE / Edge |
Firefox |
Safari |
Safari IOS |
Samsung |
Opera |
|
|
|
|
|
|
(
Back to top
)
Copyright © All rights reserved, developed by ElegantCoder and
