Chuyển Blog sang Typecho - 77vin

calendar Mar 17, 2025 · 9 phút đọc · 77vin  ·
Chia sẻ trên: linkedin copy

Nguồn gốc

Theo thói quen, tôi sẽ kể về nguồn gốc của quyết định này. Blog của tôi đã sử dụng giải pháp Bitcron + Dropbox + Disqus từ tháng 9 năm 2017. Trong suốt hai năm qua, thỉnh thoảng tôi có ý định thay đổi vì tốc độ chậm chạp của Bitcron, nhưng với nguyên tắc "viết nhiều hơn là loay hoay", tôi đã kiềm chế bản thân.

Tuy nhiên, gần đây do một số lý do, các công cụ vượt tường lửa mà tôi thường dùng hay gặp sự cố và các phương án thay thế đều không khả thi. Tôi nhận ra rằng điều này không thể kéo dài mãi được, cộng với sự không hài lòng về tốc độ của Bitcron, nên đã quyết định tìm kiếm một giải pháp blog mới.

Thực tế thì tôi đã khá thành thạo việc quản lý blog rồi, nhưng vẫn còn băn khoăn giữa hai lựa chọn:

Do phát hiện rằng AWS Lightsail chỉ tốn 3.5 đô la mỗi tháng và cho phép dùng thử miễn phí trong một tháng, tôi đã đăng ký tài khoản để thử nghiệm WordPress.

Lâu lắm rồi tôi không dùng WordPress, cũng muốn biết nó đã phát triển đến đâu, nhưng thật thất vọng khi thấy nó quá phức tạp để làm một blog cá nhân.

Về phần Typecho, tôi đương nhiên đã nghe danh từ lâu. Tuy nhiên, tôi luôn có chút thiên kiến với các chương trình ít phổ biến, lo ngại rằng tài nguyên sẽ khan hiếm hoặc tác giả sẽ bỏ dở dự án. Nhưng lần này, khi nhìn thấy một số theme đẹp mắt của Typecho, tôi đã liều lĩnh thử cài đặt lần đầu tiên. Khi đăng nhập vào bảng điều khiển, tôi thực sự ngạc nhiên bởi sự đơn giản của nó. Kết hợp với một theme mộc mạc, ôi trời, đây chính là điều tôi mong muốn!

Bắt đầu với Typecho

Thiết lập Blog Typecho

Bước 1: Chuẩn bị máy chủ

Lightsail của AWS cho phép tạo trực tiếp instance LAMP thông qua giao diện quản trị - chính là môi trường cần thiết để chạy Typecho.

Sau khi tạo instance LAMP:

  1. Đăng nhập vào host qua SSH theo cách sau:
1ssh -i LightsailDefaultKey-ap-northeast-1.pem bitnami@X.X.X.X

Trong đó, LightsailDefaultKey-ap-northeast-1.pem là khóa mật của host, có thể tải xuống từ phần quản trị Lightsail trên AWS. bitnami là tên đăng nhập mặc định, và X.X.X.X là địa chỉ IP công khai hiển thị trên giao diện quản trị. 2. Thư mục gốc của Apache là ~/htdocs/, tập tin Typecho cần được đặt vào đây để có thể truy cập qua IP công khai. 3. Tập tin bitnami_credentials trong thư mục ~ chứa mật khẩu mặc định của máy chủ, cũng như mật khẩu cơ sở dữ liệu MySQL. Đăng nhập vào host và thực hiện tuần tự các lệnh sau:

1wget  #tải gói cài đặt
2gzip -d 1.1-17.10.30-release.tar.gz  #giải nén gói cài đặt
3tar xvf 1.1-17.10.30-release.tar    #giải nén gói cài đặt
4mv build/

Khi hoàn tất, thư mục htdocs sẽ có cấu trúc như sau:

1drwxrwxr-x 6 bitnami bitnami 4096 Sep 26 13:47 ./
2drwxrwxr-x 6 bitnami bitnami 4096 Sep 26 13:50 ../
3drwxr-xr-x 5 bitnami bitnami 4096 Sep 26 13:46 admin/   #thư mục backend
4-rw-r--r-- 1 bitnami bitnami  721 Oct 29 2017 index.php  #tập tin trang chủ
5drwxr-xr-x 2 bitnami bitnami 4096 Sep 26 13:46 install/  
6-rw-r--r-- 1 bitnami bitnami 48403 Oct 29 2017 install.php #tập tin khởi động cài đặt
7-rw-r--r-- 1 bitnami bitnami 14974 Oct 29 2017 LICENSE.txt 
8drwxr-xr-x 5 bitnami bitnami 4096 Sep 26 13:46 usr/    #thư mục người dùng, bao gồm theme, plugin, hình ảnh
9drwxr-xr-x 5 bitnami bitnami 4096 Oct 29 2017 var/

