Fullstack:
Đây là yêu cầu công nghệ mà chúng tôi sẽ làm việc trong bài viết này:- Công cụ (vd: gitpod.io, typora.io)
- Trình tạo trang web tĩnh (vd: Metalsmith)
- Github
- Vercel
Tìm hiểu về Metalsmith:
- TIỆN LỢI: Metalsmith làm việc với tất cả các công cụ và định dạng dữ liệu mà bạn đã biết và sử dụng: NodeJS, npm, markdown, json, yaml và ngôn ngữ tạo khuôn mẫu mà bạn chọn.
- ĐƠN GIẢN: Metalsmith dịch cây thư mục thành các đối tượng Javascript thuần túy mà bạn có thể thao tác dễ dàng với lựa chọn plugin của mình.
- KẾT HỢP: Bạn không cần phải bẻ cong nhu cầu dự án của mình thành một khuôn khổ hoặc công cụ cụ thể. Metalsmith cung cấp cho bạn toàn quyền kiểm soát cách bạn muốn lên ý tưởng, cấu trúc và xây dựng dự án của mình.
- LINH HOẠT: Sử dụng Metalsmith để tạo bất kỳ thứ gì từ một trang web tĩnh, đến một công cụ giàn giáo, sao lưu, dòng lệnh hoặc triển khai. Cấu hình qua mã hoặc mã qua cấu hình: Metalsmith hỗ trợ cả hai.
Xây dựng website:
Tạo Repositories trong Github
- Đăng nhập hoặc đăng ký mới một tài khoản Github.
- Truy cập góc phải Github nhấn vào dấu [+] và tạo mới một Repo.
- Đặt tên cho Repo và nhấn Create repository.
Vậy là xong bước tạo kho lưu trữ code.
Build code bằng Gitpod
- Tạo tài khoản tại gitpod.io, lưu ý tạo bằng tài khoản Github ở trên để dễ push code.
- Tại giao diện Workspace chọn New Workspace.
- Tìm link kho lưu trữ Github trong cửa sổ mở ra ta sẽ có giao diện xử lý code như bên dưới. Nhìn quen không? Visua studie code chứ gì!!!
- Lần lượt chạy các câu lệnh dưới đây trong cửa sổ terminal:
npm init -y npm install --save-dev metalsmith @metalsmith/markdown @metalsmith/layouts jstransformer-handlebars
- npm init thông thường sẽ hỏi bạn một số câu hỏi về cách gọi dự án của bạn, cấp phép, v.v. Trong trường hợp này, chúng tôi đang sử dụng -y, cờ chỉ chấp nhận tất cả các giá trị mặc định. Bạn sẽ kết thúc với một tệp package.json xác định một dự án có tên là "dự án" có tệp chính là index.js, là thông tin liên quan cho ví dụ này. Bây giờ chúng ta đã khởi tạo npm, chúng ta có thể sử dụng nó để cài đặt Metalsmith và các plugin mà chúng ta cần cho dự án của mình.
- @metalsmith/markdown @metalsmith/layouts là các tùy chọn bắt buộc tại dự án này. Mở rộng ra bạn muốn sử dụng thêm plugin gì thì thiết lập để cài đặt thêm theo API tại Metalsmith.
- Khởi tạo thư mục/file cho dự án:
touch index.js mkdir layouts touch layouts/default.hbs mkdir src touch src/index.md
├── index.js ├── layouts │ └── default.hbs ├── node_modules ├── src │ └── index.md ├── package-lock.json └── package.json
- Nội dung trong các file:
- src/index.md
--- title: Example description: This page is just an example. layout: default.hbs --- ## Lorem ipsum Dolor sit amet, consectetur __strong__ adipiscing elit. Morbi faucibus, *em* purus at gravida dictum, libero arcu convallis lacus, in commodo libero metus eu nisi. Nullam commodo, neque nec porta placerat, nisi est fermentum augue, [link](https://metalsmith.io) vitae gravida tellus sapien sit amet tellus. Aenean non diam orci. Proin quis elit turpis. Suspendisse non diam ipsum. ### Suspendisse nec ullamcorper odio. - Vestibulum arcu mi, sodales non suscipit id, ultrices ut massa. - Sed ac sem sit amet arcu malesuada fermentum. - Nunc sed.
- layouts/default.hbs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta name="description" content="{{ description }}" />
</head>
<body>
<h1>{{{ title }}}</h1>
{{{ contents }}}
</body>
</html>- index.js
// Get our requirements, installed by npm
const Metalsmith = require('metalsmith'),
markdown = require('@metalsmith/markdown'),
layouts = require('@metalsmith/layouts');
// Run Metalsmith in the current directory.
// When the .build() method runs, this reads
// and strips the frontmatter from each of our
// source files and passes it on to the plugins.
Metalsmith(__dirname)
// Use @metalsmith/markdown to convert
// our source files' content from markdown
// to HTML fragments.
.use(markdown())
// Put the HTML fragments from the step above
// into our template, using the Frontmatter
// properties as template variables.
.use(layouts())
// And tell Metalsmith to fire it all off.
.build(function(err, files) {
if (err) { throw err; }
});Chạy thử
Sử dụng câu lệnh sau trong cửa sổ terminal:
node index
Toàn bộ source code như bên dưới.
Push code lên Github
Trước khi push code lên Github, hãy xóa thư mục Build để trống re-soure.
Để push code lên github thì chạy các câu lệnh sau trong terminal:
# run commands one after the other $ touch .gitignore && echo 'node_modules' > .gitignore $ git add . $ git commit -m 'first commit' $ git push -u origin main
Xây dựng website với Vercel
- Truy cập vercel.com và tạo một tài khoản mới.
- Chọn Addd New... > Project.
- Import repo Github vừa push code lên.
- Trong cấu hình Configure Project thì thiết lập như bên dưới:
- Nhấn Deploy và chờ một lát.
- Vậy là xong. Chọn Go to Dashboard để đến màn hình Project. Chọn tiếp Visit để mở link.
Mọi thắc mắc các bạn cứ để lại bình luận bên dưới mình sẽ hỗ trợ sau nhé.