Lưu trang trên GitHub

Đây là nền tảng đám mây cho phép các nhà phát triển lưu trữ và quản lý kho lưu trữ mã nguồn của họ, theo dõi các thay đổi đối với mã của họ với sự trợ giúp của tính năng theo dõi thời gian GitHub và cộng tác với các nhà phát triển trong không gian này. Bên cạnh đó, GitHub cũng là một nơi tuyệt vời để lưu trữ các trang web tĩnh một cách thuận tiện. Tất cả những điều này đều có thể thực hiện được nhờ tính năng GitHub Pages, đây là dịch vụ lưu trữ miễn phí của riêng GitHub.

Sử dụng GitHub Pages, bạn có thể tạo một trang web chỉ bằng cách xuất bản các tệp HTML, JavaScript và CSS tĩnh từ kho lưu trữ GitHub. Trong số nhiều lợi ích của dịch vụ lưu trữ web GitHub, một số lợi ích chính là tính đơn giản và dễ sử dụng. Với tất cả những điều đó, chúng ta hãy xem xét chi tiết hơn về cách tự lưu trữ một trang web trên GitHub.

---

Các bước thiết yếu để lưu trữ một trang web trên GitHub

Trước khi bạn có thể lưu trữ một trang web trên GitHub, có một số yêu cầu nhất định mà bạn cần phải đáp ứng. Chúng khá đơn giản, nhưng nếu không có chúng, bạn sẽ không thể lưu trữ trang web của mình trên GitHub một cách suôn sẻ.

💻 Tạo tài khoản GitHub của bạn

Điều đầu tiên bạn cần làm là tạo tài khoản GitHub của riêng bạn. Để thực hiện, hãy truy cập trang web GitHub, nhập địa chỉ email và tất cả các thông tin cần thiết khác, và bạn đã hoàn tất. Quá trình đăng ký sẽ không mất quá vài phút và sau khi hoàn tất, bạn có thể bắt đầu.

📩 Tải xuống phần mềm Git

Mặc dù bạn có thể thực hiện mọi việc thông qua trang web chính thức của GitHub, nhưng toàn bộ quá trình sẽ dễ dàng hơn nhiều nếu bạn đã cài đặt phần mềm Git và GitHub trên máy tính của mình.

💡 Có kiến thức cơ bản về HTML, JavaScript và CSS

Yêu cầu chính cuối cùng để lưu trữ GitHub là kiến thức cơ bản về HTML, JavaScript và CSS. Khi phát triển hoặc lưu trữ một trang web, bạn cần phải học mã, ngay cả khi đó là để bạn hiểu được xương sống của trang web và cách nó thực sự chạy. Và đó thực sự là tất cả các yêu cầu bạn cần để bắt đầu lưu trữ GitHub. Nếu bạn đánh dấu vào cả ba ô, thì đã đến lúc chuyển sang bước tiếp theo, đó là tạo kho lưu trữ mới của bạn.

---

Tạo một kho lưu trữ

Kho lưu trữ GitHub của bạn (còn được gọi là "repo") hoạt động như không gian lưu trữ trên nền tảng GitHub, nơi lưu trữ tất cả mã nguồn, tệp và tài liệu của dự án. Sau đây là quy trình từng bước để tạo kho lưu trữ mới trên GitHub:

• Mở GitHub trên máy tính của bạn
• Ở góc trên cùng của bất kỳ trang nào và chọn biểu tượng “mới”
• Trên menu thả xuống, chọn tùy chọn “kho lưu trữ mới”
• Từ đó, bạn sẽ được dẫn đến một trang mới nơi bạn có thể đặt tên cho kho lưu trữ
• Sau khi đặt tên cho kho lưu trữ, hãy nhấp vào tùy chọn “tạo kho lưu trữ” để bắt đầu tạo kho lưu trữ mới

Sau khi bạn hoàn tất việc tạo kho lưu trữ, bạn sẽ được đưa đến một trang mới. Trang mới này sẽ là "trang chủ" của kho lưu trữ của bạn và trông giống như thế này:

