Làm cách nào để triển khai html css lên github?

Tôi luôn muốn xây dựng tiện ích mở rộng mã VS, nhưng tôi chưa bao giờ có lý do hoặc đủ thời gian. Bây giờ tôi làm việc trong DevRel tại GitHub, cuối cùng tôi cũng có cơ hội để làm điều đó. Nhóm Microsoft VS Code tổ chức hội thảo về trang web sơ yếu lý lịch nơi những người tham gia triển khai sơ yếu lý lịch được tạo bằng HTML và CSS cho Trang GitHub

Tôi đã hợp tác với nhóm Mã VS để tạo Tiện ích mở rộng Mã VS cho phép bạn nhanh chóng triển khai trang web tĩnh của mình (Jekyll hoặc HTML) lên Trang GitHub mà không cần rời khỏi IDE của bạn

Hai điều yêu thích của tôi là tạo ra tác động tích cực và thử nghiệm những công nghệ mà tôi chưa từng sử dụng

Làm thế nào nó hoạt động

Vẫn còn chỗ để cải thiện với trải nghiệm người dùng và quy trình làm việc. Tuy nhiên, đối với lần lặp đầu tiên của tôi để triển khai mã của bạn lên Trang GitHub bằng tiện ích mở rộng mà tôi đã tạo, bạn có thể thực hiện các bước sau

• Tạo một kho lưu trữ. Trong ảnh chụp màn hình bên dưới, tôi đã tạo một kho lưu trữ có tên gh pages-into-the-spider

• Tạo một chỉ mục. tệp html ít nhất. Bạn cũng có thể thêm CSS và JavaScript. Đối với bài đăng trên blog này, tôi sẽ tạo một tệp HTML. Tôi đã tạo một tệp có tên là chỉ mục. html với phần tử h1 bao gồm một trích dẫn từ bộ phim Người nhện. Giới thiệu về Spiderverse và cả hình ảnh từ bộ phim

• Đừng quên cam kết tập tin của bạn. Ảnh chụp màn hình bên dưới cho biết rằng tôi đã nhấp vào nút “Cam kết tệp mới” để cam kết chỉ mục mới tạo của mình. tệp html

• Cài đặt tiện ích mở rộng Mã VS có tên “Triển khai tới các trang GitHub. ” Để tìm tiện ích mở rộng, tôi đã nhấp vào biểu tượng tiện ích mở rộng trong Visual Studio Code và tìm kiếm “Triển khai tới các trang GitHub. ” Tôi đã nhấn cài đặt cho phần mở rộng cụ thể đó

• Mở thanh tìm kiếm để tìm tệp mới. Bạn có thể làm điều này thông qua các phương pháp sau
  • Sử dụng Go to File, nằm trong menu Go
  • Sử dụng phím tắt này trên Windows Ctrl+p hoặc Ctrl+e
  • Sử dụng phím tắt này trên macOS Cmd ⌘+p
  • Sử dụng phím tắt này trên Linux Ctrl+p hoặc Ctrl+e

• Kích hoạt tiện ích mở rộng bằng cách nhập “>” vào thanh tìm kiếm. Nếu nó hoạt động bình thường, bạn sẽ thấy dòng chữ “Deploy to GitHub Pages” như trong hình bên dưới

• Khi bạn chọn “Triển khai các trang GitHub”, bạn sẽ nhận được lời nhắc đăng nhập vào GitHub

• Sau khi bạn hoàn tất quy trình xác thực, IDE của bạn sẽ hiển thị danh sách thả xuống với mười kho lưu trữ được tạo gần đây nhất của bạn. Trong ảnh chụp màn hình, kho lưu trữ “gh pages-into-the-spider” của tôi nằm ở đầu danh sách

• Sau khi chọn kho lưu trữ, “ghpages-into-the-spiderverse”, một thông báo chúc mừng xuất hiện, nhắc tôi xuất bản kho lưu trữ lên Trang GitHub. Nhấp vào nút “Xuất bản” để xác nhận rằng bạn muốn triển khai kho lưu trữ lên Trang GitHub

• Bánh mì nướng sẽ cập nhật với thông báo rằng trang web của bạn sẽ hoạt động sau vài phút nữa

• Kiểm tra nhật ký Hành động để biết tiến trình. Trang GitHub sử dụng một hành động để xây dựng và triển khai trang web. Nếu bạn thấy tất cả các dấu kiểm màu xanh lá cây, giống như hình ảnh bên dưới, trang web của bạn đang hoạt động

• Nhấp vào URL cho trang web của bạn và xem trang web tĩnh mới của bạn được lưu trữ trên Trang GitHub. Bạn có thể tìm thấy trang web của tôi tại liên kết này. https. // blackgirlbytes. github. io/gh trang-vào-câu-nhện/

Tôi đã xây dựng nó như thế nào

Tôi đã viết về giải phẫu phần mở rộng Mã VS của mình tại đây

Mở để đóng góp

Thành thật mà nói, tôi đã không đầu tư nhiều thời gian như mong muốn vào việc tạo tiện ích mở rộng này. Có chỗ để cải thiện. Tôi sẵn sàng đóng góp để giúp tôi cải thiện README của mình, cải thiện quy trình làm việc, v.v. Vui lòng mở một vấn đề và yêu cầu kéo trong kho lưu trữ này. https. //github. com/blackgirlbytes/vscodeextension-deploy-to-gh-pages

Tôi có thể tải HTML và CSS lên GitHub không?

Tôi có thể lưu trữ tệp HTML trên GitHub không?

Tại sao CSS không hoạt động trên GitHub?