Trình tạo html
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 Show
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ệtCá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ả HTMLVí 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 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 Phương thức hàm kéo(ev) { 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 - ondragoverSự kiện 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
Đ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 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/
Đú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?
À, 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ạnhChú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ẩnNế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
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ửaThis 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ệuKhi 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ếtNế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 nhanhHiể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 WindowsBạ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 Bây giờ hãy thử nhập lệnh 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. 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ụngHã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?
OK vậy hãy làm theo từng bước sau đây
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
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 HugoHãy thực hiện từng bước như video sau đây
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 networkNhư 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ỉnh 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é |