hugo boilerplate
1.0.0
현대 웹 사이트 구축을위한 휴고 보일러 플레이트?
이 보일러 플레이트는 지역 개발 구축 파이프 라인으로 Hugo를 Gulp로 감습니다.
Postcs 및 Webpack + Babel은 CSS 및 JS 컴파일 및 트랜스 핑에 사용됩니다.
BrowserSync는 현대적인 지역 개발 경험을 제공하는 데 사용되므로 여러 장치에서 사이트를 미리 볼 수 있습니다.
BrowsersList는 브라우저 지원 구성에 사용됩니다.
SVG 스프라이트는 SVG 스프라이트를 생성하는 데 사용됩니다.
Gulp를 사용하려면 노드와 NPM이 설치되어 있어야합니다.
전제 조건이 설치되면 저장소를 로컬 컴퓨터로 복제 한 다음 실행하십시오.
npm install
휴고 환경을 실행하는 데 필요한 모든 노드 종속성뿐만 아니라 휴고를 설치합니다. 시간이 조금 걸릴 수 있습니다!
모든 개발 작업은 NPM 실행을 사용하여 수행됩니다. 전체 명령 목록은 package.json의 "scripts" 참조하십시오.
지역 개발은 BrowserSync에 의해 구동되므로 다음을 통해 신속하게 사이트를 개발할 수 있습니다.
http://localhost:3000/ 의 로컬 개발 서버.로컬 개발 서버를 실행하는 것은 실행하는 것만 큼 간단합니다.
npm start
이것은 생산 빌드에 포함되지 않은 모든 초안, 미래 날짜 또는 만료 된 컨텐츠를 표시합니다.
생산에 나타날 사이트로 개발하려면 실행하십시오.
npm run preview
로컬 컴퓨터에서 최종 생산 빌드를 생성하려면 실행할 수 있습니다.
npm run build
귀하의 사이트의 새로운 생산 빌드는 dist/ Directory에 있습니다.
Hugo의 CLI 명령은 모두 NPM을 통해 실행할 수 있습니다.
npm run hugo -- <command> --<param>
예를 들어:
npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md
.
├── .tmp/ // Temporary directory for development server
├── dist/ // The production build
├── hugo/ // The Hugo project; content, data and static files
| ├── .forestry/ // Contains Forestry.io configuration files
| ├── content/ // Where all site content is stored
| ├── data/ // TOML, YAML or JSON files containing site data
| ├── layouts/ // Your site's layouts
| | ├── partials/ // Your site's partials
| | └── shortcodes/ // Your site's shortcodes
| ├── static/ // Where all static files live
| | ├── css/ // Where compiled CSS files live
| | ├── js/ // Where compiled JS files live
| | └── uploads/ // Where user uploads are stored
| └── config.toml // The Hugo configuration file
└─── src/
├── css // CSS/SCSS source files to be compiled to /css/
└── js // JS source files to be compiled to /js/
src/img/ 에서 발견되는 모든 SVG는 hugo/static/svg/sprite.symbol.svg 에서 단일 SVG 스프라이트로 결합됩니다.
이 보일러 플레이트는 레이아웃에서 SVG를 사용하기위한 간단한 부분과 함께 제공됩니다. IT를 전달하여 SVG를 선택할 수 있습니다.
{{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}
참고 : class , width 및 height 매개 변수는 선택 사항입니다.
이 보일러 플레이트는 표준 ESLINT 및 스타일 린트 구성과 함께 제공되어 가장 인기있는 IDE와 함께 작동하는 오류 또는 일반적인 스타일 문제에 대해 CSS 및 JS를 묶을 수 있습니다.
테스트는 명령 행에서 실행할 수도 있습니다.
npm run eslintnpm run stylelint보린 오류를 자동으로 수정하려면 명령 줄에서도이를 수행 할 수 있습니다.
npm run eslint:fixnpm run stylelint:fix 이 보일러 플레이트는 자체 청소이며, 내용이 항상 최신 상태인지 확인하기 위해 명령이 실행될 때마다 생산 dist/ 및 개발 .tmp/ 폴더를 제거합니다.
수동으로 정리하려면 실행하십시오.
npm run clean
모든 빌드 작업은 Gulp에 의해 처리되며 gulpfile.babel.js 에 있습니다. 빌드의 모든 부분은 개별 파일에서 구성 할 수있어 관리를 쉽게 만들 수 있습니다.
모든 빌드 소스 및 대상 경로는 gulp.config.js 에서 구성 할 수 있습니다.
Hugp의 빌드 명령은 gulp.config.js 에서 구성 할 수 있습니다. 빌드 명령은 NODE_ENV 환경 변수를 기반으로 설정됩니다. GENERATOR_ARGS 환경 변수를 사용하여 선택적으로 다른 ARG를로드 할 수 있습니다.
4 가지 옵션을 사용할 수 있습니다.
default : 항상 실행되는 기본 빌드 명령development : 개발 서버의 추가 빌드 명령preview : 생산 개발 서버의 추가 빌드 명령production : 생산 빌드를위한 추가 빌드 명령 BrowserSync의 구성은 .browsersyncrc.js 에 있습니다
Postcss의 구성은 .postcssrc.js 에 있습니다
웹 팩의 구성은 .webpackrc.js 에 있습니다
Postcs와 Webpack은 .browserslistrc 사용하여 컴파일 할 때 브라우저 지원을 결정합니다.
hugo/static/ 폴더에 저장 hugo/static/CNAME 합니다 /CNAMEsrc/js/ 의 루트에서 js/{filename}.js 로 컴파일됩니다.require() importsrc/css/ css/{filename}.css 의 루트에서 컴파일됩니다.hugo/ Folder의 컴파일 된 CSS 및 JS 파일이 항상 커밋되는지 확인하십시오.{{ getenv "HUGO_ENV" }}development 과 같습니다production 과 같습니다staging 와 같습니다.이 저장소에는 산림과 협력하기 위해 사전 구성된 기본 예제 컨텐츠와 함께 사이트 구축을 시작할 수 있습니다.
hugo 로 들어갑니다모든 기부금을 환영합니다! 당사의 행동 및 지원 지침을 참조하십시오.
이 보일러 플레이트 프로젝트는 MIT 라이센스에 따라 릴리스됩니다.
