Image default
Máy Tính

Biến Obsidian Vault thành Website: Hướng dẫn chi tiết với Quartz (Không Cần Code)

Tôi đã sử dụng Obsidian một thời gian dài như một không gian riêng để phác thảo các bài viết của mình. Phần mềm này nhanh chóng, ưu tiên cục bộ và tôi rất thích cách nó cho phép tôi xây dựng một kho kiến thức cá nhân bằng Markdown. Ban đầu, tôi chỉ bắt đầu với vài ghi chú hàng ngày đơn giản, nhưng chẳng bao lâu sau, tôi đã có các thư mục chứa đầy những suy nghĩ, bản nháp bài viết và tài liệu tham khảo được kết nối với nhau. Obsidian đã trở thành trung tâm cho hầu hết mọi công việc tôi làm.

Tuy nhiên, sau nhiều tháng tổ chức các ý tưởng và viết mọi thứ ra, tôi bắt đầu mong muốn có thể chia sẻ một số nội dung trong đó – không phải tất cả, mà chỉ những phần tôi muốn người khác thấy hữu ích. Hơn thế nữa, tôi muốn truy cập một vài ghi chú Obsidian của mình từ bất cứ đâu, ngay cả khi không mở ứng dụng Obsidian.

Vấn đề là, việc xuất bản Markdown thành một trang web rõ ràng, dễ điều hướng nghe có vẻ phức tạp hơn tôi mong muốn. Trong khi tìm kiếm một công cụ có thể giúp tôi lưu trữ Obsidian Vault của mình trên internet, tôi đã tìm thấy Quartz, và nó đã thay đổi mọi thứ.

Quartz là gì? Giải pháp xuất bản Markdown miễn phí, hiệu quả

Quartz là một công cụ tạo trang web tĩnh (static site generator) được thiết kế đặc biệt để xuất bản các tệp Markdown. Nó là mã nguồn mở, được cập nhật thường xuyên và quan trọng nhất, nó hiểu cách các công cụ Markdown như Obsidian hoạt động – bao gồm các liên kết ngược (backlinks), thư mục, front matter và tất cả các tính năng khác.

Không giống như các giải pháp khác cố gắng định hình ghi chú của bạn vào cấu trúc riêng của chúng, Quartz thích ứng với cách bạn đã tổ chức mọi thứ. Nó không thay thế Obsidian – mà thực sự bổ sung cho nó. Bạn viết và tổ chức ghi chú của mình trong Obsidian như bình thường, sau đó sử dụng Quartz để biến chúng thành một trang web công khai thực sự trông đẹp mắt và hoạt động hiệu quả. Không có liên kết hỏng, không cần chuyển đổi thủ công, và không cần phải vật lộn với HTML hay CSS trừ khi bạn muốn.

Điểm khác biệt của Quartz: Tại sao lại là lựa chọn tốt nhất?

Ngoài Quartz, còn có một vài công cụ tạo trang web khác, nhưng đây là lý do tại sao tôi gắn bó với nó:

Thiết kế dành riêng cho người dùng Obsidian

Quartz biết cách Obsidian xử lý ghi chú. Nó không yêu cầu bạn phải làm phẳng cấu trúc thư mục của mình hoặc định dạng lại các tệp Markdown. Liên kết ngược hoạt động, các liên kết nội bộ được giải quyết và cấu trúc trực quan vẫn đúng với Vault của bạn. Ngay cả phương pháp Zettelkasten cũng được bảo toàn nếu đó là phong cách của bạn.

Tùy chỉnh dễ dàng, không cần code

Bạn không cần phải chạm vào CSS hoặc HTML để cá nhân hóa trang web của mình. Hầu hết các thay đổi – như tiêu đề trang web, mô tả, bố cục trang chủ hoặc khả năng hiển thị – đều được xử lý thông qua một tệp quartz.config.ts đơn giản. Muốn thay đổi giao diện hoặc ẩn một số trang nhất định? Chỉ cần một lần bật/tắt. Ngoài ra còn có các điều khiển dựa trên Markdown, như draft: true, giúp quản lý khả năng hiển thị mà không cần đào sâu vào các tệp cấu hình.

