Cách tạo 1 trang web cá nhân

      5

Bài này là một trong những bài bác Step-by-step (Hướng dẫn từng bước) nhằm bạn sẽ có thể trường đoản cú code cho bạn một trang web cá nhân chuyên nghiệp hóa, tân tiến, đồ họa tùy đổi mới với gửi lên thương hiệu miềngithub.iohoàn toàn miễn chi phí (miễn chi phí cả đời). quý khách đề xuất từ bỏ mình code cho chính mình một trang cá thể, tối thiểu đó sẽ là sản phẩm nhằm chúng ta từ bỏ quảng cáo thiết yếu bản thân.

Bạn đang xem: Cách tạo 1 trang web cá nhân

Nói đến website cá thể, phần đa fan tuyệt nghĩ về tức thì mang lại trang blog cá nhân, cùng suy nghĩ đến cácOpensource CMS(Content Management System, khối hệ thống quản lý và xuất phiên bản nội dung bài viết tất cả mã mối cung cấp mở). Nếu chúng ta cần sử dụng PHP thì cóWordpress,Drupal,Joomla... Nếu bạn cần sử dụng C# thì cóDotNetNuke,Umbrateo,Sitecore... Pyhẹp thì cóDjango...

*

CMS thường đã tất cả 2 phần, phầnAdminđể chúng ta cai quản cơ sở tài liệu backend (những bài viết, bình luận, media, hình ảnh..) với phầnfrontendlà trangclient (trang chủ)đượcpublish (xuất bản, đăng lên)những ngôn từ bài viết từadmincho người sử dụng phát âm.

*

Điểm chung của CMS chính là ta buộc phải mướn mộtHostingnhằm "Host" (Lưu trữ) mã nguồn cùng cửa hàng dữ liệu của website. Như cố thì một trang webmiễn phí(vì đem tự opensource) đang không thể là miễn chi phí nữa. Chúng ta cần đóng góp phí tổn gia hạn hosting website các tháng để web của ta ko "chết". Ngoài Hosting ra, ta còn cần cài đặt thêmDomain(thương hiệu miền) mang lại website để trỏ cho hosting (vốn chỉ tất cả địa chỉ là một trong những IPhường khó khăn nhớ). Vậy là để triển khai website cá nhân ta thông thường sẽ có phương pháp sau:

Download mã nguồn Opensource về + Tải hình ảnh hâm mộ + Chỉnh sửa với viết nội dung vào DB + Mua Hosting + Mua thương hiệu miền + Upload Code với DB lên Host = Trang web cá nhân.

Điểm yếu hèn nữa của CMS sẽ là chúng ta nên thực sự giỏi về mã mối cung cấp bắt đầu có thể sửa đổi hình ảnh theo ý muốn của khách hàng được. Thường họ đi lang thang nhằm tra cứu tìm một cáitemplatebối cảnh ưng ý (ví dụWordpress) được mang đến tải về không tính phí nơi đâu đó. Nhưng đích thực nó không khi nào được may mắn hy vọng 100%.

Trang cá thể là trang như thế nào?

Trang web cá nhân thường là những trang trình làng bạn dạng thân (Protệp tin cá nhân) trong các số đó gồm cả CV (sơ yếu ớt lý lịch xin việc) của bao gồm bạn, hoặc một dạng Blog nhưng mà bạnshare các bài bác viếtmà lại bạn viết ra hoặc xem tư vấn được. Cũng hoàn toàn có thể là một trong những trangwebsite reviews sản phẩmmà lại chúng ta làm nên.

*

Trang web cá nhân hay làtrang tĩnh. Nghĩa là chỉ cómột người dùng, không tồn tại chức năng singin cùng thêm tài liệu tự bạn khác bên cạnh các bạn, người dùng chỉ có thông tin, cùng can hệ tốt nhất người tiêu dùng bao gồm là viết bình luận cho bài viết.

Trang tĩnh cũng có thể là trangBÁO ĐIỆN TỬ. Hiện giờ trang của bọn họ chỉ xuất bạn dạng biết tin đến tín đồ đọc. Người gọi hoàn toàn có thể comment cho những nội dung bài viết nlỗi trang Blog.

*

Một trang tĩnh cũng rất có thể là Landing Page (Trang website chỉ có 1 trang độc nhất, cuộn lên cuộn xuống). Một trang ra mắt về một công ty, hoặc trang ra mắt một product làm sao kia.

