Cách tạo Website bằng Github đơn giản trong 15 phút

Cách tạo Website bằng Github đơn giản trong 15 phút

Cách tạo Website bằng Github đơn giản trong 15 phút
Cách tạo Website bằng Github đơn giản trong 15 phút


 Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo Website bằng Github dựa trên HTML của riêng bạn vô cùng dễ dàng. Phần hay nhất của bài viết này là bạn chỉ cần sử dụng trình duyệt của mình mà thôi. Nhờ một tính năng mới trên Github có tên là Github Pages, mà ta có thể làm được điều này.

Trang web của bạn sẽ không được xây dựng trên các nền tảng hoặc các mẫu có sẵn. Mình sẽ sử dụng HTML để xây dựng bất cứ thứ gì, từ việc in tên bạn, đến việc phản hồi lại các hình ảnh động và làm một con mèo biết bay bằng cách sử dụng tất cả các thủ thuật trên internet. Sự sáng tạo của bạn không có giới hạn.

Hướng dẫn này giả định rằng bạn không có bất kỳ kiến thức nào về website. Nhưng mình hy vọng điều này sẽ là sự khởi đầu cho cuộc hành trình phát triển web của bạn.

Chỉ cần 15 phút thì bạn sẽ có một trang web giống như thế này. Mình biết là nó rất đơn giản nhưng bạn có thể tuỳ chỉnh website của mình trong tương lai.

Tạo Website bằng Github

Trước tiên hãy truy cập vào Github và tạo tài khoản. Sau khi đã tạo xong, nhấp vào “new repository” trong Github và tạo một project mới. Mình gọi repo mới này là create website in 15 minute.Cách tạo Website bằng Github đơn giản trong 15 phút 20

 

Khi bạn tạo repo, hãy nhớ tích vào chỗ “initialize this repository with a README”. Nếu bạn không như vậy, bạn sẽ phải tự khởi tạo dự án trên máy tính của mình và sau đó đẩy code trên máy lên github. Nếu bạn chưa biết cách sử dụng Github thì nên tải khóa học miễn phí về cách sử dụng Git & Github trên AnonyViet để xem qua nhé

Tạo file index.html

Để tạo file index cũng như cấu trúc website, bạn cần có kiến thức cơ bản về HTML. AnonyViet cũng đã có chia sẻ khóa học HTML để bạn tự học ở nhà.

Toàn bộ file của chúng ta sẽ chỉ có duy nhất mỗi tệp HTML. Điều quan trọng là tệp của chúng ta phải được đặt tên là index.html. Việc này là do Github tìm kiếm tệp có tên là index.html để sử dụng cho trang web của chúng ta. Vì vậy, chúng ta sẽ tạo tệp tin này ngay thôi, chỉ cần nhấn vào chữ “Create new file” là được.Cách tạo Website bằng Github đơn giản trong 15 phút 21Đơn giản lắm, tiếp theo đặt tên cho tệp mới là index.html và nhập code bên dưới vào. Những thứ ngộ nghĩnh được đặt trong dấu <> được gọi là thẻ HTML. Thẻ html thường sẽ có những thẻ mở <> và thẻ đóng </> như thế này. Và tất cả mọi thứ giữa hai thẻ được gọi là nội dung của thẻ.Cách tạo Website bằng Github đơn giản trong 15 phút 22

Quan sát đoạn code, chúng ta thấy có hai chữ Anonyviet. Cái đầu tiên trong head, nằm trong tag <title> và cái thứ hai nằm trong body, trong tag <h1>. <h1> là thẻ tiêu đề 1, thường dùng để làm tiêu đề cho bài viết, còn tag <title> là tiêu đề của website, được hiển thị dưới dạng tiêu đề của tab trong trình duyệt.

Sau khi đã gõ đoạn code trên xong, các bạn cần lưu file này lại. Trong Github, chúng ta phải nhấn nút “commit” để lưu file. Commit giúp bạn theo dõi các phiên bản trên tệp của mình, điều này khá tiện lợi vì ta có thể quản lý tệp dễ dàng hơn nhiều. Vì vậy, bạn có thể nhập thông tin của commit để giải thích những thay đổi bạn đã thực hiện đối với tệp của mình và sau đó nhấn “Commit new file”.tạo trang web bằng github trong 15 phút

Bật Github Pages

Việc tiếp theo cần làm là bật Github Pages và trang web của bạn sẽ có mặt trên internet ngay thôi. Để bật Github Pages, đầu tiên vào tab “Settings” trong repo của bạn và cuộn xuống phần Github Pages. Chọn “master branch” trong phần Source.

Cách tạo Website bằng Github đơn giản trong 15 phút 23

Sau khi làm điều đó, Github sẽ tạo link cho website của bạn. Và trang web của bạn đã có mặt trên internet rồi đó.

thiết kế web bằng github page

Trang trí thêm

