Start building your next Tailwind CSS flavoured WordPress theme with TailPress.

TailPress is your go-to starting point for developing WordPress themes with Tailwind CSS and comes with basic block-editor support out of the box.

View on GitHub

Hướng dẫn cài đặt Docker và Docker Compose trên Ubuntu 22.04

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách cài đặt Docker trên Ubuntu 22.04, một công cụ mạnh mẽ và linh hoạt trong việc quản lý container. Docker giúp việc triển khai ứng dụng trở nên nhanh chóng, tiện lợi và tối ưu hóa tài nguyên. Nếu bạn đang sử dụng Ubuntu 22.04 và muốn thiết lập môi trường Docker để phát triển hoặc triển khai ứng dụng, hãy theo dõi hướng dẫn chi tiết dưới đây.

Các bước cài đặt Docker trên Ubuntu 22.04

Đầu tiên là cài đặt Docker

sudo apt update -y && apt upgrade -y

sudo apt install apt-transport-https ca-certificates curl software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt update
sudo apt-cache policy docker-ce

sudo apt install docker-ce -y

sudo systemctl status docker

sudo usermod -aG docker username  (Nhớ thay username bằng user của bạn)

Kiểm tra sau khi cài đặt Docker trên Ubuntu 22.04

Sau khi cài đặt Docker CE xong ta cũng cần kiểm tra xem Docker đã chạy chưa và đang dùng version bao nhiêu

sudo systemctl status docker

sudo docker version

Cài đặt tiếp Docker Compose

Sau đó, tiếp theo là cài đặt Docker Compose. Bạn có thể bỏ qua bước này nếu không có nhu cầu!

Docker compose là công cụ dùng để định nghĩa và run multi-container cho Docker application. Với compose bạn sử dụng file YAML để config các services cho application của bạn. Sau đó dùng command để create và run từ những config đó. Sử dụng cũng khá đơn giản chỉ với ba bước:

sudo curl -L https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version

Hướng dẫn tạo trang blog siêu nhanh siêu mượt bằng NextJS + WordPress Headless CMS

Chào các bạn, chào mừng đến với chuyên mục “Lười nhưng vẫn muốn nhanh” trong lập trình!

Mình là một người yêu thích tốc độ, nên trong coding, gì nhanh là chơi! Vì thế, Next.js trở thành lựa chọn số 1 cho dự án blog cá nhân của mình. Next.js nhanh, thân thiện với SEO và có thể build thành web lẫn mobile app.

Còn WordPress? Ai cũng biết rồi, WP quản lý bài viết và hỗ trợ SEO rất tốt nhưng tốc độ web chưa tốt bằng SSR của Next.js. Vậy nên ta dùng WordPress như một Headless CMS – nghĩa là WP quản lý nội dung, còn giao diện ta dùng Next.js cho nhanh và mạnh.

Cần chuẩn bị gì?

Trước khi vào việc, bạn cần:

  • Node.js (phiên bản mới nhất)
  • Docker (vì ta build lên VPS sau này)
  • Git (để clone repo nhanh gọn)

Sau đó, bạn clone project từ GitHub về:

  git clone https://github.com/derrick-nguyen/thanhtuan-blog.git
  cd thanhtuan-blog

Cài đặt dự án Next.js

  1. Cài đặt dependencies: npm install
  2. Chạy dự án local: npm run dev

Dòng lệnh này sẽ khởi chạy server và bạn truy cập web tại http://localhost:3000.

Thiết lập WordPress Headless CMS

  1. Cài đặt WordPress trên localhost, bạn có thể chạy file docker-compose.yml trong code với lệnh docker-compose up -d
  2. Chúng ta sẽ dùng trực tiếp WordPress API RESTFull v2 của WP, không cần cài thêm bất kỳ plugin nào.
  3. Lấy API URL: Tài liệu API của WordPress https://developer.wordpress.org/rest-api/. Đa số sẽ có dạng là https://example.com/wp-json/wp/v2/posts – để lấy danh sách tất cả bài viết

Kết nối Next.js với WordPress

  1. Cập nhật biến môi trường trong .env: NEXT_PUBLIC_API_URL = 'https://example.com/wp-json/wp/v2'
  2. Chạy lại server để update biến môi trường: npm run dev

Tích hợp phân trang và Skeleton loading

Dự án này dùng MUI Pagination và Skeleton loading.

Build và deploy lên VPS

Dùng Docker build nhanh:

  docker build -t nextjs-blog .
  docker run -p 3000:3000 nextjs-blog

Sau đó, trên VPS chạy:

  docker-compose up -d

Kết luận

Dự án được viết bằng NextJS phiên bản 15 và Tailwind CSS bản ver 4. Đa số điều là các version mới nhất hiện tại. Kết hợp với 1 số component của MUI như Pagination cho phân trang hoặc Skeleton khi đang loading data.

Bây giờ bạn đã có một blog cá nhân chạy nhanh và tối ưu SEO với Next.js và WordPress Headless CMS. Còn chờ gì nữa, hay tạo bài viết đầu tiên nào!