the mvm.github.io
Initial Release of V2.0.0
데모 사이트는 이제 IPF로 미러링되었습니다!
Artem Sheludko의 V1.0을 기반으로 한 Armando Maynez.
Adam Blog 2.0은 Github 페이지와 100% 호환되도록 제작 된 Jekyll 테마입니다. GitHub 페이지에 익숙하지 않은 경우 자세한 내용은 문서를 확인할 수 있습니다. Github에서 개인 사이트를 만들고 호스팅하는 Jonathan McGlone의 가이드도 좋은 자료입니다.
Jekyll은 개인, 프로젝트 또는 조직 사이트를위한 간단한 블로그 인식, 정적 사이트 생성기입니다. 기본적으로 Jekyll은 템플릿 파일과 함께 페이지 컨텐츠를 가져 와서 전체 웹 사이트를 생성합니다. 자세한 내용은 공식 Jekyll 사이트를 방문하여 문서를 보려면 문서를보십시오. Codecademy는 또한 완전한 초보자를 위해 Jekyll 사이트를 배치하는 방법에 대한 훌륭한 과정을 제공합니다.
GitHub에서 웹 사이트를 호스팅하는 것의 장점은 실제로 컴퓨터에 Jekyll을 설치할 필요가 없다는 것입니다. Jekyll 또는 명령 줄을 사용하는 방법에 대한 최소한의 지식으로 Github 코드 편집기를 통해 모든 것을 수행 할 수 있습니다. _posts 디렉토리에 게시물을 추가하고 _config.yml 파일을 편집하여 사이트 설정을 변경하기 만하면됩니다. HTML 및 CSS에 대한 초보적 인 지식을 통해 사이트를 원하는대로 수정할 수도 있습니다. CMS (Content Management System)처럼 작용하는 Github 코드 편집기를 통해 모두 수행 할 수 있습니다.
<tweet> </tweet> 클릭하십시오.테마를 실제로 확인하십시오
메인 페이지는 다음과 같습니다.
메인 메뉴의 다크 모드 선택기 :
게시물 페이지는 다음과 같습니다.
맞춤형 응답 404 :
다크 모드는 다음과 같습니다.
Adam Blog 2.0의 전체 로컬 설치를 보려면 Adam Blog 2.0의 사본을 다운로드하여 자체 디렉토리로 연결하십시오. 거기에서 좋아하는 명령 줄 도구를 열고 bundle install 입력 한 다음 jekyll serve 입력하십시오. 귀하의 사이트는 http : // localhost : 4000에서 로컬로 작동해야합니다.
Jekyll을 완전히 익숙하지 않은 경우 https://jekyllrb.com/에서 문서를 확인하는 것이 좋습니다.
GitHub 페이지에서 사이트를 호스팅하는 경우 _config.yml 파일 (또는 다른 파일)으로 변경하면 사이트를 Jekyll과 함께 재구성 할 수 있습니다. 변경 사항은 곧 확인할 수 있어야합니다. 사이트를 현지에서 호스팅하는 경우 변경 사항이 이루어지기 위해 jekyll serve 다시 실행해야합니다.
_posts 디렉토리로 이동하여 현재 웹 사이트에있는 모든 게시물을보고 게시물 파일이 일반적으로 어떻게 보이는지보십시오. 템플릿 게시물을 복제하고 자신의 컨텐츠 추가를 시작할 수 있습니다.
이 저장소를 자신의 계정으로 포크하십시오.
GitHub 페이지와 함께 Jekyll 사이트를 무료로 호스팅 할 수 있습니다. 자세한 내용은 여기를 클릭하십시오.
포킹시 대상으로 사용하는 경우 USERNAME.github.io 라는 저장소가 https://USERNAME.github.io/ , else https://USERNAME.github.io/REPONAME/ )이면 GH-PAGES 브랜치에 게시됩니다. 참고 : 동일한 GitHub 사용자 이름 아래에 여러 사이트를 호스팅하는 경우 사용자 페이지 대신 프로젝트 페이지를 사용해야합니다. 저장소 이름을 'http://username.github.io'이외의 다른 것으로 변경하십시오.
루트 URL에 매핑하는 github-username.github.io repo 외에도 다른 저장소에 GH-PAGES 브랜치를 사용하여 GitHub-username.github.io/repo-name에서 사용할 수 있도록 사이트를 제공 할 수 있습니다.
_config.yml 과 같이 수정해야합니다.
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "이를 통해 자산 및 게시물에 대한 올바른 상대 경로가 구성되도록합니다.
데이터와 함께 루트 디렉토리에 위치한 _config.yml 파일을 수정하십시오.
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts 뉴스 레터를 구성하려면 https://mailchimp.com에서 계정을 작성하고 웹 가입 양식을 설정하고 config.yml 파일의 Enmed Signup 양식에서 링크를 붙여 넣으십시오.
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Disqus를 구성하려면 사이트와 동일한 이름의 Disqus 사이트를 설정하십시오. 그런 다음 _config.yml 에서 disqus_identifier 값을 활성화하려면 편집하십시오.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyDisqus를 설정하는 방법에 대한 자세한 내용.
사이트 색상을 사용자 정의합니다. 다음과 같이 /assets/css/main.css 수정하십시오.
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} 사이트 글꼴을 사용자 정의하십시오. 다음과 같이 /assets/css/main.css 수정하십시오.
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... 글꼴을 변경하면 다음과 같이 /_includes/head.html 도 수정해야합니다. 새로운 글꼴 및 글꼴 무게로 다음 줄을 변경하십시오.
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > 위의 줄 바로 직전에 <style></style> 내에서 모든 것을 삭제하십시오.
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > /_posts/ 디렉토리에서 예제 게시물을 찾을 수 있습니다. 계속해서 게시물을 편집하고 사이트를 다시 구축하여 변경 사항을 확인하십시오. GitHub 페이지의 경우 모든 커밋마다 자동으로 발생합니다. 여러 가지 방법으로 사이트를 재구성 할 수 있지만 가장 일반적인 방법은 jekyll serve 실행하는 것입니다. 이는 웹 서버를 시작하고 파일이 업데이트 될 때 사이트를 자동으로 재생하는 것입니다.
새 게시물을 추가하려면 YYYY-MM-DD-name-of-post.md 의 규칙에 따라 _posts 디렉토리에 파일을 추가하고 필요한 프론트 물질을 포함하십시오. 샘플 게시물을 살펴보고 작동 방식에 대한 아이디어를 얻으십시오. Jekyll이있는 웹 사이트가 이미있는 경우 게시물을 복사하여 Adam Blog 2.0으로 마이그레이션하십시오.
각 게시물의 프론트 물질 옵션은 다음과 같습니다.
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---Markdown을 사용하여 블로그 포스트를 편집하십시오. 다음은 사용 방법에 대한 좋은 가이드입니다.
/assets/img/posts/ 내부에서 이미지를 삭제하고 게시물에 대한 자신의 이미지를 업로드하십시오.
리포지토리 설정에서 Github 페이지가 켜져 있고 메인 또는 마스터 브랜치 (이 저장소를 복제 한 곳)를 가리키십시오.
Jekyll에 익숙하다면 Adam Blog 2.0 디렉토리 구조를 탐색하기가 어렵지 않아야합니다. 다음은 기본 디렉토리 구조간에 알 수있는 차이점의 일부 하이라이트입니다. 이러한 폴더 및 파일이 무엇을하는지에 대한 자세한 내용은 Jekyll 문서 사이트에서 찾을 수 있습니다.
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines 처음부터 완전히 시작하려면 _posts , assets/img/posts 폴더에서 모든 파일을 삭제하고 자신의 컨텐츠를 추가하십시오. _config.yml 파일의 모든 것은 귀하의 요구에 맞게 편집 할 수 있습니다. 또한 favicon.ico 파일을 자신의 Favicon으로 변경하십시오.
블로그 게시물에 트윗 할 수있는 견적이 있고 클릭으로 트윗 블록으로 표시하려면 <tweet></tweet> 태그를 사용하면 클릭으로 트윗 상자로 변환됩니다.
Google 웹 로그 분석을 통해 사이트 통계를 추적 할 수 있습니다. Disqus와 유사하게 Google 웹 로그 분석에 대한 계정을 만들고 _config.yml 파일의 google-ID 에서 사이트의 올바른 Google ID를 입력해야합니다. Google 웹 로그 분석을 설정하는 방법에 대한 자세한 내용.
Atom은 기본적으로 Jekyll-Feed를 통해 지원됩니다. jekyll-feed를 사용하면 _config.yml 파일에서 'title', 'description'및 'author'와 같은 구성 변수를 설정할 수 있습니다.
원자 공급 파일은 https://your.site/feed.xml 예제에 남아 있습니다.
모든 소셜 미디어 아이콘은 Font Awesome의 제공입니다. _config.yml 파일에서 링크 된 계정뿐만 아니라 나타나는 아이콘을 변경할 수 있습니다.
Adam Blog 2.0은 Mathjax와 함께 상자에서 나옵니다.이를 통해 라텍스를 사용하여 게시물에 수학 방정식을 표시 할 수 있습니다. 게시물의 프론터에 Mathjax: yes 추가하십시오.
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
Adam Blog 2.0은 울타리 코드 블록을 통해 구문 강조 표시를 제공합니다. 구문 강조 표시를 사용하면 표시되는 프로그래밍 언어에 따라 소스 코드를 다른 색상과 글꼴로 표시 할 수 있습니다. 지원되는 프로그래밍 언어의 전체 목록을 여기에서 찾을 수 있습니다. 또 다른 옵션은 GIST를 통해 코드를 포함시키는 것입니다.
_config.yml 파일에서 구문 하이라이트의 색상 테마를 선택할 수 있습니다.
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighter옵션에 대한 참조는 형광펜 디렉토리를 참조하십시오.
Jekyll은 Github 향료 Markdown을 지원하여 Markdown 구문을 사용하여 게시물을 포맷 할 수 있습니다.
Jekyll을 최대한 활용하는 방법에 대한 자세한 내용은 Jekyll 문서를 확인하십시오. Jekyll의 Github Repo에 모든 버그/기능 요청을 제출하십시오. 궁금한 점이 있으면 Jekyll Talk에 대해 물어볼 수 있습니다.
기능 요청을하거나 문서에 버그 또는 오타를보고하려면 GitHub 문제를 제출하십시오. 기여를하고 싶다면 풀 요청을 자유롭게 제출하십시오. 이것이 첫 번째 풀 요청 인 경우 먼저 Github 흐름을 읽는 것이 도움이 될 수 있습니다.
Adam Blog 2.0은 사용자가 자신의 고유 한 요구에 맞게 사용자 정의하고 적합 할 수있는 기반으로 설계되었습니다. 기능을 요청하거나 풀 요청을 제출할 때이를 명심하십시오. 내가보고 싶은 변화의 일부 예는 사이트를 쉽게 사용할 수있게하거나 더 나은 일을하는 것입니다. 대부분의 사용자에게 도움이되지 않는 변경 사항을 피하십시오.
이 테마는 완전히 무료 및 오픈 소스 소프트웨어입니다. MIT 라이센스에 따라 배포되므로 원하는대로 사용할 수 있습니다. 문제, 질문이나 제안에 문제가있는 경우 Github 문제를 자유롭게 제출하십시오.
