Welcome
Thank you for purchasing our HTML template. This documentation will help you to:
- Understand structure and architecture of the template
- Install all required dependencies and start project locally
- How to modify templates and extend template features
- How to build production package and deploy on live server
tip
IF you are not interested in nunjucks
templating language, you can just run command npm run start
and copy HTML code from generated /dist
folder
#
Tech stack- Tailwind CSS - A utility-first CSS framework
- 11ty - A simpler static site generator
- Nunjucks - Templating language for Javascript
- Alpine.js - Lightweight JavaScript framework
- Anime.js - Javascript animation
#
File structureโโโ travelataโ โโโ src # Development project with nunjucks and sass filesโ โ โโโ _data # Your global data folder (more details here https://www.11ty.dev/docs/data-global/)โ โ โ โโโ site.js # Site data like (title, description, author)โ โ โโโ _includes # Folder where you can have reusable components or partsโ โ โ โโโ components # Reusable components like footer, nav, headerโ โ โ โโโ layouts # Site layouts, in our case we have only base.njk layoutโ โ โ โโโ macros # Allows you to define reusable chunks of content (https://mozilla.github.io/nunjucks/templating.html#macro)โ โ โ โโโ parts # Content parts for pages like home, about, destinations, blogโ โ โ โโโ svg # Place all your SVG in thins folder and use them inline like {% include "svg/logo.svg" %}โ โ โโโ assets # Images and Javascript assetsโ โ โ โโโ img # Images folderโ โ โ โโโ js # Main javascript files of the projectโ โ โโโ css # All styling filesโ โ โ โโโ styles.css # Main stylesheet fail with tailwind setupโ โ โโโ pages # All site pagesโ โ โโโ posts # All site postsโ โ โโโ index.njk # Main index file of the projectโ โ โโโ robots.txt # File to control indexing by search engines (SEO)โ โโโ dist # Production build (output with HTML, CSS, JS files)โ โโโ utils # Utils functions for eleventyโ โโโ node_modules # nodejs package managerโ โโโ package.json # nodejs configuration file with dependencies managementโ โโโ tailwind.config.js # tailwind configuration file (https://tailwindcss.com/docs/configuration)โ โโโ .eleventy.js # eleventy configuration file (https://www.11ty.dev/docs/config/)
#
InstallationTo install production
version of template you can just copy all content from dist
folder and move to a server.
info
To install development version of template with support for nunjucks & eleventy files, you need to install nodejs LTS version.
Go to root folder of your project (same level with package.json file) and execute following command in terminal:
cd my-websitenpm install
#
Running the development serverTo preview your changes as you edit the files, you can run a local development server that will serve your website and reflect the latest changes.
npm run start
#
BuildTravelata is a modern static website generator so we need to build the website into a directory of static contents and put it on a web server so that it can be viewed. To build the website:
npm run build
note
This command will build production-ready website, you can find build in my-website/dist
folder