Nhanh chóng và bảo mật

Quartz tạo ra các tệp tĩnh, làm cho trang web cuối cùng nhanh chóng và dễ dàng lưu trữ. Tôi sử dụng GitHub Pages, nhưng Netlify cũng hoạt động rất tốt. Vì nó không dựa vào các phân tích của bên thứ ba hoặc quảng cáo nhúng, ghi chú được xuất bản của bạn vẫn nhẹ và riêng tư. Bạn thậm chí có thể chạy toàn bộ hệ thống cục bộ nếu bạn chỉ muốn truy cập từ xa vào ghi chú của mình qua mạng cục bộ (LAN).

Tìm kiếm, thẻ (tags) và điều hướng tích hợp

Một trong những điều tuyệt vời nhất là Quartz tự động tạo ra một cấu trúc điều hướng toàn diện từ các thư mục và tệp của bạn. Nó cũng hỗ trợ thẻ, liên kết ngược và một chức năng tìm kiếm gốc không yêu cầu dịch vụ của bên thứ ba. Nó tôn trọng kiểu gắn thẻ của Obsidian, vì vậy mọi thứ vẫn nhất quán với cấu trúc nội bộ của bạn.

Hướng dẫn từng bước thiết lập Quartz và xuất bản Obsidian Vault

Thành thật mà nói, việc thiết lập Quartz không hoàn toàn đơn giản, nhưng nếu bạn cẩn thận làm theo các bước tôi đã thực hiện, bạn sẽ mất chưa đến 15 phút.

Bước 1: Chuẩn bị các công cụ cần thiết

Kiểm tra phiên bản Node.js, npm và Git trên cửa sổ Command Prompt trước khi cài đặt Quartz.Kiểm tra phiên bản Node.js, npm và Git trên cửa sổ Command Prompt trước khi cài đặt Quartz.

Trước khi tiến hành thiết lập Quartz để biến Obsidian Vault của tôi thành một trang web, tôi đã xác minh rằng hệ thống của mình có các công cụ cần thiết sau:

  • Node.js: Phiên bản 20 trở lên. Kiểm tra bằng lệnh node -v.
  • npm: Phiên bản 9.3.1 trở lên. Kiểm tra bằng lệnh npm -v.
  • Git: Đảm bảo Git đã được cài đặt và cấu hình.

Nếu bạn đang sử dụng một trình quản lý phiên bản như nvm, hãy đảm bảo rằng phiên bản Node.js chính xác đang hoạt động.

Bước 2: Clone và cài đặt Quartz

Cửa sổ dòng lệnh đang thực hiện lệnh 'git clone' để tải repository Quartz về máy tính.Cửa sổ dòng lệnh đang thực hiện lệnh 'git clone' để tải repository Quartz về máy tính.

Bây giờ, tôi đã clone repository Quartz của jackyzha0 trên GitHub. Cùng với đó, tôi cũng đã cài đặt các dependencies. Để làm điều đó, tôi đã khởi chạy Command Prompt với quyền quản trị viên và sử dụng các lệnh sau:

  • git clone https://github.com/jackyzha0/quartz.git Quartz
  • cd Quartz
  • npm install
  • npx quartz create

Ở đây, “Quartz” trong lệnh đầu tiên là tên thư mục trên PC của tôi nơi tôi đã clone repository. Trong quá trình npx quartz create, tôi đã chọn các tùy chọn phù hợp dựa trên sở thích của mình. Nếu bạn không có lựa chọn nào, hãy chọn các tùy chọn mặc định.

Bước 3: Tích hợp Obsidian Vault của bạn

Sao chép các tệp Markdown từ Obsidian Vault vào thư mục Content của dự án Quartz.Sao chép các tệp Markdown từ Obsidian Vault vào thư mục Content của dự án Quartz.