Hãy đem ví dụ trang này của cả nước là một trong trang tĩnh dạng Landing Page, dùng để làm ra mắt sản phẩm:http://butphadiemthi.mcbooks.vn/

Trang tĩnh là chỉ tất cả HTML, CSS, Javascript à ?

Đúng vậy, chúng ta chẳng cần đến cửa hàng dữ liệu nhằm lưu trữ gì cả, chỉ cần một cỗ bối cảnh có Html, ít Css với tí tẹo Javascript là ta vẫn bao gồm một website. Html, Css, Javascript thì ai có tác dụng website cũng biết một ít, chẳng trở ngại gì để chỉnh sửa website của ta theo nhu cầu, đúng không ?

Nếu chỉ cần sử dụng html, không PHPhường, không C#, vậy những phần lặp lại ngơi nghỉ mỗi trang như là Header, Footer, Menu thì làm cố gắng nào?

 

À, lúc này ta sẽ không dùngHtml thuầnđược nữa. Ta sẽ đề xuất viết mộtTemplate(cỗ khung) trang web. Viết tách bóc các phần lặp lại riêng ra, phần ruột sống mỗi trang viết riêng, với lúc chạy sẽ ghép lại. Để có tác dụng được điều này ta đề xuất một "Web Static Generator" (Bộ luật pháp chế tạo website tĩnh từ bỏ template).

Cách hoạt động vui chơi của phép tắc sản xuất trang tĩnh (Static Site Generator) nhỏng sau:

*

Web static đã là xu hướng của 2018+

Hãy xem qua website này, các bạn sẽ thấy là có mặt hàng tá các mức sử dụng gen web static đâng được sử dụng mọi nơi:https://www.staticren.com/

*

Thế giới web đã đi một chặng đường nhiều năm, từ web tĩnh từ bỏ trong thời điểm 90. Rồi mang lại website đụng thời 2000+. Và tiếng cả thế giới lại yêu lại từ trên đầu với trang web tĩnh.

Điểm mạnh mẽ của Static Site Generator (SSG) so với HTML thuần

SSG hoàn toàn có thể tạo nên web site đa ngữ điệu rất nhanh cùng mạnh

Chúng ta cần một trang tĩnh nhưng mà lại đa ngôn ngữ, ví dụ Blog 2 ngôn ngữ Anh-Việt, hoặc website trang đích cần seo ra mắt sản phẩm nhiều ngữ điệu khác nhau, Hugo hoặc những hiện tượng Static Site Generator khác hoàn toàn có thể giúp được bạn. HTML thuần thì cũng làm được nhưng bạn sẽ vất vả lúc chỉnh sửa từng file một thủ công bằng tay nghỉ ngơi từng thư mục, cho dù 2 tlỗi mục của 2 ngữ điệu cấu trúc như thể nhau.

SSG hỗ trợ tạo thành một Blog chuẩn

Nếu chúng ta nên làm một website cá thể, trang trước tiên họ mong mỏi làm hiển nhiên là 1 trong những trang blog, trang nhằm viết bài xích với hiển thị theo ngày tháng nlỗi mộttờ báo cá nhân. Lúc bấy giờ bọn họ cần các chức năng cơ bạn dạng sau đây của một trang Blog :

Các điểm bên trên đây Hugo làm ngon. Và trọn vẹn miễn giá thành, đồ vật tận răng ngay trong lúc thiết đặt ko phải bất kỳ Plugin gì cả. Các SSG khác rất có thể cần cài đặt thêm mình k cần sử dụng nhiều phải k mày mò không còn. Chỉ cần phải biết là Hugo đích thực build ra 1 Blog dùng ngon luôn luôn.

SSG sinh sản hình ảnh khôn xiết nhanh khô cùng rất dễ dàng chỉnh sửa.

Cái này thì rõ. Vì đồ họa của trang web được viết bên dưới dạng html + đi cùng data. Nếu chúng ta đã từng có lần code Angular hoặc React sẽ thấy Html được nhồi thêm Data vào (viết thành 1 cục dưới dạng template) thì SSG cũng viết điều đó.

Xem thêm: 5 Công Cụ Kiểm Tra Xem Ai Đang Truy Cập Wifi Nhà Mình, 5 Công Cụ Kiểm Tra Xem Ai Đang Dùng Chung Wifi

SSG chất nhận được câu chữ được tàng trữ bên dưới dạng file, ko cần đại lý dữ liệu

