Công cụ Công nghệ

Cách làm một trang web ghi chú đơn giản

BBài viết sẽ chia sẻ với bạn cách làm một trang ghi chú thiên về học thuật (có thể chèn công thức Toán, đoạn code,…) giống như trang này. Bạn sẽ sử dụng Typora để ghi chú, sử dụng Github Pages để tạo trang web ghi chú và dùng Markdown cũng như LaTeX trong quá trình soạn thảo.

Xem thêm Phần mềm và chọn cách ghi chú hiệu quả cho dân học thuật.

Bài viết giới thiệu ngắn gọn, ít dùng hình ảnh minh họa. Math2IT sẽ gởi đến bạn video hướng dẫn trong thời gian sớm nhất có thể, tạm thời bạn cứ xem qua hướng dẫn này nhé. Nếu có thắc mắc gì, vui lòng comment bên dưới bài viết, cảm ơn các bạn.

Mục tiêu

  • Ghi chú nhanh gọn : dùng Typora + lúc ghi chú dùng ngôn ngữ Markdown (xem cách gõ) và LaTeX để gõ công thức Toán.
  • Upload lên một trang web riêng kiểu như link trên : dùng github pages.

Ghi chú nhanh gọn

  1. Download Typora : tại đây (cho cả Windows và Mac, chưa có cho Linux).
  2. Cài đặt bình thường.
  3. Cách dùng Typora : xem video này.
  4. Bạn lưu file ghi chú của bạn với tên ghichu.md (markdown file có đuôi .md)

Tạo trang web

  1. Vào trang github.com để tạo một tài khoản (nhớ xác nhận lại từ email nó gởi sau khi đăng ký).
    • Lưu ý : username bạn chọn, ví dụ thinot4work, thì trang web sau khi tạo của bạn sẽ có đường dẫn là thinot4work.github.io
    • Sau cái trang đầu tiên để điền tên + email + password mà thành công sẽ sang trang thứ hai.
    • Trang thứ hai có 3 bước, Step 1 chọn Continue
    • Step 2 chọn skip this step
    • Step 3 nó tự bỏ qua và chuyển sang cái trang “Learn Git and Github without any code…”, tại đây chọn Start a project
    • Sau đó nó ra cái trang kêu mình verify email, vào email đã dùng đăng ký để nhấn vào link nó gởi để xác nhận.
  2. Sau khi nhấn vào link xác nhận trong email, nó ra lại cái trang nhấn Start a project
  3. Ở trang “Create a new repository”, ghi vào cái “Repository name” tên trang web của bạn, ở đây ghi thinot4work.github.io và cái repository có dạng thinot4work/thinot4work.github.io. Xong nhấn Create repository
  4. Qua trang tiếp theo bạn nhấn vào Set up in Desktop để download Github về máy. Hoặc bạn có thể nhấn vào đây để download. Phần mềm sẽ có giao diện giống như dướiGiao diện Github
  5. Cứ cài đặt bình thường, cài xong mở lên và đăng nhập bằng nick tạo ở bước 1.
  6. Trong hình trên, bạn nhấn vào dấu “+” ở góc trê bên phải > Chọn thẻ “Clone” > Chọn cái respository bạn đã tạo, cụ thể là thinot4work.github.io
  7. Đợi lát nó tạo xong.

Sử dụng

  1. Ở trên bạn đã tạo xong trang thinot4work.github.io và một thư mục trong máy bạn cũng có tên y chang như thế.
  2. Bây giờ ở Typora, sau mỗi lần bạn ghi chú xong và muốn update lên trang web. Bạn chọn xuất ra file html bằng cách : File > Export > HTML và lưu dưới tên, ví dụ ghichu.html
  3. Bạn copy cái file ghichu.html và chép vào thư mục thinot4work.github.io đã tạo.
  4. Sau mỗi lần bạn có chỉnh sửa hay chép đè file ghichu.html bên trong thư mục thinot4work.github.io thì bạn mở phần mềm Github lên, nó sẽ tự động nhận biết có sự thay đổi ở cái file ghuchu.html đó và hiển thị nút Commit and Sync master cho bạn nhấn để upload lên mạng. Nhớ ghi vào ô Summary (ghi gì cũng được) lý do cho mỗi lần chỉnh sửa file. Xong nhấn Commit and Sync master.
  5. Vậy là xong, bạn hãy dùng trình duyệt web vào thử bằng đường dẫn thinot4work.github.io/ghichu.html thì nó sẽ hiện ra cái ghi chú của bạn.

Về cơ bản, bạn đã hoàn thành xong trang web cần có. Tuy nhiên, bây giờ bạn muốn cái mục lục nó nằm ở bên trái của trang web và cố định ở đó. Phần nội dung bên phải sẽ di chuyển mỗi khi bạn lăn chuột thì làm sao?

Làm cái mục lục ở yên bên trái

Ở cách này, bạn chỉnh sửa theme ở trong Typora luôn, để khi export ra file html, nó sẽ tự động có luôn cái mục lục ở bên trái. Nhược điểm của cách này ở chỗ, trong trình Typora cũng sẽ bị ảnh hưởng.

Trong Typora, mở Preferences lên > Ở thẻ Appearance chọn Open theme folder > Mở file giao diện whitey.css lên và thêm vào đầu file đó đoạn code sau đây

Save lại. Vậy là xong. Giờ đây mỗi lần bạn có chỉnh sửa file ghichu.md, bạn export nó ra dạng ghichu.html thì nó sẽ tự động có mục lục cố định ở bên trái.

Chúc bạn thành công, nếu có thắc mắc gì đừng ngại comment bên dưới bài viết nhé.

Math2IT

Math2IT

Đây là tác giả chung cho các bài viết không do trực tiếp tác giả cụ thể nào của Math2IT viết. Có thể đó là các bài dịch từ các bài viết nước ngoài hoặc các bài viết thiên về kỹ thuật và thông báo.