static site starter
1.0.0
El inicio del sitio estático es una plantilla de inicio para sitios estáticos.
PISTA: Babel , Browsersync , Gulp , Minilset.CSS , Pug , Sass , Webpack .
# # Serve site at http://localhost:3000 with live reloading
make Este comando también instalará dependencias en la primera ejecución y cuando se actualizan los archivos package.json o yarn.lock .
# # Build site for production use
make build Este comando también instalará dependencias en la primera ejecución y cuando se actualizan los archivos package.json o yarn.lock .
# # List available commands
make help .
├── documentation-images # PROJECT DOCUMENTATION IMAGES
│
│
├── gulp # GULP/WEBPACK CONFIGURATION AND TASKS
│ ├── env # Gulp configuration per environment
│ │ ├── dev.js # Development environment
│ │ └── prod.js # Production environment
│ │
│ ├── helpers # Gulp helpers
│ │ └── url.js # Helper for URL creation
│ │
│ ├── tasks # Gulp tasks
│ │ ├── pug.js # Pug task declaration
│ │ ├── sass.js # Sass task declaration
│ │ └── script.js # JavaScript task declaration
│ │
│ ├── webpack # Webpack configuration per environment
│ │ ├── common.js # Shared between development and production environments
│ │ ├── dev.js # Development environment
│ │ └── prod.js # Production environment
│ │
│ └── index.js # Script to invoke proper environment and dynamically load Gulp tasks
│
│
├── js # JAVASCRIPT SOURCE FILES
│ ├── foo.js # Sample script imported in scripts.js
│ └── scripts.js # Main JavaScript file used as entry by Webpack
│
│
├── sass # SASS STYLE
│ ├── base # Base style
│ │ ├── _all.sass # Importing all stylesheets
│ │ ├── generic.sass # Style for generic elements (html, body, etc.)
│ │ └── helpers.sass # Helper classes (modifiers)
│ │
│ ├── dev # Development utilities
│ │ ├── shame.sass # WIP style or dirty hacks
│ │ └── structure.sass # Highlighting site structure (import commented by default)
│ │
│ ├── fonts # Fonts style
│ │ ├── _all.sass # Importing all stylesheets
│ │ └── roboto.sass # @font-face style for Roboto
│ │
│ ├── layout # Layout style
│ │ ├── _all.sass # Importing all stylesheets
│ │ └── layout.sass # Very light starter style for structure elements and titles
│ │
│ ├── utilities # Utilities
│ │ ├── _all.sass # Importing all stylesheets
│ │ ├── animations.sass # Some basic animations
│ │ ├── functions.sass # Functions
│ │ ├── mixins.sass # A few useful mixins
│ │ └── variables.sass # Variables for colors, typography, etc.
│ │
│ └── style.sass # Main Sass file used as source by Gulp
│
│
├── site # SITE BUILD DESTINATION FOLDER
│ ├── fonts # Font assets
│ │ └── roboto # Roboto from Google Fonts (TTF, WOFF, WOFF2)
│ │
│ └── images # Image assets
│ ├── favicon.ico # Favicon (placeholder by default)
│ ├── og-image.jpg # Image for og:image meta tag (placeholder by default)
│ └── unicorn.jpg # Sample image
│
│
├── templates # PUG TEMPLATES
│ ├── layouts # Layouts
│ │ └── default.pug # Default layout
│ │
│ ├── partials # Partials
│ │ └── unicorn.pug # Sample partial featuring an image
│ │
│ ├── index.pug # Home page
│ └── page.pug # Sample page
│
│
├── .babelrc # Presets and plugins to use, used by Babel
├── .gitignore # Files and folders ignored by Git
├── .tool-versions # Which version to use locally for each language, used by asdf
├── gulpfile.js # Gulp configuration
├── LICENSE # License
├── Makefile # Commands for this project
├── package.json # JavaScript dependencies, used by Yarn
├── README.md # Project documentation
└── yarn.lock # Tracking exact versions for JavaScript dependencies, used by Yarn
El arrancador viene con un diseño simple, estructurado como el siguiente:
// Wrapper
.wrapper
// Header
header .header
.container
…
// Main
main .main
// Section (repeatable)
section .section
.container
…
// Footer
footer .footer
.container
…
También hay una utilidad SASS que permite resaltar la estructura del sitio (bastante útil en el desarrollo). Simplemente descomplante @import "dev/structure.sass" en style.sass si desea usarlo.
Nuestra estrategia para la quiebra de caché es agregar automáticamente un ?v=[version] a cada consulta de activos. Cuando necesite reventar el caché, simplemente actualice version en package.json .
En plantillas PUG, una variable assetVersion está disponible. Uso:
img ( src = "images/unicorn.jpg" + assetVersion, alt = "" ) En los archivos SASS, hay una función urlVersion disponible. Uso:
background-image: urlVersion("/images/unicorn .jpg ") Se requiere hacer alguna configuración para obtener title , description y og: metaetiquetas listas para la producción. Puede leer más sobre las metaetiquetas OG en la documentación del protocolo de gráfico abierto.
Paso 1: Establezca las siguientes variables en default.pug :
- var siteTitle = " Site title " ;
- var siteDescription = " Site description " ;
- var baseUrl = " https://site-url.com " ; Paso 2: Establezca la variable pageTitle para cada página. Por ejemplo en index.pug :
- pageTitle = " Home " ;Paso 3: Personalice la imagen OG.
¡Las contribuciones, los problemas y las solicitudes de funciones son bienvenidas! Vea la lista de contribuyentes que participaron en este proyecto.
El inicio del sitio estático tiene licencia bajo la Licencia Pública General de GNU V3.0.
