من به دنبال راهی سریعتر برای ایجاد سایت های استاتیک بودم. من به Nuxt و سایر چارچوب های JS نگاه کرده ام – همه آنها جاوا اسکریپت زیادی را در صادرات بسته بندی می کنند و به همه سئو دوستانه نگاه نمی کنند و از آنها ساده نیستند. هوگو خیلی پیچیده به نظر می رسد و من جکیل را امتحان نکردم.
Eleventy چنین بسته ای بصری است که برای ایجاد سایت های استاتیک استفاده می شود.
نصب
یک پوشه درست کنید یا یک repo ایجاد کنید و سپس آن را به صورت محلی کلون کنید. یک پروژه گره را با:
npm init -y
نصب بالایی:
npm install @11ty/eleventy
2 پوشه را در کنار بسته ایجاد کنید. json: site وت publicبشر
در package.json نوع به روزرسانی به ماژول ("type": "module") و این دستور را در قسمت Scripts اضافه کنید:
"scripts": {
"dev": "npx @11ty/eleventy --input=./site --output=./public --serve --port=3000 --incremental"
}
با npm run dev 11tly به دنبال خواهد بود site دایرکتوری و صادر کردن سایت استاتیک در public دایرکتوری
صفحه اول
در site دایرکتوری ایجاد index.md پرونده ای که در آن می توانید این علامت گذاری را اضافه کنید:
# This will be parsed into an h1 tag
حالا برو به localhost:3000 و صفحه HTML ارائه شده را مشاهده خواهید کرد.
آنچه دیوانه است این است که شما می توانید HTML را در پرونده .md با سبک CSS و برچسب های اسکریپت داشته باشید:
# این به یک برچسب H1 تجزیه می شود
H1 {
رنگ: قرمز؛
}
let header = document.getElementById('header');
header.addEventListener('click', function () {
alert("You clicked the header!");
});
document.addEventListener('DOMContentLoaded', function () {
alert("Hello, World!");
});
vscode intelisense will not be great you’ll need to change extension name to .html then back to .md. You are not forced to use only .md files you can mix .md with .html files.
Multiple pages and routes
A static site will have multiple pages. To add a new page, next to index.md file create another .md file let’s say about.md. Add some header in it like # this is the about page. Now go to browser at localhost:3000/about and see the changes (11tly has hot reload as well).
Yeah, but we don’t want to go manually between pages – we need to create a link. Super easy and intuitive:
In index.md file:
# the home page
[go to about](/about)
In about.md file:
# this is the about page
[go home](/)
Creating more nested routes is super simple. You just need to create directories and files. The index.* file will act as a root path for the url.
site
├── about.md : /about
├── index.md : /
└── posts
├── authors
│ ├── author1.md : /posts/authors/author1
│ ├── author2.md : /posts/authors/author2
│ ├── author3.md : /posts/authors/author3
│ └── index.md : /posts/authors
├── index.md : /posts
├── post1.md : /posts/post1
└── post2.md : /posts/post2
One thing I noticed is that the public folder (the folder which contains the exported html files) does not delete the exported files which you delete in the source directory (the site dir with .md files). So when you do the final export make sure to cleanup the public dir.
Base layouts
Let’s say you have a blog – the layout (html+css+js) of that page will be the same for all blogs. The only thing what will change will be the content (images, text, links etc.).
To create a layout in site dir create a folder named _includes and a file named base.njk we’ll use nunjucks as our templating language (it will help us with placing variables, making for loops, if else, adding some basic template logic more specifically).
VScode doesn’t know .njk and I didn’t found a proper extension which keeps the intelisense of the .html file – so as a “hack” you can go in the right lower corner and configure file association language to html.
در site/_includes/base.njk طرح را برای صفحات خود ایجاد کنید. شما می توانید چندین طرح داشته باشید و همچنین می توانید از “وراثت” برای ساخت چیدمان استفاده کنید.
این را در base.njk پرونده ایجاد شده:
---
title: this is the default title unless is overwritten in another file
---
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
آنچه در آنجا می بینید متفاوت از HTML معمول است ، الگوی Nunjucks Syntax و برخی از نحو Frontmatter است که به ما در مقابله با داده ها کمک می کند. می بینید که ما یک کتابخانه CSS خارجی اضافه کرده ایم تا بتوانید Bootstrap ، Bulma یا سایر کتابخانه های کلاسیک CSS را بدون هیچ گونه تنظیم فانتزی اضافه کنید.
داده ها در اینجا به سر پرونده HTML می روند و برخی از داده ها توسط 11 به منظور استفاده از کدام طرح و سایر موارد استفاده می شوند.
---
title: this is the default title unless is overwritten in another file
---
در اینجا 11lty با استفاده از nunjucks در بریس های فرفری محتوای index.md را درج می کند.
{{ content | safe }}
در اینجا layout: base.njk 11tly می داند از کدام الگوی برای این پرونده استفاده می شود. در title: overwritten title عنوان موجود را در سر بازنویسی می کند base.njkبشر
---
layout: base.njk
title: overwritten title
---
# the home page
[go to about](/about)
[go to posts](/posts)
[go to authors](/posts/authors)
در صورت نیاز به استفاده مجدد از طرح در یک طرح دیگر ، می توانید از برچسب های متا Frontmatter استفاده کنید تا مشخص کنید از کدام الگو برای ارث بردن استفاده کنید.
طرح دیگری به نام ایجاد کنید dashboard.njk در site/_includes پوشه و مطالب زیر را اضافه کنید:
همانطور که می بینید ما از آن به ارث بردیم base.njk بنابراین ما برخی از کد های تکراری را از این طریق حذف کردیم. اکنون برای دیدن آن در عمل به آنجا بروید site/index.md و طرح موجود را به layout: dashboard.njkبشر
توجه داشته باشید که ما می توانیم آن عنصر را کنار بگذاریم که از مجموعه های 11th استفاده کند. قسمت خاص tags تحت یک متغیر خاص به نام جمع می شود collections بنابراین ما می توانیم تکرار کنیم collections.all پیوندهای جمع آوری شده یا توسط TAG (مثال: بیش از همه پست ها تکرار کنید)
---
tags:
- post
---
این برای تولید نقشه سایت ها ، ناوبری و غیره مفید است.
صفحه بندی پرداخت نوع مشابهی شبیه به مجموعه ها است.
اضافه کردن دارایی های استاتیک مانند CSS ، JS ، تصاویر ، فیلم ها
ابتدا پوشه ای ایجاد کنید که این پرونده های استاتیک را نگه می دارد. در کنار Pack.json پوشه ای به نام ایجاد کنید assets و پرونده های استاتیک خود را .css ، .js ، .png ، .jpg و غیره اضافه کنید. اکنون در کنار همان پرونده Package.json (در پوشه root) یک پرونده به نام ایجاد کنید eleventy.config.js و کد زیر را اضافه کنید:
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("./assets");
};
با این کار به 11 مأمور می گوید که پوشه دارایی ها را در پوشه عمومی در ساخت کپی کنید.
اکنون برای استفاده از آن پرونده ها در برچسب سر طرح ، آنها را مانند این اضافه کنید:
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
rel="stylesheet" href="/assets/styles.css">
rel="stylesheet" href="/assets/some_other_styles.css">
"/assets/scripts.js">
"/assets/some_other_scripts.js">
اگر تصاویر یا فیلم های دیگر دارید می توانید آنها را در پرونده های HTML مانند این اضافه کنید:
یا این:
![]()
src="/assets/elevently.jpg" alt="">
چگونه می توان چندین یا چند سایت استاتیک را در VPS مستقر کرد؟
می توانید با استفاده از Docker و Caddy چندین سایت 11tly را در VPS مستقر کنید.
پوشه ای به نام وب سایت ها ایجاد کنید و در داخل آن پوشه دیگری با نام دامنه سایت استاتیک مورد نظر برای ارائه آن قرار دهید. محتوای تولید شده توسط 11 را در داخل کپی کنید websites/my-static-site
اکنون پرونده ای به نام ایجاد کنید Caddyfile و مطالب زیر را اضافه کنید:
mystaticsite.localhost {
tls your-email-used-to-buy-domain@gmail.com
root * /srv/websites/my-static-site
push
file_server browse
}
در .localhost به شما امکان می دهد وب سایت را در LocalHost مشاهده کنید. در VPS آن را به دامنه ای که خریداری کرده اید تغییر دهید (مثال: mystaticsite.com).
یک پرونده docker-compose.yml ایجاد کنید:
services:
proxy:
container_name: multisite-apps-caddy-proxy
image: caddy:2-alpine
restart: unless-stopped
ports:
- "80:80"
- "443:443"
volumes:
- ./websites:/srv/websites # here we mount the static sites
- $PWD/Caddyfile:/etc/caddy/Caddyfile
- caddy_data:/data
- caddy_config:/config
networks:
- web
volumes:
caddy_data:
caddy_config:
networks:
web:
driver: bridge
باحال حالا انجام دهید docker compose up -d صبر کنید تا آن را بسازد و می توانید سایت (های) خود را در آن مشاهده کنید mystaticsite.localhost
شما می توانید حتی بیشتر با 11tly انجام دهید: صفحاتی از داده های JSON ایجاد کنید ، از چندین زبان پشتیبانی کنید ، تاریخ ها را بر اساس منطقه زمانی انجام دهید ، افزونه ها را برای بهینه سازی تصاویر و موارد دیگر اضافه کنید.
اسناد بیشتر را در 11ty.dev بررسی کنید
