Nhấn vào theo dõi chúng tôi để cập nhật các bài viết mới nhất. Theo dõi!

Cách tạo website đơn giản với Vercel và GitHub

Bài viết liên quan:
Hãy xây dựng cho mình một Website. Nhưng thay vì xây dựng giao diện người dùng, chúng tôi sẽ tải giao diện người dùng đó miễn phí dưới dạng chính GitHub! Chúng tôi sẽ tận dụng GitHub như một cách để quản lý nội dung cho trình tạo trang web tĩnh của chúng tôi (nó có thể là bất kỳ trình tạo trang web tĩnh nào). Đây là ý chính của nó: GitHub sẽ là nơi quản lý, kiểm soát phiên bản và lưu trữ tệp, đồng thời cũng là nơi chúng tôi sẽ thực hiện chỉnh sửa nội dung của mình. Khi các chỉnh sửa xảy ra, một loạt các quá trình tự động hóa sẽ kiểm tra, xác minh và cuối cùng là triển khai nội dung của chúng tôi lên Vercel.

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:

Tìm hiểu về Metalsmith:

Metalsmith là một trình tạo trang tĩnh cực kỳ đơn giản, có thể tùy biến kết hợp được.
  • 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; }
    });
Vậy là xong các bước xây dựng thư mục dự án. (Đọc thêm tại Metalsmith để hiểu các metadata vận hành).

Chạy thử

Sử dụng câu lệnh sau trong cửa sổ terminal:
node index
Bạn sẽ thấy một thư mục Build được tạo trong đó có file index.html với layout của default.hbs và mội dung được merge từ index.md
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é.

Getting Info...

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Trang web bị chặn
Xin lỗi! Trang web này không có sẵn ở quốc gia của bạn.