Một lần nữa, kho lưu trữ GitHub của bạn là nơi chính mà bạn có thể lưu trữ các tệp và thư mục của trang web. Vì vậy, khi bạn tạo một kho lưu trữ mới, mọi thứ sẽ trống rỗng và bạn không thể làm được gì nhiều với nó. Nhưng trước khi bạn có thể bắt đầu tải lên các tệp trang web, tốt nhất là tạo các thư mục nơi bạn có thể lưu trữ các tệp trang web của mình và sao chép kho lưu trữ của bạn vào một thư mục dự án cục bộ. Theo cách đó, bạn có bản sao lưu cũng như các thư mục để lưu trữ các tệp của mình.

Để tạo một thư mục trống mới trong kho lưu trữ của bạn, bạn phải mở dòng lệnh và nhập lệnh sau:

“$ mkdir trang web của tôi”

Dòng mã này sẽ tạo một thư mục mới trong kho lưu trữ của bạn. Sau đó, bạn có thể mở lại dòng lệnh và nhập mã này để sao chép thư mục:

“$ git clone https://github.com/\[tên người dùng]/[tên người dùng].github.io”

Lưu ý rằng trong dòng mã này, bạn phải thay đổi phần [username] bằng tên người dùng của bạn trên GitHub để hoạt động. Khi bạn nhập mã, GitHub sẽ gửi lời nhắc cho biết bạn đang sao chép một kho lưu trữ trống. Đừng lo lắng về điều này; kho lưu trữ trống là do bạn chưa thêm bất kỳ tệp nào vào nền tảng.

Sau khi tạo xong thư mục, bạn có thể bắt đầu tải lên các tệp trang web của mình. Và đừng lo lắng, chúng tôi sẽ đề cập chi tiết trong phần tiếp theo.

---

Tải lên các tập tin trang web

Bước tiếp theo trong quá trình tải tệp trang web của bạn lên kho lưu trữ mới tạo trên GitHub. Nếu bạn quen thuộc với mã hóa cơ bản, bạn có thể dễ dàng tải tệp trang web của mình lên. Tuy nhiên, vì chúng tôi ở đây để hướng dẫn bạn quy trình lưu trữ web GitHub, hãy cùng xem một ví dụ.

Đối với ví dụ này, chúng ta sẽ sử dụng mã HTML trong hệ thống Unix để tập trung vào tệp index.html. Điều quan trọng là phải có tệp index khi sử dụng GitHub và để làm như vậy, bạn phải mở dòng lệnh và nhập lệnh sau:

“$ chạm vào index.html”

Từ đó, bạn có thể nhập mã sau vào tệp index.html.

<!DOCTYPEHTML>

<html lang="vi">

  <đầu>

    <meta charset="UTF-8">

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv="Tương thích X-UA" content="ie=edge">

    <title>Trang web của tôi \[Tên trang web\]</title>

  </đầu>

  <thân>

    <chính>

        <h1>Chào mừng đến với trang web của tôi \[Tên trang web\]</h1>  

        <p>Đây là trang web mới của tôi được lưu trữ trên GitHub Pages!</p>

    </chính>

  </thân>

</html>”

Hãy đảm bảo thay đổi phần “My Website” thành tên thực tế của trang web của bạn. Theo cách đó, bạn tạo một tệp được cá nhân hóa dành riêng cho trang của mình. Ngoài ra, hãy thoải mái thêm bất kỳ thông tin nào khác mà bạn cần trên trang chính của mình, thường được tìm thấy trong tệp index.html.

Ngoài ra, nếu tệp của bạn nhỏ hơn 25MB, bạn có thể kéo và thả các tệp bạn muốn thêm vào kho lưu trữ. Đây là một quá trình rất đơn giản và không mất thời gian. Đây là lý do tại sao đây là một trong những cách phổ biến nhất để bắt đầu thêm tệp vào thư mục kho lưu trữ GitHub.

Nếu bạn muốn tải lên các tệp lớn hơn 25MB, bạn có thể làm được. Tuy nhiên, giới hạn tối đa trên GitHub là tệp 100MB. Và đối với các tệp lớn hơn 25MB, bạn cần sử dụng dòng lệnh để tải lên.

Sau đây là các bước bạn cần thực hiện để tải tệp lớn hơn lên GitHub bằng dòng lệnh.

