Cách xây dựng một blog với Jekyll

Hướng dẫn này dành cho những người đã nghe nói về các trình tạo trang web tĩnh và đã quyết định họ muốn có một cách xây dựng trang web của riêng họ bằng một trang web. Đây là chúng tôi sẽ thể hiện bạn Làm thế nào để bắt đầu một blog Sử dụng Jekyll.

Một kiến ​​thức cơ bản về thiết bị đầu cuối là tốt, mặc dù bạn sẽ có thể làm theo cùng như các lệnh đều khá đơn giản. Các trang web trên các trang GitHub được cung cấp bởi Jekyll đằng sau hậu trường, vì vậy khi được sử dụng cùng với các trang GitHub, nó tạo ra một cách để lưu trữ và quản lý trang web của bạn miễn phí (xem danh sách tốt nhất của chúng tôi web hosting Dịch vụ cho các tùy chọn khác, hoặc xem danh sách của chúng tôi nếu bạn muốn một loại khác nhau người tạo ra trang web ).

Hướng dẫn này giả định bạn đang ở trên máy Mac; Như Jekyll là một chương trình Ruby, có thể chạy nó trên Windows nhưng nó không được hỗ trợ chính thức. Nếu bạn đang theo dõi trên Windows, nhảy qua đây Để được giúp đỡ được thiết lập Ruby.

Sau khi hoàn thành hướng dẫn này, bạn sẽ tạo ra một blog Jekyll và biết cách các tính năng và ngôn ngữ Mẫu của nó có thể xây dựng một blog cá nhân. Đây là một điểm khởi đầu tuyệt vời để phát triển trang web của riêng bạn. Và hãy nhớ rằng, nếu bạn có nhiều ý tưởng thiết kế hoặc tệp phương tiện, hãy chắc chắn giữ chúng một cách an toàn trong tốt nhất lưu trữ đám mây .

Tìm các tập tin cho hướng dẫn này đây .

• 10 máy phát trang web tĩnh tốt nhất

01. Được thiết lập

Trên máy Mac, bạn nên cài đặt Ruby theo mặc định nhưng hãy kiểm tra bằng cách gõ ruby -v. trong thiết bị đầu cuối của bạn.

Bây giờ chúng ta thực sự có thể có được Jekyll chạy trong trang web, đảm bảo bạn đang ở trong thư mục bạn muốn xây dựng trang web của mình và chỉ cần nhập GEM cài đặt Jekyll Bundler Được; Sau đó, máy tính của bạn sẽ đi và lấy tất cả các phụ thuộc cần thiết để chạy một trang web.

02. Phục vụ tại địa phương hoặc xây dựng

Có hai lệnh chính bạn sẽ sử dụng với Jekyll - giao banh và xây dựng . Để chạy trang web của bạn loại cục bộ Jekyll phục vụ trong dòng lệnh của bạn. Điều này sẽ chạy một phiên bản trên http://127.0.0.1:4000 mà bạn có thể xem trước các thay đổi của mình. Nếu bạn đã có GEM và các phụ thuộc khác được cài đặt trên máy của mình, lệnh này có thể bị lỗi do sự không phù hợp trong các phiên bản phụ thuộc; Trong trường hợp này, hãy thử Bundle Exec Jekyll phục vụ thay thế. Chạy giống nhau nhưng với từ xây dựng Chỉ cần biên dịch trang web.

03. Lấy các tệp khởi động

Sao chép các tệp được cung cấp với hướng dẫn này tại thời điểm này để cung cấp cho bạn cơ sở để làm việc. Điều này sẽ cung cấp cho chúng tôi trang chủ, danh sách blog, trang chi tiết và cấu trúc tài sản cho trang web. Làm mới trang của bạn tại http://127.0.0.1:4000 và bạn sẽ thấy chúng tôi bây giờ có một số trang cơ bản để xây dựng từ đó. Hãy có một cái nhìn tổng quan nhanh về cách một trang web jekyll hoạt động.

Một trang web jekyll được cấu trúc một cách dễ theo dõi. Bất kỳ bộ sưu tập nào (loại bài đăng) được giữ trong thư mục của riêng họ, cũng như bố cục và bao gồm. Bạn sẽ nhận thấy một thư mục '_site' - đây là thư mục mà Jekyll sử dụng khi bạn chạy một jekyll xây dựng. chỉ huy.

04. Cấu hình.

