Làm cách nào để sử dụng HTML trên GitHub?

Thật không may, điều này chỉ hoạt động đối với các tệp HTML

  • Chuyển đến Yêu cầu kéo hoặc Cam kết bạn muốn xem trước
  • Chuyển đến tab “tệp đã thay đổi” và nhấp vào tệp bạn muốn xem trước (chỉ mục. html)
  • Chọn “xem” ở bên phải
  • Sao chép url
  • Dán url vào https. // thô. lừa đảo. com
  • Sử dụng url “trong sản xuất” để xem phiên bản kết xuất

Cách tạo và xuất bản tệp lên Web và cách tốt hơn/tệ hơn so với xuất bản một bài đăng blog trên WordPress

bài học này là. Gần như hoàn thành [2014-04-03]

Trong bài học trước, chúng ta đã tạo một tệp README.md. Và Github đã biến nó thành một trang web, về mặt kỹ thuật

Nhưng nó chỉ là một trang chủ nhanh cho repo của chúng tôi, với một URL trông giống như bất kỳ tệp bình thường thông thường nào (mà, vâng, nó là…)

github.com/username/username.github.io/README.md

Github cung cấp dịch vụ xuất bản web có tên Trang Github. Trong bài học này, chúng ta sẽ tìm hiểu cách xuất bản một trang web phù hợp thông qua Trang Github

Theo tài liệu của Trang Github, bằng cách tạo một repo có tên username.github.io, Trang Github biết (theo quy ước) để xuất bản bất kỳ thứ gì trong repo này tới URL tương ứng

https. //tên tài khoản. github. io

Tuy nhiên, nếu bạn truy cập URL đó, bạn sẽ thấy trang 404

Làm cách nào để sử dụng HTML trên GitHub?

Tạo chỉ mục. html

Quay lại trang chủ kho lưu trữ của bạn trên github. đến. g

github.com/username/username.github.io

Ở bên phải của tên repo là một biểu tượng cộng giấy nhỏ. Bấm vào nó để tạo một tập tin mới

Làm cách nào để sử dụng HTML trên GitHub?

Thao tác này sẽ đưa bạn đến trình chỉnh sửa tệp Github. Lần này, bạn sẽ phải chỉ định tên tệp

Đặt tên cho tên tệp của bạn. index.html

Sau đó, nhập một số văn bản vô nghĩa, e. g

Hello world check out my homepage!


----------------------------
http://username.github.io

Làm cách nào để sử dụng HTML trên GitHub?

Cam kết tệp index.html. Bạn có thể thêm một thông điệp cam kết nếu bạn muốn

Sau khi cam kết, bạn sẽ được đưa đến danh sách tệp repo của mình, hiện sẽ chứa hai tệp

  • README.md
  • index.html

Tệp README sẽ không thay đổi vì bạn đã không chạm vào README.md

Làm cách nào để sử dụng HTML trên GitHub?

Vậy điều gì đã thay đổi?

Theo quy ước Trang Github, trang web mới của bạn tồn tại tại

Hello world check out my homepage!


----------------------------
http://username.github.io
2

Và nếu bạn truy cập địa chỉ đó, bạn sẽ thấy một trang rất kém ấn tượng

Kìa, trang web mới của bạn (index.html) trên Trang Github

Làm cách nào để sử dụng HTML trên GitHub?

Trang chủ của bạn không chỉ không được trang trí mà còn thiếu khoảng cách cơ bản giữa các dòng. Nếu bạn Xem nguồn (bằng cách nhấp chuột phải vào trang hoặc bằng cách đi tới Xem > Nhà phát triển > Xem nguồn ) để xem mã nguồn index.html, bạn sẽ thấy chính xác những gì bạn đã nhập vào trình chỉnh sửa tệp Github

Tuy nhiên, trình duyệt của bạn hiển thị tất cả dưới dạng một dòng. Nếu bạn không biết gì về phát triển web, đây là lời giải thích. văn bản bạn đã nhập vào index.html không phải là mã HTML thực. Nó chỉ là, tốt, văn bản đơn giản. Và các Trang Github, không giống như hầu hết các trang viết blog và nội dung, đã không làm gì để giúp bạn điều đó

Làm cách nào để sử dụng HTML trên GitHub?

Nguồn thô (i. e. bản rõ) đằng sau index.html

Làm cách nào để sử dụng HTML trên GitHub?

Xuất bản web 101

Nếu bạn đã từng viết một trang web từ đầu, tôi. e. từ

Hello world check out my homepage!


----------------------------
http://username.github.io
7 đến thẻ kết thúc
Hello world check out my homepage!


----------------------------
http://username.github.io
8, bạn có thể đã biết các khái niệm (và có thể bỏ qua). Nhưng nếu trải nghiệm xuất bản Web của bạn chỉ giới hạn ở việc đăng trong hộp “trạng thái cập nhật” hoặc thông qua hệ thống quản lý nội dung của công ty bạn hoặc thậm chí trên WordPress/Tumblr của riêng bạn, thì những gì bạn vừa thực hiện với Trang Github sẽ có vẻ rất

