Chuyển đổi blog sang Typecho - keo hom nay
Bắt đầu
Theo thông lệ, hãy kể về lý do bắt đầu. Blog của tôi từ tháng 9 năm 2017 đã sử dụng giải pháp Bitcron + Dropbox + Disqus. Đã qua hai năm, đôi khi vì tốc độ chậm của Bitcron mà tôi có ý định thay đổi, nhưng theo nguyên tắc "viết nhiều hơn là loay hoay", tôi đã kìm nén lại. Giải pháp này yêu cầu Dropbox và Disqus phải sử dụng mạng proxy. Tuy nhiên, gần đây vì một số lý do, các dịch vụ proxy thường xuyên gặp vấn đề, và tôi đã thử tìm kiếm các phương án thay thế nhưng không đạt kết quả tốt. Tôi nhận ra rằng điều này không thể kéo dài mãi được, cộng thêm sự không hài lòng về tốc độ của Bitcron, nên tôi quyết định tìm kiếm một giải pháp mới cho blog. Thực tế, tôi đã khá thành thạo trong việc quản lý blog và chủ yếu đang do dự giữa hai phương án:
Vì phát hiện Lightsail của AWS chỉ mất 3.5 đô la mỗi tháng, khá rẻ và có thể dùng miễn phí trong một tháng, tôi đã mở tài khoản để thử nghiệm WordPress. Lâu lắm rồi tôi không dùng WordPress và cũng tò mò muốn biết nó đã phát triển đến đâu, nhưng cuối cùng thì tôi cảm thấy thất vọng. Đối với một chương trình blog cá nhân, nó quá phức tạp. Còn Typecho, cái tên mà tôi đã nghe danh từ lâu. Tôi thường có chút thiên kiến đối với các chương trình nhỏ, lo ngại rằng tài nguyên sẽ ít và tác giả có thể bỏ rơi dự án. Lần này, khi nhìn thấy một số giao diện đẹp mắt của Typecho, tôi đã bất ngờ 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 giao diện cơ bản, ôi trời, đây chính là thứ tôi cần! !Giao diện bảng điều khiển Typecho Giao diện bảng điều khiển Typecho !Trang chủ mặc định của Typecho Trang chủ mặc định của Typecho Vậy là tôi bắt đầu khám phá Typecho.
Xây dựng blog Typecho
Bước 1: Chuẩn bị máy chủ
Lightsail của AWS cho phép tạo trực tiếp các instance LAMP từ giao diện người dùng, đó chính là môi trường chạy cần thiết cho Typecho. !Tạo instance LAMP trên Lightsail Tạo instance LAMP trên Lightsail Sau khi tạo instance LAMP:
- Sử dụng SSH để đăng nhập vào máy chủ. Cách làm như sau:
1ssh -i LightsailDefaultKey-ap-northeast-1.pem bitnami@X.X.X.X
Trong đó, LightsailDefaultKey-ap-northeast-1.pem là khóa mật mã của máy chủ, cần tải xuống từ phần quản trị Lightsail. bitnami là tên đăng nhập mặc định, X.X.X.X thay bằng địa chỉ IP công khai hiển thị trên giao diện.
2. Thư mục gốc của Apache là ~/htdocs/, bạn cần đặt file Typecho vào thư mục này để truy cập qua địa chỉ IP công khai.
3. File bitnami_credentials trong thư mục ~ chứa mật khẩu mặc định của máy chủ và cũng là mật khẩu mặc định cho cơ sở dữ liệu Mysql.
Sau khi đăng nhập, 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 quản trị
4-rw-r--r-- 1 bitnami bitnami 721 Oct 29 2017 index.php #file 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 #file 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. Cần dùng khi cài đặt theme và plugin.
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, cần tạo trước cơ sở dữ liệu Mysql, thực hiện theo các bước sau:
1mysql -uroot -p #đăng nhập vào Mysql, sẽ nhắc 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 qua trình duyệt, bạn sẽ thấy trang cài đặt như sau, điền các thông tin cần thiết và xác nhận cài đặt.
!Giao diện cài đặt Typecho Giao diện cài đặt Typecho
Trong lúc cài đặt, tôi gặp lỗi báo yêu cầu tạo file config.inc.php tại thư mục gốc website, chỉ cần tạo theo hướng dẫn là được.
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ũ và cần di chuyển dữ liệu. Các bài viết của tôi đã được sao lưu ở máy tính, tổng cộng 174 bài viết. Tôi đã sử dụng cách thủ công nhất: đăng từng bài lên blog Typecho mới, mất khá nhiều thời gian. Nếu bạn không có blog cũ, có thể bỏ qua bước này.
Bước 6: Liên kết miền
Đến giao diện quản trị của nhà cung cấp tên miền, thêm một bản ghi A trỏ tới địa chỉ IP công khai của instance Lightsail. Liên kết miền có thể thực hiện ngay sau bước 1, như vậy trong bước 4 bạn có thể truy cập tên miền thay vì IP để cài đặt Typecho. Lý do tôi liên kết miền vào cuối cùng là vì tôi cần di chuyển dữ liệu blog, khi dữ liệu đã di chuyển xong, tôi mới chuyển解析 tên miền tới blog mới, đảm bảo quá trình chuyển đổi êm ái. Tới đây, các chức năng cơ bản của blog đã được xây dựng xong, có thể yên tâm sử dụng.
Nâng cao chức năng
Với tính cách thích hoàn hảo và tinh thần khám phá của mình, tôi tiếp tục tối ưu hóa thêm các chức 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 trông rất khó chịu.
Bạn có thể bật "chức năng viết lại địa chỉ" trong "Bảng điều khiển - Thiết lập - Liên kết vĩnh cửu", sau đó chọn cấu trúc URL mà bạn thích.
Khi bật chức năng này, hệ thống có thể báo lỗi, bạn hãy kiên nhẫn bật tiếp và thực hiện hai bước dưới đây để hiệu lực.
- Sửa file cấu hình apache, vị trí
/opt/bitnami/apache2/conf/httpd.conf, nội dung sửa đổi:
1AllowOverride None
thành
1AllowOverride All
- Tạo file
.htaccessmới trong thư mục gốchtdocs, nội dung file như sau:
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 email bình luận
Chức năng thông báo email khi có bình luận giúp bạn nắm bắt động thái 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 bạn 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 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, kích hoạt và thiết lập các thông số liên quan là xong.
Đề xuất giao diện
Tôi giới thiệu một số giao diện mà tôi thích, phong cách của tôi nghiêng về sự giản dị. Hiện tại tôi đang sử dụng giao diện Simplicity của iKirby, lần đầu nhìn thấy đã rất ấn tượng. !Giao diện Simplicity Giao diện Simplicity Tất nhiên, giao diện mặc định của Typecho cũng rất đẹp, không chừng một ngày nào đó tôi sẽ trở lại dùng giao diện mặc định. Ngoài ra, AirCloud của WingLim và Rringo của memset0 cũng là những giao diện mà tôi yêu thích. !Giao diện AirCloud Giao diện AirCloud !Giao diện Ringo Giao diện Ringo
Hiển thị chú thích hình ảnh trong Markdown
Lưu ý: Nội dung phần này hoàn toàn lấy từ: Định dạng chèn hình ảnh trong Markdown như sau:
1!chú thích
Khi hiển thị, bạn muốn chú thích hiển thị dưới hình ảnh, giống như hình bên dưới.
!Chú thích hình ảnh trong Typecho Chú thích hình ảnh trong Typecho
Bạn cần sửa file var/HyperDown.php của Typecho tại dòng 357. Thay đoạn trò bắn cá
1<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">
bằng (có điều chỉnh, xem cập nhật ngày 14 keo hom nay 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 đoạn css sau vào file kiểu của giao diện. Nếu bạn dùng giao diện Simplicity, nhớ rằng nó sử dụng style.min.css chứ không phải style.css.
1/*Căn giữa hình ảnh*/
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}
Trong bài viết này có khá nhiều hình ảnh, bạn có thể thấy 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, tôi đã làm theo hoàn toàn bài viết này, không cần thêm chi tiết.
Có một bước cần tải chứng chỉ lên máy chủ Lightsail. Vì chưa nghiên cứu cách kết nối FTP của Lightsail, tôi đã tải chứng chỉ lên dịch vụ lưu trữ hình ảnh trước, sau đó dùng lệnh wget để tải về từ dịch vụ lưu trữ hình ảnh, tuy hơi lắt léo nhưng hiệu quả.
Lưu trữ hình ảnh
Nhân dịp này, tôi đã chuyển sang sử dụng dịch vụ lưu trữ hình ảnh bên thứ ba, với một số yêu cầu sau:
May mắn thay, UpYun đáp ứng được cả bốn yêu cầu. Just my Markdown editor MWeb cũng hỗ trợ UpYun, thật tuyệt vời. Cấu hình dịch vụ lưu trữ rất đơn giản, không cần nói thêm. Chỉ cần lưu ý rằng, nếu bạn sử dụng MWeb hoặc các công cụ khác để tải lên hình ảnh, cần tạo một nhân viên vận hành trong phần quản trị của UpYun.
Kết luận
Không hiểu sao, cứ nghịch mấy thứ này là dễ nghiện, gần đây tan sở về nhà sớm nằm giường nghe "Dou Po Cang Qiong", mấy ngày nay lại ngồi xử lý này nọ mà không mệt, thường là đã hơn 12 giờ đêm mà không hay. Luôn cảm thấy mình phù hợp làm lập trình viên, tiếc là bị sản phẩm làm lỡ dở.
Cập nhật ngày 14 tháng 3 năm 2020
Trong file HyperDown.php, tôi đã sửa 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 file 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 thay đổi trên đạt được các chức năng:
Hình ảnh cuối cùng như sau: !Hình ảnh cập nhật Hình ảnh cập nhật