teeny

TEENY: مولد موقع ثابت بسيط

️ Disclaimer: This is a tool I built in a couple of hours to generate my personal blog yakkomajuri.github.io. إنه لا يفعل الكثير الآن وربما لن يفعل أبدًا.

؟ بداية سريعة

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

للحصول على مثال على مشروع باستخدام Teeny ، تحقق من ريبو مدونتي الشخصية.

خلفية

يمكنك أن تقرأ عن دافعي لبناء TEELTY على منشور المدونة هذا بعنوان "لماذا قمت ببناء مولد موقع ثابت الخاص بي".

الأوامر المدعومة

تهيئة مشروع صغير في الدليل الحالي

teeny init

Build the static HTML files and add them to public/

teeny build

ابدأ خادمًا صغيرًا محليًا يستمع لتغييرات الملفات

teeny develop

؟ كيف تعمل

TEUNY هو مولد موقع ثابت للغاية مبني على احتياجاتي واحتياجاتي فقط.

كل ما تفعله هو إنشاء صفحات تستند إلى قوالب HTML ومحتوى تخفيضات.

It does very little and is strongly opinionated ( read: I was too lazy to build customization/conditional handlers ), but has allowed me to build a blog I'm happy with extremely quickly.

في الأساس ، هناك بالفعل مفهومين فقط تحتاج إلى التفكير فيه: القوالب والصفحات.

قوالب

Templates are plain HTML and should be added to a templates/ subdirectory.

They can contain an element with the id page-content , which is where Teeny adds the HTML generated by parsing the Markdown content.

الصفحات

Marmdown هو مواطن من الدرجة الأولى في Teeny ، لذلك يتم تعريف جميع صفحات موقع الويب الخاص بك من خلال ملف Markdown.

لا يحتاج الملف إلى أي محتوى فعلي ، لذلك إذا كنت تريد تعريف صفحة بحتة في HTML ، فأنت بحاجة فقط إلى إنشاء قالب يتم الرجوع إليه من ملف صفحة.

لتحديد القالب الذي يجب أن يستخدمه الصفحة ، يمكنك تحديده في مقدمة الصفحة ، مثل ذلك:

 ---
template: blog
---

In the above example, Teeny will look for a template called blog.html . If no template is specified, Teeny looks for a default.html file in templates/ and uses that.

مثال الاستخدام

إليك مثال على TEENY في العمل.

To start a Teeny project, run teeny init . سيؤدي ذلك إلى إنشاء ما يلي في الدليل الحالي الخاص بك:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

If you then run teeny build , you'll end up with this:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md uses the homepage template, and together they generate index.html . As is standard with other SSGs, static files are served from public/ .

You'll also notice main.js got moved to public/ too. Teeny will actually take all non-template and non-page files from pages/ , templates/ , and static/ and copy them to public/ , following the same structure from the origin directory.

والسبب في ذلك هو أنني في الواقع لا أرغب في الحصول على واردات "سحرية" ، حيث يتعين عليك استيراد الأصول الثابتة من المسارات التي لا تتوافق مع بنية الدليل الفعلية. As a result, I decided that static files would just live inside templates/ and pages/ as necessary.

Later I did surrender to the static/ directory approach though, as there may be assets both pages and templates want to use. Imports from static/ are "magic", meaning you need to think about the output of teeny build for them to work.

The last command that Teeny supports is teeny develop . This creates an HTTP server to server files from the public/ subdirectory.

يستمع لإجراء تغييرات على الملفات وتحديث الملفات الثابتة أثناء الطيران (بسذاجة ، من خلال إعادة بناء كل شيء في كل مرة يكتشف التغيير).

؟ التحسينات المستقبلية المحتملة

أريد أن أبقى سنًا صغيرًا قدر الإمكان. لقد وضعت عمداً جميع الكود في ملف واحد كتذكير لنفسي بأن هذا من المفترض أن يكون مجرد أداة بسيطة لي لبناء مدونات ثابتة بسيطة بسرعة.

However, it could use a few "developer experience" upgrades, like an optimized approach to teeny develop instead of naively rebuilding everything, as well as some better customization options.