Skip to main content

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#

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/)

Installation#



To 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 server#

To 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

Build#

Travelata 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