• Bắt đầu bằng cách vào máy tính của bạn và di chuyển tệp bạn muốn tải lên vào thư mục cục bộ GitHub
• Mở bảng điều khiển làm việc
• Hãy đảm bảo thư mục làm việc hiện tại của bạn là kho lưu trữ cục bộ của bạn
• Sử dụng lệnh “$ git add“ để dàn dựng tệp để cam kết trong kho lưu trữ cục bộ của bạn
• Nhập “$ git commit -m “Thêm tệp hiện có” để cam kết tệp đã được dàn dựng trong kho lưu trữ của bạn
• Nhập “$ git push origin YOUR_BRANCH” để đẩy các thay đổi và tải tệp lên

Nếu bạn đã mắc lỗi trong quá trình dàn dựng, bạn có thể hủy dàn dựng tệp thông qua lệnh “$ git push origin YOUR_BRANCH”. Và nếu bạn muốn xóa cam kết và sửa đổi tệp trước, hãy nhập “'git reset –soft HEAD~1' và cam kết rồi thêm tệp lại”. Sau đó, sửa đổi tệp và thêm lại theo các bước trên.

Khi lưu trữ một trang web trên GitHub, bạn có thể sẽ phải tải lên nhiều tệp khác nhau cho trang web của mình. Điều này hoàn toàn ổn, vì đó là cách GitHub hoạt động. Tuy nhiên, bạn sẽ phải học khá nhiều kỹ thuật khác nhau để tải lên các tệp khác nhau.

May mắn thay, có nhiều hướng dẫn khác nhau để tải các loại tệp cụ thể lên kho lưu trữ GitHub của bạn. Và khi bạn đã quen với nó, hãy yên tâm rằng bạn sẽ bắt đầu tải tất cả các tệp bạn cần lên kho lưu trữ GitHub của mình ngay lập tức.

---

Cấu hình GitHub Pages

Khía cạnh tiếp theo của quy trình lưu trữ trang GitHub là cấu hình các trang web của bạn. Khi bạn mở kho lưu trữ GitHub, bạn sẽ phải chọn một nguồn xuất bản cho trang web của mình. Điều quan trọng là phải chuẩn bị sẵn nguồn xuất bản này trước khi bạn làm bất cứ điều gì khác. Sau khi bạn đã quyết định và hoàn thiện nguồn xuất bản cho các trang của mình, bạn có thể sử dụng các bước sau để cấu hình các trang GitHub của mình.

📁 Tạo tệp nhập trang web của bạn

Trước khi có thể xuất bản bất kỳ thứ gì trên GitHub, bạn phải có tệp nhập. Nếu bạn làm theo hướng dẫn từng bước của chúng tôi, bạn sẽ có một tệp như index.html được tính là tệp nhập. Nếu bạn không có tệp hoặc không muốn sử dụng index.html làm tệp nhập, bạn cũng có thể sử dụng tệp index.md hoặc README.md. Nhưng để đơn giản hơn, hãy sử dụng index.html làm tệp nhập.

🔧 Cấu hình nguồn xuất bản của bạn

Có nhiều cách để cấu hình nguồn xuất bản của bạn trên nền tảng lưu trữ miễn phí GitHub. Tuy nhiên, cách đơn giản nhất là xuất bản trang web của bạn từ một nhánh. Để thực hiện việc này, hãy làm theo một vài bước sau:

• Đi đến kho lưu trữ trang web
• Nhấp vào biểu tượng cài đặt, sau đó tiến hành đến Mã và Tự động hóa > Trang
• Trong tùy chọn Xây dựng và Triển khai , hãy tiến hành Nguồn > Triển khai từ một nhánh
• Sử dụng menu thả xuống để chọn nguồn xuất bản cho trang của bạn
• Lưu nguồn xuất bản của bạn

Sau khi thực hiện xong, nguồn xuất bản của bạn trên GitHub sẽ được thiết lập và phần lớn trang web của bạn sẽ được cấu hình. Sau khi bạn đã bật các trang GitHub và đã chọn một nguồn cho trang web của mình, đã đến lúc bắt đầu tùy chỉnh nguồn đó.

Bạn cũng có thể xem video này để tìm hiểu thêm về chủ đề này.