Bây giờ, thông qua File Explorer, tôi đã mở thư mục chứa Obsidian Vault mà tôi muốn lưu trữ trên internet. Tôi đã sao chép tất cả các tệp Markdown (.md) từ Vault và dán chúng vào thư mục Content của thư mục dự án Quartz của tôi (trong trường hợp của tôi, nó được đặt tên là Quartz).

Bước 4: Xem trước website cục bộ

Xem trước website Obsidian cục bộ trong trình duyệt trước khi triển khai trực tuyến.Xem trước website Obsidian cục bộ trong trình duyệt trước khi triển khai trực tuyến.

Bây giờ, trước khi triển khai trang web, tôi đã xem trước nó cục bộ để kiểm tra xem nó sẽ trông như thế nào và tìm ra bất kỳ vấn đề nào.

Để làm điều đó, tôi đã khởi chạy Command Prompt và sử dụng lệnh cd để điều hướng đến thư mục dự án của tôi (Quartz trong trường hợp của tôi). Sau đó, tôi đã sử dụng lệnh này để khởi động một máy chủ cục bộ: npx quartz build --serve

Sau khi chạy lệnh mà không có lỗi, tôi đã truy cập http://localhost:8080 trong trình duyệt của mình để xem trang web.

Bước 5: Cấu hình GitHub Repository

Cấu hình kho lưu trữ GitHub để chuẩn bị triển khai website Obsidian của bạn.Cấu hình kho lưu trữ GitHub để chuẩn bị triển khai website Obsidian của bạn.

Tiếp theo, tôi đã tạo và cấu hình kho lưu trữ GitHub để triển khai các tệp Markdown của Obsidian của tôi. Để làm điều đó, tôi đã mở Command Prompt và điều hướng đến thư mục dự án bằng lệnh cd. Sau đó, tôi đã thực hiện các tác vụ này:

  • Khởi tạo Gitgit init
  • Thêm Remote – Thêm kho lưu trữ GitHub của tôi làm remote origin: git remote add origin https://github.com/MyGitUsername/my-repo-name.git
  • Commit Thay đổi – Commit các thay đổi của bạn:
    • git add .
    • git commit -m "First Commit"

Bước 6: Thiết lập GitHub Actions để triển khai

File 'deploy.yml' chứa cấu hình GitHub Actions để tự động triển khai Quartz lên GitHub Pages.File 'deploy.yml' chứa cấu hình GitHub Actions để tự động triển khai Quartz lên GitHub Pages.

Tiếp theo, tôi đã khởi chạy thư mục dự án của mình thông qua File Explorer và điều hướng đến vị trí này: .github > workflows. Tại đây, tôi đã tạo một tệp văn bản mới và đặt tên là deploy.yml. Sau đó, tôi đã sao chép và dán nội dung sau vào tệp mới tạo này.

name: Deploy Quartz site to GitHub Pages
on:
  push:
    branches:
      - v4

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - name: Install Dependencies
        run: npm install
      - name: Build Quartz
        run: npx quartz build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: public

  deploy:
    needs: build
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Đảm bảo rằng node-version khớp với phiên bản bạn đang sử dụng cục bộ.

Bước 7: Đẩy mã nguồn lên GitHub

Tiếp theo, tôi đã đẩy kho lưu trữ cục bộ của mình lên GitHub. Để làm điều đó, tôi đã sử dụng lệnh này: git push -u origin v4

Ở đây, v4 là tên nhánh. Nếu tên nhánh khác trong trường hợp của bạn, ví dụ, main, hãy sử dụng nó trong lệnh. Lệnh này sẽ kích hoạt quy trình GitHub Actions và triển khai trang web của bạn.

Bước 8: Cấu hình GitHub Pages

Chọn 'GitHub Actions' làm nguồn triển khai trong cài đặt GitHub Pages cho website.Chọn 'GitHub Actions' làm nguồn triển khai trong cài đặt GitHub Pages cho website.