Bước 3: Tạo Cơ sở Dữ liệu MySQL

Trước khi cài đặt, bạn cần tạo trước cơ sở dữ liệu MySQL theo các bước sau:

1mysql -uroot -p     #đăng nhập MySQL, sẽ yêu cầu nhập mật khẩu, mật khẩu nằm trong file bitnami_credentials
2create database typecho; #tạo cơ sở dữ liệu, tên cơ sở dữ liệu là Typecho

Bước 4: Cài đặt Typecho

Truy cập địa chỉ IP công khai bằng trình duyệt, bạn sẽ thấy trang cài đặt như sau, điền đầy đủ thông tin và xác nhận cài đặt. Khi cài đặt, tôi gặp lỗi yêu cầu tạo tập tin config.inc.php tại thư mục gốc của website, chỉ cần tuân thủ hướng dẫn để tạo.

Sau khi cài đặt xong, bạn có thể truy cập blog qua địa chỉ IP công khai.

Bước 5: Di chuyển dữ liệu

Tôi có blog cũ cần di chuyển dữ liệu, bài viết của tôi đã được sao lưu cục bộ, tổng cộng 174 bài, tôi đã sử dụng phương pháp đơn giản nhất: đăng lại từng bài lên blog Typecho, mất khá nhiều thời gian.

Nếu là blog mới, bạn có thể bỏ qua bước này.

Bước 6: Liên kết tên miền

Tại giao diện quản trị của nhà cung cấp tên miền, thêm một bản ghi A chỉ tới địa chỉ IP công khai của instance Lightsail.

Bạn có thể liên kết tên miền sau bước 1 để trong bước 4 có thể truy cập tên miền thay vì IP để cài đặt Typecho. Lý do nổ hũ đổi thưởng tôi liên kết tên miền cuối cùng là vì tôi muốn di chuyển dữ liệu blog, sau khi dữ liệu đã chuyển xong, tôi mới chuyển解析 tới blog mới để đảm bảo quá trình chuyển đổi êm đềm.

Tới đây, các chức năng cơ bản của blog đã được thiết lập xong, bạn có thể yên tâm sử dụng.

Các tính năng nâng cao

Với tính cách thích hoàn hảo và tinh thần khám phá của mình, chắc chắn tôi sẽ tiếp tục tinh chỉnh. Đã hoàn thành các tính năng sau:

Viết lại URL

URL mặc định của Typecho có dạng www.skyue.com/index.php/1/, phần index.php rất khó chịu.

Bạn có thể kích hoạt "chức năng viết lại địa chỉ" trong phần "Cài đặt - Liên kết vĩnh cửu" ở bảng điều khiển, sau đó chọn cấu trúc URL phù hợp.

Khi kích hoạt, có thể xảy ra lỗi, hãy kiên trì bật chức năng và thực hiện hai bước sau để hiệu quả:

  1. Sửa tập tin cấu hình apache, đường dẫn /opt/bitnami/apache2/conf/httpd.conf, sửa nội dung:
1AllowOverride None

thành

1AllowOverride All
  1. Tạo tập tin .htaccess trong thư mục gốc htdocs với nội dung:
1<IfModule mod_rewrite.c>
2RewriteEngine On
3RewriteBase /
4RewriteCond %{REQUEST_FILENAME} !-f
5RewriteCond %{REQUEST_FILENAME} !-d
6RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
7</IfModule>

Thông báo bình luận qua email

Chức năng thông báo bình luận qua email giúp bạn nắm bắt tình hình nhanh chóng và tương tác với độc giả tốt hơn. Typecho không hỗ trợ sẵn, nhưng có thể dùng plugin "CommentToMail".

Các bước cài đặt:

1cd ~/htdocs/usr/plugins/    #vào thư mục plugin
2git clone  #cài đặt plugin, instance LAMP Lightsail mặc định hỗ trợ git
3chmod 777 CommentToMail/cache #đặt quyền cho thư mục cache, nếu không sẽ lỗi khi kích hoạt plugin từ bảng điều khiển