---

Tùy chỉnh trang web GitHub của bạn: Mẹo và công cụ

Mục tiêu của tất cả các trang web là thu hút khách truy cập và giúp chủ sở hữu đạt được một số kết quả nhất định (tạo khách hàng tiềm năng, tăng doanh số hoặc các mục tiêu khác). Và ngay cả khi bạn đang lưu trữ một trang web tĩnh trên GitHub, điều quan trọng là phải có một trang web thú vị và hữu ích mà người dùng thực sự thích sử dụng. Theo cách đó, trang web của bạn sẽ giúp bạn đạt được mục tiêu nhanh hơn nhiều.

Với suy nghĩ đó, vì mỗi trang web đều có một tập hợp mục tiêu và đối tượng độc đáo, việc tùy chỉnh để phù hợp với người dùng cuối và mục tiêu cần đạt được là rất quan trọng. Và giống như tất cả các quy trình khác liên quan đến việc lưu trữ trang web GitHub của riêng bạn, việc tùy chỉnh trang web của bạn cũng tương đối dễ thực hiện.

Nếu bạn muốn xuất bản một trang web độc đáo bằng GitHub, bạn có thể tùy chỉnh trang web của mình bằng các chủ đề Jekyll . Jekyll là một thư mục được quản lý gồm nhiều chủ đề trang web và mẫu GitHub mà bạn có thể sử dụng với GitHub để phát triển trang web của mình dễ dàng hơn. Để bắt đầu, bạn cần chọn một chủ đề Jekyll.

✨ Chọn và áp dụng chủ đề Jekyll

Trên trang web, bạn sẽ tìm thấy nhiều chủ đề miễn phí và cao cấp có sẵn để sử dụng. Mặc dù bạn có thể chọn và sử dụng bất kỳ chủ đề nào có sẵn, chúng tôi khuyên bạn nên chọn chủ đề phù hợp với mục đích, thương hiệu và đối tượng của trang web. Jekyll có các chủ đề cho blog, doanh nghiệp, v.v., giúp bạn dễ dàng tìm thấy chủ đề chính xác cho nhu cầu của mình.

Có khá nhiều điều bạn cần cân nhắc, vì vậy đừng vội vàng thực hiện bước này. Hãy dành thời gian khi chọn chủ đề để khi bạn đã khám phá tất cả các tùy chọn, bạn sẽ biết rằng mình đã đưa ra lựa chọn đúng đắn. Sau khi chọn chủ đề từ Jekyll, bạn có thể dễ dàng thêm chủ đề đó vào trang web GitHub của mình.

Trước khi thực hiện, bạn phải thực hiện các bước chúng tôi đã đề cập trước đó. Nhưng nếu bạn đã làm theo hướng dẫn của chúng tôi từng bước, đây là cách bạn có thể áp dụng chủ đề Jekyll vào trang web GitHub của mình:

• Mở kho lưu trữ trang web của bạn trên GitHub
• Truy cập nguồn xuất bản của trang web và tìm “_config.yml”.
• Nhấp vào biểu tượng chỉnh sửa ở góc trên bên phải để khởi chạy trình chỉnh sửa tệp
• Đi đến kho lưu trữ chủ đề Jekyll, tìm tệp README và ghi lại tên chủ đề Jekyll của bạn
• Nhập ”remote_theme: THEME-NAME”  nhưng thay thế “THEME-NAME” bằng tên của chủ đề bạn tìm thấy trên tệp README
• Thêm một thông báo cam kết ở cuối trang nêu chi tiết những thay đổi đã thực hiện đối với tệp
• Chọn địa chỉ email cam kết của bạn trong menu thả xuống (chỉ những địa chỉ email đã xác minh mới xuất hiện trên menu này)
• Sau trường tin nhắn cam kết, hãy chọn thương hiệu mà bạn muốn áp dụng thay đổi thông qua menu thả xuống
• Nhấp vào tùy chọn Đề xuất thay đổi tệp

GitHub là một công cụ cộng tác. Vì vậy, những thay đổi lớn, chẳng hạn như chủ đề của trang web phải được tất cả những người cộng tác mà bạn làm việc cùng trên nền tảng này chấp thuận. Nhưng sau khi những thay đổi đã được chấp thuận, bạn sẽ thấy chúng được áp dụng cho trang web của mình ngay lập tức.

