如何用BEM构建一个完全静态的多页面网站？

Question

到目前为止，我见过的所有教程都描述了如何创建单页网站或仅创建几个包。以下是一个简单的网站导航示例：

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

是否有可能使用bem-tools，bemjson，bemhtml构建这样一个站点，但没有像node.js或php那样的服务器端技术？

构建应该只包含一个目录，每个页面包含最终的.html，.css，.js文件和图像，并且应该托管在像Amazon S3这样的静态文件上。它也应该是一个oldschool静态网站，而不是单页ajax网站。

这个用例是否有任何易于使用的解决方案，还是应该创建自己的构建过程来从捆绑目录中收集文件？

Answer 1

好问题，答案是 - 是的，你可以：）

首先，您需要克隆project-stub repo并安装依赖项：

git clone git@github.com:bem/project-stub.git
cd project-stub
npm i
./node_modules/.bin/bem make libs

现在您已配置项目存根以使用bem-tools开发站点。

包含了页面index。

让我们创建页面about：

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

此命令会创建文件desktop.bundles/about/about.bemjson，该文件以BEM术语表示您的页面。

您可以在运行时看到此页面

./node_modules/.bin/bem server

并在浏览器中打开http://localhost:8080/desktop.bundles/about/about.html。

阅读更多内容：http://bem.info/libs/bem-core/1.0.0/bemhtml/reference/，＆＃34;输入数据：BEMJSON＆＃34;章。

要获得具有严格图片路径的最终css，您需要安装cssrb包：

sudo npm i cssrb -g

要获得最终构建目录，您需要将bem-static-build.sh文件放在项目的根目录中并运行它：

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

构建器进程结束后，您可以在desktop.bundles/merged/build文件夹中找到静态站点：

NB： 如果您的页面上有内容图像，则必须将它们放入desktop.bundles/merged/img文件夹并对所有页面文件夹进行符号链接：

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

所有页面的

等。需要执行此操作，因为bem server显示相对于其文件夹的页面，使用符号链接，您可以在about.bemjson中写入图像src，并且所有页面都是这样的：

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

它应该有效！

欢迎任何问题！