Định cấu hình Gatsby nguồn mở với WordPress của bạn để mang lại trải nghiệm người dùng và hiệu suất tổng thể lớn hơn. Hãy cùng học cách sử dụng trình tạo trang web tĩnh này.
Tổng quan
GatsByjs là một trình tạo trang tĩnh được sử dụng lại dựa trên phản ứng miễn phí và nguồn mở. Nó sử dụng cấu hình trước mạnh mẽ để xây dựng một trang web chỉ sử dụng các tệp tĩnh cho tải trang cực kỳ nhanh. WordPress là một nền tảng viết blog nguồn mở tuyệt vời. Do đó, có rất nhiều người biết cách tìm hiểu xem một trang web là trang web WordPress để họ có thể hack nó và đánh cắp thông tin. Sử dụng Gatsby WordPress cùng nhau sẽ cung cấp cho bạn sức mạnh tương tự của quản lý nội dung WordPress và tốc độ của Gatsby. Trong bài viết này, chúng tôi sẽ xem xét Gatsby là gì và tại sao bạn cần sử dụng nó với phần mềm CMS. Sau đó, chúng tôi sẽ đi sâu vào chi tiết về cách sử dụng WordPress và Gatsby cùng nhau để xây dựng trải nghiệm trang web tuyệt vời. Hãy bắt đầu!
- Gatsby là gì?
- Ưu và nhược điểm của việc sử dụng WordPress và Gatsby
- Cách sử dụng Gatsby với WordPress
- Kết luận
Gatsby là gì
Gatsby là một trình tạo trang web tĩnh. Điều này có nghĩa là Gatsby tạo ra các tệp HTML tĩnh được tải lên máy chủ trang web của bạn. Khi một khách truy cập hạ cánh trên trang web của bạn, các tệp tĩnh này được phục vụ cho trình duyệt của họ, thay vì nội dung động WordPress thường phục vụ. Đây là một khung nguồn miễn phí và mở dựa trên React giúp các nhà phát triển xây dựng các trang web và ứng dụng nhanh chóng.
Những ưu và nhược điểm của việc sử dụng WordPress và Gatsby
Theo chính thức của Gatsby, tài liệu, họ đã biên soạn một bảng, người mà sự kết hợp của Gatsby WordPress là tuyệt vời và người mà nó không phải là người. Để dễ dàng, tôi đã liệt kê những người ở đây. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress và Gatsby là tuyệt vời cho {{LINE_27}} {{LINE_28}} {{LINE_29}} Các nhóm nội dung thoải mái với trải nghiệm chỉnh sửa nội dung WordPress {{LINE_31}} {{LINE_32}} Các nhóm phát triển đánh giá cao bằng cách sử dụng các công nghệ nguồn mở, phổ biến {{LINE_34}} {{LINE_35}} Thiết kế lại các trang web có nội dung đã được lưu trữ trong WordPress {{LINE_37}} {{LINE_38}} Các đội muốn sở hữu dữ liệu và ngăn xếp công nghệ của họ {{LINE_40}} {{LINE_41}} Quy trình kiểm soát truy cập phức tạp hoặc các hạn chế mô hình nội dung {{LINE_43}} {{LINE_44}} Các dự án mà bảo mật là quan trọng {{LINE_46}} {{LINE_47}} Các dự án nhu cầu cao trong đó hiệu suất là tối quan trọng {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress và Gatsby không tốt cho {{LINE_55}} {{LINE_56}} {{LINE_57}} Các nhóm yêu cầu sử dụng các chủ đề UI WordPress {{LINE_59}} {{LINE_60}} Những người đang tìm kiếm một CMS Cloud được quản lý đầy đủ {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Bên cạnh những điểm chính thức này, tôi sẽ muốn liệt kê một số ưu và nhược điểm của việc sử dụng Gatsby WordPress {{LINE_67}} {{LINE_68}} {{LINE_69}} Ưu điểm {{LINE_71}} {{LINE_72}} {{LINE_73}} Tốc độ tải nhanh hơn - Trang web tĩnh tải nhanh hơn động. Kết quả là, nó tác động đến tốc độ tải trang của bạn và xếp hạng SEO. {{LINE_75}} {{LINE_76}} Ít chi phí máy chủ - vì các tệp tĩnh không cần phần mềm đặc biệt do đó các trang HTML tĩnh cũng có thể được phục vụ từ các máy chủ rẻ hơn. {{LINE_78}} {{LINE_79}} An toàn hơn - Đối với các trang web tĩnh, không có thành phần di chuyển nào của các bộ phận do đó không có cơ hội để tin tặc khai thác phần mềm của bạn. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Nhược điểm {{LINE_89}} {{LINE_90}} {{LINE_91}} Học đường cong - Nó đòi hỏi các kỹ năng bổ sung cho các nhà phát triển. Giống như học tập Reactjs và GraphQL {{LINE_93}} {{LINE_94}} Chỉ nội dung tĩnh - nếu bạn cần phục vụ bất kỳ nội dung động nào. Sau đó, Gatsby là người dành cho bạn. Nó chỉ có thể máy chủ các tập tin tĩnh. Do đó, bạn không thể có bất kỳ hệ thống bình luận nào lấy dữ liệu từ cơ sở dữ liệu. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}
Cách sử dụng Gatsby với WordPress
Trước khi bạn có thể cài đặt Gatsby, bạn cần cài đặt NodeJS và NPM trong môi trường trang web của bạn.
Bước 1 - Cài đặt Gatsby
npm install -g gatsby-cli
Lệnh này tự động chạy trình cài đặt. Nó tải xuống và cài đặt tất cả các phụ thuộc trước khi cài đặt Gatsby. Sau khi hoàn thành, bạn có thể bắt đầu tạo trang web Gatsby đầu tiên của mình.
gatsby new gatsby-site
Điều này sẽ tải xuống mẫu khởi động Gatsby, và đặt nó vào thư mục/gatsby-wordpress. Sau khi cài đặt hoàn tất, bạn có thể mở phiên bản phát triển của trang web
gatsby develop
Bây giờ, trong trình duyệt web của bạn, nhập http: // localhost: 8000 và mẫu mặc định của bạn sẽ mở.
Bước 2 - Kết nối Gatsby với WordPress
Trong phần này của Gatsby WordPress Guide, chúng tôi sẽ kết nối trình tạo trang web tĩnh này với WordPress. Bạn có một trang web tĩnh cơ bản, nhưng bạn cần tích hợp nó với WordPress. Điều này trỏ trang web Gatsby của bạn vào địa chỉ của blog WordPress của bạn, cho phép nó lấy dữ liệu mới nhất khi bạn chạy máy chủ phát triển. Sau khi kết nối, Gatsby sẽ xây dựng một trang web tĩnh dựa trên mẫu hiện tại của bạn. Cài đặt plugin WordPress nguồn Gatsby từ kho lưu trữ NPM.
npm install gatsby-source-wordpress
Bước 3 - Cấu hình Gatsby
Đặt mã sau vào tệp gatsby-config.js của bạn
module.exports = {
...
plugins: [
...,
{
resolve: `gatsby-source-wordpress`,
options: {
// your WordPress source
baseurl: `wpexample.com`,
aliases: - `wpexample.com`,
protocol: `https`,
// is it hosted on wordpress.com, or self-hosted?
hostingWPCOM: false,
// does your site use the Advanced Custom Fields Plugin?
useACF: false
}
},
]
}
Cập nhật mã này để trỏ đến trang web WordPress của bạn. Nếu trang web của bạn được lưu trữ cục bộ, sau baseURL, bạn có thể sử dụng localhost: 8888/wordpress thay vì trang web của bạn URL. Sau khi lưu tệp, bạn sẽ cần xây dựng các mẫu trang của mình.
Bước 4 - Mẫu trang xây dựng
Các mẫu trang xây dựng cho phép Trình tạo trang web này tạo một bài đăng cho mỗi trang trên trang web WordPress của bạn. Plugin nguồn sẽ lấy dữ liệu bạn cần từ WordPress cho các trang này, nhưng bạn sẽ phải tạo mẫu thiết kế. Trong tệp gatsby-node.js của bạn, thêm mã sau
const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// query content for WordPress posts
const result = await graphql(`
query {
allWordpressPost {
edges {
node {
id
slug
}
}
}
}
`)
const postTemplate = path.resolve(`./src/templates/post.js`)
result.data.allWordpressPost.edges.forEach(edge => {
createPage({
// will be the url for the page
path: edge.node.slug,
// specify the component template of your choice
component: slash(postTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this posts's data.
context: {
id: edge.node.id,
},
})
})
}
Sau khi gọi tất cả dữ liệu, Gatsby sẽ tạo một trang cho mỗi bài đăng. Sử dụng lệnh phát triển, bạn có thể điều hướng đến từng trang mới bằng URL được tạo.
Phần kết luận
Trong hướng dẫn Gatsby WordPress này, chúng tôi đã đề cập đến cách tạo một trang web Gatsby từ WordPress. Chúng tôi đã học được những ưu và nhược điểm của hai phần mềm nguồn mở này là gì. Chúng tôi cũng đề cập đến cách cài đặt và bắt đầu với môi trường phát triển Gatsby. Cuối cùng, containerize.com đang viết bài về các sản phẩm nguồn mở hơn nữa. Do đó, vui lòng giữ liên lạc với danh mục Nền tảng nguồn mở Blog để biết tin tức và cập nhật thường xuyên.