Nói như vậy, ngay cả khi chủ đề đã được áp dụng cho trang web của bạn và bạn tin rằng mình đã tìm thấy chủ đề hoàn hảo cho nhu cầu của mình, bạn vẫn có thể muốn tùy chỉnh chủ đề để đảm bảo nó phù hợp hoàn hảo với thương hiệu của bạn. Bạn không muốn trang web của mình trông giống như tất cả các trang web khác sử dụng cùng một chủ đề, vì vậy một chút tùy chỉnh sẽ có tác dụng rất lớn.

Đây là lý do tại sao một trong những yêu cầu cơ bản của chúng tôi khi lưu trữ trang web GitHub là phải có kiến thức cơ bản về CSS, HTML hoặc JavaScript.

Bởi vì nếu bạn muốn tùy chỉnh giao diện trang web của mình, bao gồm chủ đề và các thông số khác, bạn phải sử dụng các ngôn ngữ lập trình này.

😎 Tùy chỉnh giao diện trang web của bạn

Để tùy chỉnh chủ đề trang web của bạn bằng HTML, hãy làm theo các bước dưới đây:

• Đi đến kho lưu trữ nguồn chủ đề của bạn
• Đi đến thư mục _layouts và tìm tệp default.html
• Sao chép tệp và tiến hành đến nguồn xuất bản của bạn trên kho lưu trữ của trang web
• Tạo một tệp mới có tên _layouts/default.html và dán tất cả nội dung bạn đã sao chép từ tệp mặc định
• Tùy chỉnh và chỉnh sửa mã để phù hợp hơn với nhu cầu của trang web của bạn

Nếu bạn muốn sử dụng CSS để tùy chỉnh chủ đề trang web của mình, hãy làm theo năm bước sau:

• Truy cập kho lưu trữ GitHub của trang web của bạn và mở nguồn xuất bản
• Tạo một tệp mới và đặt tên là /assets/css/style.scss.
• Trên đầu tệp, bạn có thể thêm tất cả nội dung bạn muốn phù hợp với trang web của mình
• Thêm các mục nhập tùy chỉnh sau dòng @import trên tệp
• Lưu tất cả các thay đổi về chủ đề trang web của bạn và tận hưởng giao diện mới!

Việc tùy chỉnh trang web có thể mất nhiều thời gian, đó là lý do tại sao điều quan trọng là bạn phải hiểu chính xác những thay đổi mà trang web của bạn cần. Ngoài ra, bạn sẽ không thể áp dụng bất kỳ thay đổi nào trong số này nếu không có kiến thức lập trình cơ bản, vì vậy sẽ rất có lợi nếu bạn có tất cả thông tin và kiến thức này trước khi bắt đầu lưu trữ trang web của mình trên GitHub.

---

Xuất bản trang web

Việc xuất bản trang web của bạn trên GitHub rất đơn giản. Để làm như vậy, bạn phải:

• Đăng nhập vào GitHub và trên bảng điều khiển trang chủ của bạn, hãy chọn “ Trang web mới từ Git”
• Đi đến kho lưu trữ của trang web của bạn và thiết lập trang web xuất bản của bạn
• Sau khi bạn đã thiết lập và lưu nguồn xuất bản của mình, trang web của bạn sẽ trực tuyến

Nói như vậy, các trang web liên tục phát triển và thay đổi. Và nếu bạn muốn đảm bảo rằng mình luôn phù hợp và đi trước đối thủ một bước, bạn sẽ phải thúc đẩy các thay đổi cho trang web của mình.

Nếu bạn muốn áp dụng những thay đổi vào trang web của mình, đây là các bước để thực hiện:

• Chọn tùy chọn đẩy nguồn gốc để đẩy các thay đổi vào kho lưu trữ của bạn
• Từ đó, GitHub có thể nhắc bạn lấy các cam kết mới từ xa, để thực hiện việc này, chỉ cần nhấp vào tùy chọn Lấy tại dấu nhắc

