Git để phát triển web: Tìm hiểu quy trình làm việc điển hình của một dự án

Về bản chất, phát triển web có liên quan đến cộng tác. Hầu hết thời gian bạn sẽ làm việc với các nhà phát triển khác và ngay cả khi bạn không làm việc, Git có thể giúp bạn theo nhiều cách khác.

Git là phần mềm kiểm soát phiên bản của các ứng dụng mà chúng tôi tạo ra. Nó được sử dụng bởi các nhà phát triển solo, các công ty lớn và thậm chí cả Linux, dự án mã nguồn mở lớn nhất trên thế giới.

Là một nhà phát triển web, điều cực kỳ quan trọng là phải biết cách sử dụng Git để phát triển web đúng cách. Chúng ta không chỉ nói về “git add”, “git commit” và “git push”. Bạn nên biết toàn bộ quy trình tạo một dự án web với Git.

Chưa thuyết phục? Hãy bắt đầu!

Tại sao sử dụng Git?

Đây chỉ là một số lý do để bắt đầu sử dụng Git:

• Tổ chức: Thay vì quản lý dự án của bạn trong các thư mục như v1, v2, v3, v.v., bạn có một dự án với cơ sở dữ liệu đặc biệt lưu trữ tất cả các phiên bản của tệp
• Cộng tác: Git cho phép bạn và những người khác làm việc trên cùng một dự án tại cùng một thời điểm mà không tạo ra xung đột.
• Mã nguồn mở: Git là mã nguồn mở, nhưng nó cũng là công cụ chúng tôi sử dụng để cộng tác và tạo ra phần mềm mã nguồn mở tuyệt vời. Bất kỳ ai cũng có thể thực hiện các yêu cầu kéo đối với các dự án mã nguồn mở trên các nền tảng như GitHub hoặc Bitbucket.
• Tính linh hoạt của nền tảng: Ngày nay, bạn có nhiều dịch vụ lưu trữ Git khác nhau để lựa chọn, chẳng hạn như Gitlab, GitHub, Bitbucket và SourceForge. Bạn thậm chí có thể sử dụng giải pháp tự lưu trữ cho tất cả các dự án của mình.
• Sao lưu dễ dàng: Hoàn tác lỗi một cách dễ dàng và không bao giờ làm mất cơ sở mã dự án của bạn.

Chúng tôi đã đề cập đến thuật ngữ GitHub một hoặc hai lần, vậy sự khác biệt giữa Git và GitHub là gì?

Điều này có thể khiến bạn bối rối nếu bạn hoàn toàn mới sử dụng Git. Nói một cách dễ hiểu, Git và GitHub là những công cụ có liên quan nhưng khác nhau.

Git là hệ thống kiểm soát phiên bản (VCS) mà chúng tôi sử dụng để giữ quyền kiểm soát các thay đổi của tệp của mình, trong khi GitHub là dịch vụ chúng tôi sử dụng để lưu trữ trực tuyến các tệp dự án và lịch sử Git của chúng (nằm trong thư mục .git / dự án của bạn) .

Git được cài đặt cục bộ, trên máy của bạn và không có các dịch vụ lưu trữ như GitHub hoặc GitLab, sẽ rất khó để cộng tác với các nhà phát triển khác.

GitHub tăng áp Git bằng cách thêm các tính năng khác để cải thiện sự cộng tác, như sao chép, phân nhánh và hợp nhất. Hai công cụ này kết hợp với nhau sẽ mang lại cho bạn một hệ sinh thái tương đối thân thiện để phát triển, quản lý và hiển thị dự án của bạn cho người khác.

Git cơ bản cho quy trình phát triển web

Trong các phần tiếp theo, bạn sẽ tìm hiểu thêm về quy trình làm việc của Git để phát triển web thông qua thực hành thực hành.

Yêu cầu cài đặt

Nếu bạn chưa cài đặt Git, đây là thời điểm hoàn hảo. Nó dễ cài đặt và có sẵn trên hầu hết các hệ điều hành.

Tải xuống từ trang tải xuống chính thức hoặc cài đặt bằng trình quản lý gói nếu bạn đang sử dụng Linux hoặc macOS:

