1. Start project

Nam

Nam Hoang / Sep 20, 2021

2 min read

eleventy Logo

Eleventy có sẵn ở trên npm và cần yêu cầu Node.js version 10 hoặc cao hơn.

1. Tạo 1 thư mục cho project

Tạo 1 thư mực để lưu trữ project của bạn trong đó.

mkdir boxing-web
cd boxing-web

Giờ bạn đang ở trong thư mục project.

2. Cài đặt Eleventy

Khi bạn install Eleventy, bạn cần file package.json. Tham số -y thông báo chp npm bỏ qua tất các các lựa chọn và sử dụng mặc định:

npm init -y // create package.json

Sau đó bạn có thể install và save Eleventy trong file package.json bằng cách:

yarn add -D @11ty/eleventy // install eleventy in package.json

3. Tạo 1 vài file templates

Hãy chạy 2 lệnh sau để tạo 2 template files:

echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
echo '# Page header' > README.md

4. Chạy Eleventy

Hãy thử chạy Eleventy bằng lệnh:

npx @11ty/eleventy

Eleventy sẽ biên dịch bất cứ content templates nào trong folder hiện tại và folder con của nó ra thư mục output (mặc định là _site).

5. Mở port

Nếu bạn chạy dự án trên VM, có thể bạn sẽ không truy cập được website cho port chưa được mở. Hãy chạy lệnh sau để mở port:

sudo ufw allow 8080

6. Xem template của bạn

npx @11ty/eleventy --serve

Truy cập vào http://localhost:8080/ hoặc http://localhost:8080/README/ hay http://:8080/ trong trường hợp bạn run trên VM để nhìn thấy Eleventy site của bạn. Hãy thử chỉnh sửa template, Eleventy sử dụng BrowserSync sẽ tự động refresh lại browser với content mới của bạn.