How to build a completely static multipage website with BEM?

Question

All tutorials I've seen so far describe how to create single page sites or just several bundles. Here is an example of a simple website navigation:

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

Is it possible to build such a site with bem-tools, bemjson, bemhtml but without any serverside tech like node.js or php?

The build should include only a directory with final .html, .css, .js files and images per page and should be hosted on a static file hosting like Amazon S3. It should also be an oldschool static website, not a single page ajax site.

Is there any easy to use solution for this use case or should one create her own build process to collect the files from the bundle directories?

Answer 1

Good question, and the answer is - yes, you can :)

First of all, you need to clone project-stub repo and install dependencies:

git clone [email protected]:bem/project-stub.git
cd project-stub
npm i
./node_modules/.bin/bem make libs

Now you have configured project stub to develop site with bem-tools.

Page index is included.

Let's create page about:

./node_modules/.bin/bem create -b about -l desktop.bundles/

This command creates file desktop.bundles/about/about.bemjson, which represents your page in BEM terms.

You can see this page when you run

./node_modules/.bin/bem server

and open http://localhost:8080/desktop.bundles/about/about.html in browser.

Read more: http://bem.info/libs/bem-core/1.0.0/bemhtml/reference/, "The Input Data: BEMJSON" chapter.

To get final css with rigth image path's, you need to install cssrb package:

sudo npm i cssrb -g

And to get final build directory, you need to put bem-static-build.sh file in root of your project and run it:

 wget https://raw.github.com/alexbaumgertner/bem-static-build/master/bem-static-build.sh
 sh  bem-static-build.sh

After builder process ended, you can find static site in desktop.bundles/merged/build folder:

NB: If you have content images on your page, you must put them into desktop.bundles/merged/img folder and make symlinks to all pages folders:

ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/index/img
ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/about/img

and etc for all pages. This actions are needed because bem server shows a page relative to its folder and with symlink you can write image src in about.bemjson and all pages like this:

    {
        block: 'user',
        content: [
            {
                elem: 'avatar',
                tag: 'img',
                attrs: {
                    src: 'img/dypsilon.png' // relative way
                }
            }
        ]
    }

and it should work!

Any questions are welcome!