Và đó là OK. Thật tuyệt vời vì Trang Github chỉ lấy văn bản đơn giản mà bạn đã viết

Hello world check out my homepage!


----------------------------
http://username.github.io

– và đặt nó trên một máy chủ web công cộng, như là

Vì vậy, các trang Github về cơ bản không làm gì ở đây. Nó đã “xuất bản” trang index.html của bạn, nếu đưa nó thô lên Internet được tính là “đã xuất bản. ”

Làm cách nào để sử dụng HTML trên GitHub?

Làm cách nào để sử dụng HTML trên GitHub?

(Một lần nữa, nếu bạn có bất kỳ kinh nghiệm nào về phát triển web, có lẽ bạn nên bỏ qua phần này)

Quay lại Github của bạn. com (không phải trang chủ Trang Github của bạn) và kiểm tra văn bản gốc phía sau README.md

Làm cách nào để sử dụng HTML trên GitHub?

Bây giờ, hãy xem Nguồn của README.md được hiển thị (một lần nữa, được hiển thị theo mặc định trên Github của bạn. com trang repo)

Lưu ý cách Github biến văn bản gốc đằng sau README.md thành mã HTML thực tế;

Làm cách nào để sử dụng HTML trên GitHub?

Để có được một trang web phù hợp, với HTML thực và tất cả những thứ đó, chúng ta sẽ phải tự viết HTML thực

Trong trang repo và danh sách tệp của bạn, nhấp qua index.html và nhấp vào nút Chỉnh sửa, thao tác này sẽ cho phép bạn chỉnh sửa index.html qua trình chỉnh sửa tệp Github

Làm cách nào để sử dụng HTML trên GitHub?

Xóa tất cả văn bản gốc trong index.html và thay thế nó bằng một số HTML. Chẳng hạn như

<html>
  <head>
    <title>My Homepage</title>
  </head>


  <body>
    <h1>My homepage!</h1>
    
    <h2>
        ;)
    </h2>

  </body>
</html>

Làm cách nào để sử dụng HTML trên GitHub?

Cam kết thay đổi của bạn. Những điều này sẽ có hiệu lực gần như ngay lập tức, nhưng hãy thoải mái nghỉ ngơi vài phút

Sau đó truy cập lại trang chủ Trang Github của bạn, e. g

<html>
  <head>
    <title>My Homepage</title>
  </head>


  <body>
    <h1>My homepage!</h1>
    
    <h2>
        ;)
    </h2>

  </body>
</html>
6

Khá đơn giản, nhưng ít nhất đó là một trang web chân chính;

Làm cách nào để sử dụng HTML trên GitHub?

Xuất bản web, dễ dàng và ngắn gọn

Vậy tại sao lại sử dụng Trang Github, đặc biệt nếu bạn không có ý định trở thành nhà phát triển web hoặc thậm chí học HTML cơ bản?

Câu hỏi hay. Câu trả lời đơn giản là. Trong xuất bản web, cũng như trong mọi lựa chọn cơ bản trong cuộc sống, bạn phải đánh đổi giữa

  1. Quyền lực và kiểm soát
  2. Dễ dàng và ngắn gọn

Trang Github tập trung nhiều hơn vào khía cạnh quyền lực và kiểm soát của quang phổ. Nếu bạn muốn đưa thứ gì đó lên Web, Trang Github cho phép bạn thực hiện điều đó từ trình duyệt web của mình, thay vì cách truyền thống là thiết lập máy chủ FTP/Apache của riêng bạn (và bằng cách sử dụng Trang Github, bạn đang trao đổi quyền lực và quyền kiểm soát

mèo giữ chỗ

Với một dịch vụ như WordPress, bạn có thể dễ dàng tạo nội dung web bằng trình soạn thảo văn bản đa dạng thức, tương tự như trình xử lý văn bản truyền thống

Khi bạn nhấn Xuất bản bài đăng, WordPress sẽ xử lý nội dung bài đăng của bạn bằng mã HTML và đặt nó vào một thùng chứa khá đẹp. Sự đánh đổi là bạn không thể (dễ dàng) thoát ra khỏi những ranh giới đó, nếu không học đủ mã để hack xung quanh WordPress

Tôi mất khoảng năm phút để tạo một blog mới trên WordPress. com, chọn một chủ đề dựng sẵn ("McKinley" của ThemeTrust) và tạo một bài đăng mới, với tiêu đề, văn bản, liên kết, trích dẫn khối và thậm chí một số thẻ

Làm cách nào để sử dụng HTML trên GitHub?

WordPress định dạng bài đăng của tôi một cách hữu ích và phù hợp với nó bên trong chủ đề McKinley đẹp mắt mà tôi đã chọn. Kiểm tra phiên bản trực tiếp và nhận thấy tất cả những điều thú vị mà WordPress thêm vào, chẳng hạn như đặt “Albert Einstein” thành một liên kết có thể nhấp được. Và chú ý các tính năng bổ sung. các thẻ cũng là các liên kết có thể nhấp được, một ngày đã được thêm vào bài đăng, có Chia sẻ cái này. các nút xã hội và ồ, một thông báo lịch sự rằng bài đăng của tôi có thể hiển thị quảng cáo, bởi vì xét cho cùng, tôi đang sử dụng dịch vụ miễn phí của WordPress

Làm cách nào để sử dụng HTML trên GitHub?

Nếu muốn, bạn có thể quay lại Github của mình. com trang repo và tạo một tệp mới, như.

<html>
  <head>
    <title>My Homepage</title>
  </head>


  <body>
    <h1>My homepage!</h1>
    
    <h2>
        ;)
    </h2>

  </body>