Sau khi cài đặt, bạn sẽ thấy plugin trong bảng điều khiển, chỉ cần kích hoạt và cấu hình.

Gợi ý Theme

Gợi ý một số theme, tôi thích phong cách đơn giản.

Hiện tại tôi đang sử dụng theme Simplicity của iKirby, lần đầu nhìn thấy đã 77vin rất ấn tượng.

Theme mặc định của Typecho cũng rất đẹp, có thể một ngày nào đó tôi sẽ quay lại theme mặc định.

Ngoài ra, AirCloud của WingLim và Rringo của memset0 cũng thuộc kiểu phong cách mà tôi thích.

Hiển thị chú thích hình ảnh trong Markdown

Markdown định dạng chèn hình ảnh như sau:

1!chú thích

Khi hiển thị, bạn muốn chú thích xuất hiện dưới hình ảnh, ví dụ như hình bên dưới.

Cần sửa tập tin var/HyperDown.php dòng 357 của Typecho. Thay:

1<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">

bằng (có điều chỉnh, xem cập nhật ngày 14 tháng 3 năm 2020)

1<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"><center><div class=\"image-caption\">{$escaped}</div></center>

Đồng thời thêm CSS sau vào style của theme. Nếu là theme Simplicity, lưu ý nó sử dụng style.min.css chứ không phải style.css.

 1/*đặt hình ảnh canh giữa*/
 2p img {clear:both;display:block;margin:auto;}
 3.image-caption{
 4min-width: 20%;
 5  max-width: 80%;
 6  min-height: 22px;
 7  display: inline-block;
 8  padding: 10px;
 9  margin: 0 auto;
10  border-bottom: 1px solid #d9d9d9;
11  font-size: 14px;
12  color: #969696;
13  line-height: 1.7;
14}

Bài viết này có nhiều hình ảnh, bạn có thể xem hiệu ứng.

Hỗ trợ HTTPS

Tôi sử dụng chứng chỉ SSL miễn phí từ Alibaba Cloud, cấu hình hơi phức tạp, hoàn toàn tham khảo bài viết này, không cần bàn thêm.

Có một bước cần tải chứng chỉ lên Lightsail. Không nghiên cứu cách kết nối FTP với Lightsail, tôi đã tải chứng chỉ lên dịch vụ lưu trữ ảnh, sau đó dùng wget tải về từ dịch vụ này, tuy tricky nhưng hiệu quả.

Lưu trữ hình ảnh

Nhân dịp này, tôi quyết định sử dụng lại dịch vụ lưu trữ hình ảnh bên thứ ba, với các yêu cầu:

Rất may mắn, YouPai Cloud đáp ứng được cả bốn yêu cầu. Đặc biệt, trình soạn thảo Markdown MWeb của tôi cũng hỗ trợ YouPai Cloud, hoàn hảo.

Cấu hình dịch vụ lưu trữ rất đơn giản, không赘 thuật thêm. Chỉ cần lưu ý, nếu bạn cũng sử dụng MWeb hoặc công cụ khác để tải hình ảnh lên, cần tạo một nhân viên vận hành trong phần quản trị của YouPai Cloud.

Kết luận

Không hiểu sao, việc loay hoay với những thứ này dễ khiến nghiện. Gần đây về nhà sớm thường nằm giường nghe "Dou Po Cang Qiong", mấy ngày nay lại say mê xử lý những thứ này mà không cảm thấy mệt mỏi, thường xuyên chợp mắt lúc đã quá nửa đêm.

Luôn nghĩ mình hợp làm lập trình viên, tiếc là Live Casino bị làm sản phẩm chiếm mất thời gian.

Cập nhật ngày 14 tháng 3 năm 2020

Trong HyperDown.php, sửa đổi phần hình ảnh thành:

1<figure><img class=\"skyimg\" src=\" alt=\"{$escaped}\" title=\"{$escaped}\"><figcaption class=\"image-caption\">{$escaped}</figcaption></figure>

Tương ứng, trong style.css thêm:

 1figure {
 2    border-style: solid;
 3    border-width: 1px;
 4    border-color: #e7e7e7;
 5    padding: 2px;
 6}
 7.image-caption {
 8  color: #999999;
 9  text-align: center;
10}

Các sửa đổi trên đạt được các chức năng:

Hiệu ứng cuối cùng như hình sau: !Hình ảnh cập nhật mới nhất