My favorite solution to this problem is. I always structure the static website payload in several JSON files. And adopting the web components paradigm is easy to manage each group of information. To change the content, I just look into the JSON files, I rarely touch the core. Unless changes to the UI.
I don't use no-code web tools to build a static website.
If the project case has closed. To reopen it even for small changes, I will consider it as a new project.
This can be achieved by using VueJS, ReactJS, or using simply Vanilla JS to create web components.
Let say I need a section in a static HTML page to display articles in card design, first I create a new web component (HTML+CSS+JS) and UI styling based on the mockup from Framer.
I iterate the data from the JSON file to the card components without duplicating codes.
Example card component to display articles,
<!-- @file: /src/views/components/card/articles.html --><card-articles><!-- looping data from article.json --><yeach="{ data in articles }"><!-- begin CSS styling -->
{ data.title }
{ data.description }
{ data.tags }
{ data.date }
</y><script>// fetch() data from JSON fileexportdefault{onMounted(){constself=thisself.articles=[]consturl='/path/to/file/articles.json'fetch(url).then(res=>{res.json().then(data=>{deleteself.errorself.articles=dataself.update()}}).catch(error=>{self.error=errorself.update()})})}}</script></card-articles>
An example of payload (data) for the card web component in JSON (example: articles.json).
And then, mounting and looping the data at another page that need to reuse the same component.
<!-- @file: /src/views/pages/article.html --><page-article><!-- looping data from article.json --><yeach="{ data in articles }"><!-- mount the `card` component --><card-articlestitle="{ data.title }"description="{ data.description }"tags="{ data.tags }"date="{ data.date }"></card-articles></y><script>// fetch() the data from JSON file showed earlier</script></page-article>
For me, it doesn't seem too complicated for a static website. But every component (header, navbar, hero, cta, footer, gallery, etc.) are much easier to manage. I can also be hosting the payload (data) at Firebase, which the website is running as serverless.
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
I am using the in-house proprietary framework, instead of (Vue.js, React.js, etc.). I am more prefer less, clean and concise programming language design. So that I could spend less time on typing too many codes.
I found an article at CSS Tricks about the topic you are looking for. After you read the articles, you probably wonder why the hell we need React anyway... Lol
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
My favorite solution to this problem is. I always structure the static website payload in several JSON files. And adopting the web components paradigm is easy to manage each group of information. To change the content, I just look into the JSON files, I rarely touch the core. Unless changes to the UI.
I don't use no-code web tools to build a static website.
Interesting! Please, tell us more about on how to build a static site with JSON payload content.
This can be achieved by using
VueJS
,ReactJS
, or using simplyVanilla JS
to createweb components
.Let say I need a section in a static HTML page to display articles in card design, first I create a new web component (HTML+CSS+JS) and UI styling based on the mockup from Framer.
I iterate the data from the JSON file to the card components without duplicating codes.
Example
card
component to displayarticles
,An example of payload (data) for the
card
web component in JSON (example:articles.json
).If I need to make the component reusable, I can make changes to the component with added API callbacks to use it on any pages I want.
An example to convert a web component with added API callbacks.
And then, mounting and looping the data at another page that need to reuse the same component.
For me, it doesn't seem too complicated for a static website. But every component (header, navbar, hero, cta, footer, gallery, etc.) are much easier to manage. I can also be hosting the payload (data) at Firebase, which the website is running as serverless.
Do you have a example site in your Github repo with Vanilla JS or at least tutorial to learn this ?
Hoho... I do not have any tutorial for that. But you can find a working example repo of My Portfolio Website.
The payload (data) path is in,
I found an article at CSS Tricks about the topic you are looking for. After you read the articles, you probably wonder why the hell we need
React
anyway... Lol