Để kiểm tra xem mọi thứ diễn ra tốt đẹp với quá trình cài đặt, hãy kích hoạt một thiết bị đầu cuối trên Linux hoặc macOS bằng cách tìm kiếm “Thiết bị đầu cuối” trong menu ứng dụng của bạn hoặc bằng cách mở Git bash trên Windows (được cài đặt với Git theo mặc định).

Sau đó gõ:

git --version

Nếu bạn nhận được phiên bản Git dưới dạng phản hồi, thì bạn đã sẵn sàng.

Chúng tôi cũng sẽ cần tài khoản GitHub, vì vậy hãy đảm bảo đăng ký hoặc đăng nhập vào GitHub:

Khi bạn đã cài đặt Git và đăng nhập vào tài khoản GitHub, bạn có thể chuyển sang phần tiếp theo.

Quy trình làm việc Git cơ bản cho các dự án cộng tác

Như đã đề cập trước đó, hầu hết thời gian bạn sẽ không phát triển các dự án solo. Cộng tác là một kỹ năng quan trọng và Git và GitHub giúp chúng tôi biến nó thành một quy trình đơn giản nhưng hiệu quả.

Quy trình công việc điển hình của một dự án Git trông như thế này:

1. Nhận bản sao cục bộ của dự án bằng cách sao chép kho lưu trữ hoặc kho lưu trữ. Nếu bạn đang cộng tác, bạn nên fork repo trước.
2. Tạo một nhánh với tên đại diện của đối tượng địa lý bạn sẽ làm việc trên.
3. Chỉnh sửa dự án.
4. Cam kết các thay đổi đối với máy cục bộ của bạn.
5. Đẩy các thay đổi vào repo từ xa.
6. Tạo một yêu cầu kéo đến repo ban đầu.
7. Hợp nhất và giải quyết xung đột trong nhánh chính của repo gốc.

Hướng dẫn

Bây giờ là lúc để làm bẩn bàn tay của chúng ta!

Trong hướng dẫn này, bạn sẽ tạo một trang web HTML đơn giản. Đối với các mục đích thực tế, bạn sẽ chuyển dự án cơ sở từ kho lưu trữ trang web HTML sang tài khoản GitHub của mình. Điều này có thể được thực hiện cho tất cả các kho lưu trữ công khai có sẵn.

Để fork trang web HTML, hãy truy cập kho lưu trữ GitHub này và nhấp vào nút Fork nằm ở trên cùng bên phải của trang:

Bây giờ bạn có một nhánh của repo gốc chỉ có trên tài khoản GitHub của bạn. Nó giống hệt như repo – cho đến khi bạn bắt đầu thực hiện các thay đổi.

Như bạn có thể thấy, việc tạo một repo công khai chỉ mất vài giây. Điều này rất tốt cho các dự án mã nguồn mở, nhưng hãy nhớ rằng nếu tổ chức của bạn có một kho lưu trữ riêng, bạn sẽ cần phải được bao gồm như một người đóng góp trước khi cố gắng phân nhánh nó.

Đã đến lúc đưa fork của bạn vào máy cục bộ của bạn. Để thực hiện việc này, bạn cần sao chép nó bằng lệnh git clone , lệnh này truy xuất kho lưu trữ Git từ máy chủ từ xa:

git clone remote_url

Bạn cần thay thế remote_url bằng URL nhánh rẽ của mình. Để lấy URL chính xác của repo GitHub, hãy truy cập trang của nó và nhấp vào Code . Sau đó, chọn SSH và sao chép liên kết mà nó cung cấp cho bạn:

Lệnh bạn sẽ chạy để sao chép repo đã chia nhỏ là:

git clone [email protected]:yourusername/HTML-site.git

Khi bạn sao chép một repo, bạn sẽ nhận được một thư mục có tên của nó. Bên trong thư mục đó là mã nguồn của dự án (trong trường hợp này là trang HTML) và kho Git, nằm bên trong thư mục có tên .git .

Bạn có thể xem danh sách các tệp bên trong thư mục mới bằng cách mở thư mục mới trong trình quản lý tệp đồ họa hoặc bằng cách liệt kê chúng trực tiếp từ terminal với ls hoặc dir :

# Linux/macOS ls HTML-site/ # Windows dir HTML-site .git images .gitignore index.html LICENSE README.md styles.css

