the mvm.github.io
Initial Release of V2.0.0
DEMOサイトはIPFにミラーリングされました！
Artem SheludkoによるV1.0に基づくArmando Maynezによる。
Adam Blog 2.0は、GitHubページと100％互換性があるように構築されたJekyllテーマです。 GitHubページに不慣れな場合は、詳細についてはドキュメントをご覧ください。 GitHubで個人サイトの作成とホストに関するJonathan McGloneのガイドも良いリソースです。
Jekyllは、個人、プロジェクト、または組織サイト向けのシンプルでブログ認識の静的サイトジェネレーターです。基本的に、Jekyllはテンプレートファイルと一緒にページコンテンツを取り、完全なWebサイトを作成します。詳細については、ドキュメントについては、公式のJekyllサイトをご覧ください。 Codecademyは、完全な初心者向けにJekyllサイトを展開する方法に関する優れたコースも提供しています。
GitHubでWebサイトをホストする美しさは、実際にJekyllをコンピューターにインストールする必要がないことです。 Jekyllまたはコマンドラインの使用方法に関する最小限の知識を使用して、GitHubコードエディターを通じてすべてを実行できます。あなたがしなければならないのは、 _postsディレクトリに投稿を追加し、 _config.ymlファイルを編集してサイト設定を変更することです。 HTMLとCSSの初歩的な知識を使用すると、サイトを好みに合わせて変更することもできます。これはすべて、コンテンツ管理システム（CMS）のように機能するGitHubコードエディターを介して行うことができます。
<tweet> </tweet>タグを追加します。動作中のテーマを確認してください
メインページは次のようになります：
メインメニューのダークモードセレクター：
投稿ページは次のようになります：
カスタムレスポンティブ404：
ダークモードは次のようになります：
Adam Blog 2.0のローカルインストールについては、Adam Blog 2.0の独自のコピーをダウンロードして、独自のディレクトリに解凍します。そこから、お気に入りのコマンドラインツールを開き、 bundle install入力してから、 jekyll serveを入力します。サイトは、http：// localhost：4000でローカルで稼働している必要があります。
Jekyllをまったく初めて使用する場合は、https：//jekyllrb.com/でドキュメントをチェックするか、Smashing Magazineのチュートリアルがあります。
GitHubページでサイトをホストしている場合、 _config.ymlファイル（または他のファイル）に変更をコミットすると、Jekyllでサイトの再構築が強制されます。変更された変更は、すぐに表示可能である必要があります。地元でサイトをホストしている場合は、変更が行われるためにjekyll serve再度実行する必要があります。
_postsディレクトリにアクセスして、現在Webサイトにあるすべての投稿を表示し、投稿ファイルが一般的にどのように見えるかの例を表示します。テンプレートの投稿を複製して、独自のコンテンツの追加を開始するだけです。
このリポジトリを独自のアカウントにフォークします。
GitHubページでJekyllサイトを無料でホストできます。詳細については、ここをクリックしてください。
フォーキングの場合、宛先としてUSERNAME.github.ioという名前のリポジトリを使用する場合、URLはhttps://USERNAME.github.io/ https://USERNAME.github.io/REPONAME/ ）になり、サイトはGH-Pagesブランチに公開されます。注：同じgithubユーザー名の下で複数のサイトをホストしている場合は、ユーザーページの代わりにプロジェクトページを使用する必要があります。リポジトリ名を「http://username.github.io」以外のものに変更するだけです。
github-username.github.ioのリポジトリに加えて、ルートURLにマップすると、他のレポにGH-Pagesブランチを使用してサイトを提供できるようにサイトを提供できます。
これには、 _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でアカウントを作成し、Webサインアップフォームを設定し、 config.ymlファイルの埋め込みサインアップフォームからリンクを貼り付けてください。
# 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を実行し、Webサーバーを起動し、ファイルが更新されたときにサイトを自動化することです。
新しい投稿を追加するには、 YYYY-MM-DD-name-of-post.mdの慣習に続く_postsディレクトリにファイルを追加するだけで、必要なフロントマターが含まれています。サンプルの投稿を見て、それがどのように機能するかについてのアイデアを取得してください。既にJekyllで構築されたWebサイトがある場合は、投稿をコピーして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 Folderのすべてのファイルを削除し、独自のコンテンツを追加するだけです。 _config.ymlファイルのすべてを編集して、ニーズに合わせて編集できます。また、 favicon.icoファイルを自分のFaviconに変更します。
ブログ投稿にツイート可能な見積もりがあり、クリックするツイートブロックとして機能する場合は、 <tweet></tweet>タグを使用するだけで、それらの間のすべてがクリックしてツイートボックスに変換されます。
Google Analyticsを使用して、サイトの統計を追跡することができます。 Disqusと同様に、Google Analyticsのアカウントを作成し、 _config.ymlファイルにgoogle-IDの下にあるサイトの正しいGoogle IDを入力する必要があります。 Googleアナリティクスのセットアップ方法の詳細。
Atomは、Jekyll-Feedを通じてデフォルトでサポートされています。 Jekyll-Feedを使用すると、 _config.ymlファイルで「タイトル」、「説明」、「著者」などの構成変数を設定できます。
Atom Feedファイルはhttps://your.site/feed.xmlの例でライブになります。
すべてのソーシャルメディアのアイコンは、Fontの礼儀です。 _config.ymlファイルで、どのアイコンが表示されるか、およびリンクするアカウントを変更できます。
Adam Blog 2.0はMathJaxで箱から出てきます。これにより、LaTexを使用して投稿に数学的方程式を表示できます。 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オプションの参照については、Highlighterディレクトリを参照してください。
Jekyllは、Githubフレーバーのマークダウンをサポートしています。これにより、Markdown Syntaxを使用して投稿をフォーマットできます。
Jekyllを最大限に活用する方法の詳細については、Jekyll Docsをご覧ください。 Jekyll's Github Repoですべてのバグ/機能リクエストをファイルします。質問がある場合は、ジキルの話で彼らに尋ねることができます。
機能リクエストを行うか、ドキュメントにバグやタイプミスを報告する場合は、GitHubの問題を提出してください。貢献したい場合は、プルリクエストをお気軽に送信してください - ボーナスとして、以下のすべての貢献者をクレジットします！これが最初のプルリクエストである場合、最初にgithubフローを読み上げるのに役立つかもしれません。
Adam Blog 2.0は、ユーザーが独自のニーズに合わせてカスタマイズして適合するためのベースとして設計されています。機能をリクエストしたり、プルリクエストを送信したりするときは、これを覚えておいてください。私が見たいと思う変更の例は、サイトの使いやすくなるもの、またはより良い方法をするものです。大多数のユーザーに利益をもたらさない変更は避けてください。
このテーマは完全に無料でオープンソースソフトウェアです。 MITライセンスの下で配布されているため、必要な場合に使用できます。問題や質問や提案がある場合は、GitHubの問題をお気軽に提出してください。
