# From .scss/.js/.html project to Jekyll site

**URL:** <https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650>\
**Category:** Help\
**Created:** [January 13, 2025, 4:57pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650 "2025-01-13T16:57:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![new\_in\_town](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@new\_in\_town](https://talk.jekyllrb.com/u/new_in_town)\
**Post date:** [January 13, 2025, 4:57pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/1 "2025-01-13T16:57:37Z")

</div>

Hi all,

I built kind of prototype/proof-of-concept project: multiple .scss/.js/.html files in several subdirectories with package.json on top and Parcel (see [parceljs.org](http://parceljs.org)) to generate one HTML page with correct links to .css/.js and other stuff. This prototype works - with one command I get working and correct HTML page, with all design/layout/functional elements I want.

Now I want to build a site having about 30 pages with navigation bar/menu etc., with all the elements like in this prototype.  
Probably I will use Jekyll to build this site.  
Probably these 30 pages will be created based on data in the some \_data/\*.yml file: Jekyll is good for this.

The question is: **how to bring together 2 different worlds** :  
-world where you can edit .scss .js files to improve layout, to have some advanced JS functionality  
-world where you build large site using “large building blocks”: I mean Jekyll world.

I mean: should it be a “Jekyll layout” or “Jekyll theme” or Jekyll-something-else?

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [January 15, 2025, 5:22pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/2 "2025-01-15T17:22:51Z")

</div>

- you can’t output pages from data files, but you can use data inside a file. It would be nice if you could create pages on the fly with a data file but you can’t.

As for how to combine stuff, hard to say. You can use other things with jekyll, for instance I used to use gulp to handle images, js and css, this made jekyll slightly faster but it did make things a little more complicated. I stopped doing that after a while.

I’m not sure what you mean by advanced js functionality - if you mean like react then just use react and skip jekyll. Jekyll works fine with vanilla js and you could export the data file to a json file and then have js do something fancy with it but really if you want a reactive site then just use a react framework like next.js. Next.js can do everything jekyll can do and a lot more, though it is considerably more complicated.

With jekyll you can already have a world where you can edit scss and js files and you can build a large site. If it is all static content like a blog or a marketing site it works quite well.

---

<div class="post-metadata">

**Author:** ![new\_in\_town](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@new\_in\_town](https://talk.jekyllrb.com/u/new_in_town)\
**Post date:** [January 15, 2025, 10:00pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/3 "2025-01-15T22:00:38Z")

</div>

> [@rdyar](#):
>
> Next.js can do everything jekyll can do and a lot more, though it is considerably more complicated.

@rdyar thanks for the idea!  
I was under the misconception that static site generators and Big Web Frameworks are two completely different animals ))

---

<div class="post-metadata">

**Author:** ![new\_in\_town](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@new\_in\_town](https://talk.jekyllrb.com/u/new_in_town)\
**Post date:** [January 15, 2025, 10:01pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/4 "2025-01-15T22:01:28Z")

</div>

Well, probably Next.js is TOO big for me… but something like Astro or 11ty might work…

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [January 15, 2025, 10:25pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/5 "2025-01-15T22:25:13Z")

</div>

Not sure what you mean by too big - I run pretty small sites off it just cause I like the way it works. Maybe hosting is more of an issue, I don’t mind paying vercel $20 per month but you can also use AWS Amplify I think and that is practically free though when I tried it a couple years ago it was stuck on an even older version of next. I would imagine by now it works on the most current version.

It sounds like you are already using node and npm and all that, not much difference with next.

11ty is a lot like jekyll, never used it. I hear a lot about Astro but have never used it either, sounds cool though.

---

<div class="post-metadata">

**Author:** ![new\_in\_town](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@new\_in\_town](https://talk.jekyllrb.com/u/new_in_town)\
**Post date:** [January 15, 2025, 10:31pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/6 "2025-01-15T22:31:06Z")

</div>

> Not sure what you mean by too big

Actually I am a backend developer.  
So, I can write SOME Javascript, some isolated frontend functionality (have to google a lot, to use AI assistant… all possible tricks…).  
Somehow it works. Uff )))

Therefore I avoid like the plague to deal with big JS frameworks: and Next.js is such a monster-framework capable to do everything and bring you coffee ))  
So I am looking at small, isolated tools (and, it seems, 11ty is just a static site generator: NOT a framework)

And hosting: it should be just set of files in the filesystem, nothing else. Lot of options to host this.

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [January 16, 2025, 5:12pm UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/7 "2025-01-16T17:12:12Z")

</div>

I believe everything you want to do then can be put together with jekyll, scss, and js. Jekyll, in this case, would replace Parcel. At least for me it looks like they kind of serve the same purpose. Jekyll handles scss well and the correct links, so it is fine, and also with a simple `bundle exec jekyll build` or `bundle exec jekyll serve` you can get your final site up and running.

Check, for instance, [Jekyll Showcase! - Share your sites built with Jekyll](https://talk.jekyllrb.com/t/jekyll-showcase-share-your-sites-built-with-jekyll/) and [Jekyll Theme Showcase! - Share your Jekyll themes](https://talk.jekyllrb.com/t/jekyll-theme-showcase-share-your-jekyll-themes/1382).

---

<div class="post-metadata">

**Author:** ![bewuethr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/bewuethr/32/4611_2.png) [@bewuethr](https://talk.jekyllrb.com/u/bewuethr)\
**Post date:** [January 17, 2025, 8:01am UTC](https://talk.jekyllrb.com/t/from-scss-js-html-project-to-jekyll-site/9650/8 "2025-01-17T08:01:45Z")

</div>

There is a plugin to generate pages from data:

> **[GitHub - avillafiorita/jekyll-datapage\_gen: Generate one page per yaml record in Jekyll sites.](https://github.com/avillafiorita/jekyll-datapage_gen)**
>
> Generate one page per yaml record in Jekyll sites.

I haven’t tried it, though.
