Nội dung
- Yêu cầu - Bước 1 - Cài đặt và khởi tạo Hexo - Bước 2 - Cài đặt file cấu hình chính của Hexo - Bước 3 - Tạo và xuất bản một bài đăng mới - Bước 4 - Chạy Server Kiểm tra - Bước 5 - Cài đặt triển khai Git - Bước 6 - Cài đặt Nginx - Bước 7 - Tạo Git Hooks - Bước 8 - Tạo tập lệnh triển khai - Bước 9 - Chạy Tập lệnh Triển khai - Bước 10 - Kiểm tra hệ thống file của Hexo (Tùy chọn) - Kết luận

Thứ năm, 04/02/2016 | 00:00 GMT+7

Cách tạo blog với Hexo trên Ubuntu 14.04

Hexo là một khuôn khổ viết blog tĩnh được xây dựng trên Node.js. Sử dụng Hexo, bạn có thể xuất bản tài liệu Markdown dưới dạng bài đăng trên blog. Các bài đăng và nội dung trên blog được xử lý và chuyển đổi thành HTML / CSS, được lấy từ các file chủ đề mẫu mặc định hoặc tùy chỉnh (giống như các trình tạo blog tĩnh khác, như Jekyll và Ghost). Tất cả phần mềm trong Hexo đều là module , vì vậy bạn có thể cài đặt và cài đặt chính xác những gì bạn cần.

Hướng dẫn này sẽ cài đặt Hexo với việc triển khai được hỗ trợ bởi GitHub và Nginx.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

Một server Ubuntu 14.04 với user không phải root có quyền sudo , bạn có thể cài đặt theo hướng dẫn cài đặt server ban đầu này .
Git đã được cài đặt trên server của bạn, bạn có thể thực hiện theo phần “Cách cài đặt Git với Apt” và “Cách cài đặt Git” của hướng dẫn Git này .
Node.js được cài đặt trên server của bạn, bạn có thể cài đặt theo phần “Cách cài đặt bằng NVM” của hướng dẫn Node.js này .
Nginx được cài đặt trên server của bạn, bạn có thể cài đặt theo hướng dẫn Nginx này .
Một account trên GitHub , là một server repository Git .

Bước 1 - Cài đặt và khởi tạo Hexo

Phần ban đầu này chứa mọi thứ bạn cần để cài đặt và chạy Hexo trên server của bạn .

Đầu tiên, đảm bảo các gói hệ thống được cập nhật.

sudo apt-get update && sudo apt-get upgrade

Một số gói phần mềm và thành phần tạo nên khuôn khổ viết blog Hexo. Ở đây, ta sẽ kéo xuống hai trong số những thứ cần thiết nhất sử dụng npm , trình quản lý gói Node.js.

Đầu tiên, hexo-cli , là quan trọng nhất và cung cấp các lệnh Hexo cốt lõi.

npm install hexo-cli -g

Server thứ hai, hexo-server , là server tích hợp được dùng để xem trước và kiểm tra blog của bạn trước khi triển khai.

npm install hexo-server -g

Có nhiều gói hơn nữa có sẵn; đây chỉ đơn giản là những yếu tố cơ bản bạn cần để cài đặt và chạy blog Hexo của bạn . Bạn có thể duyệt thêm các gói có sẵn như một phần của khung Hexo trên tìm kiếm npm.

Tiếp theo, ta cần cài đặt các file cơ sở cho blog mới của bạn. May mắn là Hexo thực hiện tất cả các công việc cơ bản chỉ với một lệnh duy nhất. Tất cả những gì bạn cần làm là cung cấp một đường dẫn hoặc folder mà bạn muốn các file cấu hình blog cư trú.

Một tùy chọn thuận tiện là folder chính của user của bạn.

hexo init ~/hexo_blog

Trong vòng một hoặc hai giây, bạn sẽ nhận được một số kết quả :

Output
. . .  INFO  Copying data to ~/hexo_blog INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!  . . .

Tiếp theo, di chuyển đến folder có các file cấu hình của bạn.

cd ~/hexo_blog

Sau đó chạy lệnh cài đặt nói trên.

npm install

Bạn có thể bỏ qua bất kỳ cảnh báo phụ thuộc tùy chọn nào từ npm . Sau vài giây thời gian xử lý, ta sẽ có các file cấu hình cơ sở của bạn .

Bước 2 - Cài đặt file cấu hình chính của Hexo

Hãy xem các file cấu hình cơ sở trong folder Hexo của ta .

ls -l

Output
-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules -rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

