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.
Feel confused? 🤔 Watch the video below! 👇
Start a development server
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 (
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.
CSS & JS customisations
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.
More configuration options
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 integration
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
Google Analytics integration
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.
Compile and minify for production
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.
Deploy with Netlify
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 👇