1. Cài đặt blog dưới local

1.1. Contributor

Trở thành contributor cho TOMOSIA BLOG.

Fork repository TOMOSIA-VIETNAM về tài khoản github

Clone repository sau khi fork

$ git clone git@github.com:Nguyenanh/tomoblo.git

Di chuyển sang folder tomoblo

$ cd tomoblo

1.2. Setup project

Setup gatsby.js. Yêu cầu: Node version 12.x

Cài đặt gatsby CLI package

$ yarn global add gatsby-cli

Cài đặt các packages được dùng trong blog

$ yarn install

Run dự án

$ gatsby develop [-p <PORT>]

Mở trình duyệt và truy cập với port default là 8000: http://localhost:8000/

2. Viết bài và đăng bài

2.1. Tạo bài post

Chạy lệnh bên dưới để tạo bài viết với tiêu đề mong muốn

$ yarn post "Tiêu đề bài viết"

Sau khi chạy xong chúng ta sẽ có một file posts/tieu-de-bai-viet.md như thế này:

---
title: "Tiêu đề bài viết"
date: "2020-06-24"
published: true
tags:
  -
---

[[snippet]]
| Mô tả ở đây
| Hoặc có thể viết trên nhiều dòng

2.2. Viết bài

Để viết bài chúng ta sẽ thêm nội dung vào phía dưới ---, có 2 cách để viết content.

  • Sử dụng editor và setup thêm một số package. ví dụ mình đang sử dụng atom và cài đặt thêm markdown-preview package.
  • Sử dụng editor online stackedit.io để hỗ trợ viết bài và ta có thể viết biểu thức toán học katexUML diagrams

Sau khi viết bài xong truy cập vào http://localhost:8000/tieu-de-bai-viet để xem kết quả.

2.3. Đăng bài

Khi đã hoàn thành viết bài hãy push bài viết lên repository.

$ git add --all
$ git commit -m 'Tiêu đề bài viết'
$ git push origin master

Vào repository của TOMOSIA-VIETNAM để tạo Pull Request

Sau khi pull request được merge vào TOMOSIA-VIETNAM/tomoblo chờ vài phút thì bài viết sẽ được hiển thị lên http://blog.tomosia.com/.

3. Blockcode

Thêm description cho bài viết

image

Syntax:

[[snippet]]
| Dòng thứ nhất
| ...
| Dòng cuối cùng

Thêm author vào cuối bài viết

image

Syntax:

[[author | Tên tác giả ]]

Ví dụ: [[author | Minh Tang Q. ]]

Thêm image với caption

image

Syntax:

[[image_caption | Nội dung caption ]]
| markdown_image

Ví dụ:

[[image_caption | Nguồn từ: https://bitsofco.de/why-and-how-to-use-webp-images-today/ ]]
| ![Compare](https://user-images.githubusercontent.com/59222278/85985771-616f8700-ba15-11ea-9f7c-0b2161fa86f9.png)

4. Tags

Một số tags được liệt kê trong blog

Tech Tags có thể sử dụng trong blog :

# Fontend
tags:
  - javascript
  - react
  - nodejs

# Backend
tags:
  - ruby
  - rails
  - php
  - laravel
  - cakephp

# App
tags:
  - swift
  - ios
  - kotlin
  - android

# Others
tags:
  - git
  - aws
  - instagram
  - facebook

5. Syncing a fork

Bước 1: Add upstream đến repo đã clone ("origin")

git remote add upstream git@github.com:TOMOSIA-VIETNAM/tomoblo.git
> remote: Enumerating objects: 49, done.
> remote: Counting objects: 100% (49/49), done.
> remote: Compressing objects: 100% (27/27), done.
> remote: Total 49 (delta 29), reused 37 (delta 21), pack-reused 0
> Unpacking objects: 100% (49/49), done.
> From github.com:TOMOSIA-VIETNAM/tomoblo
>  * branch            master     -> FETCH_HEAD
>  * [new branch]      master     -> upstream/master

Bước 2: Fetch các commit và branch từ upstream

$ git fetch upstream
> remote: Counting objects: 75, done.
> remote: Compressing objects: 100% (53/53), done.
> remote: Total 62 (delta 27), reused 44 (delta 9)
> Unpacking objects: 100% (62/62), done.
> From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY
>  * [new branch]      master     -> upstream/master

Bước 3: Checkout về nhánh master trong project đã fork

$ git checkout master
> Switched to branch 'master'

Bước 4: Merge nhánh thay đổi từ upstream/master vào nhánh master

$ git merge upstream/master
> Updating a422352..5fdff0f
> Fast-forward
>  README                    |    9 -------
>  README.md                 |    7 ++++++
>  2 files changed, 7 insertions(+), 9 deletions(-)
>  delete mode 100644 README
>  create mode 100644 README.md

Link tham khảo