Đây là một bước quan trọng. Tôi đã cẩn thận cấu hình cài đặt GitHub Pages để trang web được trực tuyến thành công.

  • Điều hướng đến Settings: Tôi đã mở kho lưu trữ Quartz trên GitHub và nhấp vào “Settings”.
  • Pages Settings: Trong thanh bên, tôi đã nhấp vào “Pages”.
  • Source: Dưới “Build and deployment”, tôi đã đảm bảo rằng “GitHub Actions” được chọn làm nguồn.

Bước 9: Truy cập website đã triển khai

Website Obsidian đã được triển khai thành công và hiển thị trên trình duyệt web.Website Obsidian đã được triển khai thành công và hiển thị trên trình duyệt web.

Sau khi quy trình hoàn tất, trang web đã có sẵn tại: https://myusername.github.io/my-repo-name/

Đối với tôi, đó là: https://pranav711.github.io/Quartz/

Bước 10: Tùy chỉnh website Obsidian của bạn

Chỉnh sửa file 'quartz.config.ts' để tùy chỉnh giao diện và cấu hình website Quartz.Chỉnh sửa file 'quartz.config.ts' để tùy chỉnh giao diện và cấu hình website Quartz.

Sau khi lưu trữ thành công Obsidian Vault của tôi trên internet, tôi đã tùy chỉnh thêm nó bằng cách chỉnh sửa tệp quartz.config.ts, mà bạn có thể tìm thấy bên trong thư mục dự án của mình trên PC (Quartz đối với tôi). Tôi cũng đã sửa đổi nội dung trang chủ của mình bằng cách chỉnh sửa tệp index.md nằm trong thư mục Content.

Hãy rất cẩn thận khi sửa đổi các tệp, vì một lỗi nhỏ có thể dẫn đến lỗi 404. Ngoài ra, đừng quên đẩy (sử dụng lệnh git push) sau mỗi lần thay đổi để các thay đổi cục bộ được phản ánh trên trang web của bạn.

Biến Obsidian Vault thành website mà không cần kiến thức lập trình

Việc xuất bản Obsidian Vault của tôi ban đầu cảm thấy như một nhiệm vụ chậm chạp và đầy thử thách, nhưng Quartz đã giúp nó trở nên dễ dàng một cách đáng ngạc nhiên. Nó tôn trọng cấu trúc tôi đã xây dựng trong Obsidian, không yêu cầu tôi học một ngôn ngữ hoặc chuỗi công cụ mới và cho tôi toàn quyền kiểm soát những gì được xuất bản.

Việc có các ghi chú của tôi có thể truy cập được dưới dạng web giúp tôi nhìn rõ hơn các ý tưởng của mình. Nó có thể tìm kiếm, liên kết và dễ dàng duyệt qua. Việc biết rằng mọi thứ được xây dựng trên các tệp tĩnh có nghĩa là tôi không bao giờ phụ thuộc vào máy chủ hoặc dịch vụ của người khác.

Quartz là một giải pháp tuyệt vời nếu bạn từng muốn biến ghi chú Markdown của mình thành một trang web rõ ràng, dễ điều hướng mà không gặp rắc rối khi xây dựng từ đầu. Nó nhanh, miễn phí, mã nguồn mở và được tạo ra bởi những người rõ ràng hiểu cách các nhà văn và người ghi chú suy nghĩ. Hãy thử xem – bạn có thể sẽ xuất bản nhiều hơn những gì bạn đã dự định.

Nếu bạn gặp bất kỳ vấn đề nào trong quá trình này, hãy chia sẻ kinh nghiệm của bạn ở phần bình luận bên dưới, và tôi sẽ rất vui lòng hỗ trợ bạn bằng mọi cách có thể.

Related posts

Hướng Dẫn Cài Đặt Joplin Server Trên Raspberry Pi: Tự Chủ Ghi Chú An Toàn

Administrator

Top 4 Card Đồ Họa Thay Thế NVIDIA RTX 5060 Ti Tốt Hơn Trong Tầm Giá

Administrator

Lợi Ích Vượt Trội Khi Lựa Chọn Vỏ Case Máy Tính Rộng Rãi: Hơn Cả Khả Năng Tương Thích

Administrator