Sau đó, những thay đổi của bạn sẽ được đẩy. GitHub dễ dàng là một trong những cách đơn giản và dễ dàng nhất để lưu trữ một trang web trên internet. Đây là lý do tại sao việc đẩy những thay đổi rất đơn giản trên nền tảng này.

Nếu bạn muốn xem trang web GitHub của mình trên internet, hãy chuyển đến tùy chọn GitHub pages . Từ đó, bạn sẽ thấy tất cả các trang web của mình và trạng thái hiển thị của chúng. Trên menu thả xuống này, bạn cũng có thể thấy tùy chọn View Website . Khi bạn nhấp vào tùy chọn này, nó sẽ dẫn bạn đến trang web đã xuất bản của bạn để xem.

---

Cách lưu trữ trang web trên GitHub: Kết luận

Có khá nhiều bước để lưu trữ và xuất bản một trang web trên GitHub. Và mặc dù thoạt đầu có vẻ đáng sợ, nhưng thực ra rất đơn giản khi bạn chia nhỏ mọi thứ thành các bước riêng biệt. Để chia nhỏ toàn bộ quy trình, đây là những gì bạn cần làm để lưu trữ một trang web trên GitHub:

Trước tiên, bạn cần tạo một tài khoản GitHub và tải xuống phần mềm Git. Sau đó, bạn cần tạo kho lưu trữ và tải lên các tệp trang web của mình. Sau khi hoàn tất, bạn cần cấu hình các trang GitHub, chọn chủ đề Jekyll và tùy chỉnh trang web theo ý thích của mình. Bước cuối cùng bạn cần thực hiện là đưa trang web của mình lên internet và đưa lên mạng để mọi người có thể truy cập.

Trước đây, việc xuất bản và lưu trữ một trang web tốn rất nhiều thời gian và nguồn lực. Nhưng với GitHub, các nhóm có thể làm việc nhanh hơn và hiệu quả hơn nhiều trong việc tạo và xuất bản một trang web lên internet.

Tuy nhiên, vẫn có thể khó để điều hướng qua tất cả các tính năng của GitHub, đặc biệt là nếu đây là lần đầu tiên của bạn. Vì vậy, trước khi bạn bắt đầu tự lưu trữ GitHub, hãy đảm bảo xem qua tất cả các chi tiết của hướng dẫn này. Và sau khi bạn làm điều đó, hãy yên tâm rằng lưu trữ GitHub sẽ dễ dàng hơn nhiều cho bạn và nhóm của bạn. Với tất cả những điều đó trong đầu, đây là một số liên kết hữu ích để đọc thêm:

Trang GitHub: https://docs.github.com/en/pages
Kho lưu trữ GitHub: https://docs.github.com/en/repositories
Tài liệu GitHub: https://docs.github.com/en

Để cải thiện kỹ năng phát triển web, sau đây là một số tài liệu đọc được đề xuất:

Mạng lưới nhà phát triển Mozilla: https://developer.mozilla.org/
W3Schools: https://www.w3schools.com/
CSS Tricks: https://css-tricks.com/
Tạp chí Smashing: https://www.smashingmagazine.com/

Nếu bạn có kế hoạch lưu trữ một trang web trên GitHub và bạn cần theo dõi thời gian một cách liền mạch (cho dù là hồ sơ cá nhân hay để lập hóa đơn cho khách hàng), hãy đảm bảo sử dụng Everhour. Đây là trình theo dõi thời gian hàng đầu trên thị trường hiện nay và việc học cách theo dõi thời gian với Everhour trên GitHub cực kỳ dễ dàng. Sử dụng các tính năng như mẫu GitHub PR có cấu trúc tốt hoặc chế độ tối của GitHub cũng là một điểm cộng tuyệt vời.

Nếu bạn đang quản lý một nhóm từ 5 người trở lên và muốn tăng hiệu quả, Everhour là công cụ hoàn hảo để giúp nhóm của bạn đi đúng hướng. Với tính năng theo dõi thời gian liền mạch, bạn có thể dễ dàng ước tính thời lượng nhiệm vụ, đặt ngân sách rõ ràng và tạo báo cáo chi tiết bên trong Asana, Trello, Jira hoặc bất kỳ công cụ quản lý thời gian nào khác.