Trang web HTML này rất đơn giản. Nó sử dụng Bootstrap cho các mục đích thực tế và một vài hình ảnh từ Unsplash, nơi bạn có thể tải xuống các hình ảnh miễn phí cho trang web của mình.

Nếu bạn mở tệp index.html trong trình duyệt của mình, bạn sẽ thấy một trang đơn giản với một vài hình ảnh:

Đã đến lúc chơi với dự án này. Nó cảm thấy rất trống rỗng và có thể một tiêu đề với tên của trang web có thể nâng cao trải nghiệm người dùng.

Để làm điều đó, hãy nhập thư mục HTML-site và tạo một nhánh có tên header . Trong nhánh mới này, chúng ta có thể chỉnh sửa tất cả các tệp và triển khai nhiều mã tùy thích vì nó sẽ không ảnh hưởng đến nhánh chính (gốc).

Chạy lệnh sau:

git checkout -b header

Thao tác này sẽ tạo một nhánh có tên là “tiêu đề” và chuyển bạn sang nhánh đó ngay sau đó. Nó tương đương với:

git branch header git checkout header

Để xác nhận mọi thứ đều ổn, hãy chạy:

git status # On branch header # nothing to commit, working tree clean

Bạn sẽ thấy rằng bạn đã được chuyển từ nhánh “chính” sang nhánh “tiêu đề”, nhưng cây làm việc vẫn sạch vì chúng tôi chưa chỉnh sửa bất kỳ tệp nào.

Trong trình soạn thảo mã yêu thích của bạn, hãy mở tệp index.html trong dự án phân nhánh của bạn. Tệp này bao gồm một số liên kết đến Bootstrap 5, vì vậy chúng tôi có thể tận dụng các thành phần sẵn sàng sử dụng của khung.

Thêm mã sau vào tệp index.html bên trong <body> và phía trên vùng chứa hình ảnh:

<header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

Đẹp hơn nhiều! Hãy thoải mái thực hiện các chi nhánh khác và thay đổi bạn muốn.

Khi bạn đã hoàn tất việc chỉnh sửa dự án, đã đến lúc thực hiện tất cả các thay đổi đối với kho lưu trữ cục bộ của bạn. Bên trong thư mục dự án, hãy nhập thông tin sau vào thiết bị đầu cuối của bạn:

git add --all git commit -m "Added simple header in index.html file"

Khi bạn lần đầu tiên bắt đầu một dự án, bạn thường có các thông điệp cam kết mang tính mô tả, nhưng theo thời gian và sự thay đổi trọng tâm, chất lượng của các thông báo có xu hướng đi xuống. Đảm bảo theo kịp thực hành đặt tên tốt.

Bây giờ bạn đã thực hiện cam kết với kho lưu trữ cục bộ của mình (vẫn chỉ khả dụng trên máy tính của bạn), đã đến lúc đẩy nó vào kho lưu trữ từ xa.

Nếu bạn cố đẩy cam kết như bình thường, nó sẽ không hoạt động vì bạn hiện đang làm việc trên nhánh header . Bạn cần đặt nhánh ngược dòng cho header :

git push --set-upstream origin header

Bắt đầu từ ngày 13 tháng 8 năm 2021, GitHub yêu cầu sử dụng xác thực SSH, vì vậy hãy đảm bảo rằng bạn đã thiết lập đúng các khóa của mình.

