Thiết kế lại blog cá nhân — version 3.0

Mình đã hoàn thành quá trình nâng cấp cho blog cá nhân. Sẵn tiện ghi lại vài dòng để các bạn có nhu cầu tìm hiểu quy trình phát triển một trang web từ đầu như thế nào. Cách mình thiết kế là không dùng công cụ generate code có sẵn, xây dựng từ folder trống (from scratch).

Địa chỉ blog của mình: https://vhnam.github.io.

Image for post
Image for post
Ảnh bìa cho blog

Tại sao phải làm lại blog?

Có 2 nguyên nhân chủ yếu đó là thiết kế và lỗi responsive.

Về mặt thiết kế, giao diện của tớ cũng thuộc dạng cổ điển, màn hình chia làm 2 cột. Cột bên trái là nội dung, cột bên phải là danh sách các mạng xã hội. Tớ quyết định cập nhật cho hợp thời á mà. Với lại lúc đó cũng trẻ trâu, ngôn ngữ Anh — Việt loạn xà ngầu.

Về lỗi responsive, tớ sử dụng template có sẵn của GitHub Pages. Do blog của tớ chữ khá dài nên bị lỗi khi lên các thiết bị màn hình nhỏ như 320x480px.

Image for post
Image for post
Giao diện blog cũ

Công cụ sử dụng

Blog của tớ thuộc dạng static web nên cũng không cần gì quá phức tạp.

Ý tưởng thiết kế

Bạn có thể lướt một số trang nổi tiếng của thế giới để tìm cảm hứng như:

Tớ đã tìm được cảm hứng cho mình là kết hợp giao diện blog của Matt Falrey, bạn Nguyễn Đình Luận và nội dung của bạn Lê Yên Thanh.

Image for post
Image for post
GIao diện trang chủ của blog

Cài đặt

Về phần cài đặt chắc mình không có gì để bàn nhiều. Chỉ là viết mã HTML, CSS và JavaScript. Mình chỉ note lại một số cài đặt nâng cao.

Các bạn có thể tham khảo mã nguồn của blog tại: https://github.com/vhnam/vhnam.github.io

Image for post
Image for post
Nguồn: undraw.co

Schema.org

Đây là một loại microdata do các ông lớn trong ngành tìm kiếm như Google, Microsoft, Yahoo and Yandex đề xuất. Mục tiêu là đánh dấu nội dung để các công cụ tìm kiếm hiểu được nội dung trang web của bạn. Cách này được gọi là SEO bằng code.

Image for post
Image for post
Kết quả trang chủ của blog từ Google Structed Data Testing Tool

Facebook Analytics và Google Analytics

Đây là bộ công cụ dùng để theo dõi hành vi của người dùng.

Facebook Analytics mạnh về thông tin của người dùng như giới tính, hành vi, độ tuổi,…

Google Analytics mạnh về thông tin thiết bị của người dùng như hệ điều hành, dòng thiết bị, vị trí,…

Template Engine

Mình tự xây dựng một Template Engine đơn giản để dành cho việc sau này có thay đổi template thì gõ lệnh và chờ kết quả. Thay vì phải copy & paste thủ công.

Template Engine đơn giản được viết bằng Python

Tổng kết

Mình đã giới thiệu tổng quan cho các bạn biết quy trình làm lại blog của tớ. Để xem thêm chi tiết từng phần, các bạn có thể vào blog của tớ theo danh sách bài viết dưới đây.

Image for post
Image for post
Success kid. Nguồn: Google

Written by

Software Developer - Product Manager - UX/UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store