JamStack: Xây dựng các trang web nhanh hơn, hiệu quả hơn hôm nay

Sep 11, 2025

Cách

(Tín dụng hình ảnh: Tương lai / Joseph Ford)

JamStack là một phương pháp tạo và phục vụ các trang web với tải tối thiểu theo yêu cầu của máy chủ. Nó nhận được tên của nó từ các công nghệ được sử dụng trong quy trình xây dựng, JavaScript, API và Đánh dấu. Các trang được tích hợp trong ngôn ngữ đánh dấu trước thời hạn và được phục vụ như các tệp HTML tĩnh dưới dạng người dùng yêu cầu chúng. Để xây dựng một trang web và mang các công nghệ này lại với nhau, bạn cần các công cụ phù hợp. Hãy chắc chắn rằng bạn kiểm tra Biên tập viên mã tốt nhất Đăng để giúp quyết định môi trường phát triển tốt nhất cho bạn.

Theo truyền thống, khi người dùng nhấp vào một trang web, một loạt các hành động diễn ra. Trình duyệt người dùng sẽ gửi yêu cầu đến máy chủ của trang web, nó chạy qua mã phụ trợ, tạo đúng trang và dữ liệu được gửi lại cho trình duyệt và được hiển thị dưới dạng trang Web. Khá nhiều thứ có thể xảy ra, và ngay cả khi nó diễn ra tốt đẹp, nó chậm hơn một chút so với người dùng thoải mái với trong thế giới kỹ thuật số nhanh sét mà chúng ta đang sống.

Nhưng sử dụng JamStack có nghĩa là các trang web hiệu quả hơn và ít đi sai. Trong hướng dẫn này, chúng tôi chứng minh cách thiết lập một trang web blog trong JamStack để phục vụ như một phần giới thiệu về các khái niệm. Các công cụ được sử dụng sẽ là Hugo. Là một trình tạo trang web tĩnh, Netlify. như công cụ xây dựng và GitHub. như lưu trữ miễn phí cho các tập tin.

Để cải thiện hơn nữa trải nghiệm trang web của bạn, hãy chắc chắn rằng bạn chọn hoàn hảo web hosting dịch vụ, và tốt nhất người tạo ra trang web .

01. Tải xuống các công cụ cần thiết

Tải về một bản sao của Victor Hugo. - Đây là một trong một số bộ dụng cụ khởi động để lấy mọi thứ trên mặt đất một cách nhanh chóng. Cũng đảm bảo bạn có nút cài đặt trên môi trường phát triển của bạn.

https://github.com/netlify-templates/victor-hugo

02. Tạo một thư mục làm việc và cài đặt Hugo

Tạo một thư mục và đặt tên cho nó Jamstack. . Đây là nơi chúng tôi sẽ làm việc trên máy phát triển của chúng tôi. Trích xuất các tệp đã tải xuống để Hugo vào thư mục này và mở nó trong dấu nhắc lệnh. Để cài đặt tất cả các phụ thuộc, mở dấu nhắc lệnh hoặc thiết bị đầu cuối trong thư mục jamstack và chạy Cài đặt NPM

npm install

03. Bắt đầu máy chủ

JAMstack03 — (Tín dụng hình ảnh: Joseph Ford)

Khi các phụ thuộc đã hoàn thành, hãy chạy NPM Bắt đầu. Máy chủ phát triển hiện đang chạy một bản sao địa phương của Victor Hugo, có thể truy cập theo mặc định tại Localhost: 3000 - Mở liên kết đó sẽ hiển thị màn hình chào mừng nếu mọi thứ đã thành công. Sau khi được kiểm tra, nhấn Ctrl. +. C. để dừng máy chủ.

04. Thêm một trang và một bài đăng

JAMstack04 — (Tín dụng hình ảnh: Joseph Ford)

Thay đổi thư mục vào thư mục trang web, sau đó, sử dụng Hugo mới lệnh, thêm một trang-one.md. và A. post-one.md. . Các nhà phát triển làm việc trong Windows sẽ cần tải xuống tệp Hugo.exe và thêm một đường dẫn để có được điều này để hoạt động, nhưng dễ dàng theo dõi tài liệu tồn tại trên Hugo. trang mạng.

 Hugo trang mới-one.md
Hugo bài mới / post-one.md

05. Thêm nội dung vào trang và bài đăng

