HTML templates (Tailwind CSS)
Unzip and open the folder of the HTML template with your favourite editor (I am using VSCode).
The HTML template is shipped with Webpack just to let you quickly get into the development process. We don't discourage you from using any other build tool!
The first thing to do is to install NPM dependencies. To do that, open the terminal, type npm install and press the Enter key. This command will create a node_modules folder in the root of your template, which contains all required dependencies.
Unzip and open the folder of the HTML template with your favourite editor (I am using VSCode).
The HTML template is shipped with Webpack just to let you quickly get into the development process. We don't discourage you from using any other build tool!
The first thing to do is to install NPM dependencies. To do that, open the terminal, type npm install and press the Enter key. This command will create a node_modules folder in the root of your template, which contains all required dependencies.
Run npm start in the terminal to run a development server and open http://localhost:8080/ to view it in the browser. The page will reload every time you make edits.
Any kind of change should be made inside the src folder. Inside that, you will find the HTML template pages, alongside with styles (src/css), images (src/images), and some JavaScript (src/js).
In order to make the content easier to read and maintain, we have sliced the HTML pages content into partials by taking advantages of html-loader for Webpack (https://webpack.js.org/loaders/html-loader/). Partial HTML files are located in the src/partials folder. No extra configuration is required.
There isn't much to say about the CSS when it comes to templates that are built on the top of Tailwind CSS, so I would recommend to check out the Tailwind documentation.
As for JavaScript, we have started adopting third-party libraries (e.g. Alpine.js, AOS, and more) instead of custom code. Check out the src/js/main.js file to see how to import the JS dependencies.
For more site configuration options (favicons, Google Analytics), Tailwind CSS and Webpack configuration files, have a look into the config folder of the template.
Google Analytics tracking code will automatically be inserted to the optimal position of all of your HTML pages. You can specify your analytics tracking ID by updating the googleAnalyticsUA config variable in the config/site.config.js file.
Favicons will automatically be generated from a single source file. Your favicon source file is located at src/images/favicon.png. The name and location of this file can be changed by updating the favicon config variable in the config/site.config.js file. A 512x512px image file is recommended.
When you have done with changes, run npm run build for compiling and minify for production. This command will generate a dist folder in the root of your template that you can upload via FTP to your server.
You can alternatively configure the config/site.deploy.js file, and upload your site via FTP through the npm run deploy command. In that case, remember to keep your repository private to avoid exposing your FTP credentials, or exclude that configuration file from the repository.
You can alternatively host your site on Netlify: our templates come with a ready-made netlify.toml file to allow you deploying with Netlify and go live in a few clicks. You just need to create a repository from the HTML template, create a new site from Git in Netlify, and deploy the app. For more information, refer to Netlify documentation: https://docs.netlify.com/
Check out the video to see how to start a development server, make changes, and deploy your site via FTP or with Netlify 👇
