Skip to content

Latest commit

 

History

History
203 lines (134 loc) · 9.21 KB

README-VI.md

File metadata and controls

203 lines (134 loc) · 9.21 KB

✍️

Handmade Blog

build node demo license

Handmade Blog là một trình nhẹ tạo blog tĩnh cho những người muốn bắt đầu một blog nhanh chóng. Nó hỗ trợ thư mục article cho một bài đăng, thư mục work cho portfolio, nổi bật code, hỗ trợ KaTeX, footnotes và hơn thế nữa.

Xem thử: Tại đây

Article page preview

Kết quả Lighthouse

article/0.html trên điện thoại

Performance 94, Accessibility 100, Best Practices 100, SEO 92, PWA N/A

article/0.html trên máy tính

Performance 99, Accessibility 100, Best Practices 92, SEO 91, PWA N/A

Bắt Đầu

  1. Nhấp vào nút 'Use this template' phía trên danh sách tệp để tạo một kho lưu trữ mới. Nếu bạn muốn sử dụng miền github.io, phải đặt tên cho kho lưu trữ là {YOUR_ID} .github.io. (ví dụ: betty-grof.github.io) Đừng quên bật tùy chọn 'Include all branches' .

    Click the 'Use this template' button

    Name repository to id.github.io, and enable 'Include all branches' option

  2. Nhấp vào tab 'Settings' trong kho lưu trữ của bạn và đặt nhánh nguồn cho Trang GitHub thành nhánh gh-pages. GitHub Pages sẽ lưu trữ trang web của bạn dựa trên nhánh gh-pages. Bạn sẽ có thể truy cập trang web qua https://{YOUR_ID}.github.io/ sau vài phút.

    Click the 'Settings' tab

    Set source branch of the github pages to gh-pages branch

  3. Sao chép kho lưu trữ và cài đặt các gói node.

    $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
$ cd {REPOSITORY_NAME} # cd betty-grof.github.io
$ npm install

  4. Thay đổi thông tin như tiêu đề trong điều hướng (trong app/templates/navigations.ejs), và chạy lệnh npm run build.

    <nav>
  <a class="logo-link" href="/">
    <h1>CUSTOMIZED BLOG TITLE</h1>
    <span>customized blog subtitle</span>
  </a>
  <small>
    <a id="about" class="info-link" href="/about.html">👀About</a> /
    <a id="works" class="info-link" href="/works.html">🔥Works</a> /
    <a id="articles" class="info-link" href="/articles.html">📚Articles</a>
  </small>
</nav>
    $ npm run build

  5. Chạy lệnh npm start để bắt đầu một server tại địa chỉ http://localhost:8080/. Server này dựa trên thư mục dist.

    $ npm run build
$ npm start

    The website that is titled 'Betty Grof' at http://localhost:1234/

  6. Commit và push các thay đổi trong thư mục làm việc của bạn vào kho lưu trữ từ xa.

    $ git add ./app/templates/navigations.ejs
$ git commit -m "Customize the blog title and subtitle"
$ git push origin master

  7. Chạy lệnh deploy nếu bạn đã sẵn sàng lưu trữ trang web. Tập lệnh này xây dựng các tệp cục bộ vào thư mục dist và đẩy nó đến nhánh gh-pages nơi chỉ chứa các tệp trong thư mục dist. GitHub Pages sẽ lưu trữ trang web của bạn tại địa chỉ https://{YOUR_ID}.github.io/ dựa trên nhánh gh-pages một cách tự động.

    $ npm run deploy

Sử dụng

Viết và công khai một tài liệu

  1. Viết một tài liệu trong thư mục _articles hoặc _works.

  2. Chạy npm run publish article hoặc npm run publish work để chuyển tài liệu sang định dạng HTML.

  3. Xem trước tài liệu đã chuyển trên máy chủ cụng bộ với lệnh npm start.

  4. Commit và push thay đổi lên kho, và chạy npm run deploy để triển khai.

Thay đổi một trang

Sửa đổi ejs mẫu để thay đổi nội dung của trang hiện có. Ví dụ: nếu bạn muốn đặt một hình ảnh vào trang đích, hãy mở tệp app/templates/index.ejs và thêm thẻ img vào yếu tố main-container.

<main id="main-container">
  <img src="../assets/profile.jpg" alt="My profile picture" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>

Sau đó, chạy npm run publish page để công khai và sửa đổi trang đích và xem trước thay đổi trên máy chủ cục bộ sử dụng npm start.

$ npm run publish page
$ npm start

Nếu bạn đã sẵn sàng triển khai, chạy npm run deploy. Bạn có không chỉ có thể thay đổi trang đích mà có thể thay đổi bất cứ trang nào với cách này. (Bạn có thể cần hiểu cấu trúc của dự án.)

Cấu trúc dự án

  • _articles - Các tập markdown cho bài đăng.
  • _works - Các tập markdown cho portfolio.
  • app
    • assets - Bất kỳ tệp nào được nhập bằng tệp HTML như hình ảnh, phông chữ, v.v.
    • public - Các tệp HTML được tạo bởi tập lệnh publish. Thư mục server và dist dựa trên thư mục này. Không thay đổi trực tiếp các tệp trong thư mục này.
      • article - Các tệp HTML được chuyển đổi từ thư mục _articles.
      • work - Các tệp HTML được chuyển đổi từ thư mục _works.
    • styles - Tệp CSS nguồn được dùng trong HTML.
    • static - Bất kỳ tệp tĩnh nào không được biên dịch bởi tập lệnh build như robots.txt, sitemap.xml hoặc tệp SEO. Tập lệnh build sao chép tất cả các tệp trong thư mục này vào thư mục dist.
    • templates - Tệp EJS mẫu. Tập lệnh publish chuyển đổi các mẫu trong thư mục này thành các tệp HTML.
  • dist - Các tệp được biên dịch bởi tập lệnh build. Tập lệnh deploy triển khai một trang web tới các trang GitHub dựa trên thư mục này. Không thay đổi trực tiếp các tệp trong thư mục này.
  • server - Các tệp được biên dịch bởi tập lệnh build. Tập lệnh start mở máy chủ cục bộ dựa trên thư mục này. Không thay đổi trực tiếp các tệp trong thư mục này.
  • services - Mã nguồn triển khai tập lệnh publish.
    • classes
    • models
  • tools - Mã nguồn triển khai các tập lệnh npm khác nhau.

Trang mẫu

Các Lệnh Có Thể

npm start

Khởi động máy chủ phát triển cục bộ tại http://localhost:1234/.

npm run publish

Chuyển đổi mẫu thành tệp HTML.

$ npm run publish article

Chuyển đổi tất cả các article.

$ npm run publish works

Chuyển đổi tất cả các works.

$ npm run publish article 5

Chuyển đổi một article có id là 5.

$ npm run publish work 3

Chuyển đổi một work có id là 3.

$ npm run publish page

Chuyển đổi tất cả các trang

npm run watch

Tự động xây dựng lại tệp mẫu trong thư mục template và tệp đánh dấu trong thư mục _articles bất cứ khi nào tệp được sửa đổi.

npm run build

Tạo tệp với gói bưu kiện.

npm run deploy

Xây dựng và triển khai các tệp.

Bản quyền

Dự án này dưới bản quyền MIT - xem LICENSE để biết chi tiết.