π¦ 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
π 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
π 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 component
- Ready to use optimize image componentβ Show component
- Ready to use show componentβ For component
- Ready to use for map components
οΈβ‘οΈ 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
π¦ Pnpm
- Fast package managerπ― Perfect lighthouse score
- Because performance matters
- node >= 20.10.0
- git >= 2.38
- pnpm >= 8.2.0
After cloning the repo run this command to install all the dependencies
pnpm install
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 webpagedefaultLocale
- Default locale 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
googleSiteVerificationId
- Id of google search consolegoogleAnalyticId
- Id of the google analytics
This environment variables are located in src/global/env/**.env
file: .example.dev.env
PORT=3000
BASE_URL=http://localhost:$VITE_PORT
file: .example.prod.env
BASE_URL=
file: .example.staging.env
PORT=4173
BASE_URL=http://localhost:$VITE_PORT
Before installing all the dependencies you can run the project with
pnpm dev
To see the production ready page you can run
pnpm staging
Builds 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.
The following scripts are available in the package.json
:
preinstall
: This script is for only allow pnpm as package managerpostinstall
: This script is for setting up the git hooks and validate the error after commit to githubdev
: This script is for see the webpage in dev modestaging
: This script is for see production, this run the env variables an set the webpage with all the settingsbuild-dev
: This script compile the project in dev modebuild
: This script is for build in productionlint
: This script is for format and lint all the fileslint-eslint
: This script is for lint ts, tsx and more fileslint-stylelint
: This script is for lint css files
Here is the list of all the browser this website support
Firefox |
Safari |
Safari IOS |
Samsung |
Opera |
|
βοΈ | βοΈ | βοΈ | βοΈ | βοΈ | βοΈ |