khi làm cho website rượu cồn, chúng ta rõ ràng đi kiếm một các đại lý dữ liệu nhằm nhét được data bài viết (post) vào. Ví dụ PHP thì ta sử dụng MySQL, C# thì đi với MSSquốc lộ, Pyhạn hẹp thì hoàn toàn có thể dùng MongoDB...Nhưng làm web dạng SSG thì ta lưu trữ data vào tệp tin với dữ liệu hoàn toàn dạng text-base (hay là JSON hoặc TOML). Vì dữ liệu là dạng tree như JSON, bọn họ yêu thích tàng trữ gì cũng khá được. Dữ liệu vẫn được quản lý, thêm sửa xóa tự do với html template. lúc build ra html sẽ được các trang gồm vừa đủ data ước muốn.

SSG sử dụng Markdown là ngôn ngữ để biên soạn thảo bài xích viết

Nếu các bạn đang viết bài xích bên trên trang Viblo này thì các bạn đang dần sử dụng Markdown rồi. Còn các bạn làm sao không biết thì đề xuất học qua. Vì bọn họ sẽ không tồn tại trình soạn thảo nhỏng Word nữa, mà bạn nên biên soạn thảo format đậm nphân tử nội dung bài viết bằng notepad++.

SSG tạo nên web tĩnh, chỉ gồm Html, css, js. Tức là thời hạn load rất nhanh

Hiển nhiên là điều đó, bởi html thuần được mang trực tiếp từ bỏ hệ thống về với hiển thị trên trình chuẩn y ko phải chế tao gì các như thể website truyền thống cuội nguồn. Web cồn thì bắt buộc nhồi data vào html còn tại chỗ này toàn bộ sẽ nhào nặn sẵn.

SSG thì chả bao gồm gì để mà lại hack, cùng không lúc nào hại DDOS

Đúng vậy không người nào đi hack một website tĩnh cả, bởi vì nó không trỏ vào cửa hàng tài liệu như thế nào cả toàn bộ tài liệu các bạn nhìn thấy đa số là html. Tài nguyên server cũng chỉ bao gồm html, không chỉ có vậy chúng ta sẽ host web của chính bản thân mình bên trên github luôn. Do vậy việc lo sợ website bịsấp mặtvì ngẫu nhiên nguyên nhân gì thì cũng hồ hết không có cửa.

Lựa lựa chọn Hugo để ban đầu tạo ra trang web cho mình

Mỗi khí cụ SSG áp dụng một ngữ điệu riêng để gia công template cùng code. Ở trên đây mình dùngHugo. Vì nó thân thiện cùng với HĐH Windows, mua phạt cần sử dụng được luôn. Chứ k nhưJekyllcần càiRubyrồiGemlinh tinch. Hugo cũng viết bởi ngôn ngữGo, thời gianbuildmột trang web cực nkhô hanh.

1. Cài đặt Hugo đến Windows

quý khách tải về file zip mới nhất trên đây:https://github.com/gohugoio/hugo/releases

Máy mình Windows 10 - 64Bit yêu cầu mình download links này:https://github.com/gohugoio/hugo/releases/download/v0.39/hugo_0.39_Windows-64bit.zip

Sau khi giải nén file zip này ta sẽ được một filehugo.exe pháo. File này không phải kích đúp vào để mua nhưng chúng ta làm nhỏng sau:

*

Bây tiếng hãy thử gõ lệnhhugo versionsinh hoạt CMD để kiểm tra:

*

2. Bắt đầu tạo thành website thứ nhất bởi Hugo

Trước hết hãy tạo thành cỗ form project bởi Hugo command:hugo new site nhỏng sau:

*

Lúc này thì website của bọn họ sẽ white trơn, chưa xuất hiện gì cả.

3. Tải một cỗ bối cảnh (theme) về sử dụng

Hãy làm theo các bước sinh sống đoạn phim tiếp sau đây nhé:

https://www.youtube.com/watch?v=xlFkv_mfSwY

bởi vậy là không bắt buộc code gì bọn họ đang gồm một website khángầurồi đúng không?

Vậy nếu như muốn sử dụng nhiều theme của cùng một trang blog thì làm cho như thế nào?

OK vậy hãy làm theo từng bước một sau đây:

https://www.youtube.com/watch?v=4VbP1CKWcRI

Hmmmm! Có thể biến đổi hình ảnh đụng, bởi người tiêu dùng lựa chọn, sau khoản thời gian vẫn build bởi hugo không?