Mở _config.yml trong trình soạn thảo văn bản của bạn và thêm chi tiết của riêng bạn; Một khu vực chính cần kiểm tra là đặt URL cơ sở của bạn. Đây là thư mục mà trang web của bạn đang tải. Tệp cấu hình tương tự như sử dụng các tùy chọn toàn cầu kết hợp với tệp WP-Config của bạn nếu bạn đang xây dựng một chủ đề WordPress.

Bạn có thể kiểm soát các thông tin cốt lõi như tiêu đề và mô tả meta, email và tài khoản xã hội của bạn và sau đó tất cả thông tin mà trang web cần phải biên dịch như bộ sưu tập và bất kỳ plugin nào được sử dụng. Bạn có thể sử dụng hỗn hợp HTML và Markdown cho các trang, tùy thuộc vào những gì bạn muốn đạt được. Tuy nhiên, các trang tùy chỉnh như trang chủ và các trang danh sách của bạn thường sẽ là HTML, trong khi các bài đăng và các trang chung khác sử dụng mẫu Set Mẫu sẽ được Markdown.

05. Mặt trước

Mặt trước là một đoạn của yaml ở đầu một tập tin. Jekyll sử dụng nó để giữ các biến. Nhìn vào tệp about.md và bạn có thể thấy chúng tôi đặt tiêu đề, cách sử dụng bố cục nào, tác giả và bất kỳ hình ảnh liên quan nào.

06. Thẻ lỏng

Jekyll sử dụng chất lỏng - một ngôn ngữ templating sử dụng các đối tượng, thẻ và bộ lọc. Chúng tôi sử dụng. vật Thẻ được bao quanh bởi niềng răng đôi {{}} Để xuất các biến vật chất trước và dấu hiệu và tỷ lệ phần trăm cho logic {%%} .

07. Xây dựng điều hướng của bạn

Thay vì điều hướng tĩnh, chúng tôi sử dụng sức mạnh của các tệp cấu hình để tách nội dung khỏi mẫu. Chúng tôi sẽ giữ các mục điều hướng trong thư mục 'Dữ liệu' dưới dạng tệp cấu hình và sau đó lặp qua chúng trong điều hướng.html. Chúng ta chỉ có thể nhập bất kỳ trang và liên kết nào chúng ta muốn đi về phía trước mà không quay trở lại mẫu. Hãy chắc chắn rằng bạn thực sự cẩn thận với khoảng trắng khi chỉnh sửa các tệp cấu hình của mình như điều hướng.yml hoặc vật chất trước khi bắt đầu một bài đăng vì một không gian đi lạc sẽ gây ra lỗi.

