새로운 웹사이트를 시작하기 위한 Jekyll 스캐폴딩. https://marcanuy.github.io/jekyll-skeleton/
목차
이것은 모든 웹사이트의 시작점 역할을 하기 위해 jekyll new --blank
(테마나 예제 게시물 없이)를 사용하여 만든 기본 Jekyll 사이트입니다.
그 목적은 새 Jekyll 인스턴스를 생성할 때마다 추가하고 구성했던 모든 기능을 이미 갖추고 있어 이 저장소를 복제하고 필요에 맞게 사용자 정의하는 새로운 웹사이트를 빠르게 시작하는 것입니다.
라이브 데모는 어떤 테마도 사용하지 않고 웹 사이트 탐색 디자인과 게시물/카테고리 추가 방법을 보여주는 것이 유일한 목표이기 때문에 매우 " 최소화 "되어 보입니다.
그 구조는 How To Add Bootstrap 4 To Jekyll The Right Way, Multilingual Jekyll Without Plugins and How To Implement Breadcrumbs On A Jekyll Site With Nested Category 기사에 설명된 디자인을 빈 Jekyll 인스턴스에 적용하고 아래 플러그인에서 제공하는 제안을 사용합니다.
이 저장소를 복제하고 저장소 구축을 시작하세요.
git clone [email protected]:marcanuy/jekyll-skeleton.git
각 jekyll 빌드 에서 자동으로 생성됩니다:
/sitemap.xml
의 http://sitemaps.org 호환 사이트맵/feed.xml
의 Atom 피드입니다. /assets/main.scss
및 /_sass/_variables.scss
에서 SASS 및 Bootstrap 4 변수의 쉬운 사용자 정의.
검색 엔진 및 소셜 네트워크에 대한 메타데이터 태그를 자동으로 추가합니다.
사이트 제목이나 설명이 추가된 페이지 제목
<head>
<title>...</title>
</head>
페이지 설명
<head>
<meta name="description" content="..."/>
</head>
표준 URL
<link rel="canonical" href="..."/>
페이지가 매겨진 페이지의 다음 및 이전 URL
더욱 풍부한 색인 생성을 위한 JSON-LD 사이트 및 게시물 메타데이터
<meta property="fb:app_id" content="1822851531277021"/>
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "WebPage",
"headline": "...",
"description": "...",
"url": "..."}</script>
오픈 그래프 제목, 설명, 사이트 제목 및 URL(Facebook, LinkedIn 등의 경우)
<meta property="og:title" content="..."/>
<meta name="description" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:url" content="..."/>
<meta property="og:site_name" content="..."/>
<meta property="og:type" content="..."/>
<meta property="article:published_time" content="..."/>
<meta property="fb:app_id" content="..."/>
Twitter 요약 카드 메타데이터
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="..."/>
<meta name="twitter:creator" content="..."/>
다국어
각 페이지의 다른 모든 번역 버전에 대한 언어 탐색 메뉴
<a hreflang="es" href="http://example.com/es/foobar" />
<a hreflang="de" href="http://example.com/de/foobar" />
<a hreflang="en" href="http://example.com/en/foobar" />
HTML의 head
섹션에 있는 대체 링크 요소
<link rel="alternate" hreflang="es" href="http://example.com/es" />
<link rel="alternate" hreflang="de" href="http://example.com/de" />
<link rel="alternate" hreflang="en" href="http://example.com/en" />
기본 언어 하위 폴더에서 사이트 홈페이지로 리디렉션( /en
-> /
)
페이지 및 게시물의 탐색경로
<!-- url: /jekyll-skeleton/en/example-post -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/jekyll-skeleton/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li class="breadcrumb-item ">
<a href="/jekyll-skeleton/en">en</a>
</li>
<li class="breadcrumb-item active">
Example Post
</li>
</ol>
jekyll-skeleton은 다음 원칙을 염두에 두고 만들어졌습니다:
jekyll-seo-tag
사용 제안을 따릅니다.git clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make install
make serve
_config.yml
에 언어를 추가합니다.
defaults:
#languages
-
scope:
path: ""
values:
lang: "en"
layout: default
-
scope:
path: "es"
values:
lang: "es"
해당 이름은 _data/locales.yml
이고 /_data/map.yml
의 언어로 된 각 페이지에 해당합니다.
-
en: index.html
es: es/index.html
-
en: about.html
es: es/acerca.html
언어 하위 디렉토리( /en
, es
등)에 있는 각 언어로 게시물을 추가하세요.
게시물 머리말의 다음 속성이 사용됩니다.
---
title: # jekyll-seo-tag - The title of the post, page, or document
description: # jekyll-seo-tag - A short description of the page's content
image: # jekyll-seo-tag - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
author: # jekyll-seo-tag - Page-, post-, or document-specific author information (see below)
lang: # jekyll-seo-tag - Page-, post-, or document-specific language information
---
Jekyll-skeleton은 다음 플러그인을 사용합니다:
Github에서 이 저장소에서 파생된 사이트를 호스팅하려면 다음 가이드를 따르세요: Github에 Git 푸시를 사용하여 Github 페이지에 Jekyll 웹사이트 자동화 배포 .
$ 빌드 만들기 rm -fr _site/ rm -fr 자산/공급업체/ #원사에서 rm -fr 자산/글꼴 #fontawesome 의존성 rm -fr .sass_cache 번들 설치 --공급업체/번들러 경로 경고: 실행 중인 Bundler 버전(1.13.6)은 잠금 파일을 생성한 버전(1.15.0)보다 이전 버전입니다. `gem install Bundler`를 실행하여 최신 버전의 Bundler로 업그레이드하는 것이 좋습니다. 동시 Ruby 1.0.5 사용 i18n 0.8.1 사용 minitest 5.10.2 사용 thread_safe 0.3.6 사용 public_suffix 2.0.5 사용 컬러레이터 1.1.0 사용 컬러 1.2 사용 ffi 1.9.18 사용 전달 가능 확장 2.6.0 사용 용병 0.3.6 사용 mini_portile2 2.1.0 사용 병렬 1.11.2 사용 소리 2.0.7 사용 Sass 3.4.24 사용 rb-fsevent 0.9.8 사용 크램다운 1.13.2 사용 액체 3.0.6 사용 루즈 1.11.1 사용하기 safe_yaml 1.0.4 사용 번들러 1.13.6 사용 tzinfo 1.2.3 사용 주소 지정이 가능한 2.5.1 사용 에톤 0.10.1 사용 rb-inotify 0.9.8 사용 pathutil 0.14.0 사용 노코기리 1.7.2 사용하기 jekyll-sass-converter 1.5.0 사용하기 액티브지원 5.1.1 사용 태풍 0.8.0 사용 듣기 3.0.8 사용 jekyll-toc 0.2.1 사용하기 HTML 교정기 3.7.2 사용 jekyll-watch 1.5.0 사용하기 지킬 3.4.3 사용하기 jekyll-feed 0.9.2 사용하기 0.12.1에서 jekyll-redirect-redirect 사용하기 jekyll-seo-tag 2.2.3 사용하기 jekyll-sitemap 1.1.1 사용하기 묶음 완성! 7개의 Gemfile 종속성, 이제 38개의 gem이 설치되었습니다. 번들로 제공되는 gem은 ./vendor/bundler에 설치됩니다. 원사 설치 원사 설치 v0.24.5 [1/4] 패키지 해결 중... 성공 이미 최신 상태입니다. 0.38초 안에 완료됩니다. mkdir -p 자산/공급업체/ cp node_modules/font-awesome/css/font-awesome.min.css 자산/vendor/ cp -r node_modules/font-awesome/fonts 자산 cp node_modules/jquery/dist/jquery.min.js 자산/공급업체/ cp node_modules/tether/dist/js/tether.min.js 자산/vendor/ cp node_modules/bootstrap/dist/js/bootstrap.min.js 자산/vendor/ 번들 exec 지킬 빌드 구성 파일: /tmp/jekyll-skeleton/_config.yml 출처: /tmp/jekyll-skeleton 목적지: /tmp/jekyll-skeleton/_site 증분 빌드: 비활성화되었습니다. --incremental로 활성화 생성 중... 5.474초 만에 완료되었습니다. 자동 재생: 비활성화됨. 활성화하려면 --watch를 사용하세요. $ 트리 -L 3 _site/ _대지/ ├── 자산 │ ├── 글꼴 │ │ ├── FontAwesome.otf │ │ ├──fontawesome-webfont.eot │ │ ├── Fontawesome-webfont.svg │ │ ├── Fontawesome-webfont.ttf │ │ ├── Fontawesome-webfont.woff │ │ └── Fontawesome-webfont.woff2 │ ├── main.css │ └── 공급업체 │ ├── bootstrap.min.js │ ├── 글꼴-awesome.min.css │ ├── jquery.min.js │ └── tether.min.js ├── 데 │ ├── beispiel-post.html │ ├── index.html │ └── 카테고리1 │ ├── index.html │ └── post-in-untercategorie.html ├── 배포_키.enc ├── ko │ ├── example-post.html │ ├── index.html │ └── 하위 카테고리1 │ ├── index.html │ └── post-in-subdirectory.html ├── 에 │ ├── index.html │ ├── post-ejemplo.html │ └── 하위 카테고리1 │ ├── index.html │ └── post-en-subdirectorio.html ├── 피드.xml ├── index.html ├── 라이선스 ├── 패키지.json ├── 읽어보세요.md ├── robots.txt ├── 사이트맵.xml └── 원사.잠금 9개 디렉터리, 32개 파일 $ 확인하세요 번들 exec 지킬닥터 구성 파일: /tmp/jekyll-skeleton/_config.yml 테스트 결과가 나왔습니다. 모든 것이 괜찮아 보입니다. 번들 exec htmlproofer --check-html --http-상태-무시 999 --internal-domains marcanuy.github.io,localhost:4000 --확장 가정 _대지 *.html의 ["_site"]에서 ["ScriptCheck", "LinkCheck", "HtmlCheck", "ImageCheck"] 실행... 14개의 외부링크를 확인하는 중... 13개 파일을 실행했습니다! HTML-Proofer가 성공적으로 완료되었습니다.
자유롭게 이슈를 공개하거나 기여해 보세요!