Cách tạo Blog tĩnh bằng Cactus [OS X]
Cập nhật: Ứng dụng xương rồng đã bị ngừng.
Nếu bạn không yêu cầu CMS và chỉ muốn có một trang web hoặc blog tĩnh, thì Jekyll là một công cụ tốt để có cơ hội. Tuy nhiên, nếu bạn thích một công cụ có GUI, thay vì làm việc với các công cụ dòng lệnh, thì bạn có thể muốn kiểm tra cây xương rồng.
Xương rồng là miễn phí trình tạo trang tĩnh được trang bị các công cụ mạnh mẽ có thể giúp bạn xây dựng trang web tại địa phương, nhanh hơn và dễ dàng hơn với các công nghệ web hiện đại. Nó cung cấp cho bạn một điểm khởi đầu trong dự án của bạn với 4 mẫu được thiết kế trước để bạn có thể bắt đầu chạy.
Trong khi thực hiện dự án của bạn, Cactus sẽ giám sát mọi thay đổi bạn thực hiện trong dự án của bạn và tự động làm mới trình duyệt để bạn có thể thấy những thay đổi ngay lập tức, trên máy Mac hoặc thiết bị di động của bạn. Nó cũng hỗ trợ SASS / SCSS và Coffescript, vì vậy mọi thay đổi trên tệp này cũng được tạo tự động.
Bắt đầu
Trước hết, bạn cần tải Cactus từ trang chủ của nó, sau đó chạy cài đặt. Sau khi hoàn thành, mở nó, bạn sẽ thấy bốn nút: Nút Tạo, Triển khai, Chỉnh sửa và Xem trước.
Để tạo một dự án mới, bấm vào Tạo nên. Bạn sẽ thấy 4 mẫu có sẵn ở đó. Đối với hướng dẫn này, chúng tôi đang đi với mẫu Blog. Nhấp chuột Tạo nên.
Bạn sẽ được yêu cầu cung cấp tên của dự án của bạn và chọn vị trí mà dự án tồn tại. Ở đây tôi đặt tên “Blog tuyệt vời của tôi” cho dự án. Sau đó, bạn sẽ thấy dự án của bạn đã có trong Cactus.
Sửa đổi tập tin
Dự án được tạo bằng mẫu Blog hiện tồn tại trên Finder của bạn. Bây giờ chúng tôi sẽ kiểm tra các yếu tố cần thiết để xây dựng Blog của chúng tôi. Trụ sở thư mục lưu trữ các tập tin của bạn. Các thư mục chính mà chúng tôi sẽ sử dụng là Mẫu, Trang, và Tĩnh danh mục. Bây giờ hãy bỏ qua những người khác.
Để giữ cho mọi thứ ngắn gọn, đây là những gì mỗi thư mục dành cho:
- Mẫu: Chứa các tệp HTML hoạt động như mẫu, được sử dụng bởi các tệp HTML trên các trang để xây dựng trên.
- Trang: Chứa tất cả các tệp HTML sẽ trở thành một trang có cùng đường dẫn. ví dụ: hello.html tại đây sẽ trở thành http://yoursite.com/hello.html
- Tĩnh: Chứa tất cả các tài nguyên tĩnh như CSS, Javascript và hình ảnh.
Bây giờ, chúng tôi sẽ chỉnh sửa ba tệp chính từ các thư mục: cơ sở.html và post.html trong thư mục Mẫu và index.html trong thư mục Trang.
Xương rồng sử dụng Công cụ mẫu Django cho ngôn ngữ templating. Với điều này, bạn có thể bao gồm các thành phần HTML từ các tệp HTML khác, do đó bạn không cần phải sao chép mã. Các tính năng được sử dụng nhiều nhất ở đây là kế thừa mẫu và biến.
Để xem cách họ làm việc, đầu tiên hãy mở cơ sở.html trên thư mục Mẫu.
% chặn tiêu đề% Blog % endblock% % chặn nội dung% Nội dung chính % nội dung endblock% ---
cơ sở.html là tệp html đơn giản mà chúng tôi sử dụng làm mẫu 'bộ xương'. Nó chứa các yếu tố phổ biến của trang web của chúng tôi. Bạn có thể thấy một số “khối” trong đó; chúng tôi sẽ sử dụng mẫu con để ghi đè các khối này.
Bây giờ hãy mở post.html nằm trong cùng thư mục với cơ sở.html.
% mở rộng "base.html"% % tiêu đề khối% title | Xương rồng % tiêu đề endblock% % nội dung khối% ---chức vụ
tiêu đề
% khối cơ thể% Đây là nơi chứa nội dung bài đăng. % cơ thể endblock% --- % nội dung nội dung%
Các post.html chứa đánh dấu cho trang nhập blog của chúng tôi. Ở dòng đầu tiên bạn có thể thấy rằng post.html mở rộng cơ sở.html. Điều này có nghĩa là chúng tôi sẽ ghi đè các khối trên cơ sở.html với các khối ở đây.
Chúng ta cũng có thể tìm thấy các biến ở đây, chẳng hạn như chức vụ và tiêu đề . Chúng tôi sẽ xác định các giá trị của các biến này trong bài viết trên blog sau.
Bây giờ, hãy nhìn vào % khối cơ thể% khối. Điều này sẽ bị ghi đè bởi mẫu con có chứa các mục đăng bài của blog của chúng tôi.
Vào thư mục trang / bài viết. Dưới đây là phần còn lại của bài viết của chúng tôi.
tiêu đề: Bài đăng của tôi Mục tiêu đề mục: Tác giả bài đăng của tôi Tác giả: Ngày tháng năm: 15-01-2015 % kéo dài "post.html"% % khối cơ thể% % bộ lọc đánh dấu% tinh hoa. Earum, perferendis Inventore dolorem rerum et TIMEa sint nemo illum ab saepe, assenda, amet illo deleniti dociis, voluptHR maxime atque vero sunt. --- % endfilter% % cơ thể endblock%
Trong các mục đăng bài, chúng tôi đưa ra giá trị cho biến, như tiêu đề, tiêu đề, tác giả và ngày. Giá trị này sẽ vượt qua khi chúng ta gọi tên biến trên mẫu cha. Sau đó, chúng tôi viết nội dung của blog của chúng tôi với Markdown.
Bây giờ chúng tôi sẽ đi đến trang chỉ mục của blog của chúng tôi, mở index.html bên trong trang danh mục. Nó chứa danh sách các mục blog của chúng tôi và liên kết đến từng mục. Mã chính trông như dưới đây:
% mở rộng "base.html"% % nội dung khối% --
- % cho bài đăng trong bài viết%
- post.title
post.headline
% kết thúc%
Tại thời điểm này, chúng tôi có một blog đơn giản với hai trang chính, trang mục lục có chứa các mục blog và trang nhập blog chinh no.
Chuyển đến cửa sổ Cactus và nhấp vào nút xem trước để khởi động máy chủ. Nó sẽ tự động mở trình duyệt và mở trang web của bạn.
Tạo kiểu cho Blog bằng SCSS
Một tính năng tuyệt vời của Cactus là nó hoạt động với SASS / SCSS. Chỉ thả tập tin .sass hoặc .scss của bạn vào tĩnh thư mục và mỗi khi bạn chỉnh sửa và lưu tệp, Cactus sẽ tự động tạo CSS.
Ở đây tôi sẽ đưa ra một ví dụ sử dụng bootstrap-sass để tạo kiểu cho blog của chúng tôi. Giả sử bạn đang sử dụng Bower, thiết bị đầu cuối mở và điều hướng đến tĩnh thư mục của dự án của chúng tôi bằng cách sử dụng CD chỉ huy. Sau đó cài đặt bootstrap-sass bằng lệnh này:
$ bower cài đặt bootstrap-sass-Official
Khi quá trình tải xuống hoàn tất, bạn sẽ thấy bower_components thư mục bên trong thư mục tĩnh chứa bootstrap-sass-chính thức.
Bây giờ hãy vào thư mục này: tĩnh / css. Tạo tập tin scss, đặt tên cho nó syle-bs.scss và chèn mã này.
@import "Khác / bower_components / bootstrap-sass-Official / property / stylheets / _bootstrap";
Những gì mã làm là nó nhập mọi thứ từ bootstrap-sass. Khi bạn lưu kiểu-bs.scss, bạn sẽ thấy kiểu-bs.cs được tạo trên cùng thư mục chứa tất cả các kiểu từ bootstrap.
Triển khai dự án của bạn
Cuối cùng, khi dự án của bạn sẵn sàng, bạn có thể triển khai dự án của mình lên phiên bản trực tiếp một cách dễ dàng sử dụng Amazon S3.
