Github_pages

Git_Github > Github Pages

GithubでWebページを公開する仕組み

GitHub Pages †

• GitHub Page を使う - GitHub Docs

https://docs.github.com/ja/github/working-with-github-pages

Github Pagesでhtmlから作る †

• GitHub Pages

ページは、2種類の場所に作ることができます。 自分のアカウントに紐づいた「ユーザーページ」と、レポジトリ別の「プロジェクトページ」。

ユーザーページの作り方 †

1. 自分のアカウントに、「account-name.github.io」という新レポジトリを作る
2. そこに、必要なHTMLファイルを置く
3. 「http://account-name.github.io/」にアクセスする

HTML Kickstartとか使うと、楽チン。作ってみた。

• http://ycatch.github.io/

プロジェクトページの作り方 †

レポジトリにgh-pagesというブランチを切って、必要ファイルをそのブランチに突っ込めば、完成。

1. ページを作りたいレポジトリ(yourRepository)に、「gh-pages」というブランチを作成
2. そこに、必要なHTMLファイルを置く
3. 「http://account-name.github.io/yourRepository」にアクセスする

作ってみた。

• http://ycatch.github.io/hello-world/
• http://ycatch.github.io/mameblock.js/

ページの更新 †

変更内容をMasterブランチにCommitして、Masterをgh-pagesにマージする。

参考 †

• Web - Githubを使って3分でHPを公開する。 - Qiita
• Git初心者でも大丈夫！完全無料でGithub PagesにWebページを公開する方法

• 実践GitHub Pages運用のユースケースとワークフローの詳細 | ゆっくりと…
• GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…

jekyllで、Github pagesを作る †

markdownからWebページをレンダリングしてくれる。

Github Pagesは、jekyllをレンダリングエンジンに採用している。

• GitHub Pages の Jekyll で Web サイトを無料公開する方法 - Qiita　 http://qiita.com/takuya0301/items/374b2ab5be407b138ef9

• GitHub Pages https://pages.github.com/

• Jekyll Tips(日本語版) チュートリアル http://jekylltips-ja.github.io/

• Adding a Jekyll theme to your GitHub Pages site - User Documentation https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/

インストール †

$ gem install github-pages
$ github-pages -v

Rubyも入れておく

Jekyllプロジェクトを作る †

$ jekyll new jekyll-demo
$ cd jekyll-demo

レンダリングしてローカルで確認 †

$ jekyll s

または

$ jekyll build
$ jekyll serve

これで、http://localhost:4000/ でページを確認できる。

Githubリポジトリに入れる †

リポジトリの中身を入れ替えればOK

あとは、レポジトリをpushする。

ページタイトルなどを変える †

＿config.yml を編集する

書き方 †

postフォルダにMDファイルを追加すると、ページになる。

　参考 †

• Minimal Mistakes テーマではじめる Github Pages with Jekyll - k11i.biz http://k11i.biz/blog/2016/08/11/starting-jekyll-with-Minimal-Mistakes/
• MaterialDesignカラーを適用したJekyllテーマ「Materi」 | |ω・) Interest-Driven Blogging http://blog.ogaclejapan.com/2015/02/09/like-a-materialdesign-theme-for-jekyll/
• Big Sky :: GitHub Pages が Jekyll 3.0 になり、ますますブログが書きやすくなった。 http://mattn.kaoriya.net/software/20160215110235.htm

参考資料 †

• 30分のチュートリアルでJekyllを理解する http://melborne.github.io/2012/05/13/first-step-of-jekyll/
• Jekyllで作るシンプルWebサイト | CodeGrid https://app.codegrid.net/series/jekyll
• Jekyllで作るシンプルWebサイト - Jekyllとはなにか | CodeGrid https://app.codegrid.net/entry/jekyll-introduction

Jekyllの資料 †

Jekyllは、Rubyでできている。

Ruby †

まず、RubyとRuby Gemがいるよね。

• RubyInstaller for Windows https://rubyinstaller.org/

• Rubyをインストール／アップデートするには？（Windows編） - Build Insider http://www.buildinsider.net/language/rubytips/0004

rubyとDevelopment Kitを入れておく

Windows10のbashでもいいかも。

Jekyll †

• Jekyll • シンプルで、ブログのような、静的サイト https://jekyllrb-ja.github.io/
• WindowsでJekyllを動かす http://jekyllrb-ja.github.io/docs/windows/

Quick-start ガイドをやってみた †

> ~ $ gem install jekyll
> ~ $ gem install bundler
> ~ $ jekyll new myblog
> ~ $ cd myblog
> ~/myblog $ jekyll serve

> # => http://localhost:4000 を見てください

bundelerが無いといわれたので追加した。 コマンドラインの文字コードは、シフトJISのままでも平気だった。

Jekyll に theme を適用する †

• kakakikikekeのブログ: Jekyll に theme を適用する方法 http://kakakikikeke.blogspot.jp/2015/11/jekyll-apply-theme.html
• Supported themes - GitHub Pages https://pages.github.com/themes/
• Jekyll Themes http://jekyllthemes.org/
• Jekyll Themes & Templates https://jekyllthemes.io/