</html>
9 và thêm cùng nội dung mà tôi đã thêm vào bài đăng trên WordPress của mình

Làm cách nào để sử dụng HTML trên GitHub?

Cam kết tệp

<html>
  <head>
    <title>My Homepage</title>
  </head>


  <body>
    <h1>My homepage!</h1>
    
    <h2>
        ;)
    </h2>

  </body>
</html>
9 mới, tệp này sẽ được Trang Github tự động xuất bản và truy cập tệp tại

README.md1

Và một lần nữa, Trang Github về cơ bản không làm gì cả

Làm cách nào để sử dụng HTML trên GitHub?

Xuất bản web, với quyền lực và kiểm soát

Nhưng đôi khi không có gì có thể là một bàn tay tuyệt vời…như trong việc được giao quyền tạo và xuất bản nội dung chính xác như bạn cần

Truy cập trang Wikipedia cho GIF

http. // vi. wikipedia. tổ chức/wiki/GIF

Làm cách nào để sử dụng HTML trên GitHub?

Xem Nguồn của mục nhập Wikipedia trên GIF, sau đó Chọn Tất cả mã và Sao chép mã đó vào khay nhớ tạm của bạn (i. e. thông qua Ctrl-C hoặc Cmd-C)

Làm cách nào để sử dụng HTML trên GitHub?

Nếu bạn có blog WordPress, bạn có thể theo dõi khi tôi cố gắng dán đoạn mã HTML khổng lồ này vào trình chỉnh sửa bài đăng WordPress (ở chế độ Văn bản thô, không phải chế độ Trực quan)

Làm cách nào để sử dụng HTML trên GitHub?

Một số HTML thô được diễn giải chính xác, nhưng chúng tôi mất tất cả phong cách của Wikipedia. Và đối với phần lớn mã HTML, về cơ bản, WordPress chỉ hiển thị nó dưới dạng văn bản thô

Bằng cách có giao diện thân thiện với người dùng, WordPress nhất thiết phải đưa ra các giả định về những gì người dùng thường sao chép và dán nhầm và những giả định này cuối cùng trở thành hạn chế, ở một mức độ nào đó

Bạn có thể xem raw-Wikipedia-HTML-as-WordPress-blog-post trên blog mẫu của tôi

Làm cách nào để sử dụng HTML trên GitHub?

Bây giờ hãy sao chép và dán cùng HTML Wikipedia thô đó vào một tệp mới trong kho lưu trữ Github của bạn, e. g. README.md2

Làm cách nào để sử dụng HTML trên GitHub?

Cam kết README.md2 mới cho repo của bạn

Đợi một giây để Trang Github tự động xuất bản trang đó và truy cập trang đó tại URL dự kiến

README.md4

Hai trang giống hệt nhau, từ nội dung, đến kiểu dáng chính xác của Wikipedia, thậm chí cả ảnh GIF quay vòng

Làm cách nào để sử dụng HTML trên GitHub?

Những điều chúng tôi đã học được

Cách xuất bản lên Trang Github

Trang Github là một dịch vụ do Github điều hành, khi được định cấu hình đúng cách, sẽ tự động xuất bản nội dung của repo của bạn lên Internet

Để Trang Github hoạt động cho bạn, nếu tên người dùng của bạn là README.md5 thì bạn phải tạo một repo có tên là README.md6

Sau khoảng 10 phút, bạn có thể mong đợi nội dung của mình xuất hiện trên Web tại URL. README.md7

Trong tương lai, tôi sẽ coi đây là trang chủ/trang web danh mục đầu tư của bạn

Ghi chú. Khi tôi đề cập đến trang chủ repo Github cho danh mục đầu tư của bạn, ý tôi là URL của repo Github thực tế, e. g

Bạn có thể đặt HTML trên GitHub không?

Bất cứ nơi nào HTML được hiển thị trên GitHub (ý chính, tệp README trong kho lưu trữ, nhận xét về sự cố và yêu cầu kéo,. ), bạn có thể sử dụng bất kỳ thành phần HTML nào mà GitHub Flavored Markdown (GFM) cung cấp cú pháp cú pháp cho.

Tôi có thể chỉnh sửa tệp HTML trên GitHub không?

Có, bạn có thể tự làm điều đó trên GitHub . Ở góc trên bên phải của chế độ xem tệp, nhấp để mở trình chỉnh sửa tệp.