bitrock website

비트록 웹사이트

이 웹사이트는 사용자 정의 테마가 적용된 VuePress 인스턴스입니다. 공식 문서를 읽고 콘텐츠 편집 방법이나 테마 작동 방식을 알아볼 수 있습니다.

필수조건

시작하려면 컴퓨터에 다음 소프트웨어가 설치되어 있어야 합니다.

• Node.js 최신 안정
• Yarn 패키지 관리자 둘 다 MacOS 및 Linux 환경에서 Homebrew를 통해 설치할 수 있습니다.

로컬 개발 환경 만들기

저장소를 로컬로 복제

$ git clone [email protected]:bitrockteam/bitrock-website.git

폴더로 이동하여 Yarn을 사용하여 종속성을 설치합니다.

$ cd bitrock-website && yarn

localhost:8080 에서 개발 웹 서버를 시작합니다.

$ yarn start

저작

콘텐츠는 ./src 폴더의 Markdown 파일을 통해 제공되며, 내장된 시각적 편집기가 없으므로 원하는 위치에서 순서대로 작성할 수 있습니다. Vue 구성 요소는 Markdown 콘텐츠 내에서 지원되며 작성자에게 추가 기능을 제공하기 위해 일부 사용자 정의 구성 요소를 추가하는 것이 고려될 수 있습니다. 메타데이터는 Frontmatter 사양을 사용하여 제공됩니다.

페이지 추가

./src 경로에 하위 폴더를 만든 다음 그 안에 readme.md 파일을 만들고 파일 위에 다음 데이터를 추가합니다.

---
layout : Page
---

예 : ./src/about-us/readme.md 파일은 https://bitrock.it/about-us 페이지가 됩니다.

탐색 메뉴에 페이지를 추가하려면 ./src/.vuepress/config.js 를 업데이트해야 합니다.

블로그 게시물 추가

./src/blog 경로에 하위 폴더를 만든 다음 그 안에 readme.md 파일을 만들고 파일 위에 다음 데이터를 추가합니다.

---
title : Hello world!
image : /img/hello.jpg
author : writer
publish : 2018-12-21
layout : Post
category : news
tags :
  - greetings
  - hello
---

예 : ./src/blog/hello-world/readme.md 파일은 https://bitrock.it/blog/hello-world 페이지가 됩니다.

메인 페이지에는 게시물이 시간 역순(최근 게시물부터)으로 표시됩니다.

이미지

사이트 전체 이미지는 './src/.vuepress/public/img' 폴더에 추가되어야 합니다. 게시물이나 페이지 폴더 내에 이미지를 추가하면 상대 경로를 사용하여 페이지 URL 외부에서는 접근할 수 없습니다.

자동화된 최적화 프로세스가 없으므로 게시하는 이미지 크기에 주의하세요.

개발

모든 개발 소스 파일은 ./src/.vuepress/theme 폴더에 있습니다.

./src/.vuepress/public 은 배포 도메인의 루트 수준에서 정적 리소스로 사용할 수 있어야 하는 모든 종류의 자산을 배치하는 위치입니다. 하위 폴더는 보존됩니다.

Vuepress 플러그인

• @vuepress/plugin-google-analytics에 Google Analytics 모니터링 ID를 제공하면 페이지에 필요한 코드가 삽입됩니다.
• @vuepress/plugin-pwa 는 오프라인 캐싱을 위한 모든 정적 자산을 매핑하는 빌드 단계에서 서비스 워커를 생성합니다. 수동으로 작성되어 공용 폴더에 제공되는 PWA 기능을 트리거하는 데 필요한 웹 매니페스트를 생성하지 않습니다 .
• @vuepress/plugin-back-to-top 초기 뷰포트에서 약간 아래로 스크롤한 후 맨 위로 돌아가기 화살표 버튼을 추가하기만 하면 됩니다.
• @vuepress/nprogress는 YouTube에서 발생하는 것과 유사하게 새 콘텐츠를 로드할 때 페이지 상단에 진행률 표시줄을 추가합니다.

JS 유틸리티

여기서 주요 종속성은 구성 요소를 빌드하는 데 사용되는 Vue.js 라이브러리이며 그 밖의 모든 것은 바닐라 Javascript입니다.

CSS 유틸리티

우리는 다음 CSS 라이브러리를 사용하고 있습니다.

• Normalize.css를 사용하면 브라우저가 모든 요소를 ​​보다 일관되게 최신 표준에 따라 렌더링할 수 있습니다.
• typebase.css는 웹 타이포그래피의 출발점입니다.
• 햄버거 CSS 애니메이션 햄버거 메뉴.

분기 정책

이 프로젝트는 간단한 분기 정책을 따릅니다.

• master 에는 안정적인 코드만 포함되어 있으므로 직접 업데이트하면 안 됩니다.
• 진화된 또는 실험적인 코드가 작성되는 development
• 배포 가능한 정적 파일이 배포되는 gh-pages 이지만 **여기에서 직접 커밋/푸시하는 것은 피해야 합니다**

development master 에 직접 병합하지 마십시오 ( 관리자 잠금 상태입니다... ). 항상 PR을 보내 검토를 받으십시오.

업데이트 및 배포

master 브랜치가 업데이트될 때마다(직접 커밋 또는 병합된 PR) 새로운 Travis CI 작업이 트리거되고 다음 단계로 구성됩니다.

1. 종속성 설치
2. Vuepress는 /dist 폴더에 모든 관련 파일을 사용하여 웹사이트를 구축합니다.
3. 빌드가 성공하면 /dist 폴더가 GitHub 페이지에 배포됩니다.
4. 새로운 배포는 bitrock.it에서 사용할 수 있습니다.

로컬 머신의 gh-pages 브랜치에 수동으로 배포할 수 있는 NPM 스크립트가 있습니다(먼저 로컬에서 프로젝트를 빌드해야 합니다).

$ yarn gh:pages

하지만 꼭 필요한 경우에만 사용하시기 바랍니다.

특허

Databiz Group, Bitrock 및 Radicalbit 로고는 등록 상표입니다. 코드는 GNU AGPLv3 라이센스에 따라 배포됩니다. 포함된 스톡 사진은 Unsplash에서 제공되었습니다.