fbpx

CL LAB

HOME > CL LAB > SSG パート3:GitLab Pagesを使用してあらゆるSSGサイトを構築 #GitLab #SSG #GitLab Pages

SSG パート3:GitLab Pagesを使用してあらゆるSSGサイトを構築 #GitLab #SSG #GitLab Pages

 ★ 8

本ブログは「GitLab」社のブログで2016年7月17日に公開された「SSG パート3:GitLab Pagesを使用してあらゆるSSGサイトを構築」の日本語翻訳です。

SSG パート3:GitLab Pagesを使用してあらゆるSSGサイトを構築


投稿者:Marcia Ramos

どの静的サイトジェネレーター(SSG)がGitLab Pagesで使用できるのでしょうか?SSGサイトをビルドするために、どのようにGitLab CIを設定すれば良いでしょうか?サンプルはどこで見られるのでしょうか?

これらの質問にピンと来た方は、このブログシリーズをぜひご覧ください。「静的サイトジェネレーター(SSG)」という共通のテーマで3つのブログをアップしています。

今回の「SSG パート3:GitLab Pagesを使用してあらゆるSSGサイトを構築」では、GitLab CIを使用したSSGのサンプルをご紹介しますので、ご自身のニーズに合わせてご利用ください。

過去の投稿もご覧ください。

注:このシリーズは、ウェブ開発に精通している方、静的サイトジェネレーターに興味があり、GitLab Pagesでのサイト構築をお望みの方を対象としています。

GitLab Pagesを使用してあらゆるSSGサイトを構築

静的サイトジェネレーターに関する前回の記事では、静的ウェブサイトと動的ウェブサイトの違いと、モダンなSSGに関する概要をご説明しました。それでは、GitLab Pagesでどのように使用できるかを理解していきましょう。

GitLab Pagesを使って、任意のSSGをホストし、ビルドできます!また、カスタムドメインやSSL/TLS証明書を使用したり、好きなだけサイトを作成したり、プライベートリポジトリからサイトをデプロイできます。
そして、GitLab.comでは全て無料でできます!GitLab Pagesに馴染みのない方は、「GitLab PagesでGitLab.comをホスティングする」という記事をお読みになると、GitLab Pagesの情報や、段階を追った詳細な手順方法がわかります。詳細については、クイックスタートガイドおよび公式ドキュメントをご参照ください。

SSGのサンプル

次の表では、GitLab Pagesでビルドされ、GitLab.comでホストされているSSG サイトのサンプルをいくつかご紹介します。 その中には、コミュニティからのコントリビュートも含まれています。皆さんからのコントリビュートもお待ちしております!

GitLab Pagesを使ってサイトを構築する際に重要なのが、 . gitlab-ci.yml . と呼ばれるGitLab CIの設定ファイルです。

GitLab CIを使用してGitLab Pagesを生成するためには、 pages というジョブを作成し、コンパイルしたサイトを public フォルダに生成する必要があります。それ以外は、すべて皆さんのニーズに合わせて調整可能です。

下の表では、それぞれのプログラム言語ごとにまとめています。

プログラム言語:Ruby

SSG ウェブサイト プロジェクトURL 設定
Jekyll Default Theme Source on GitLab Building Jekyll 3.1.2 with Bundler
Middleman Default Theme Source on GitLab Default + Bundler ENV=PRODUCTION
Nanoc Default Theme Source on GitLab Default
Octopress Default Theme Source on GitLab Default

プログラム言語:Node JS

SSG ウェブサイト プロジェクトURL 設定
Hexo Hueman Theme Source on GitLab Default + test job
Brunch Default Skeleton Source on GitLab Default
Harp Default Theme Source on GitLab Default
Metalsmith Default Theme Source on GitLab Default
GitBook Default Theme Source on GitLab Default

プログラム言語:Python

SSG ウェブサイト プロジェクトURL 設定
Pelican Default Theme Source on GitLab Default
Lektor Default Theme Source on GitLab Default
Hyde Default Theme Source on GitLab Default + test job
Nikola Default Theme Source on GitLab Default

プログラム言語:Go Lang

SSG ウェブサイト プロジェクトURL 設定
Hugo Beautiful Hugo Theme (Default) Source on GitLab Default

その他のサンプル

以下のGitLabグループでは、さらに多くのサンプルをご覧いただけます。

グループ 言語 SSG
Pages (Official) Ruby、Node、Pythonなど このブログで紹介されているすべてのSSG
Jekyll Themes Ruby Jekyll
Middleman Themes Ruby Middleman
Themes and Templates その他 その他

注:これらのテーマ、テンプレート、SSGは独断で選んだもので、GitLab CI を使用したサンプルとしてご紹介する目的で掲載しています。

FAQ:どのSSGから始めるのが良いでしょうか?

これはなかなか難しい質問で、簡単に答えられるものではありません。3、4種類のSSGをローカルにインストールし、実際に試してみるのが一番かもしれません。こちらのリストも参考になるかもしれません。

まずどこから始めればいいのかわからない方や、静的サイトジェネレーターを使ったことがないという方には、Jekyllから始めることをお勧めします。理由は以下の通りです。

  • 内容が非常に充実している
  • 検索して得られる情報量が多い
  • テンプレートエンジンがよくできており、コードを間違えることがない
  • 習得が容易

しかし、これは単なる提案に過ぎず、より良い選び方があるはずです。例えば、あなたがプログラマーであれば、SSGが書かれている言語(Ruby、JavaScript、Pythonなど)に応じて、自分が慣れ親しんだものを選べば良いでしょう。PHPの開発者であれば、PHPのテンプレートエンジンを搭載したSSGを選ぶとよいでしょう。

困った時は・・・

GitLab.comのGitLab Pagesに関してわからないことがありましたら、こちらからお気軽にご連絡ください。Pagesグループでイシューを作成することもできます。

まとめ

この記事をもって、SSGに関する連載は以上となります。このブログで静的サイトジェネレーターの仕組みや機能をご理解いただき、静的サイトジェネレーターを使い始めるきっかけとなれば幸いです。新しいSSGやご自身のテンプレートを使用して、ぜひとも先述のグループ等にコントリビュートしてください。

New call-to-action

New call-to-action

CL LAB Mail Magazine

CL LABの情報を逃さずチェックしよう!

メールアドレスを登録すると記事が投稿されるとメールで通知します。

メールアドレス: 登録

※登録後メールに記載しているリンクをクリックして認証してください。

Related post

[無料ウェビナー] GitLab_CI/CDハンズオン_2023111