Đối với mục đích thử nghiệm, một số nội dung cần được thêm vào bài đăng và trang mới (có nội dung nặng phương tiện truyền thông? Hãy sao lưu với điều tốt nhất lưu trữ đám mây ). Mở thư mục cho dự án trong trình duyệt tệp và điều hướng đến JamStack / trang / nội dung. Trong thư mục này, tập tin trang-one.md. bây giờ nên tồn tại. Ngoài ra còn có một thư mục có tên bài đăng trong đó chứa post-one.md. Mở cả hai tệp này và thêm một số nội dung trong Markdown bên dưới --- (hoặc trong một số trường hợp +++)

 # Lorem Ipsum Dolor Sit Amet
## adipiscing adipiscing * elit *
Sed do eiusmod portial ut labore
et Dolore Magna Aliqua.

06. Thêm chủ đề làm mô-đun phụ

JAMstack06 — (Tín dụng hình ảnh: Joseph Ford)

Văn bản được nhập trong các tệp trước đó không thể được xem mà không có chủ đề. Ví dụ, chủ đề Ananke sẽ được sử dụng. Xóa nội dung của hiện tại Trang web / Bố trí thư mục, để nó trống. Tạo một thư mục mới trong thư mục trang web được gọi là chủ đề , sau đó thay đổi thành nó và chạy đoạn mã sau để nhập chủ đề dưới dạng mô hình con git. Lưu ý: Nhân bản bình thường không tương thích với Netlify.

 Chủ đề MKDIR
Chủ đề CD.
Subodule git thêm https: // github
com / & lt; themibreate & gt; / & lt; themename & gt;
https://github.com/budpar/gohugo-theme.
Ananke.Git Chủ đề / Ananke

07. Cấu hình chủ đề và chạy máy chủ

Sao chép nội dung của Trang web / Chủ đề / Gohugo-Theme Ananke / exampleite / config.toml để qua một trong thư mục trang web. Ở đầu trang, thay URL cơ sở với ' / ' và xóa dòng ThemesDir = '../ ..' . Lưu tệp cấu hình, mở một thiết bị đầu cuối và chạy NPM bắt đầu chỉ huy. Bạn cũng có thể thay đổi tên của trang web (nếu bạn muốn) bằng cách thay thế tiêu đề giá trị.

Trang web CD


NPM bắt đầu

08. Kiểm tra trong trình duyệt

Mở http: // localhost: 3000 / trang - một / Để xem chủ đề kết xuất sự đánh dấu của trang dưới dạng một trang được phong cách đầy đủ. Mở trang chủ, bài viết đầu tiên sẽ hiển thị. Điều này có nghĩa là trình tạo trang web tĩnh hiện có chức năng.

09. Cấu hình menu

JAMstack09 — (Tín dụng hình ảnh: Joseph Ford)

Khi xem trang web, đáng chú ý là trang được thực hiện trước đó không hiển thị trong điều hướng. Trở về nội dung, thêm một dòng trong cấu hình vật chất trước để nói với Menu nào để hiển thị trang trong.

 Toml
+++.
Menu = "Main"
+++.
Yaml.
---
Menu: "Main"
---

10. Đẩy các tệp vào GitHub

Tiếp theo, làm động vòng tròn để đáp ứng với các lần nhấp của người dùng. Bây giờ trang web tĩnh đang hoạt động, nó sẽ cần phải truy cập trên máy chủ phát triển. Bước đầu tiên là đẩy mã cho GitHub. Tạo một kho lưu trữ mới trên GitHub, sau đó sử dụng dòng lệnh để đẩy mã từ thư mục Project hoặc ứng dụng Github Desktop.

 git từ xa thêm nguồn gốc https://github.com/[githubusername[/jamstacktutorial.git
git đẩy -u gốc chủ

11. Kết nối với Netlify

Netlify sẽ mang mọi thứ lại với nhau, xây dựng trang web và phục vụ nó trên một miền tạm thời. Bắt đầu bằng cách tạo một tài khoản tại Netlify. và liên kết nó với một tài khoản GitHub. Khi mọi thứ được thiết lập, nhấp Trang web mới từ git .

12. Kết nối với GitHub

Để triển khai liên tục, nhấp GitHub. , sau đó chọn repo đã được thực hiện trước đó trong hướng dẫn. NetLify sẽ tự động phát hiện các tùy chọn xây dựng tốt nhất cho dự án. Nó nên đọc NPM RUN BUILD. . Nếu tất cả đều tốt, sau đó nhấp vào Triển khai.

