- 追加された行はこの色です。
- 削除された行はこの色です。
[[Git]] > Github Pages
[[Git_Github]] > Github Pages
GithubでWebページを公開する仕組み
#contes
#contents
* Github Pagesでhtmlから作る [#hbd718a5]
-[[GitHub Pages:https://pages.github.com/]]
ページは、2種類の場所に作ることができます。
自分のアカウントに紐づいた「ユーザーページ」と、レポジトリ別の「プロジェクトページ」。
** ユーザーページの作り方 [#t38e2fa2]
+ 自分のアカウントに、「account-name.github.io」という新レポジトリを作る
+ そこに、必要なHTMLファイルを置く
+ 「http://account-name.github.io/」にアクセスする
HTML Kickstartとか使うと、楽チン。作ってみた。
- http://ycatch.github.io/
** プロジェクトページの作り方 [#s12d51f4]
レポジトリにgh-pagesというブランチを切って、必要ファイルをそのブランチに突っ込めば、完成。
+ ページを作りたいレポジトリ(yourRepository)に、「gh-pages」というブランチを作成
+ そこに、必要なHTMLファイルを置く
+ 「http://account-name.github.io/yourRepository」にアクセスする
作ってみた。
- http://ycatch.github.io/hello-world/
- http://ycatch.github.io/mameblock.js/
** ページの更新 [#ub2db1c4]
変更内容をMasterブランチにCommitして、Masterをgh-pagesにマージする。
** 参考 [#ubddeb27]
-[[Web - Githubを使って3分でHPを公開する。 - Qiita:http://qiita.com/budougumi0617/items/221bb946d1c90d6769e9]]
-[[Git初心者でも大丈夫！完全無料でGithub PagesにWebページを公開する方法:http://liginc.co.jp/web/html-css/html/96453]]
-[[実践GitHub Pages運用のユースケースとワークフローの詳細 | ゆっくりと…:http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/github-pages-workflow/]]
-[[GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…:http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/github-pages-almost-perfect-guide/]]
* jekyllで作る [#v3f7d489]
* jekyllで、Github pagesを作る [#v3f7d489]
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/
** インストール [#ue2a94c8]
$ gem install github-pages
$ github-pages -v
Rubyも入れておく
** Jekyllプロジェクトを作る [#o84db74f]
$ jekyll new jekyll-demo
$ cd jekyll-demo
** レンダリングしてローカルで確認 [#j08b7181]
$ jekyll s
または
$ jekyll build
$ jekyll serve
これで、http://localhost:4000/ でページを確認できる。
** Githubリポジトリに入れる [#sec2ca11]
リポジトリの中身を入れ替えればOK
あとは、レポジトリをpushする。
** ページタイトルなどを変える [#h54c5b3e]
＿config.yml を編集する
** 書き方 [#pa45757e]
postフォルダにMDファイルを追加すると、ページになる。
** 参考 [#t3936b68]
- 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
** 参考資料 [#zf8f0db1]
- 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の資料 [#m04468c2]
Jekyllは、Rubyでできている。
** Ruby [#d6ac23ee]
まず、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 [#l0f30eab]
- Jekyll • シンプルで、ブログのような、静的サイト https://jekyllrb-ja.github.io/
- WindowsでJekyllを動かす http://jekyllrb-ja.github.io/docs/windows/
** Quick-start ガイドをやってみた [#t5623cac]
> ~ $ gem install jekyll
> ~ $ gem install bundler
> ~ $ jekyll new myblog
> ~ $ cd myblog
> ~/myblog $ jekyll serve
> # => http://localhost:4000 を見てください
bundelerが無いといわれたので追加した。
コマンドラインの文字コードは、シフトJISのままでも平気だった。
** Jekyll に theme を適用する [#j7bd26b9]
- 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/
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