Sau khi đã chạy web thành công, chúng ta sẽ trang trí một ít để web trông bắt mắt hơn. Với một số dòng CSS cơ bản, bạn đã có thể làm chữ Anonyviet nổi bật hơn rồi.

Xem thêm:  Có nên sử dụng WordPress để thiết kế Website không?

Tạo website bằng github html

Chúng ta vừa thay đổi background thành màu đen, cho chữ Anonyviet lớn hơn và biến tên đó thành màu vàng (#eeee33 cái này gọi là color code nhé). Bạn có thể tự chọn mã HEX màu yêu thích bằng cách gõ “css color picker” vào google search.

Để chỉnh sửa file, bạn chỉ cần nhấn vào file index.html rồi nhấn vào biểu tượng bút chì bên tay phải để edit. Cuối cùng nhấn “Commit changes” để lưu file.

Xong rồi đó, mình vừa hướng dẫn các bạn cách tạo một trang web cá nhân bằng github trong vòng 15 phút. Đây sẽ bước khởi đầu cho hành trình phát triển web của bạn. Bài tới, mình sẽ public code web front-end tạo hiệu ứng ma trận cho các bạn xài chơi nhé. Trong thời gian chờ đợi, các bạn cũng có thể dùng code website giới thiệu bản thân AboutMe2 nhé.

Chốt bài, ai đang học web mà là back-end thì lời khuyên cũng mình là đừng nên lạm dụng mấy cách này để tạo web nhanh nhé. Tốt nhất là học từ đầu để biết cách tạo web làm sao, mấy bước, cần học những gì, hiểu cách web và server hoạt động.

nguon: https://anonyviet.com/cach-tao-website-bang-github-trong-15-phut/

COMMENTS

Tên

.:: Connect Trojan ::.,111,.htaccess,2,0-day,3,10000+ Latest Carding Dorks 2020 and 2021,1,2017,2,Add-on,16,Affiliate,1,Anotador,1,AutoIT,17,BackDoor,1,Bán Sách,13,banhangonline,1,Bảo Mật,186,Bất Động Sản Tại Tiền Giang,5,Bestsellers,13,Binder,1,blog,31,Blogger,4,Blogger Template,1,Botnet,3,Brute,1,Bug Bounty,1,Bypass,11,camera,1,ceh,1,Châu Tinh Trì,2,Checked,6,Chrome,21,Code,5,coin hive,1,Coin-Hive,2,CoinHive,1,Connect Trojan,342,Connect Trojan ::.,1,Cổ Tích,2,Crack,3,Crypto,5,CSRF,5,CSS,2,Cuộc Sống,1,Dau tu,8,DDoS,6,Designer,1,Dich vụ,1,DNS,4,Download,2,du-an,3,DVD LUMION Tiếng Việt của anh Dũng Già Pro,1,Đam Mỹ,1,điện,1,Đồ Họa,215,Đô Thị,16,e11.me,1,ebook,18,ebook free,295,eBook Phệ Hồn Nghịch Thiên,1,eBook Thịnh Thế Địch Phi,1,Encrypt,1,Encryption,1,epub,76,epub [Tiên hiệp],1,ET-Logger,1,exploit,23,Exploitation,1,Extractor,2,facebook,69,FireFox,15,Flood,2,Forensic,7,full prc,2,game,177,Gerador,3,Gerenciador,1,Get Root,3,GHDB,3,Giả Tưởng,1,giaitri,1,Google,15,H&Y Shop,2,Hacker,3,Hacking,16,Hacking and Security,6,Hacking Tools,36,Hành Động,3,He Thong Site Phim,25,Hijacking,6,Hình Sự,1,hivecoin.hive coin,1,Hỏi Xoáy Đáp Xoay Trên VTV3,1,HTML,1,Huyền Ảo,92,Hướng dẫn Internet cơ bản,1,IFTTT,703,Imgur,2,Infographic,1,Information Disclosure,1,Internet Explorer,3,IT News,39,J2TeaM,29,J2TeaM Tools,9,JavaScript,6,Javascript Injection,3,Juno_okyo's Blog,23,Khóa Học,52,Khóa Học kiếm tiền online với accesstrade,5,khoá học miễn phí,23,Khóa học Photoshop,19,Khóa học sử dụng mã độc và phòng chống mã độc,2,Khoa Huyễn,6,khuyến mãi,16,kiemhiep,9,Kiếm Hiệp,20,Kiếm Tiền MMO,36,kiếm tiền rút gọn link,1,KilerRat,1,Kinh Dị,24,Kinh Dị - Ma,4,Kinh Doanh,73,kinhdi,1,kinhdoanh,5,KRACK Attacks,1,Lãng mạn,1,lazada,1,Lập trình,2,Lịch Sử,5,Linux,1,Local Attack,2,Logins/Cadastro,1,Lỗi Web,1,Lược Sử Hacker,2,Mã Giảm Giá,2,Mã Hóa,48,Malware,3,Master-Code,31,Máy Tính,1,Metasploit,2,Microsoft,4,mobile hacking,2,monero,1,Movie,25,MySQL,1,NEW PRODUCTS,19,NGHỆ THUẬT ẨN MÌNH,13,ngontinh,10,Ngôn Tình,151,nhà đất,1,Nhà Đất Gò Công,1,Nhân Vật Lịch Sử,2,Nhật Bản,1,Nhựt Trường Group,1,NjRat,5,Nước,1,open redirect,1,Oracle,1,Path Disclosure,2,pdf,76,Pen-Test,6,Pentest Box,9,Phan mem Internet,1,phanmem,23,phanmemdienthoai,3,phanmemmaytinh,10,phần mềm,12,Phim 18,2,Phim 2012,1,Phim 3D,1,Phim Âm Nhạc,2,Phim Bộ,39,Phim Chiến Tranh,5,Phim Dã Sử - Cổ Trang,6,Phim Đài Loan,6,Phim Đề Cử,4,Phim Hài Hước,26,Phim Hàn Quốc,33,Phim HD Chất Lượng Cao,5,Phim Hoạt Hình,2,Phim Hot,1,Phim Hồng Kông,20,Phim HQ,2,Phim Kinh Dị,8,Phim lẻ,4,Phim Mới 2011,2,Phim Mới 2012,1,Phim Mới 2015,1,Phim Nhật Bản,4,Phim SD,3,Phim Thái Lan,6,Phim Thần Thoại,4,Phim Tình Cảm,35,Phim Trung Quốc,37,Phim Truyền Hình,19,Phim Viễn Tưởng,1,Phim Võ Thuật,36,Phim Xã Hội Đen,1,Phishing,5,PHP,16,Plugin,1,Port,1,post mẫu,1,prc,77,Programming,15,Python,1,Quảng Cáo,1,rat,457,Recovery,3,Remote Code Execution,1,Remote Desktop,1,Reverse Engineering,6,review,3,rút gọn link,1,sach,49,Sách,39,Sách Nghệ Thuật Sống,12,sách nói,1,Sách Tâm Linh,1,Sách Tiếng Anh,2,sachiep,2,sachnoi,1,Sản Phẩm,1,Sắc Hiệp,16,Scam,1,Scanner,10,Security,66,SEO,5,share,1,Shell,5,shop,1,Social Engineering,4,Software,22,Source Unity,1,SQL injection,21,Sức Khỏe,1,Symlink,3,Tài Chính,1,Tài chính cá nhân,2,Tài Liệu,1,Tản mạn,7,Taudio,2,Tâm lý xã hội,1,tấn công,1,Testador,1,Thái Lan,2,Tham Khảo,3,thamkhao,11,them,1,Thiệp Cưới,1,Thiết Kế Web,32,Thời Trang,2,Thủ Thuật Hacking,53,Thuyết Minh,1,tienhiep,5,Tiên Hiệp,123,Tiểu Thuyết,94,tiki,3,TIL,8,Tin Tức,52,Tips,39,tool,2,Tool Hack,14,Tools,9,Tổng Hợp,1,Tricks,26,Trinh thám,1,trojan original,48,Trọng sinh,11,Trộm mộ,1,Trung Quốc,1,Truyện,3,Trương Định,110,Tu Chân,2,TUTORIALS,124,Twitter,1,Ung_Dung,4,Upload,1,usb,1,vanhoc,11,văn học,6,vBulletin,7,video,16,Vietsub,1,Việt Nam,4,Virus,4,Võ Thuật,3,Võng Du,5,Vulnerability,19,Web Developer,15,webmau,5,WHMCS,3,WiFi,2,wiki lỗi máy tinh,1,wiki lỗi NTG,3,Windows,12,WordPress,43,Write-up,11,XSS,16,Yahoo,1,yeah1offer,1,youtube,11,
ltr
item
NhutTruong.Com - Chia sẻ kiến thức miễn phí: Cách tạo Website bằng Github đơn giản trong 15 phút
Cách tạo Website bằng Github đơn giản trong 15 phút
Cách tạo Website bằng Github đơn giản trong 15 phút
https://1.bp.blogspot.com/-3O3_zsyK8oQ/YCM_gcuUTgI/AAAAAAABQpc/V-7HSa5k0R4axT2HYF3Ot0bbqaDXLybmQCLcBGAsYHQ/w320-h240/2021-02-10_090500.jpg
https://1.bp.blogspot.com/-3O3_zsyK8oQ/YCM_gcuUTgI/AAAAAAABQpc/V-7HSa5k0R4axT2HYF3Ot0bbqaDXLybmQCLcBGAsYHQ/s72-w320-c-h240/2021-02-10_090500.jpg
NhutTruong.Com - Chia sẻ kiến thức miễn phí
https://www.nhuttruong.com/2021/02/cach-tao-website-bang-github-on-gian.html
https://www.nhuttruong.com/
https://www.nhuttruong.com/
https://www.nhuttruong.com/2021/02/cach-tao-website-bang-github-on-gian.html
true
7607280272436897486
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content