13. Xây dựng trang web và xem trên liên kết NetLify

JAMstack13 — (Tín dụng hình ảnh: Joseph Ford)

Khi trang web đã được xây dựng, một thông báo sẽ xuất hiện triển khai . NetLify đã cung cấp cho trang web một tên miền tạm thời có thể không có ý nghĩa - điều này có thể được thay đổi chỉ đơn giản bằng cách nhấp vào Cài đặt trang web. Thay đổi tên, sau đó nhấp vào liên kết để xem trang web được tải qua JamStack.

14. Thực hiện thay đổi để kiểm tra triển khai

Trang web hiện tải qua JamStack. Đó là tia sét nhanh, và nó sẽ tự động cập nhật khi một cam kết được thực hiện cho GitHub. Để kiểm tra điều này, trở về môi trường phát triển địa phương và chạy Hugo trang mới-three.md. từ thư mục trang web. Sau đó mở tệp đã tạo, thêm một số nội dung, nhấp vào Lưu và cam kết tệp vào repo. Trong vòng nay, bạn sẽ nhận thấy bản cập nhật đang trực tiếp trên liên kết NetLify.

15. Thêm một CMS vào trang web tĩnh của bạn

Làm việc trong đánh dấu đơn giản và sử dụng dòng lệnh để tạo các trang sẽ không phù hợp với hầu hết các khách hàng. Để làm cho trang web thân thiện hơn, hãy cài đặt hệ thống quản lý nội dung. Lâm nghiệp.io. là một sự phù hợp hoàn hảo cho các thiết lập hiện tại. Chuyển đến trang web và tạo một tài khoản bằng GitHub.

16. Cấu hình lâm nghiệp.

Nhấp vào Thêm trang web mới sau đó chọn HUGO làm trình tạo trang web tĩnh, git với tư cách là nhà cung cấp và điền thông tin trong các biểu mẫu sau. Nhấp vào Gửi và CMS mới sẽ tải, sẵn sàng để thay đổi nội dung. Bây giờ, các trang chỉ có thể được chỉnh sửa từ thanh bên, cũng như các bài đăng và một loạt các tùy chọn khác.

Bạn có muốn tìm hiểu thêm về thiết kế web? Sau đó Đăng ký 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.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Tìm hiểu cách xây dựng JavaScript tốt hơn tại GenerateJS (Tín dụng hình ảnh: Tương lai / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unlash)

Tham gia với chúng tôi vào tháng 4 năm 2020 với Đội hình của các siêu sao JavaScript của chúng tôi tại GenerateJS - Hội nghị giúp bạn xây dựng JavaScript tốt hơn. Đặt ngay tại Generateconf.com.

Đọc thêm:

8 thẻ html bạn cần được sử dụng (và 5 để tránh)
25 của API JavaScript tốt nhất
Cách ẩn mã JavaScript của bạn khỏi Xem nguồn

JamStack: Xây dựng các trang web nhanh hơn, hiệu quả hơn hôm nay

01. Tải xuống các công cụ cần thiết

02. Tạo một thư mục làm việc và cài đặt Hugo

03. Bắt đầu máy chủ

04. Thêm một trang và một bài đăng

05. Thêm nội dung vào trang và bài đăng

06. Thêm chủ đề làm mô-đun phụ

07. Cấu hình chủ đề và chạy máy chủ

08. Kiểm tra trong trình duyệt

09. Cấu hình menu

10. Đẩy các tệp vào GitHub

11. Kết nối với Netlify

12. Kết nối với GitHub

13. Xây dựng trang web và xem trên liên kết NetLify

14. Thực hiện thay đổi để kiểm tra triển khai

15. Thêm một CMS vào trang web tĩnh của bạn

16. Cấu hình lâm nghiệp.

Cách - Các bài báo phổ biến nhất

Cách tạo ứng dụng với Vue.js

Chuẩn bị một bảng để vẽ trong 3 bước đơn giản

Các quy tắc của kiểu chữ Web đáp ứng

Cách tạo logo retro với Trình thiết kế mối quan hệ

Master the Dao Tool

Vẽ các nét được kiểm soát và mượt mà với

Cách thiết kế bìa sách hoàn hảo

Làm sắc nét kỹ năng vẽ tranh tĩnh lặng của bạn

Thể loại