Trong số tất cả các file hiện có, file _config.yml được cho là quan trọng nhất. Tất cả các cài đặt cốt lõi được lưu trữ ở đây và nó là trung tâm của blog. Nếu bạn cần chỉnh sửa điều gì đó trong tương lai, nó có thể nằm trong file này.

Ta sẽ cài đặt một số tùy chỉnh cơ bản tiếp theo bằng cách thực _config.yml từng phần _config.yml . Mở _config.yml bằng nano hoặc editor bạn muốn .

nano _config.yml

Ở đầu file , bạn sẽ thấy một phần có nhãn Trang web :

Bản root ~ / hexo_blog / _config.yml

. . .  # Site title: Hexo subtitle: description: author: John Doe language: timezone:  . . .

Bốn dòng đầu tiên là tên blog của bạn, phụ đề phù hợp, mô tả và tên tác giả. Bạn có thể chọn bất cứ điều gì bạn thích cho các tùy chọn này. Lưu ý không phải tất cả các chủ đề Hexo đều hiển thị dữ liệu này, vì vậy nó chủ yếu đóng role là metadata trang web nếu có liên quan.

Hai tùy chọn tiếp theo là ngôn ngữ và múi giờ. Tùy chọn ngôn ngữ chỉ sử dụng mã ISO-639-1 gồm 2 chữ cái . Múi giờ được đặt thành múi giờ của server của bạn theo mặc định và sử dụng định dạng "cơ sở dữ liệu tz" . Nếu bạn cần thay đổi một trong hai, hãy đảm bảo chúng ở các định dạng này.

Dưới đây là một số giá trị mẫu:

Ví dụ ~ / hexo_blog / _config.yml

. . .  #Site title: DigitalOcean's Hexo Blog   subtitle: Simple Cloud Hosting, Built for Developers. description: Deploy an SSD cloud server in 55 seconds. author: Sammy Shark  language: en  timezone: America/New_York  . . .

Phần tiếp theo là phần URL . Ở đây, ta muốn thay đổi tùy chọn URL. Bởi vì ta hiện không có domain cho server của bạn , ta có thể nhập địa chỉ IP thay thế cho url: setting tại đây.

~ / hexo_blog / _config.yml

. . .  # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://your_server_ip root: / permalink: :year/:month/:day/:title/ permalink_defaults:  . . .

Tùy chọn cuối cùng mà ta muốn thay đổi là default_layout: trong phần Viết xuống phía dưới một chút. Điều này tạo ra các bài viết mới dưới dạng bản nháp nên chúng phải được xuất bản trước khi hiển thị trên trang web blog.

Đặt nó thành draft ngay bây giờ như ta đã làm dưới đây:

~ / hexo_blog / _config.yml

. . .  # Writing new_post_name: :title.md # File name of new posts default_layout: draft titlecase: false # Transform title into titlecase  . . .

Lưu và thoát khỏi file ngay bây giờ. Ta sẽ quay lại file này một cách ngắn gọn cho các giai đoạn triển khai ở cuối hướng dẫn.

Bước 3 - Tạo và xuất bản một bài đăng mới

Quá trình tạo bài đăng (hoặc bản nháp, giống như ta đã cấu hình trước đó) bắt đầu bằng cách đưa ra lệnh sau, trong đó bài đăng đầu tiên là tên bài đăng bạn muốn tạo.

hexo new first-post

Bạn sẽ thấy kết quả sau:

Output
INFO  Created: ~/hexo_blog/source/_drafts/first-post.md

Mở bài viết mới để chỉnh sửa.

nano ~/hexo_blog/source/_drafts/first-post.md

Mọi bài viết phải được cài đặt vấn đề chính . Front-matter là một khối ngắn của JSON hoặc YAML cấu hình các cài đặt như tiêu đề bài đăng của bạn, ngày xuất bản, thẻ, v.v. Phần cuối của vấn đề đầu tiên được chỉ định bởi --- hoặc ;;; đánh dấu. Sau vấn đề đầu tiên, bạn có thể viết bài đăng trên blog của bạn bằng cú pháp Markdown.

Thay thế nội dung mặc định trong first-post.md bằng các tùy chọn ví dụ bên dưới trong file để bắt đầu bài đăng. Bạn có thể tùy chỉnh chúng nếu bạn muốn.

Ví dụ ~ / hexo_blog / source / _drafts / first-post.md

title: DigitalOcean's First Post tags:   - Test   - Blog categories:   - Hexo comments: true date: 2015-12-31 00:00:00 ---  ## Markdown goes here.  **This is our first post!**

Lưu và thoát khỏi file .

