Jekyll 웹 사이트 개선

Jekyll은 Ruby 기반의 정적 사이트 생성기입니다.이것은 유행하는 선택으로 내용에 더욱 관심을 가진 간단한 블로그를 만들 수 있다.

부터https://jekyllrb.com/
jumpstart에는 GitHub 페이지와 호환되는 간단한 템플릿이 많이 있습니다.네가 Markdown개의 파일을 쓰기 시작하기만 하면, 너는 곧 웹 사이트를 만들고 실행할 수 있다.그러나 통상적으로 최적화되지는 않는다.다음은 일반적으로 무료 템플릿에 속하지 않는 몇 가지 내용을 보여 줍니다.

구글 분석

사이트 지도

RSS/ATOM Feed

이메일 구독

리뷰

점진적 네트워크 응용(PWA)

이 모든 것들은 사용자에게 차등 체험을 가져다 줄 것이다.간단한 강화를 통해 우리는 사이트의 Lighthouse 점수를 크게 높일 수 있다.

등대 현장 득점

Excellence/Perfection is not a destination; it is a continuous journey that never ends. - Brian Tracy

TLDR:Show me the codeShow me the site
⚠ 사전 요구 사항 알림: 이 문서에서는 Jekyll 웹 사이트의 작동 방식에 대해 기본적으로 알고 있다고 가정합니다.프로젝트 리소스에 대한 빠른 개요는 Folder Structure를 참조하십시오.

구글 분석 추가📈

이동Google Analytics하고 Start Measuring를 클릭합니다.당신은 아래의 순서에 따라 당신의 웹 페이지를 등록할 수 있습니다.같은 단계 가이드를 원하시면 official doc를 보십시오.완성되면 Jekyll 프로젝트로 가서 _config.yml에 GA 속성 id를 추가합니다. 아래와 같습니다.

google_analytics: UA-XXXXX

모든 전자 페이지에서 분석을 실행하려면 기본 레이아웃에 스크립트를 추가해야 합니다.대부분의 항목에 대해 그것은 _layouts/default.html일 것이다.제목 섹션에 다음을 추가합니다.

{% if site.google_analytics %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', '{{ site.google_analytics }}');
</script>
{% endif %}

현재, 미래의 모든 프로젝트 템플릿에서 이 템플릿을 사용할 수 있습니다.google_analytics에 지정되지 않은 경우_config.yml 키는 표시되지 않습니다.

사이트 맵🗺

사이트 맵은 웹 페이지의 위치를 표시하는 문서입니다. (.txt 또는.XML일 수 있습니다.)그것들은 검색엔진 파충류가 당신의 사이트의 모든 페이지를 파충류하여 더욱 좋은 검색 결과를 얻는 데 도움을 줄 수 있다.Jekyll 플러그인을 사용하여 쉽게 추가할 수 있습니다.

plugins:
    ...
    - Jekyll-sitemap
    ...

이것은 루트 단계 /sitemap.xml 에서 페이지를 생성합니다.당신은 지금 그것을 Google Search Console에 추가하여 색인의 장점을 누릴 수 있습니다!

RSS/ATOM Feed🔔

jekyll-feed 플러그인을 사용하면 간단한 해결 방법이 하나 더 있습니다.플러그인을 추가하여 묶음 설치를 진행하면feed가 /feed.xml부터 나타날 것입니다.

plugins:
    ...
    - Jekyll-feed
    ...

현재 당신의 사용자는 글을 쓸 때 알림을 받을 수 있도록 구독원을 구독할 수 있습니다.

이메일 구독💌

사용자가 어떤 일을 발표하고 싶을 때 연락처를 설정하고 싶다면, 전자 우편 구독을 설정할 수 있다.915는 유행하는 옵션이다.블로그를 처음 쓰는 대다수의 사람들에게 공짜 차원이 있으면 충분할 것이다.
계정을 설정한 후 Create>Signup Forms>Embedded form를 클릭합니다.
MailChimp
이제 지정된 코드를 복사하여 includes 아래에 붙여넣을 수 있습니다.기존 주제와 동일한 모양을 유지하도록 HTML 및 CSS를 수정할 수 있습니다.mailchimp.html 라는 섹션을 만들었다면, 다른 layouts 섹션에 포함할 수 있습니다.

제 맞춤형 제작을 추가하면 이렇게 보입니다.많이 좋아졌어요. 그렇죠?

코멘트💬

이 공간에서는 약간의 선택이 있다.어떤 사람들은 프라이버시 문제를 걱정하고, 다른 사람들은 위탁 관리를 필요로 한다.따라서 일종의 해킹 방식은 GitHub 문제를 논평으로 사용하는 것이다.어떤 포장들은 그것을 쉽게 한다.그 중 하나는 이다.
Utterances
그것은 매우 간단하고 설치하기 쉽다.저장소에 사용 권한을 추가하고 주석이 필요한 레이아웃에 작은 스크립트를 추가하기만 하면 됩니다.로드 시간에 영향을 주지 않도록 추가async를 확인합니다.

점진적 네트워크 응용(PWA)📱

웹 응용 프로그램을 PWA로 강화하는 것은 어느 정도 장점이 있다.PWA의 세부 사항을 탐색하는 데는 일련의 시간이 필요하다. (나는 계속 글을 추가할 것이다.)너는 에서 나의 댓글을 볼 수 있다.이 섹션에서는 기본manifest.json을 사용하여 PWA 기능을 활성화하고 페이지를 방문할 때 웹 사이트를 오프라인으로 사용할 수 있도록 캐시하는 서비스 직원을 설치합니다.이를 위해 저는 주로 Alok PrateekJS Service Workers의 강좌를 따랐습니다.변경이 완료되면 Lighthouse(Chrome inspector 탭)에서 몇 가지 잔소리를 합니다.자세한 내용은 Lighthouse 탭의 참조 링크를 참조하여 볼 수 있습니다.우리 이 문제들을 해결합시다!

유성 가르침 시작 화면 사용자 정의

아이콘 자원을 목록에 추가합니다.최소 512x512의 json 파일입니다.

차단 가능 아이콘

목록에 차단 가능한 아이콘을 추가합니다.json 파일, 최소 192x192.

{
    "src": "/assets/images/gt-logo-maskable.png",
    "sizes": "240x240",
    "type": "image/png",
    "purpose": "maskable"
}

를 사용하여 이미지를 마스킹 가능 형식으로 변환할 수 있습니다.

위장했어응용 프로그램 편집기 애플 터치 아이콘

기본 레이아웃의 head에 링크 태그를 추가합니다.

<link rel="apple-touch-icon" href="/assets/images/logo.png">

추가 SEO 최적화🧪

모든 페이지/게시물에 설명 및 제목 추가

소셜 미디어 공유를 위한 축소판 그림 추가

<meta property="og:image" content="{{site.url}}{{site.baseurl}}/assets/images/page-img.jpg">
<meta property="twitter:image:src" content="{{site.url}}{{site.baseurl}}/assets/images/page-img.jpg">

https://ones-zeros.royniladri.dev/turbocharge-your-jekyll-website