Không thể, bởi build ra Html hoàn toàn là tĩnh buộc phải liên kết nội dung bài viết (post) và links mang lại các trang khác nhau, css phần lớn đã có cố định vào 1 thỏng mục, bạn cũng có thể thấy sau thời điểm build bởi lệnhhugovẫn hiện ra thư mục tênpublicgồm những file sau khoản thời gian được build ra trang web hoàn chỉnh. Nếu bạn muốn đổi khác giao diện các bạn đề xuất chọn lại theme và sửa config.toml rồi build lại.

OK ngon, nhưng mà giờ đồng hồ viết bài post thì làm núm nào?

 

OK vậy bọn họ mày mò phương pháp viết bài bác trong Hugo nhé.

4. Viết bài đăng tải website bằng Hugo

Hãy tiến hành từng bước nhỏng video sau đây:

https://www.youtube.com/watch?v=AhnNa0cobTc

Trong trường phù hợp các bạn chỉ cần sử dụng một theme thắt chặt và cố định. Bạn ko yêu cầu mang lại thỏng mục themes. Mà hoàn toàn có thể paste trực tiếp toàn bộ nội dung themes vào thỏng mục root luôn.

Hãy rước ví dụ đồ họa "hugo-tranquilpeak-theme" là thắt chặt và cố định thì ta tải về file zip về và giải nén đtrằn vào thỏng mục gốc MyBlog luôn.

https://www.youtube.com/watch?v=oJRcPs4SKGw

5. Đưa website vừa có tác dụng lên mạng

do vậy là cơ bạn dạng sau khoản thời gian có một trang Blog với giao diện ngon nghẻ với viết những bài bác để share thì giờ chúng ta cũng có thể gửi nó lên mạng được rồi.

Chúng ta ko phải mua hosting gì cả nhưng hãy chuyển code lên trang github. Ai cũng tạo tài khoản github không tính phí được với github không giới hạn số code website (số Repository) mà bạn đưa lên. Trang Github bao gồm một các dịch vụ miễn tổn phí chính là hosting được tệp tin html tĩnh, được gọi làGithub Pages. Quý khách hàng gửi code dạng html tĩnh lên trênGithubthì chớp nhoáng hoàn toàn có thể hiển thị được tệp tin html kia dưới dạng trang web thường thì. Tuyệt vời bắt buộc không.

Chú ý là trong bài bác chỉ dẫn này mình chuyển trang web lên Github chỉ những mã mối cung cấp đã có ren ra (tạo ra html) bằng Hugo và không gửi toàn cục source của Hugo lên. Nếu bạn muốn share mã nguồn hugo của công ty thì chúng ta public toàn thể lên gitHub cũng khá được.

Hãy tuân theo đoạn Clip tiếp sau đây để mang được code lên gitHub Pages nhé :

https://www.youtube.com/watch?v=ls92T1SVKc4

Và như thế là bạn đã sở hữu một trang Blog cá thể hoàn hảo rồi đó.

Xem thêm: Máy Chủ Web Là Gì ? Chức Năng Và Cách Hoạt Động Như Thế Nào?

ĐÂY LÀ SOURCE của phần này nhằm dành riêng cho bạn nào buộc phải tham khảo nhé:LINK_SOURCE

Dùng hugo để đưa một template Bootstrap từ bỏ làm thành website trả chỉnh

Chúng ta vừa trường đoản cú có tác dụng được một trang Blog với không hề thiếu đồ đùa người phệ. Tuy nhiên hình ảnh vẫn chính là mỳ ăn ngay tức thì, chưa cool lắm đúng không nhỉ. Nếu chúng ta bao gồm một template html css hoàn chỉnh bởi Bootstrap và muốn thực hiện Hugo nhằm build thành trang web thì sao?

Phần này mình vẫn giảm thanh lịch một trong những phần thứ hai mang lại dễ theo dõi nhé. Mời các bạn đón đọc!

Đừng quên UpVote, Share đến bằng hữu cùng Comment các câu hỏi nếu bạn đề xuất nhé, mình đã vấn đáp tất cả. Nếu tất cả ai bao gồm kinh nghiệm tay nghề gì về Hugo cũng thảo luận thêm nhé.

Tmê mẩn khảo trên : https://viblo.asia/p/tay-trang-lam-nen-mot-trang-web-ca-nhan-chuyen-nghiep-khong-ton-mot-xu-4dbZNoB8lYM


Chuyên mục: Kiến thức Hosting