6 lines
16 KiB
HTML
6 lines
16 KiB
HTML
<!doctype html><html lang=en dir=auto><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Custom static website generator | Akilan</title>
|
|
<meta name=keywords content="Generator,Website"><meta name=description content="Based on a Website generator built by hw tech club"><meta name=author content="Akilan Selvacoumar"><link rel=canonical href=http://localhost:1313/technicalposts/custom-static-website-generator/><link crossorigin=anonymous href=/assets/css/stylesheet.f49d66caae9ea0fd43f21f29e71a8d3e284517ed770f2aa86fa012953ad3c9ef.css integrity="sha256-9J1myq6eoP1D8h8p5xqNPihFF+13Dyqob6ASlTrTye8=" rel="preload stylesheet" as=style><link rel=icon href=http://localhost:1313/favicon.ico><link rel=icon type=image/png sizes=16x16 href=http://localhost:1313/favicon-16x16.png><link rel=icon type=image/png sizes=32x32 href=http://localhost:1313/favicon-32x32.png><link rel=apple-touch-icon href=http://localhost:1313/apple-touch-icon.png><link rel=mask-icon href=http://localhost:1313/safari-pinned-tab.svg><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate hreflang=en href=http://localhost:1313/technicalposts/custom-static-website-generator/><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--code-block-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><meta property="og:url" content="http://localhost:1313/technicalposts/custom-static-website-generator/"><meta property="og:site_name" content="Akilan"><meta property="og:title" content="Custom static website generator"><meta property="og:description" content="Based on a Website generator built by hw tech club"><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="technicalposts"><meta property="article:published_time" content="2020-02-27T00:00:00+00:00"><meta property="article:modified_time" content="2020-02-27T00:00:00+00:00"><meta property="article:tag" content="Generator"><meta property="article:tag" content="Website"><meta name=twitter:card content="summary"><meta name=twitter:title content="Custom static website generator"><meta name=twitter:description content="Based on a Website generator built by hw tech club"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Technical Posts","item":"http://localhost:1313/technicalposts/"},{"@type":"ListItem","position":2,"name":"Custom static website generator","item":"http://localhost:1313/technicalposts/custom-static-website-generator/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Custom static website generator","name":"Custom static website generator","description":"Based on a Website generator built by hw tech club","keywords":["Generator","Website"],"articleBody":"In this blog post we will talk about the project custom website generator which hw tech club contributors created. Before that a bit of basics of how static website generators work. In the current scenarios websites are either rendered in the front end using React/Vue or in the backend using Jinga , express etc … The flaw in the front end is that websites use a lot of CPU memory from the Client side to load webpages and rendering on the backend does fix this issue but is still relatively more expensive than loading static web pages. A static website generator basically generates static web pages only when content is changed.\nProblems of existing Static website generators There are many static generators such as Hugo and Jenkyll which are super efficient and do a great job in generating static web pages. The only problem is both are human readable and not Api friendly which made it initially tough for us to interact with it. Ex: Hugo has many variations and with Yaml , Toml and creating an Api to store these states and ensuring to populate according to the template was super painful for us.\nSolution To build a simple website generator that can take a JSON file of any shape and populate it to the according website template. The only catch is that both the JSON shape and fields that should be populated in the template should be of the same shape. The implementation of this was done using Node js as that was the only language me and my friends were familiar with at that time.\nProcess of generating a website Send Data via Rest Api Populate inside the appropriate template Copy the files modified and add it to the project directory which is created based on the project name in the JSON file. Respond to the user the website generated link Deploying generated websites in IPFS There are bash scripts added to make it possible to deploy websites generated to IPFS (Interplanetary file system). This is to ensure that your generated website can be deployed on a peer to peer network.\nThe following project is released on GPLv2 hence it is completely open source and we accept contributions from all developers.\nHow to contribute: Create an Issue Create a PR(Pull Request) linking to that issue If we approve it will be merged or we will inform you on the changes we need We have only covered the high level overview of this project and there are other modules not talked about like the whatsapp bot to interact with this Api.\nDocumentation to the project Module of the project we are talking about in this blog Repo Link (Main project) ","wordCount":"452","inLanguage":"en","datePublished":"2020-02-27T00:00:00Z","dateModified":"2020-02-27T00:00:00Z","author":{"@type":"Person","name":"Akilan Selvacoumar"},"mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:1313/technicalposts/custom-static-website-generator/"},"publisher":{"@type":"Organization","name":"Akilan","logo":{"@type":"ImageObject","url":"http://localhost:1313/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=http://localhost:1313/ accesskey=h title="Akilan (Alt + H)">Akilan</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)" aria-label="Toggle theme"><svg id="moon" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=http://localhost:1313/about/ title=About><span>About</span></a></li><li><a href=http://localhost:1313/resume/ title=Resumé><span>Resumé</span></a></li><li><a href=http://localhost:1313/projects/ title=Projects><span>Projects</span></a></li><li><a href=http://localhost:1313/technicalposts/ title="Technical Posts"><span>Technical Posts</span></a></li><li><a href=http://localhost:1313/generalposts/ title="General Posts"><span>General Posts</span></a></li><li><a href=http://localhost:1313/papers/ title=Papers><span>Papers</span></a></li><li><a href=http://localhost:1313/chat/ title=Chat><span>Chat</span></a></li><li><a href=http://localhost:1313/hiking/ title=Hiking><span>Hiking</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=http://localhost:1313/>Home</a> » <a href=http://localhost:1313/technicalposts/>Technical Posts</a></div><h1 class="post-title entry-hint-parent">Custom static website generator</h1><div class=post-meta><span title='2020-02-27 00:00:00 +0000 UTC'>2020-27-02</span> · 3 min · Akilan Selvacoumar | <a href=https://github.com/Akilan1999/Akilan-website/tree/master/content/technicalposts/Custom-static-website-generator.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=toc><details><summary accesskey=c title="(Alt + C)"><span class=details>Table of Contents</span></summary><div class=inner><ul><li><a href=#problems-of-existing-static-website-generators aria-label="Problems of existing Static website generators">Problems of existing Static website generators</a></li><li><a href=#solution aria-label=Solution>Solution</a></li><li><a href=#process-of-generating-a-website aria-label="Process of generating a website">Process of generating a website</a></li><li><a href=#deploying-generated-websites-in-ipfs aria-label="Deploying generated websites in IPFS">Deploying generated websites in IPFS</a></li><li><a href=#how-to-contribute aria-label="How to contribute:">How to contribute:</a></li></ul></div></details></div><div class=post-content><p>In this blog post we will talk about the project custom website generator which hw tech club contributors created. Before that a bit of basics of how static website generators work. In the current scenarios websites are either rendered in the front end using React/Vue or in the backend using Jinga , express etc … The flaw in the front end is that websites use a lot of CPU memory from the Client side to load webpages and rendering on the backend does fix this issue but is still relatively more expensive than loading static web pages. A static website generator basically generates static web pages only when content is changed.</p><h3 id=problems-of-existing-static-website-generators>Problems of existing Static website generators<a hidden class=anchor aria-hidden=true href=#problems-of-existing-static-website-generators>#</a></h3><p>There are many static generators such as Hugo and Jenkyll which are super efficient and do a great job in generating static web pages. The only problem is both are human readable and not Api friendly which made it initially tough for us to interact with it. Ex: Hugo has many variations and with Yaml , Toml and creating an Api to store these states and ensuring to populate according to the template was super painful for us.</p><h3 id=solution>Solution<a hidden class=anchor aria-hidden=true href=#solution>#</a></h3><p>To build a simple website generator that can take a JSON file of any shape and populate it to the according website template. The only catch is that both the JSON shape and fields that should be populated in the template should be of the same shape. The implementation of this was done using Node js as that was the only language me and my friends were familiar with at that time.</p><p><img alt="Describes a high level visualization" loading=lazy src=https://blogs.hwtech.club/images/Customwebsite.png></p><h3 id=process-of-generating-a-website>Process of generating a website<a hidden class=anchor aria-hidden=true href=#process-of-generating-a-website>#</a></h3><ul><li>Send Data via Rest Api</li><li>Populate inside the appropriate template</li><li>Copy the files modified and add it to the project directory which is created based on the project name in the JSON file.</li><li>Respond to the user the website generated link</li></ul><h3 id=deploying-generated-websites-in-ipfs>Deploying generated websites in IPFS<a hidden class=anchor aria-hidden=true href=#deploying-generated-websites-in-ipfs>#</a></h3><p>There are bash scripts added to make it possible to deploy websites generated to IPFS (Interplanetary file system). This is to ensure that your generated website can be deployed on a peer to peer network.</p><p>The following project is released on GPLv2 hence it is completely open source and we accept contributions from all developers.</p><h3 id=how-to-contribute>How to contribute:<a hidden class=anchor aria-hidden=true href=#how-to-contribute>#</a></h3><ol><li>Create an Issue</li><li>Create a PR(Pull Request) linking to that issue</li><li>If we approve it will be merged or we will inform you on the changes we need</li></ol><p>We have only covered the high level overview of this project and there are other modules not talked about like the whatsapp bot to interact with this Api.</p><ul><li><a href=https://website-generator.netlify.app>Documentation to the project</a></li><li><a href=https://github.com/HWTechClub/Custom-Static-Website-Generator/tree/master/website-generator>Module of the project we are talking about in this blog</a></li><li><a href=https://github.com/HWTechClub/Custom-Static-Website-Generator>Repo Link (Main project)</a></li></ul></div><footer class=post-footer><ul class=post-tags><li><a href=http://localhost:1313/tags/generator/>Generator</a></li><li><a href=http://localhost:1313/tags/website/>Website</a></li></ul><nav class=paginav><a class=prev href=http://localhost:1313/technicalposts/it-infrastrucuture-beginners/><span class=title>« Prev</span><br><span>IT infrastructure (Beginners guide)</span></a></nav></footer></article></main><footer class=footer><span>© 2025 <a href=http://localhost:1313/>Akilan</a></span> ·
|
|
<span>Powered by
|
|
<a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
|
|
<a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg>
|
|
</a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html> |