Tệp Markdown mà ta vừa tạo sẽ được giữ trong ~/hexo_blog/source/_drafts cho đến khi ta xuất bản nó. Bất kỳ bài đăng nào bên trong folder _drafts sẽ không hiển thị đối với khách truy cập trên trang web.

Tiếp theo, xuất bản bài đăng vì vậy nó sẽ có thể truy cập bởi khách.

hexo publish first-post

Kết quả này trong:

Output
INFO  Published: ~/hexo_blog/source/_posts/first-post.md

Bây giờ bài viết sẽ hiển thị khi ta bắt đầu lưu trữ blog.

Bước 4 - Chạy Server Kiểm tra

Bây giờ các file cấu hình trước đó đã hoàn tất và ta có một bài đăng ví dụ đã sẵn sàng. Tiếp theo, ta sẽ khởi động server thử nghiệm.

hexo server

Có thể buộc server thử nghiệm hiển thị các bài đăng trong folder _drafts . Để làm điều này, hãy bao gồm tùy chọn -d khi chạy lệnh cuối cùng.

Bây giờ ta có server thử nghiệm đang chạy, bạn có thể xem blog của bạn bằng cách truy cập http:// your_server_ip :4000/ trong trình duyệt yêu thích của bạn. Bạn sẽ thấy bài đăng kiểm tra “Hello World” được định nghĩa của Hexo và bài kiểm tra mà ta vừa tạo.

Hình ảnh blog Hexo của DigitalOcean

Thoát khỏi server thử nghiệm bằng cách nhấn CTRL+C trong terminal .

Server thử nghiệm được sử dụng tốt nhất để xem trước các thay đổi và bổ sung cho blog của bạn. Một khi thấy ổn với giao diện của nó, đã đến lúc triển khai nó lên web.

Bước 5 - Cài đặt triển khai Git

Có một số cách khác nhau để triển khai những gì ta đã làm cho đến nay với Hexo. Cách tiếp cận trong hướng dẫn này là sử dụng Git để lưu trữ các file tĩnh, hook để chuyển tiếp chúng và sau đó là Nginx để lưu trữ chúng. Tuy nhiên, có hỗ trợ cho Heroku, Git, Rsync, OpenShift, FTPSync, v.v. với các gói khuôn khổ bổ sung.

Để tiếp tục, bạn cần một repository Git để lưu trữ các file HTML tĩnh mà Hexo tạo ra. Để đơn giản hóa việc này, ta sẽ sử dụng repository Git công khai do GitHub cung cấp.

Tạo một repository mới trên GitHub có tên là hexo_static theo các bước tạo repository của họ. Đảm bảo chọn tùy chọn “Công khai” và đánh dấu vào hộp kiểm Khởi tạo repository này bằng hộp kiểm README .

Sau khi bạn đã tạo repository , hãy mở file cấu hình Hexo chính để chỉnh sửa.

nano _config.yml

Ở cuối file , có một phần có nhãn Triển khai :

Bản root ~ / hexo_blog / _config.yml

. . .  # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy:   type:

Điền vào các tùy chọn để deploy: như hình dưới đây. Lưu ý các repo dòng nên chứa URL vào kho Git bạn vừa tạo ra, vì vậy hãy chắc chắn để thay thế your_github_username với Tên truy nhập account GitHub của bạn .

~ / hexo_blog / _config.yml

deploy:   type: git   repo: https://github.com/your_github_username/hexo_static.git   branch: master

Lưu và thoát khỏi file .

Bởi vì ta đã chọn sử dụng Git để triển khai, ta cần gói Hexo gửi đánh dấu tĩnh của ta đến repository Git.

Sử dụng npm để cài đặt nó.

npm install hexo-deployer-git --save

Đến đây bạn có thể kiểm tra triển khai tới repository hexo_static và cung cấp cho nó commit tự động Hexo đầu tiên của nó thông qua:

hexo generate && hexo deploy

Nhập chi tiết xác thực GitHub của bạn khi được yêu cầu .

Đây là kết quả kết quả thành công trông như thế nào (hoặc tương tự) sau khi sử dụng các lệnh này. Trừ các thế hệ file và chèn Git:

Output
To https://github.com/username/hexo_static.git.  * [new branch]      master -> master Branch master set up to track remote branch master from https://github.com/username/hexo_static.git. INFO  Deploy done: git

Bước 6 - Cài đặt Nginx

