static site starter

정적 사이트 스타터 는 정적 사이트의 스타터 템플릿입니다.
스택 : Babel , Browsersync , Gulp , MinireSet.css , Pug , Sass , Webpack .

---

목차

• 전제 조건
• 명령
• 프로젝트 구조
• 레이아웃 구조
• 캐시 파열
• 메타 태그 설정
• 저자
• 기여
• 특허

---

전제 조건

• ASDF
• 만들다
• node.js
• 방사

⌨️ 명령

제공하다

 # # Serve site at http://localhost:3000 with live reloading

make

이 명령은 또한 첫 번째 실행 및 package.json 또는 yarn.lock 파일이 업데이트 될 때의 종속성을 설치합니다 .

짓다

 # # Build site for production use

make build

이 명령은 또한 첫 번째 실행 및 package.json 또는 yarn.lock 파일이 업데이트 될 때의 종속성을 설치합니다 .

돕다

 # # List available commands

make help

? ️ 프로젝트 구조

 .
├── documentation-images    # PROJECT DOCUMENTATION IMAGES
│
│
├── gulp                    # GULP/WEBPACK CONFIGURATION AND TASKS
│   ├── env                 # Gulp configuration per environment
│   │   ├── dev.js          # Development environment
│   │   └── prod.js         # Production environment
│   │
│   ├── helpers             # Gulp helpers
│   │   └── url.js          # Helper for URL creation
│   │
│   ├── tasks               # Gulp tasks
│   │   ├── pug.js          # Pug task declaration
│   │   ├── sass.js         # Sass task declaration
│   │   └── script.js       # JavaScript task declaration
│   │
│   ├── webpack             # Webpack configuration per environment
│   │   ├── common.js       # Shared between development and production environments
│   │   ├── dev.js          # Development environment
│   │   └── prod.js         # Production environment
│   │
│   └── index.js            # Script to invoke proper environment and dynamically load Gulp tasks
│
│
├── js                      # JAVASCRIPT SOURCE FILES
│   ├── foo.js              # Sample script imported in scripts.js
│   └── scripts.js          # Main JavaScript file used as entry by Webpack
│
│
├── sass                    # SASS STYLE
│   ├── base                # Base style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   ├── generic.sass    # Style for generic elements (html, body, etc.)
│   │   └── helpers.sass    # Helper classes (modifiers)
│   │
│   ├── dev                 # Development utilities
│   │   ├── shame.sass      # WIP style or dirty hacks
│   │   └── structure.sass  # Highlighting site structure (import commented by default)
│   │
│   ├── fonts               # Fonts style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   └── roboto.sass     # @font-face style for Roboto
│   │
│   ├── layout              # Layout style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   └── layout.sass     # Very light starter style for structure elements and titles
│   │
│   ├── utilities           # Utilities
│   │   ├── _all.sass       # Importing all stylesheets
│   │   ├── animations.sass # Some basic animations
│   │   ├── functions.sass  # Functions
│   │   ├── mixins.sass     # A few useful mixins
│   │   └── variables.sass  # Variables for colors, typography, etc.
│   │
│   └── style.sass          # Main Sass file used as source by Gulp
│
│
├── site                    # SITE BUILD DESTINATION FOLDER
│   ├── fonts               # Font assets
│   │   └── roboto          # Roboto from Google Fonts (TTF, WOFF, WOFF2)
│   │
│   └── images              # Image assets
│       ├── favicon.ico     # Favicon (placeholder by default)
│       ├── og-image.jpg    # Image for og:image meta tag (placeholder by default)
│       └── unicorn.jpg     # Sample image
│
│
├── templates               # PUG TEMPLATES
│   ├── layouts             # Layouts
│   │   └── default.pug     # Default layout
│   │
│   ├── partials            # Partials
│   │   └── unicorn.pug     # Sample partial featuring an image
│   │
│   ├── index.pug           # Home page
│   └── page.pug            # Sample page
│
│
├── .babelrc                # Presets and plugins to use, used by Babel
├── .gitignore              # Files and folders ignored by Git
├── .tool-versions          # Which version to use locally for each language, used by asdf
├── gulpfile.js             # Gulp configuration
├── LICENSE                 # License
├── Makefile                # Commands for this project
├── package.json            # JavaScript dependencies, used by Yarn
├── README.md               # Project documentation
└── yarn.lock               # Tracking exact versions for JavaScript dependencies, used by Yarn

? 레이아웃 구조

스타터에는 다음과 같이 구조화 된 간단한 레이아웃이 제공됩니다.

 // Wrapper
.wrapper
  // Header
  header .header
    .container
      …

  // Main
  main .main
    // Section (repeatable)
    section .section
      .container
        …

  // Footer
  footer .footer
    .container
      …

사이트 구조를 강조 표시합니다

SASS 유틸리티도있어 사이트 구조를 강조 할 수 있습니다 (개발에 매우 ​​유용함). style.sass 사용하려면 @import "dev/structure.sass" 를 사용하지 않으려면 간단히 사용하십시오.

? 캐시 파열

캐시 파열 전략은 각 자산 쿼리에 A ?v=[version] 자동으로 추가하는 것입니다. 캐시를 파열 해야하는 경우 package.json 의 version 업데이트하십시오.

퍼그 템플릿에서는 assetVersion 변수를 사용할 수 있습니다. 용법:

img ( src = "images/unicorn.jpg" + assetVersion, alt = "" )

SASS 파일에서는 urlVersion 기능을 사용할 수 있습니다. 용법:

background-image: urlVersion("/images/unicorn .jpg ")

메타 태그 설정

title , description 및 og: Meta 태그가 생산 준비가 된 구성을 얻으려면 일부 구성을 수행해야합니다. Open Graph 프로토콜 문서에서 OG 메타 태그에 대한 자세한 내용을 읽을 수 있습니다.

1 단계 : 다음 변수를 default.pug 으로 설정합니다.

 - var siteTitle = " Site title " ;
- var siteDescription = " Site description " ;
- var baseUrl = " https://site-url.com " ;

2 단계 : 각 페이지의 pageTitle 변수를 설정하십시오. 예를 들어 index.pug :

 - pageTitle = " Home " ;

3 단계 : OG 이미지를 사용자 정의합니다.

✍️이 작가

• @awea- 아이디어와 초기 작업
• @mmaayylliiss- 디자인, 코드/문서 검토

?? 기여

기부금, 문제 및 기능 요청을 환영합니다! 이 프로젝트에 참여한 기고자 목록을 참조하십시오.

? 특허

정적 사이트 스타터는 GNU General Public License v3.0에 따라 라이센스가 부여됩니다.