Mục đích của trình tạo trang web là để kết xuất [tạo] nội dung thành các tệp html. Hầu hết chúng là trình tạo trang động, có nghĩa là máy chủ http sẽ chạy trình tạo để tạo ra tệp html mới mỗi khi người dùng cuối yêu cầu 1 trang
Theo thời gian, trình tạo trang web động đã được lập trình để CACHE các tệp html của chúng để ngăn chặn sự chậm trễ không cần thiết trong quá trình chuyển các trang đến người dùng cuối. Một trang đã được cache chính là 1 phiên bản tĩnh của trang web
Hugo làm cho công việc cache tiến thêm 1 bước xa hơn và TẤT CẢ các tệp html đều được hiển thị trên máy tính của ta. Ta có thể xem lại các tập tin cục bộ trước khi sao chép chúng lên máy chủ http. Vì các tệp HTML KHÔNG cần sinh ra động nên ta có thể nói Hugo là 1 trình tạo trang tĩnh
Việc làm này có nhiều lợi ích. Chú thích đáng chú ý nhất là hiệu năng. Máy chủ HTTP rất hiệu quả trong việc gửi tệp, tốt đến mức chúng ta có thể phục vụ cùng 1 lượng trang mà chỉ cần sử dụng 1 lượng nhỏ bộ nhớ và cpu so với trang web động
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "chộp lấy" một đối tượng và kéo nó đến một vị trí khác
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả đầy đủ
APIDrag và Drop4. 09. 03. 56. 012. 0Ví dụ Kéo và Thả HTML
Ví dụ dưới đây là một ví dụ kéo và thả đơn giản
Thí dụ
Nó có vẻ phức tạp, nhưng chúng ta hãy đi qua tất cả các phần khác nhau của sự kiện kéo và thả
Tạo một phần tử có thể kéo được
Đầu tiên. Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính draggable thành true
Kéo cái gì - ondragstart và setData[]
Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo
Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo [sự kiện], chỉ định dữ liệu nào sẽ được kéo
Phương thức dataTransfer.setData[] đặt kiểu dữ liệu và giá trị của dữ liệu được kéo
hàm kéo[ev] {
ev. truyền dữ liệu. setData["văn bản", ev. Mục tiêu. là];
}
Trong trường hợp này, kiểu dữ liệu là "văn bản" và giá trị là id của phần tử có thể kéo được ["drag1"]
Thả ở đâu - ondragover
Sự kiện ondragover chỉ định nơi dữ liệu được kéo có thể bị xóa
Theo mặc định, không thể bỏ dữ liệu/phần tử vào các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý phần tử mặc định
Bài này là bài Step-by-step [Hướng dẫn từng bước] để bạn có thể tự code cho mình một trang web cá nhân chuyên nghiệp, hiện đại, giao diện tùy biến và đưa lên github tên miền. io hoàn toàn miễn phí [miễn phí cả đời]. Bạn nên tự code cho mình một trang cá nhân, ít nhất đó sẽ là sản phẩm để bạn tự quảng cáo chính mình
Nói đến trang web cá nhân, mọi người hay nghĩ ngay đến trang blog cá nhân, và nghĩ đến các Opensource CMS [Hệ thống quản lý nội dung, hệ thống quản lý và xuất bản bài viết có mã nguồn mở]. Nếu bạn dùng PHP thì có Wordpress, Drupal, Joomla. Nếu bạn dùng C# thì có DotNetNuke, Umbraco, Sitecore. Python thì có Django
CMS thường sẽ bao gồm 2 phần, phần Admin để bạn quản lý backend cơ sở dữ liệu [các bài viết, bình luận, media, ảnh. ] và phần frontend là trang client [trang chủ] được xuất bản [xuất bản, đăng lên] các nội dung bài viết từ quản trị viên cho người dùng đọc
Điểm chung của CMS đó là ta phải thuê một Hosting để "Host" [Lưu trữ] mã nguồn và cơ sở dữ liệu của trang web. Như thế thì một trang web miễn phí [do lấy từ mã nguồn mở] sẽ không còn là miễn phí nữa. Chúng ta phải đóng phí duy trì lưu trữ trang web hàng tháng để web của ta không "chết". Ngoài Hosting ra, ta còn phải mua thêm Domain [tên miền] cho trang web để trỏ đến hosting [vốn chỉ có địa chỉ là một IP khó nhớ]. Do đó, để làm web cá nhân ta thường có công thức sau
Tải mã nguồn Opensource về + Tải giao diện yêu thích + Chỉnh sửa và viết nội dung vào DB + Mua Hosting + Mua tên miền + Upload Code và DB lên Host = Trang web cá nhân
Điểm yếu nữa của CMS đó là bạn phải thực sự giỏi về mã nguồn mới có thể chỉnh sửa giao diện theo ý muốn của bạn được. Thường chúng ta đi lang thang để tìm kiếm một mẫu giao diện ưng ý [ví dụ Wordpress] được cho tải miễn phí ở đâu đó. Nhưng thực tế nó không bao giờ được như ý muốn 100%. Vì tôi cá là bạn đọc trang viblo. asia tức là bạn đã biết lập trình. Bạn sẽ muốn tự mình code ra một trang cá nhân chuyên nghiệp [ngầu] cho chính mình
Trang cá nhân là trang như thế nào?Trang web cá nhân thường là các trang giới thiệu bản thân [Hồ sơ cá nhân] trong đó bao gồm cả CV [sơ yếu lý lịch xin việc] của chính bạn, hoặc một dạng Blog mà bạn chia sẻ các bài viết mà bạn viết ra hoặc . Cũng có thể là một trang web giới thiệu sản phẩm mà bạn làm ra
Trang web cá nhân thường là trang tĩnh. Nghĩa là chỉ có một người dùng, không có chức năng đăng nhập và thêm dữ liệu từ những người khác bên ngoài bạn, người dùng chỉ có đọc tin và tương tác duy nhất người dùng là viết bình luận cho bài viết
Trang tĩnh cũng có thể là trang BÁO ĐIỆN TỬ. Lúc này trang của chúng ta chỉ xuất bản thông tin đến người đọc. Người đọc có thể bình luận cho các bài viết như trang Blog
Một trang tĩnh cũng có thể là Landing Page [Trang web chỉ có 1 trang duy nhất, scroll up scroll down]. Một trang giới thiệu về một công ty, hoặc trang giới thiệu một sản phẩm nào đó
Hãy lấy ví dụ trang này của Việt Nam là một trang Landing Page dạng tĩnh, dùng để giới thiệu sản phẩm. http. //butphadiemthi. mcbook. vn/
Trang tĩnh tức là chỉ có HTML, CSS, Javascript à?
Đúng vậy, chúng ta thực sự cần đến cơ sở dữ liệu để lưu trữ tất cả những gì, chỉ cần một bộ giao diện bao gồm Html, ít Css và chút ít Javascript là chúng ta đã có một trang web. Html, Css, Javascript thì ai làm web cũng biết ít, thật khó khăn gì để chỉnh sửa trang web của ta theo ý muốn, đúng không?
Nếu chỉ dùng html, không PHP, không C#, vậy các phần lặp lại ở mỗi trang như là Header, Footer, Menu thì làm thế nào?
À, lúc này ta sẽ không dùng Html thuần được nữa. Ta sẽ phải viết một Mẫu [bộ khung] trang web. Viết tách các phần lặp lại riêng ra, phần ruột ở mỗi trang viết riêng và khi chạy sẽ ghép lại. Để làm được điều này, ta cần có "Web Static Generator" [Bộ công cụ tạo trang tĩnh web từ mẫu]
Cách hoạt động của công cụ tạo trang tĩnh [Static Site Generator] như sau
Hãy nhìn qua trang web này, bạn sẽ thấy có hàng tá công cụ gen web tĩnh được sử dụng khắp nơi. https. //www. tĩnh điện. com/
Thế giới web đã đi một đường dài, từ web tĩnh từ những năm 90. Then to the web time 2000+. Và giờ cả thế giới yêu lại từ đầu với trang web tĩnh
Điểm mạnh của Static Site Generator [SSG] so với HTML thuầnSSG có thể tạo ra trang web đa ngôn ngữ rất nhanh và mạnh
Chúng ta cần một trang tĩnh nhưng lại đa ngôn ngữ, ví dụ Blog 2 ngôn ngữ Anh-Việt, hoặc trang đích web giới thiệu sản phẩm nhiều ngôn ngữ khác nhau, Hugo hoặc các công cụ Static Site Generator khác có thể giúp bạn được. HTML thuần túy thì cũng làm được nhưng bạn sẽ vất vả khi chỉnh sửa từng tệp một thủ công trong từng thư mục, cho dù 2 thư mục của 2 ngôn ngữ có cấu trúc giống nhau
SSG hỗ trợ tạo ra một Blog tiêu chuẩn
Nếu chúng ta cần làm một trang web cá nhân, thì trang đầu tiên chúng ta muốn làm hiển thị là một trang blog, trang để viết bài và hiển thị theo ngày tháng như một tờ báo cá nhân. Lúc này chúng ta cần các chức năng cơ bản sau đây của một trang Blog
- Show the post post [post] theo ngày
- Filtered by months
- Hiển thị nhóm bài viết theo thẻ [thẻ], hoặc mỗi bài gắn cho nó một danh mục [danh mục] để gom các bài viết liên quan lại với nhau
- Tìm kiếm được bài viết theo tiêu đề hoặc nội dung bên trong của toàn bộ Blog
- Hỗ trợ soạn thảo và hiển thị các nhúng [nội dung của bên thứ ba, vd Youtube, Slideshare, Draw. io, Gify. ] trực tiếp trong bài viết
- Cho phép bình luận dưới mỗi bài viết
- Hiển thị các bài viết liên quan đến bài đang đọc
- Hỗ trợ SEO mạnh để tăng view, cái này 1 website chuẩn cần phải có, site không chỉ là làm cho vui mà nó thực sự có hiệu quả hoạt động. Ví dụ có hỗ trợ sitemap, robot, quản lý được các thẻ meta, có url chuẩn SEO google
- Cần có Google Analytic để xem người truy cập từ đâu và làm SEO chuẩn
- Có RSS để bắt tay với các trình đọc tin tức ngắn gọn [kiểu feedly, google news] nữa thì tốt
- Chia sẻ được các bài viết sang mạng xã hội ví dụ facebook
Các điểm trên đây Hugo làm ngon. Và hoàn toàn miễn phí, trang được tận hưởng ngay khi cài đặt mà không cần bất kỳ Plugin nào cả. Các SSG khác có thể cần cài đặt thêm mình k dùng nhiều nên k tìm hiểu hết. Chỉ cần biết là Hugo thực sự build ra 1 Blog dùng luôn ngon
SSG tạo giao diện rất nhanh và rất dễ chỉnh sửa
This thing is known. Vì giao diện của trang web được viết dưới dạng html + dữ liệu đính kèm. Nếu bạn đã từng code Angular hoặc React sẽ thấy Html được nhồi thêm Data vào [ghi thành 1 template dưới dạng cục bộ] thì SSG cũng viết như vậy
SSG cho phép lưu trữ nội dung dưới định dạng tệp, không cần cơ sở dữ liệu
Khi làm web động, chúng ta thể hiện việc đi tìm một cơ sở dữ liệu để đưa dữ liệu bài viết [post] vào. Ví dụ PHP thì ta dùng MySQL, C# thì đi với MSSQL, Python thì có thể dùng MongoDB. Nhưng làm web dạng SSG thì ta save data vào file và data hoàn toàn dạng text-base [thường là JSON hoặc TOML]. Vì dữ liệu ở dạng cây như JSON nên chúng ta thích lưu trữ gì cũng được. Dữ liệu vẫn được quản lý, thêm chỉnh sửa xóa độc lập với mẫu html. Khi build ra html sẽ được các trang có đầy đủ dữ liệu mong muốn
SSG sử dụng Markdown là ngôn ngữ để soạn thảo bài viết
Nếu bạn đã viết bài trên trang Viblo này thì bạn cũng đang sử dụng Markdown rồi. Còn bạn nào chưa biết thì phải học qua. Vì chúng ta sẽ không có trình soạn thảo như Word nữa, mà bạn phải soạn thảo định dạng đậm nhạt bài viết bằng notepad++
SSG tạo ra web tĩnh, chỉ có Html, css, js. Tức thời là thời gian tải cực nhanh
Hiển nhiên là như vậy, vì html thuần được lấy trực tiếp từ máy chủ về và hiển thị trên trình duyệt không cần chế biến nhiều thứ như web truyền thống. Web động thì phải nhồi dữ liệu vào html còn ở đây tất cả đã sẵn sàng
SSG thì chả có gì để mà hack, và không bao giờ sợ DDOS
Đúng vậy không ai đi hack một trang web tĩnh cả, vì nó không trỏ chuột vào cơ sở dữ liệu nào mà tất cả dữ liệu nhìn bạn đều thấy là html. Server tài nguyên cũng chỉ có html, hơn nữa chúng ta sẽ host web của mình trên github luôn. Làm vậy việc lo sợ website bị sát mặt vì bất kỳ lý do gì thì cũng đều không có cửa
Lựa chọn Hugo để bắt đầu tạo trang web cho mìnhMỗi công cụ SSG sử dụng một ngôn ngữ riêng để làm mẫu và mã. Ở đây mình dùng Hugo. Vì nó thân thiện với HĐH Windows, cài đặt máy tính của bạn luôn luôn được. Chứ k phải Jekyll thì phải cài Ruby rồi Gem linh tinh. Hugo viết bằng ngôn ngữ Đi, thời gian xây dựng một trang web cực nhanh
1. Cài đặt Hugo cho Windows
Bạn tải file zip mới nhất tại đây. https. //github. com/gohugoio/hugo/phát hành
Máy mình Windows 10 - 64Bit nên mình download link này. https. //github. com/gohugoio/hugo/phát hành/tải xuống/v0. 39/hugo_0. 39_Windows-64bit. khóa kéo
Sau khi giải nén file zip này ta sẽ được một file hugo.exe. Tệp này không được kích hoạt để cài đặt mà bạn làm như sau
Bây giờ hãy thử nhập lệnh hugo version tại CMD để kiểm tra
2. Bắt đầu tạo trang web đầu tiên bằng Hugo
Đầu tiên hãy tạo bộ khung dự án bằng lệnh Hugo. hugo new site [TenWebsite] as after
Lúc này thì trang web của chúng ta trắng trơn, chưa có gì cả
3. Tải một bộ giao diện [theme] về sử dụng
Hãy làm theo các bước ở video sau đây nhé
Như vậy là chưa cần mã gì chúng ta đã có một trang web khá lộn xộn rồi đúng không?
ondragstart0
OK vậy hãy làm theo từng bước sau đây
ondragstart1
Không thể, vì build ra Html hoàn toàn là tĩnh nên liên kết bài viết [post] và liên kết đến các trang khác nhau, css đều đã được cố định vào 1 thư mục, bạn có thể thấy sau khi build bằng lệnh ondragstart2 sẽ hiện ra . Nếu bạn muốn thay đổi giao diện, bạn phải chọn lại chủ đề và sửa cấu hình. toml rồi build lại
Trang tĩnh tức là chỉ có HTML, CSS, Javascript à?0
OK vậy chúng ta cùng tìm hiểu cách viết bài trong Hugo nhé
4. Viết bài đăng lên website bằng Hugo
Hãy thực hiện từng bước như video sau đây
Trong trường hợp bạn chỉ sử dụng một chủ đề cố định. Bạn không cần đến thư mục chủ đề. Có thể dán trực tiếp toàn bộ chủ đề nội dung vào thư mục gốc luôn
Hãy lấy ví dụ giao diện "hugo-tranquilpeak-theme" là cố định thì ta tải file zip về và giải nén đè vào thư mục gốc MyBlog luôn
5. drop page web just to network
Như vậy là cơ bản sau khi có một trang Blog với giao diện ngon nghẻ và viết các bài để chia sẻ thì giờ chúng ta có thể đưa nó lên mạng được rồi
Chúng ta không cần mua hosting gì cả mà hãy đưa code lên trang github. Ai cũng tạo tài khoản github free được và github không giới hạn số code web [số Repository] mà bạn đưa lên. Trang Github có một dịch vụ miễn phí đó là lưu trữ tệp html tĩnh, được gọi là Trang Github. Bạn đưa mã định dạng html tĩnh lên trên Github thì lập tức có thể hiển thị tệp đã được html đó dưới dạng trang web thông thường. Tuyệt vời phải không
Chú ý là trong bài hướng dẫn này mình đưa trang web lên Github chỉ các mã nguồn đã được tạo ra [tạo ra html] bằng Hugo và không đưa toàn bộ nguồn của Hugo lên. Nếu bạn muốn chia sẻ mã nguồn hugo của mình thì bạn công khai toàn bộ lên gitHub cũng được
Vui lòng làm theo video sau đây để đưa mã lên Trang gitHub nhé
Và như thế là bạn đã có một trang Blog cá nhân hoàn chỉnh rồi đấy.
Use hugo to give a template Bootstrap tự làm thành trang web hoàn chỉnhLÀ LÀ SOURCE của mục này để dành cho bạn nào cần tham khảo nhé. LINK_SOURCE
Chúng ta vừa tự làm được một trang Blog với đầy đủ đồ chơi người lớn. Tuy nhiên giao diện vẫn là mì ăn liền, không hay lắm đúng không. Nếu bạn có một mẫu html css hoàn chỉnh bằng Bootstrap và muốn sử dụng Hugo để xây dựng web thành trang thì sao?
Phần này mình sẽ cắt sang phần thứ 2 để dễ theo dõi nhé. Thân mời các bạn đón đọc
Đừng quên UpVote, Share cho bạn bè và Comment các câu hỏi nếu bạn cần nhé, mình sẽ trả lời tất cả. Ai có kinh nghiệm gì về Hugo thì trao đổi thêm nhé