Ta sẽ sử dụng cài đặt web server Nginx cơ bản để phục vụ blog Hexo vì Nginx phục vụ nội dung tĩnh rất tốt và blog của ta sẽ chỉ chứa các file tĩnh. Có những tùy chọn khả thi khác cũng hoạt động tốt, như trang GitHub hoặc web server như Apache, nhưng lựa chọn này đặc biệt đảm bảo một số hiệu quả và quyền kiểm soát cá nhân đối với lưu trữ.

Đầu tiên, tạo các folder hệ thống, mà ta sẽ yêu cầu Nginx sử dụng để lưu trữ.

sudo mkdir -p /var/www/hexo

Sau đó, cấp cho user Ubuntu hiện tại của bạn quyền sở hữu các folder hệ thống web server này.

sudo chown -R $USER:$USER /var/www/hexo

Cập nhật các quyền phù hợp với quyền sở hữu.

sudo chmod -R 755 /var/www/hexo

Mở khối server Nginx default để chỉnh sửa.

sudo nano /etc/nginx/sites-available/default

Bỏ qua các vùng và dòng của file được comment , thực hiện thay đổi đối với phần hiện hoạt của mã cấu hình để chỉ thị root trỏ đến folder /var/www/hexo .

/ etc / nginx / sites-available / default

