{"id":15782341,"url":"https://github.com/jeroentvb/modularize-html","last_synced_at":"2025-03-14T09:30:28.996Z","repository":{"id":42082610,"uuid":"168352929","full_name":"jeroentvb/modularize-html","owner":"jeroentvb","description":"CLI package to build a static website from EJS templates","archived":false,"fork":false,"pushed_at":"2024-12-13T12:21:46.000Z","size":480,"stargazers_count":0,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T10:42:40.764Z","etag":null,"topics":["ejs","framework","html","modular","nodejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/modularize-html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeroentvb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-30T14:06:03.000Z","updated_at":"2024-06-17T08:11:58.000Z","dependencies_parsed_at":"2024-10-13T09:00:38.802Z","dependency_job_id":"75bd29f9-9254-42f1-90a4-72e6e3b84874","html_url":"https://github.com/jeroentvb/modularize-html","commit_stats":{"total_commits":76,"total_committers":3,"mean_commits":"25.333333333333332","dds":0.1842105263157895,"last_synced_commit":"b48a5ced0ac597a7154ceb351ca4d726c17d427e"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroentvb%2Fmodularize-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroentvb%2Fmodularize-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroentvb%2Fmodularize-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeroentvb%2Fmodularize-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeroentvb","download_url":"https://codeload.github.com/jeroentvb/modularize-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243553830,"owners_count":20309815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ejs","framework","html","modular","nodejs"],"created_at":"2024-10-04T19:05:51.495Z","updated_at":"2025-03-14T09:30:28.675Z","avatar_url":"https://github.com/jeroentvb.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/modularize-html.svg)](https://badge.fury.io/js/modularize-html)\n\n# Modularize html\nThis CLI package uses [ejs](https://ejs.co/#docs) to allow building a static website from modular ejs (HTML) files. The main goal is to enable a developers to create a static site in a modular way. It's also meant to be as simple as possible, while applying some best practices at build.   \nIt can also minify js \u0026 css, and encode png and jpeg files to webp on build.\n\nAlso check out the [boiler plate repo](https://github.com/jeroentvb/modularize-html-boilerplate) which uses this package.\n\n## Table of contents\n* [Installation](#installation)\n* [Usage](#usage)\n* [Config](#config)\n  + [build.minify.js](#buildminifyjs)\n  + [build.minify.css](#buildminifycss)\n  + [build.encodeImagesWebp](#buildencodeimageswebp)\n  + [build.pageTitle.home](#buildpagetitlehome)\n  + [build.pageTitle.suffix](#buildpagetitlesuffix)\n  + [development.removeWebpSources](#developmentremovewebpsources)\n  + [development.staticSite](#developmentstaticsite)\n  + [development.customTemplateVariables](#developmentcustomtemplatevariables)\n  + [sass](#sass)\n* [Development](#development)\n  + [New page](#new-page)\n  + [Page titles](#page-titles)\n  + [webp images](#webp-images)\n  + [Linking html files](#linking-html-files)\n  + [CSS preprocessor](#css-preprocessor)\n  + [JS minify/transpile](#js-minify-transpile)\n  + [Build the website](#build-the-website)\n\n## Installation\nInstall using the following commands\n```sh\nnpm install modularize-html\n```\n\n## Usage\nAdd the following lines in your `package.json` under `scripts`:  \n```json\n\"create-config\": \"modularize-html create-config\",\n\"dev\": \"modularize-html serve\",\n\"new-page\": \"modularize-html new-page\",\n\"build\": \"modularize-html build\"\n```\n\nNext, run `npm run create-config`. This creates the necessary config file. Ater that you can run `npm run dev`, and start developing.\n\nBuild your website in a folder called `src` in the root directory of your project. The page templates should go in `src/pages`. Partials/components can go into any directory. Just link them in your page to use them.\n\n## Config\nThere are a few configurable options for modularize-html in `modularize-html-config.json`.\n### build.minify.js\n*Boolean*  \nMinify the JavaScript files on build.\n\n### build.minify.css\n*Boolean*  \nMinify the CSS files on build.\n\n### build.encodeImagesWebp\n*Boolean*  \nEncode `.jpg` and `.png` images to `.webp` on build. More info [here](#webp-images).\n\n### build.pageTitle.home\n*String*  \n`\u003ctitle\u003e` for the `index.html` file.\n\n### build.pageTitle.suffix\n*String*  \nSuffix for the page `\u003ctitle\u003e`. Can be empty.\n\n### development.removeWebpSources\n*Boolean*  \nRemove `.webp` `\u003csource\u003e` tags from a `\u003cpicture\u003e` element while running the dev server. More info [here](#webp-images).\n\n### development.staticSite\n*Boolean*  \nSend message to the browser if the link navigate to doesn't contain `.html`. That means it's not linked in the html with `.html` and won't work as a static site.  \nIf you are planning on hosting the pages on a web server, you won't need to do so, because the server should resolve the url.\n\n### development.customTemplateVariables\n*Object*  \nKeys in this object will be made available in your ejs template pages. This way you can pass in your own arrays and objects to the template in order to build the site from the provided data.\n\n### sass\n*Boolean*\nTo use scss while developing, set this to true. Entry file is `styles.scss`.\n\n## Development\nTo develop the website, this app uses a simple [express](https://www.npmjs.com/package/express) server. To run the dev server enter `npm run dev` in the terminal.\n\n### New page\nTo create a new page use `npm run new-page pagename`. Where `pagename` would be the name of your page. This creates a new template with the head and tail already linked.\n\n### Page titles\nThe page titles are based on the filenames. The only exception being index(.html), which can be set in the [config](#build.pageTitle.home). You can put a suffix behind the title, also found in the [config](#build.pageTitle.suffix). If you want to use a custom page title, you must add your own `\u003chead\u003e` and __not__ use the default `head.ejs`.\n\n### webp images\nWhile developing you can enable the options under the `webp` key in the config to develop your website without having to worry about compiling images to `.webp` format. This is done in the build step if `encodeImages` is set to `true`.  \nIf you'd like to use `.webp` images in the final build, it's recommended to use the provided `image-jpg.ejs` or `image-png.ejs` templates. Alternatively you can link your `.webp` sources manually.\n\n### Linking html files\nLinking to another file is the same as you would in a static html file, so link to `/index.html`.  \nAlso see the [development.staticSite](#development.staticSite) config option.\n\n### CSS preprocessor\nYou can use your own css preprocessor if you so desire. Just make sure changes in your source file are being watched and compiled a css file and make sure it's linked in [head.ejs](src/partials/head.ejs), or your custom `\u003chead\u003e`. Otherwise changes won't show up or be included in the compiled website.\n\n### JS minify/transpile\nYou can use your own js transpiler if you so desire. Just make sure it's compiled and linked in [tail.ejs](src/partials/tail.ejs), or anywhere else, before compiling the website.\n\n### Build the website\nIf you are done you can build the website using `npm run build`. This will copy the assets folder to a newly created `dist` folder. It also compiles the ejs templates and creates an html file in the `dist` folder.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeroentvb%2Fmodularize-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeroentvb%2Fmodularize-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeroentvb%2Fmodularize-html/lists"}