ローカル上のJekyllサイトを GitHub Pages で公開する方法（単純に静的ファイルのUpLoadのみで）
ローカル上のJekyllサイトを GitHub Pages で公開する方法だが、GitHub Pages のJekyllレンダリングを使うとカスタマイズされたプラグインが使えないとかいろいろ制約がある。 そこで単純に、サイト公開用のリポジトリに静的ファイルのUpLoadのみで済まそうという話。実際よく使われているやり方。
これじゃ普通にレンタルサーバにFTPとかでアップロードするのと意味的には変わらないけど、ローカルでやることの自由度があり、git pushでアップできる簡単さもある。また公開して試したGitHub Pagesのサイトを試験的なベースにして他のWEBサーバへ公開するというのも、使い方としてはありなんじゃないかと思う。
前提：GitHub Pages の自分のサイトのリポジトリを作っておく。ここでは前に作ったJekyllのサイト「Febris」という名前で作った。 このリポジトリは必ず新たに作る。既存のリポジトリを使うとかしないこと。ローカルの既存のフォルダと紐づいていたりすると、プッシュしたときエラーでまくる。
ローカルにJekyllのサイトを作る
/home/ユーザに/MyProject/Febrisというフォルダを作って、そこにJekyllのサイトを構築することにした。
$ mkdir ~/MyProject/Febris $ cd ~/MyProject/Febris
rbenvでローカル用のRubyバージョンを指定しておく。
$ rbenv local 2.5.3 $ rbenv version 2.5.3 (set by ~/MyProject/Febris/.ruby-version)
とりあえずBundlerで初期化、gemのインストール場所など指定。
$ rbenv exec bundle init Writing new Gemfile to ~/MyProject/Febris/Gemfile $ bundle install --path vendor/bundle The Gemfile specifies no dependencies Resolving dependencies... Bundle complete! 0 Gemfile dependencies, 1 gem now installed. Bundled gems are installed into `./vendor/bundle`
Jekyllのインストール
$ bundle add jekyll $ bundle exec jekyll new --force --skip-bundle . $ bundle install
組み込みWEBサーバを立ち上げて、ローカルのサイトを確認
$ bundle exec jekyll serve Configuration file: /home/jgb/MyProject/Febris/_config.yml Source: /home/jgb/MyProject/Febris Destination: /home/jgb/MyProject/Febris/_site Incremental build: disabled. Enable with --incremental Generating... Jekyll Feed: Generating feed for posts done in 0.331 seconds. Auto-regeneration: enabled for '/home/jgb/MyProject/Febris' Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
ローカルのJekyllサイトを Git の管理対象にして、GitHubにアップ
GitHub Pages のJekyllレンダリングを使わないので、GitHubにアップするのはレンダリングされた静的ファイルだけでいい。
_siteフォルダに移動して、そこだけ git の管理対象に置く。
$ cd _site
$ git init
$ git add .
コミットしてプッシュするまで......。
$ git commit -m "Add a new github blog site. [Febris]" $ git branch -m master gh-pages $ git remote add origin https://github.com/82pkdick/Febris.git $ git push origin gh-pages
成功すればプッシュの後、ずらずら〜と出てきて終了。
これで GitHub の自分のGitHubサイトの「Febris」リポジトリの「gh-pages」ブランチに、ローカルのJekyllサイトがアップロードされているはず（現在はmasterブランチにプッシュすることもできるらしい）。
_config.ymlを修正して再度アップする
だがこのままでは_config.ymlのbaseurlやurlなどの設定が空（ローカル専用）なので、ローカルのサーバ上ではうまく表示されても GitHub Pages 上では/assets/main.cssなどが読み込まれていないはずだ（スタイルが適用されていないHTMLが見える）。
そこでローカル側で_config.ymlを編集する。
下記のポイントを訂正する。
title: Febris #<- 公開するサイトタイトル email: #<- 自分のEmail description: >- # サイトの説明 # baseurl と url を GitHub Pages のリポジトリに合わせる。 baseurl: "/Febris" url: "https://82pkdick.github.io"
他の項目は自分に合わせて適当に。
これで普通にビルドすると、 HTMLで読み込まれるCSSファイルやその他のアセット類のアドレスが、GitHub の公開リポジトリのURLを基準にした相対パスになる。
ただこれだと逆にローカルで試すときに困るので、ビルドコマンドを次のように空のbaseurl付きで実行し、OKなら普通にjekyll serveする。
jekyll serve --baseurl ""
Gitのことがよく分かっていない私は、ここでついコミットしようとしてしまう。しかし_config.ymlを変更保存し、そのままにコミットしようとしてもChanges not staged for commitのエラーがでる。
$ git commit -m "Changed baseurl to https://82pkdick.github.io/Febris" Changes not staged for commit: modified: 404.html modified: about/index.html modified: feed.xml modified: index.html modified: jekyll/update/2019/01/16/welcome-to-jekyll.html no changes added to commit
Git はデフォルトの動作では、git addコマンドで明示的に指定したファイルのみがコミットの対象になる。つまりバージョン管理の対象であるファイルに変更を加えても、git addコマンドでまずコミット対象を指定しなければ、そのファイルの変更点はコミットされない。
git statusしてみると、変更点がステージされていないと言われるので、この点がよく分かる。
$ git status ブランチ gh-pages Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: 404.html modified: about/index.html modified: feed.xml modified: index.html modified: jekyll/update/2019/01/16/welcome-to-jekyll.html
またgit diffすると変更されたがコミットされていない箇所が見える。git diffの結果は、インデックス内のファイルと作業ツリー内のファイルの差分である。
$ git diff diff --git a/404.html b/404.html index f9ecc8e..b0eb713 100644 --- a/404.html +++ b/404.html ........................................ -<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Febris" /></head> +<link rel="stylesheet" href="/Febris/assets/main.css"><link type="application/atom+xml" rel="alternate" href="https://82pkdick.github.io/Febris/feed.xml" title="Febris" /></head>
ここはきちんとgit add .からやり直す。
$ git add . $ git status ブランチ gh-pages コミット予定の変更点: (use "git reset HEAD <file>..." to unstage) modified: 404.html modified: about/index.html modified: feed.xml modified: index.html modified: jekyll/update/2019/01/16/welcome-to-jekyll.html
気をとりなおして再度コミットしてプッシュ
$ git commit -m "Changed baseurl to https://82pkdick.github.io/Febris" [gh-pages cf054e8] Changed baseurl to https://82pkdick.github.io/Febris 5 files changed, 36 insertions(+), 36 deletions(-) $ git push origin gh-pages .................................................... To https://github.com/82pkdick/Febris.git 40d3454..cf054e8 gh-pages -> gh-pages
これで GitHub Pages の「Febris」というリポジトリに変更されたファイルがアップロードされる。
公開URLは、https://82pkdick.github.io/Febris/になる。基本「ユーザID.github.io/リポジトリ名/」
_config.ymlでbaseurlとurlを GitHub Pages 用に変更したあと、ちゃんとビルドされていれば、HTMLのhead内で読み込んだmain.cssのURLが/Febris/assets/main.cssとなっており、公開URLのサイトでもローカルで見たのと同じようにスタイルシートが適用されているはずだ。