. . .  server {     listen 80 default_server;     listen [::]:80 default_server ipv6only=on;      root /var/www/hexo;     index index.html index.htm;  . . .

Lưu và thoát khỏi file . Nếu trong tương lai bạn cài đặt một domain cho server này, hãy quay lại file này và thay thế mục nhập server_name trong cùng một khối bằng domain mới của bạn.

Cuối cùng, khởi động lại dịch vụ Nginx để các thay đổi có hiệu lực.

sudo service nginx restart

Bước 7 - Tạo Git Hooks

Trong bước này, ta sẽ liên kết repository hexo_static với một repository Git khác, vì vậy ta có thể gửi các file HTML tĩnh qua folder web server (khi được kích hoạt).

Đầu tiên, khởi tạo một repository Git trống mới (không phải trên GitHub). Mục đích duy nhất của repository này sẽ là chuyển tiếp nội dung của repository hexo_static của ta vào folder web server .

git init --bare ~/hexo_bare

Tạo một file hook mới bên trong folder hooks do Git tạo:

nano ~/hexo_bare/hooks/post-receive

Thêm hai dòng mã bên dưới vào file . Điều này chỉ định cây công việc Git (có mã nguồn) và folder Git (có cài đặt cấu hình, lịch sử và hơn thế nữa).

~ / hexo_bare / hooks / post-accept

#!/bin/bash  git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

Lưu và thoát khỏi file sau khi hoàn thành.

Làm cho file post-receive thực thi được.

chmod +x ~/hexo_bare/hooks/post-receive

Bây giờ ta phải sao chép repository triển khai hexo_static , mà ta đã tạo ở bước 5, vào server của ta . Đảm bảo rằng bạn thay thế username trong lệnh tiếp theo này bằng tên user account GitHub của bạn .

git clone https://github.com/username/hexo_static.git ~/hexo_static

Di chuyển vào repository nhân bản.

cd ~/hexo_static

Cuối cùng, thêm repository trống của ta từ trước đó dưới dạng điều khiển từ xa Git có tên là trực tiếp .

git remote add live ~/hexo_bare

Bước 8 - Tạo tập lệnh triển khai

Một tập lệnh shell ngắn được dùng để bắt đầu và kích hoạt toàn bộ quá trình triển khai mà ta đã cài đặt ở đây. Điều này nghĩa là ta sẽ không phải chạy một số lệnh Hexo riêng lẻ hoặc kích hoạt móc Git với nhiều lệnh.

Di chuyển trở lại folder blog Hexo ban đầu của ta và tạo một file cho tập lệnh triển khai.

cd ~/hexo_blog  
nano hexo_git_deploy.sh

Dán mã sau vào file :

hexo_blog / hexo_git_deploy.sh

#!/bin/bash  hexo clean hexo generate  hexo deploy  ( cd ~/hexo_static ; git pull ; git push live master )

Lưu và thoát khỏi file .

Tập lệnh chứa ba lệnh hexo :

clean xóa mọi file tĩnh đã tạo trước đó trong folder chung.
generate tạo các file HTML tĩnh từ phần đánh dấu của ta , bên trong folder chung.
deploy gửi các file tĩnh mới được tạo dưới dạng commit đến repository Git “sống” mà ta đã xác định trong _config.yml trước đó.

Dòng cuối cùng, ( cd ~/hexo_static ; git pull ; git push live master ) , kích hoạt Git hook và cập nhật folder lưu trữ web server với các file tĩnh HTML của ta .

Hãy nhớ lưu và thoát khỏi file khi nó đã được điền đầy đủ.

Làm cho tập lệnh triển khai mới có thể thực thi được để hoàn thành bước này.

chmod +x hexo_git_deploy.sh

Bước 9 - Chạy Tập lệnh Triển khai

Chạy tập lệnh triển khai mà ta đã tạo ở bước trước để kiểm tra quy trình triển khai tổng thể.

./hexo_git_deploy.sh

Chờ các lệnh và quá trình xử lý hoàn tất, nhập bất kỳ chi tiết xác thực GitHub nào trong quá trình này. Sau đó, hãy xem các file trong folder /var/www/hexo .

ls /var/www/hexo

Output
2015  2016  archives  categories  css  fancybox  index.html  js  tags

Thư mục web server của bạn bây giờ sẽ được điền với các file trang web của blog, nghĩa là truy cập web server thông qua trình duyệt của bạn sẽ đưa bạn đến blog.

Truy cập http:// your_server_ip / trong trình duyệt yêu thích của bạn để xem blog của bạn trực tiếp (không sử dụng server thử nghiệm).

Để áp dụng các thay đổi blog mới trong tương lai, tất cả những gì bạn cần làm là chạy lại tập lệnh hexo_git_deploy.sh . Hãy nhớ kiểm tra các bài viết mới để tìm lỗi với hexo server hexo server -d hoặc các lệnh hexo server -d trước khi triển khai.

Bước 10 - Kiểm tra hệ thống file của Hexo (Tùy chọn)

Phần này là tùy chọn và cung cấp một số thông tin cơ bản về phần còn lại của hệ thống file Hexo. Không có file nào trong số này cần thay đổi hoặc thay đổi đối với hướng dẫn này, nhưng bạn nên biết mục đích chung của từng file nếu bạn muốn sử dụng chúng trong tương lai.

Bố cục của các file và folder trông như thế này:

Hexo files and directories
├── _config.yml ├── node_modules ├── package.json ├── scaffolds ├── source |   └── _posts └── themes

node_modules

Trong folder này, Hexo lưu trữ các module bạn download qua npm để sử dụng với blog của bạn. Ở cuối hướng dẫn này, sẽ chỉ có các gói mà ta đã download ở bước 1.

Output
hexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

Một số module không quen thuộc này được đóng gói như một phần của gói cốt lõi. Thường không có nhu cầu thực sự để thay đổi hoặc xóa các file ở đây.

package.json

Tệp JSON này chứa các cấu hình và version gói Hexo của ta mà Hexo sẽ sử dụng cho blog của bạn.

Nếu bạn được yêu cầu cập nhật, hạ cấp hoặc xóa gói theo cách thủ công , bạn có thể thực hiện điều đó bằng cách thay đổi các giá trị trong đây. Thông thường, bạn sẽ chỉ cần làm điều này nếu xung đột phát sinh trong Hexo, điều này tương đối không phổ biến.

giàn giáo

Khi tạo các bài đăng mới, Hexo có thể dựa trên các file mẫu trong folder scaffolds .

Trước tiên, bạn phải tạo file mẫu và đặt chúng ở đây để sử dụng chúng. Tính năng này là tùy chọn và chỉ cần thiết nếu bạn muốn các bố cục lặp lại cho các bài đăng Hexo trong tương lai của bạn .

nguồn

Các bài đăng mà bạn xuất bản và muốn hiển thị với công chúng được lưu giữ trong _posts và khi chúng được tạo, folder _drafts cùng với bất kỳ trang nào do user tạo khác cũng có ở đây.

Phần lớn nội dung Markdown trên blog của bạn được Hexo đặt bên trong đây vào một trong những folder con này.

chủ đề

Các chủ đề tùy chỉnh, sau khi được download , nên được giữ ở đây. Hầu hết các chủ đề đều có file _config.yml của riêng _config.yml để giữ cài đặt cấu hình tương đương của chúng. Ta mắc kẹt với chủ đề mặc định cho các mục đích của hướng dẫn này.

Kết luận

Hexo còn nhiều điều hơn những gì được đề cập trong hướng dẫn này, nhưng đây là một khởi đầu tốt để xây dựng trang blog mới của bạn. Tài liệu về Hexo rất ngắn gọn nếu bạn muốn tìm hiểu thêm. Xem xét cài đặt một trong các chủ đề tùy chỉnh có sẵn cho Hexo là bước tiếp theo để phát triển blog của bạn.

Tags:

Các tin liên quan