Sau đó, bạn sẽ có thể thấy một nhánh mới có tên header trong kho lưu trữ được phân nhánh của bạn (ví dụ: https://github.com/yourusername/HTML-site/braches ):

Để tạo một yêu cầu kéo đến repo gốc, hãy nhấp vào So sánh , ở dưới trong phần Các nhánh hoạt động .

Điều này sẽ hướng dẫn bạn đến một yêu cầu kéo, nơi bạn sẽ cần chọn nhánh nào (gốc hoặc nhánh rẽ của bạn) mà bạn muốn hợp nhất. Theo mặc định, nó hiển thị tùy chọn để hợp nhất với kho lưu trữ cơ sở:

Khi bạn nhấp vào tùy chọn yêu cầu kéo, bạn sẽ cần viết một mô tả ngắn về các thay đổi đã thực hiện, giống như với các cam kết trước đó của bạn. Một lần nữa, hãy cố gắng ngắn gọn nhưng mang tính mô tả:

Nhấp vào nút Tạo yêu cầu kéo và đợi chủ sở hữu kho lưu trữ cơ sở chấp nhận hoặc cung cấp cho bạn phản hồi về các thay đổi của bạn.

Xin chúc mừng – bạn vừa hoàn thành tất cả các bước của quy trình Git chung để phát triển web!

Đây là một ví dụ thực sự cơ bản, nhưng logic mở rộng trên các dự án ở mọi quy mô. Đảm bảo rằng bạn cũng thực hiện chặt chẽ quy trình làm việc này trong các dự án hợp tác lớn hơn.

Cách sử dụng Git tại Kinsta

Nếu bạn là người dùng Kinsta, bạn đã có hai cách để sử dụng Git và GitHub từ bên trong cổng MyKinsta của mình.

Hãy bắt đầu với tùy chọn đầu tiên. Bạn có thể dễ dàng SSH vào và lấy repo từ bất kỳ dịch vụ lưu trữ Git nào như GitHub, Gitlab hoặc Bitbucket.

Để thực hiện việc này, hãy chuyển đến tab Trang web của bạn, chọn một trang web và đi tới phần chi tiết SSH của bạn và sao chép lệnh đầu cuối SSH.

Đăng nhập qua SSH vào trang web của bạn bằng cách dán lệnh ở trên vào thiết bị đầu cuối của bạn và truy cập vào thư mục công khai trên trang web của bạn (nằm dưới / www / youritename / ). Đây là nơi chứa tất cả các tệp WordPress của bạn, vì vậy bạn có thể kéo xuống kho lưu trữ Git với chủ đề hoặc plugin tùy chỉnh mà bạn đang làm việc.

Đây là cách bạn kéo repo Git xuống trong một lệnh đơn giản:

ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Giờ đây, khi giới thiệu tính năng triển khai GitHub mới tại Kinsta, bạn có thể triển khai một trang WordPress đầy đủ từ kho lưu trữ GitHub.

Kho lưu trữ GitHub của bạn phải bao gồm bản sao của các tệp lõi WordPress và tất nhiên, nội dung trang web của bạn bên trong thư mục wp-content .

Chúng ta hãy xem nhanh tùy chọn này.

Truy cập một trong các trang web của công ty bạn và tạo một môi trường tổ chức. Quá trình này sẽ không lâu hơn vài phút.

Khi bạn đã ở trong trang web dàn dựng của mình, hãy chuyển đến tab Triển khai và nhấp vào nút Bắt đầu thiết lập . Bạn sẽ thấy một phương thức GitHub sẽ cho phép Kinsta kết nối với tài khoản GitHub của bạn.

Bây giờ, hãy chọn repo mà bạn sẽ lấy trang web của mình từ đó.

Cuối cùng, triển khai trang web của bạn và truy cập nó thông qua URL trang web dàn dựng của bạn.

Tính năng này vẫn đang trong giai đoạn Beta , nhưng mọi người dùng Kinsta sẽ sớm có quyền truy cập vào nó.

Sử dụng Git và Kinsta có thể là một sự kết hợp mạnh mẽ nếu bạn biết sử dụng chúng thành thạo. Mặc dù hướng dẫn của chúng tôi ở đây chỉ trình bày một ví dụ đơn giản, bạn có thể tìm hiểu thêm nhiều điều từ bài viết cơ sở kiến thức Git của chúng tôi.

Bản tóm tắt

Ngày nay, Git là một công cụ phải học để phát triển web, vì phần lớn thời gian bạn sẽ cộng tác với những người khác để tạo ra dự án tốt nhất mà bạn có thể.

Trong bài viết này, chúng tôi đã thảo luận về một số lý do quan trọng để sử dụng Git trong các dự án của bạn và chúng tôi đã chỉ cho bạn quy trình cơ bản của việc cộng tác trong kho Git.

Git là một công cụ mạnh mẽ đến mức bạn có thể mở rộng việc sử dụng nó ngay cả với dịch vụ lưu trữ WordPress, vì vậy nó chỉ có thể mang lại lợi ích cho bạn khi học và triển khai nó như một phần của kho kỹ năng phát triển web của bạn.

Bạn có đề xuất nào khác để cải thiện quy trình làm việc Git cơ bản này để phát triển web không? Cho chúng tôi biết trong phần ý kiến!