GitHub là một trang web cho phép bạn đăng mã của mình để bạn có thể sắp xếp mã và chia sẻ mã với người khác. Nó hơi giống phương tiện truyền thông xã hội dành cho các lập trình viên và đó là một cách tuyệt vời để thể hiện mã của bạn và xem những người khác đang làm gì
Trang GitHub cho phép bạn lấy kho lưu trữ GitHub và biến nó thành một trang web. Nói cách khác, bạn có thể sử dụng kho lưu trữ GitHub để lưu trữ các tệp HTML, CSS và JavaScript của mình. Hướng dẫn này hướng dẫn bạn quy trình tạo trang Trang GitHub
Tôi cho rằng bạn đã làm việc qua hướng dẫn README của hồ sơ GitHub và bạn đã tạo kho lưu trữ GitHub đầu tiên của mình và thực hành một số HTML với hồ sơ GitHub của bạn README. Nếu không, hãy làm điều đó ngay bây giờ và sau đó quay lại
Có hai loại kho lưu trữ Trang GitHub khác nhau
Trang web của người dùng được lưu trữ tại //YOUR_USERNAME.github.io và được sử dụng cho những thứ như trang chủ cá nhân, trang danh mục đầu tư và các trang web khác được liên kết với bạn với tư cách là người dùng. Để tạo kho lưu trữ Trang GitHub của trang web người dùng, hãy tạo một kho lưu trữ có tên YOUR_USERNAME.github.io
Các trang web dự án được lưu trữ tại //YOUR_USERNAME.github.io/YOUR_REPO_NAME và được sử dụng cho tài liệu liên quan đến một kho lưu trữ cụ thể hoặc các trang độc lập. Để tạo kho lưu trữ Trang GitHub của trang dự án, hãy tạo một kho lưu trữ với bất kỳ tên nào, sau đó tạo một trong hai
- Tạo một nhánh trong repo đó có tên là gh-pages
- Chuyển đến tab Settings trong repo của bạn và bật Trang GitHub cho nhánh main (hoặc bất kỳ nhánh nào bạn muốn)
(Có một loại kho lưu trữ Trang GitHub thứ ba được gọi là trang tổ chức, nhưng có thể bạn không cần điều đó ngay bây giờ. )
Hiện tại, hãy tạo kho lưu trữ Trang GitHub của trang web người dùng bằng cách tạo một kho lưu trữ có tên YOUR_USERNAME.github.io. Khi bạn tạo repo của mình, hãy chọn hộp Add a README file
Nhấp vào nút Create repository để tạo repo của bạn
Tiếp theo, chuyển đến tab Settings trong repo của bạn và cuộn xuống phần //YOUR_USERNAME.github.io1
Tạo một repo có tên YOUR_USERNAME.github.io sẽ tự động kích hoạt tính năng Trang GitHub và bật các cài đặt này. Nếu bạn muốn biến một repo khác thành trang GitHub Pages, thì đây là nơi bạn sẽ làm điều đó
Nhưng nếu bạn đang làm việc từ kho lưu trữ YOUR_USERNAME.github.io, thì bạn không phải thay đổi bất kỳ cài đặt nào. Quay lại trang chủ của repo của bạn (tab //YOUR_USERNAME.github.io4)
Ngay bây giờ, trang Trang GitHub của bạn được lưu trữ tại //YOUR_USERNAME.github.io, nhưng kho lưu trữ của bạn chỉ chứa một tệp //YOUR_USERNAME.github.io6 duy nhất. Để kiểm tra xem mọi thứ có hoạt động không, hãy trỏ trình duyệt của bạn tới //YOUR_USERNAME.github.io7. Bạn sẽ thấy một cái gì đó như thế này
Đây là nội dung thô của tệp //YOUR_USERNAME.github.io6, được lưu trữ trên Trang GitHub. Không giống như tính năng README của hồ sơ GitHub, Trang GitHub không chuyển đổi đánh dấu thành HTML theo mặc định, đó là lý do tại sao bạn thấy đánh dấu thô trong trình duyệt của mình
Tiếp theo, hãy làm theo quy trình bạn đã học trong hướng dẫn README hồ sơ GitHub để thêm tệp //YOUR_USERNAME.github.io9 vào kho lưu trữ của bạn
Sao chép repo của bạn. Bạn có thể sử dụng GitHub Desktop hoặc công cụ dòng lệnh git
Tạo một tệp //YOUR_USERNAME.github.io9 chứa một số nội dung HTML và lưu nó vào bản sao cục bộ của kho lưu trữ của bạn. Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào để thực hiện bước này
Đây là một số nội dung HTML để bắt đầu
My GitHub Pages Site Hello world!
Welcome to my GitHub Pages site!
Lưu tệp này vào tệp //YOUR_USERNAME.github.io9 trong repo của bạn, ngay bên cạnh tệp //YOUR_USERNAME.github.io6 của bạn. Bạn có thể kiểm tra HTML của mình bằng cách mở tệp trong trình duyệt của mình
Thêm, cam kết và đẩy tệp //YOUR_USERNAME.github.io9 của bạn. Một lần nữa, bạn có thể sử dụng GitHub Desktop hoặc công cụ dòng lệnh git
Quay lại repo của bạn trong GitHub và bây giờ bạn sẽ có tệp //YOUR_USERNAME.github.io9 trong repo của mình
Bây giờ đây là phần kỳ diệu. Trỏ trình duyệt của bạn tới YOUR_USERNAME.github.io5 và bạn sẽ thấy HTML của mình được trình duyệt hiển thị
Tệp //YOUR_USERNAME.github.io9 cũng có một chút kỳ diệu. Theo mặc định, hầu hết các máy chủ web sẽ tự động hiển thị //YOUR_USERNAME.github.io9 nếu bạn không chỉ định tệp. Điều đó có nghĩa là bạn cũng có thể điều hướng đến //YOUR_USERNAME.github.io mà không có phần //YOUR_USERNAME.github.io9 để xem trang của mình
Bạn có thể gửi liên kết này cho bạn bè của mình, thêm nó vào hồ sơ GitHub của bạn README hoặc đăng nó trong HappyCoding. diễn đàn io
Bây giờ bạn đã kết nối mọi thứ, bạn có thể cập nhật repo của mình bất cứ khi nào bạn muốn thực hiện các thay đổi đối với trang web của mình. Hãy thử những thứ này
- Thêm HTML để mô tả bản thân và liên kết đến các dự án bạn đã thực hiện
- Thêm hình ảnh như ảnh của chính bạn, thú cưng của bạn hoặc ảnh chụp màn hình về công việc bạn đang làm
- Thêm CSS để tạo kiểu cho trang web của bạn và làm cho nó đẹp hơn
- Thêm JavaScript để làm cho trang web của bạn tương tác
Bạn có thể thực hiện các thay đổi cục bộ và kiểm tra chúng trước khi triển khai chúng bằng cách mở các tệp cục bộ trong trình duyệt của mình, sau đó đẩy các thay đổi của bạn bất cứ khi nào bạn sẵn sàng hiển thị chúng với mọi người
Trang GitHub rất hay vì điều đó có nghĩa là repo của bạn và trang web trực tiếp của bạn luôn đồng bộ. Bất cứ khi nào bạn cập nhật repo của mình, Trang GitHub sẽ tự động cập nhật trang web trực tiếp của bạn. Bản thân Happy Coding được xây dựng bằng Trang GitHub
Hãy vui vẻ khi tạo trang Trang GitHub của bạn và đừng ngại sáng tạo. Và đảm bảo đăng một liên kết trong HappyCoding. diễn đàn io để chúng tôi có thể kiểm tra