Tệp cấu hình đã được đặt, để nhập mã sau vào tệp 'Navigation.html' của bạn bao gồm tệp:

 {% cho mục trong site.data.navulation%}
     & lt; a href = "{{site.baseurl}} / {item.link}}" {% nếu page.url == item.link%} class = "hiện tại" {% endif%} & gt; {{{{{{{Mục .name}} & lt; / a & gt;
   {% chi%%} 

Chúng tôi đang sử dụng các thẻ logic lỏng để tìm trong tệp cấu hình điều hướng và lặp lại một liên kết và tên cho mỗi mục, về cơ bản chỉ là một tiêu chuẩn cho vòng lặp.

08. Tạo trang chủ

Trên trang chủ của chúng tôi, chúng tôi sẽ liệt kê bài đăng trên blog mới nhất của chúng tôi với tư cách là một anh hùng và sau đó có một đoạn trích từ trang của chúng tôi với một liên kết thông qua. Hãy bắt đầu với khối anh hùng. Mở Index.html và sau đó thêm mã sau:

 {% gán post = site.posts.first%}
& lt; div class = "c-hero" style = "Bối cảnh: URL ({{post.thumbnail_image.large | tương đối_url}}) Trung tâm dưới cùng / Ốp lưng không lặp lại;" & GT;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | MarkDownify}}
   & lt; a href = "{{post.url}}" class = "btn - anh hùng" & gt; Đọc toàn bộ bài & lt; / a & gt;
& lt; / div & gt; 

Bạn sẽ thấy rằng chúng tôi lần đầu tiên gán bài đăng mới nhất và sau đó tham chiếu hình ảnh thu nhỏ được đặt trong vật chất của bài viết. Giới thiệu bài sử dụng bộ lọc chất lỏng Markdownify Để chuyển đổi Markdown sang HTML.

Với vị trí đó, hãy thêm một lời trêu ghẹo từ trang khoảng. Thêm những điều sau:

 & lt; div class = "c-Tính năng" & gt;
   {% cho trang trong trang web .Pages%}
       {% nếu page.url == '/ about.html'%}
           & lt; img src = "{{page.profile_image.small}}" Alt = "Profie Picture" Class = "C-atift__image" / & gt;
           & lt; div class = "c atotion__text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" & gt; {{page.title}} & lt; / a & gt; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% endif%}
   {% cuối giá%}
& lt; / div & gt; 

Lần này chúng ta đang sử dụng một cho Loop để kiểm tra thông qua các trang trong trang web. Chúng tôi đang sử dụng page.url. Để lọc trang Giới thiệu và sau đó chúng tôi sử dụng một kiểu Templating tương tự cho anh hùng để xuất thông tin của trang.

09. Danh sách blog

Với trang chủ được tạo, chúng ta có thể chuyển sang trang danh sách blog. Để tạo trang danh sách, chúng tôi lại sử dụng các thẻ chất lỏng để cung cấp cho chúng tôi logic để lặp qua tất cả các tệp trong thư mục 'bài đăng'.

Anh hùng được thực hiện cho bạn vì nó theo cùng một quá trình với trang chủ. Bên dưới anh hùng trong 'blog.html', thêm các mục sau:

& lt; div class = "extrain" & gt;
   & lt; h1 & gt; tốt nhất của phần còn lại & lt; / h1 & gt;
   & lt; phần Class = "danh sách thẻ" & gt;
           {% cho bài đăng trong site.posts offset: 1%}
           & lt; div class = "thẻ" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "chi tiết thẻ" & gt;
                   & lt; h3 & gt; {{post.date | Ngày: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt; Đọc thêm & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% cuối giá%}
          
   & lt; / phần & gt;
& lt; / div & gt; 

Một lần nữa chúng ta sử dụng một cho Vòng lặp để đi qua bộ sưu tập bài viết. Nhưng như chúng ta đã lặp lại những điều mới nhất trong anh hùng, chúng tôi sẽ bù đắp vòng lặp này để bắt đầu đăng bài hai. Một bộ lọc chất lỏng được sử dụng để chuyển đổi ngày thành định dạng lựa chọn của chúng tôi.

10. Trang chi tiết blog

Không lâu để đi ngay bây giờ: Chúng tôi gần như có tất cả các yếu tố cơ bản với nhau. Một khía cạnh quan trọng còn lại để giải quyết là điều hướng. Khi bạn đang đọc một bài đăng trên blog, bạn cần một cách để chuyển qua và đọc thêm. Chúng ta có thể thêm một số phân trang tốt vào trang web của chúng tôi bằng cách sử dụng biến trang. Mở post.html trong thư mục bố cục và thêm các mục sau:

 & lt; div class = "C-post" & gt;
   {% nếu trang. %%}
   & lt; div & gt;
       & lt; H3 & GT; trước & lt; / H3 & GT;
       & lt; p & gt; {{page.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{page.url}}" & gt; đọc post & lt; / a & gt; / p & gt;
   & lt; / div & gt;
   {% endif%}
   {% nếu trang.next%}
   & lt; div & gt;
       & lt; H3 & GT; Lên Next & Lt; / H3 & GT;
       & lt; p & gt; {{page.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{_url.url}}" & gt; đọc Post & lt; & lt; / p & gt;
   & lt; / div & gt;
   {% endif%}
& lt; / div & gt; 

Chúng tôi sử dụng. trang.preingious. và trang.next. Các biến để kiểm tra xem có một bài đăng để nhấp vào. Nếu có thì chúng ta có thể xuất khối và bao gồm tiêu đề và liên kết của bài đăng.

11. Xây dựng và xuất bản

Các trang GitHub hiển thị các tệp Sass cho chúng tôi, vì vậy khi bạn chạy jekyll xây dựng. Các tệp được biên dịch được tạo trong thư mục _site. Không có tập tin gulp hoặc webpack ở đây, chỉ là những phong cách nạc đẹp! Bạn thậm chí có thể thu nhỏ đầu ra Sass dưới dạng cài đặt trong tệp CONFIG.YML chính cho trang web. Nội dung của thư mục này có thể được chuyển sang lưu trữ đã chọn của bạn. Một điều cần biết là các trang GitHub thực sự hỗ trợ Jekyll để bạn có thể xây dựng và lưu trữ một trang web bằng cách sử dụng chi nhánh chính của mình làm nguồn. Bạn có thể tìm thêm thông tin về điều này đây .

Bài viết này ban đầu được công bố trong số 320 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số 320 ở đây hoặc là Đăng ký tại đây .

Những bài viết liên quan:

• Xây dựng một blog với lưới và flexbox
• Các nền tảng viết blog miễn phí tốt nhất
• Cách xây dựng một trang web viết blog với Gatsby