من به دنبال راهی سریعتر برای ایجاد سایت های استاتیک بودم. من به 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!");
});
.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 toindex.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)
about.md file:
# this is the about page
[go home](/)
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
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 insite 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">
---
title: this is the default title unless is overwritten in another file
---
{{ 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)
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");
};
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 بررسی کنید
