Phát triển web luôn là một triển vọng thú vị. Nó cho phép các nhà phát triển có con đường riêng để xây dựng các ứng dụng web. Họ có thể chọn khuôn khổ, công nghệ, công cụ và triết lý mà họ muốn sử dụng.
Một triết lý như vậy là Jamstack. Nó cung cấp một cách tiếp cận linh hoạt để giải quyết các vấn đề phát triển web.
Bài viết này sẽ hướng dẫn bạn cách xây dựng ứng dụng Jamstack đầu tiên của mình. Hãy bắt đầu.
Jamstack là gì?
Jamstack là một trong những triết lý mới về mạng. Về mặt kỹ thuật, nó cung cấp cho các nhà phát triển một kiến trúc web có thể kết hợp được. Bạn có thể chọn các khuôn khổ và công cụ của mình để đạt được cùng một mục tiêu.
nếu bạn nhìn,
Mứt + Ngăn xếp = JAMstack.
Jamstack bao gồm ba thành phần chính:
- J cho JavaScript
- A cho Giao diện lập trình ứng dụng (API)
- M cho điểm đánh dấu
Cách tiếp cận này tách logic nghiệp vụ khỏi dữ liệu, tách lớp hỗ trợ mạng. Lợi ích bao gồm:
- Thời gian tải nhanh hơn (gần như tức thời).
- Quy trình phát triển linh hoạt và nhanh chóng.
- Cải thiện khả năng mở rộng và bảo trì.
Để tìm hiểu thêm về Jamstack, hãy xem Jamstack dành cho người mới bắt đầu.
Lịch sử Jamstack
Jamstack tương đối mới. Năm 2016, Matt Biilmann đã giới thiệu Jamstack trong một bài thuyết trình của công ty, chỉ cho thế giới cách xây dựng một trang web mà không cần đi theo con đường truyền thống.
Giải pháp tách logic ứng dụng khỏi phần phụ thuộc trên máy chủ phụ trợ. Vì vậy hầu hết nội dung được cung cấp qua các tệp tĩnh có CDN – các tính năng động được hỗ trợ và truy cập qua API. Và nếu bất kỳ hành động động nào cần được máy chủ xử lý, chúng sẽ được biên dịch và tải lên CDN trước khi người dùng cuối có thể truy cập chúng.
Để hiểu rõ hơn về lịch sử của Jamstack, chúng ta cần xem xét các trang web tĩnh và động.
- Trang web tĩnh: Trang web tĩnh được lưu trữ trên máy chủ nhưng không có khía cạnh động. Trong thời kỳ đầu của Internet, hầu hết các trang web đều là trang tĩnh, hỗ trợ HTML, CSS và hình ảnh được lưu trữ trên máy chủ. Cách tiếp cận này nhanh chóng vì máy chủ không phải mất thời gian xử lý yêu cầu của người dùng và nó luôn có sẵn các tệp. Tuy nhiên, không thể thay đổi bất cứ điều gì dẫn đến thiếu tính tương tác.
- Trang web động: Trang web động cung cấp khả năng tương tác bằng cách xử lý yêu cầu của người dùng và tạo mã HTML cần thiết để hiển thị. Cách tiếp cận này chậm nhưng bổ sung thêm lợi ích của tính tương tác. Hầu hết các trang web hiện đại đều là trang web động. Các trang web dựa trên WordPress là ví dụ tốt nhất.
Và sau đó chúng tôi có các trang web Jamstack. Hãy cùng tìm hiểu cách anh ấy giải quyết vấn đề của các trang web tĩnh và động.
Trang web Jamstack: chúng hoạt động như thế nào?
Jamstack giải quyết hai vấn đề cơ bản:
- Thời gian tải trang web động chậm
- Tính tương tác của các trang web tĩnh
Trang Jamstack hỗ trợ các tệp tĩnh, tốc độ nhanh. Nhưng nó cũng bao gồm JavaScript có thể tương tác với các API để phân phát nội dung động.
Đằng sau hậu trường, bạn sẽ cần một trình tạo trang web tĩnh để thực hiện công việc nặng nhọc trong việc xây dựng các trang web tĩnh.
Các trình tạo trang web tĩnh này sử dụng Markdown để phục vụ các trang web tĩnh. Trình tạo trang tĩnh tạo các tệp tĩnh từ các tệp HTML, CSS và JavaScript có sẵn. Sau khi được phát triển, trang web tĩnh sẽ được lưu trữ bởi CDN.
Khi bạn chia sẻ tệp tĩnh, các trang sẽ tải gần như ngay lập tức. Tuy nhiên, để thêm khía cạnh động vào trang web của mình, bạn phải dựa vào JavaScript. Các tệp JavaScript có thể kết nối với API và thêm dữ liệu động bằng cách giao tiếp với cơ sở dữ liệu.
Tạo trang Jamstack đầu tiên của bạn
Vì Jamtack mang lại sự tự do nên bạn có thể chọn bất kỳ trình tạo trang tĩnh/khung Jamstack nào, bao gồm Hugo, Gatsby, Next.js, Hexo, v.v.
Cũng đọc: Các framework tốt nhất cho JamStack
Và để triển khai, bạn có thể triển khai nó lên Trang GitHub, Netlify, Ứng dụng web tĩnh Azure, v.v.
Chúng tôi sẽ sử dụng Hugo để phát triển Jamstack và Netlify để lưu trữ trang web của chúng tôi cho hướng dẫn này.
Hướng dẫn này giả định rằng bạn có kiến thức cơ bản về web. Bạn cần biết mạng hoạt động như thế nào. Ngoài ra, bạn cũng nên biết cách sử dụng Git.
Hãy bắt đầu.
# 1. Điều kiện tiên quyết để cài đặt: Go và Git
Để cài đặt Hugo, bạn cần hai thứ: Git và Go. Chúng tôi cần Git để hợp lý hóa quy trình xây dựng của mình (bạn sẽ thấy điều này sau trong Netlify). Đi là bắt buộc vì Hugo được xây dựng trên đó.
Chúng tôi đang sử dụng Ubuntu chạy trên WSL 2 trong hệ thống Windows 11. Chúng tôi truy cập kernel Ubuntu trực tiếp từ hệ thống Windows.
Cũng đọc: Windows 11 đáp ứng Linux: Chi tiết về khả năng của WSL2
Bạn có thể chọn hệ điều hành WindowsLinux hoặc Mac.
Cài đặt Git
Trong Ubuntu, bạn có thể cài đặt Git bằng cách chạy lệnh sau.
$ sudo apt update $ sudo apt install git
Trong trường hợp hệ thống Windows bạn sẽ cần tải xuống trình cài đặt hệ thống nhị phân Windows. Hãy xem hướng dẫn cài đặt Git đầy đủ của chúng tôi.
Để xác minh rằng Git đã được cài đặt chính xác, hãy gõ lệnh sau.
[email protected]:~$ git --version git version 2.34.1
Đang cài đặt nó
Bây giờ là lúc cài đặt Golang. Để làm điều này, bạn cần chạy một vài lệnh trên Linux. Vì vậy, hãy làm điều đó theo từng giai đoạn.
Bước chân 1: Xóa cài đặt Go trước đó và tạo cây Go cục bộ.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Bước chân 2: Tùy chỉnh biến môi trường PATH
xuất PATH=$PATH:/usr/local/go/bi
Bước chân 3: Cuối cùng, hãy kiểm tra xem Golang đã được cài đặt đúng chưa.
$ go version. #output go version go1.18.1 linux/amd64
Tuyệt vời, bây giờ chúng ta đã sẵn sàng cài đặt Hugo!
Cài đặt Hugo
Tùy thuộc vào việc bạn đang sử dụng Homebrew hay Chocolately, bạn sẽ cần sử dụng một trong các lệnh bên dưới.
Đối với Homebrew:
$ brew install hugo
Đối với sô cô la:
$ brew install hugo -confirm
Và nếu bạn không sử dụng bất kỳ thứ nào trong số chúng, bạn có thể cài đặt chúng trực tiếp từ nguồn.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Để xác minh rằng Hugo đã được cài đặt thành công, hãy chạy lệnh sau.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/newsblog.pl/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms#2. Tạo một trang web Hugo
Hugo cung cấp một cách dễ dàng để tạo một trang web. Để thực hiện việc này, hãy chạy lệnh sau.
$ hugo new site newsblog.pl-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/newsblog.pl-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Lựa chọn chủ đề Hugo
Hugo cung cấp quyền truy cập vào rất nhiều chủ đề. Những chủ đề này là điểm khởi đầu cho thiết kế của bạn. Để xây dựng trang Jamstack với Hugo, bạn cần có chủ đề.
#4. Tạo một trang web doanh nghiệp nhỏ với Jamstack
Đối với phần hướng dẫn, chúng tôi sẽ sử dụng chủ đề Hugo Hero. Chủ đề đa mục đích này cung cấp các tính năng như phần có chiều rộng đầy đủ và tạo danh mục đầu tư thông qua Markdown.
Để cài đặt một chủ đề, hãy sao chép liên kết của nó vào kho lưu trữ và sao chép nó. Hãy chắc chắn rằng bạn đang ở trong thư mục gốc trước khi tiếp tục.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Sao chép nội dung mặc định
Để sử dụng nội dung mặc định trên trang web của bạn, hãy chạy lệnh sau.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Sao chép nội dung của thư mục exampleSite vào thư mục gốc của trang web của bạn.
Cập nhật tệp Config.toml
Tiếp theo chúng ta cần chỉnh sửa file Config.toml. Nó lưu trữ thông tin cấu hình dự án và cần phải cấu hình đúng cách để trang Jamstack hoạt động.
Hiện tại, bạn cần chỉnh sửa dòng sau.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Lưu ý: Bạn phải cập nhật tệp Config.toml khi dự án tiến triển. Ngoài ra, vì bạn đang sử dụng nội dung mặc định nên tệp Config.toml sẽ được cập nhật để bao gồm nội dung mẫu.
Kiểm tra trang Jamstack của chúng tôi
Để thiết lập và chạy trang web của chúng tôi, chúng tôi cần tạo lại trang Hugo bằng lệnh Hugo.
$ hugo
Sau đó chúng ta khởi động máy chủ. Để thực hiện việc này, hãy chạy lệnh Hugo phục vụ.
$ hugo serve
#output
[email protected]:~/newsblog.pl$ hugo server
port 1313 already in use, attempting to use an available port
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 71 ms
Watching for changes in /home/nitt/newsblog.pl/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/nitt/newsblog.pl/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:42229/ (bind address 127.0.0.1)
Press Ctrl+C to stopLưu ý: Trang web của bạn hiện đã được lưu trữ và có thể truy cập tại 127.0.0.1. Nếu vì lý do nào đó mà nó không mở được, hãy thử mở địa chỉ thay thế được liệt kê bên cạnh. Trong trường hợp này là localhost:42973
Chỉnh sửa chủ đề Nội dung mặc định
Từ giờ trở đi, bạn có thể chỉnh sửa nội dung mặc định. Bạn có thể thực hiện việc này bằng cách vào thư mục Nội dung. Hãy chỉnh sửa nội dung của trang chỉ mục. Để thực hiện việc này, hãy đi tới Nội dung > Công việc > Index.md
Đây là kết quả sau khi chỉnh sửa.
Tạo một trang blog
Bạn cần chọn đúng chủ đề nếu bạn chỉ muốn tạo một blog. Để làm điều này, hãy sử dụng chủ đề Hyde.
Giống như việc thiết lập trang web mới của chúng tôi, bạn cần chạy các lệnh sau.
$ hugo new site newsblog.pl-jamstack $ cd newsblog.pl-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Sau đó chỉnh sửa tệp Config.toml để thêm theme=”hyde”.
Tạo một bài viết mới
Bạn cần chạy lệnh Hugo mới để tạo một bài đăng mới và sau đó là tệp đánh dấu.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Đã đăng nó
Để chỉnh sửa bài đăng hellogeefklare.md mới tạo của bạn, hãy mở tệp hellogeekflare.md trong trình soạn thảo văn bản ưa thích của bạn.
Nó sẽ cho bạn thấy nội dung sau.
--- title: "Hello newsblog.pl" date: 2023-05-04T11:39:10+05:30 draft: true ---
Tại đây bạn có thể thêm bất kỳ nội dung nào trong Markdown.
Hãy thêm nội dung sau vào Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Sau khi đặt nội dung trên vào file .md sẽ có dạng như bên dưới (tùy vào editor mà chúng ta sử dụng Visual Studio Code).
Tuy nhiên, nó sẽ trông hoàn toàn khác khi chúng ta phục vụ nó.
Lưu ý: Nhớ thay đổi giá trị dự thảo từ “true” thành “false”
Xuất sắc! Chúng tôi đã tạo hai trang Jamstack, một trang web doanh nghiệp nhỏ và một blog nữa.
Sau khi chỉnh sửa trang web, bạn có thể tạo các tệp bằng cách chạy lệnh ômo. Nó sẽ tạo một tập tin và đặt nó vào thư mục/public.
$ hugo
#5. Triển khai trang Jamstack trên Netlify
Bây giờ chúng ta đã tạo xong các trang web của mình, hãy triển khai chúng. Đối với điều này, chúng tôi sẽ sử dụng Netlify.
Netlify là dịch vụ hỗ trợ CDN cung cấp cho những người dùng như bạn khả năng lưu trữ các trang web nhanh. Bạn có thể kết nối Netlify với Github và tự động hóa quy trình này. Đây là một dịch vụ miễn phí với một số tính năng đằng sau tường phí.
Việc của chúng ta là giao code cho Netlify và để Netlify lo mọi việc cho chúng ta.
Thiết lập kho lưu trữ Git cục bộ
Đã đến lúc chúng ta thiết lập kho Git.
Để khởi tạo kho Git, hãy chạy lệnh sau trong thư mục gốc của dự án.
$ git init
Tiếp theo, chúng ta cần định cấu hình chủ đề dưới dạng mô-đun con. Đây là một bước quan trọng. Về mặt kỹ thuật, nó tạo các kho lưu trữ phụ trong kho lưu trữ của bạn. (Bạn có nhớ bạn đã tạo một bản sao Git cho chủ đề Hugo không?). Điều này sẽ cung cấp cho bạn nhiều quyền kiểm soát hơn đối với trang Jamstack.
Ví dụ: bạn có thể tải xuống các bản cập nhật cho chủ đề của mình. Bạn cũng cần phải làm điều này vì Netlify cần các chủ đề dưới dạng mô-đun con để lưu trữ chúng.
Vì vậy, để thêm chủ đề làm mô-đun con, hãy chạy lệnh sau.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/newsblog.pl-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/newsblog.pl-jamstack$
Tạo kho lưu trữ trên GitHub
Bây giờ quá trình thiết lập cục bộ đã hoàn tất, đã đến lúc tạo kho lưu trữ GitHub mới.
Sau khi tạo, bạn cần thêm nguồn gốc vào kho lưu trữ cục bộ của mình.
$ git remote add origin https://github.com/logan99/newsblog.pl-jamstack-tutorial.git
Bây giờ, kéo nó đi.
$ git branch -M main $ git pull origin main
Tạo một cam kết mới
Bây giờ là lúc tạo một cam kết mới. Chạy lệnh sau để thêm tất cả các tệp vào nhánh chính.
$ git add .
Bây giờ hãy chạy lệnh cam kết để thực hiện các thay đổi.
$ git commit -m “First commit”
#Output [email protected]:~/newsblog.pl-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Cuối cùng, đẩy các thay đổi của bạn lên GitHub.
$ git push --set-upstream origin main
Lưu ý: Bạn phải nhập tên người dùng và mật khẩu GitHub của mình để hoạt động.
#6. Làm việc với Netflix
Tuyệt vời, kho lưu trữ của chúng tôi đã được tạo. Bây giờ chúng ta chuyển sang Netlify. Nếu bạn đã có tài khoản, vui lòng đăng nhập hoặc tạo tài khoản mới.
Đối với các tài khoản mới hơn, nó sẽ khởi chạy trình hướng dẫn ngay lập tức. Nếu không, bạn sẽ truy cập trang tổng quan tài khoản của mình. Nếu bạn truy cập trang tổng quan, hãy nhấp vào tùy chọn “Thêm trang web mới” trong phần Trang web.
Trong phần Thêm trang web mới, chọn “Nhập dự án hiện có”.
Sau đó nó sẽ yêu cầu bạn chọn nhà cung cấp Git. Vì chúng tôi đang sử dụng GitHub nên chúng tôi sẽ chọn nó. Bạn cũng có thể chọn Bitbucket, GitLab và Azure DevOps.
Sau đó nó sẽ liệt kê tất cả các dự án của bạn. Tại đây, chọn kho lưu trữ GitHub mà bạn đã tạo cho dự án này. Đối với chúng tôi đó là “newsblog.pl-jamstack-tutorial”. Bạn cũng có thể tải lên một thiết kế khác mà chúng tôi đã tạo.
Sau đó, nó sẽ yêu cầu bạn chọn một nhánh để triển khai và chọn cài đặt bản dựng cơ bản. Hiện tại, bạn có thể đặt mọi thứ về mặc định.
Nhấp vào “Trang web triển khai” để triển khai nó.
Bây giờ bạn phải đợi Netlify thực hiện công việc của mình. Sau khi triển khai, thông báo sẽ cho biết “Trang web của bạn đã được triển khai.”
Bây giờ bấm vào trang web ở góc trên bên trái.
Tuy nhiên, bạn sẽ nhận thấy rằng trang web không tải đúng cách. Điều này là do URL cơ sở trong tệp Config.toml không được đặt chính xác. Vì Netlify đã tạo URL dự án mới nên nó cần được thêm vào tệp Config.toml.
Trong trường hợp của chúng tôi, trang web có tại https://animated-beijinho-2baa8b.netlify.app/
Điều này có nghĩa là chúng ta cần thêm baseURL vào nó.
Để thực hiện việc này, hãy chuyển đến cấu hình cục bộ và thay đổi giá trị.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Để đẩy thay đổi, bạn cần chạy lệnh sau.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netflix rất thông minh. Khi phát hiện phê duyệt mới, nó sẽ tự động triển khai lại trang web của bạn.
Nếu bạn tải trang web của mình bây giờ, nó sẽ tải hoàn hảo.
Ôi! Bạn làm được rồi. Tôi biết có rất nhiều điều để học hỏi. Tuy nhiên, bạn sẽ thấy toàn bộ quá trình trở nên trực quan sau khi thực hiện vài lần.
những từ cuối
Jamstack đã bước vào một kỷ nguyên mới của các nhà phát triển. Nó mở khóa hiệu suất và cũng cải thiện cách triển khai các trang web. Jamstack đã phát triển nhờ các thành viên xuất sắc của hệ sinh thái như Hugo và Netlify. Không còn nghi ngờ gì nữa, nó sẽ chỉ phát triển ở đây.
Sau đó, hãy xem cách triển khai ứng dụng lối vào cho Netlify.
