「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

English⇒Japanese

ホーム新着翻訳記事一覧 > 新着翻訳記事

新着翻訳記事

GitLab Pagesをホストする |GitLab.comのもう1つの使い方| from GitLab.com / Marcia Ramos

  みなさんこんにちは。
 当サイトGitLab.comでは、あなたのウェブサイトを無料でホストするという使い方もあるんです。名前を GitLab Pages といいます。
 この記事では、GitLab.comにGitLab Pagesをホストする使い方を、その具体的な方法も交えて説明します。
 

  これからGitLabでページを新しくウェブページを作ろうと考えている方にも、段階ごとに解説しますので、ぜひ参考になさってください。

 

  まず、GitLabで作成できるページには、制限があります。
 当サービスは、静的サイトにしか対応していません。その代わり、全ての静的サイト・ジェネレータをお使いいただけます。
 (静的サイト・ジェネレータ:静的サイトを作成するためのソフトウェアのこと。 JekyllHugoHexoMiddlemanPelicanなどが有名。)
 

  ウェブページの開発、制作、公開には、 Gitというシステムを使っています。

 

  

 

  始め方

 GitLab Pagesを始める方法は、主に2つあります。
 1つは、すでに公開されているウェブサイトをフォークする方法。
 もう1つは、ほとんど自力で新しいサイトを作る方法です。

  公式ガイドでは、 Middlemanというジェネレータでサイトを作成する方法が公開されていますが、他にも使えるソフトはたくさんあります。
 むしろそこは、ご自分の好みにあうサイトを複数探し出して、それを参考にする方法をとるのがよろしいかと思います。
 実際によく使われている静的サイト・ジェネレータは、Jekyll、 Hugo、 Hexo、 Bruch などのようです。
 

  そこで今回、公式ガイドに載っていないツールの使い方を今すぐ調べたいという方のために、この記事をご用意しました。

  GitLab Pagesのシステムなどの詳しい説明は、公式ガイドにお任せするとして、このページでは「どのようにして自分のページを作るか」ということに的を絞ってご案内いたします。

  追記:GitLab 8.17ではGitLab Community Editionユーザー向けに、GitLab EE 8.3版の公式ガイドでは、GitLab.com と  GitLab Enterprise Editionユーザー向けに、 その他サイト・ジェネレータに関する説明が追加されました。

 

  ウェブサイトの種類

  GitLab Pagesに出されるウェブサイトの種類は、大まかに2つに分類され、それぞれ作り方に違いがあります。

  1. 個人・少人数グループで作るウェブサイト - ユーザーや少人数のグループで作るシングルサイト。
  2. プロジェクト用ウェブサイト - 上記に当てはまらなかった、かなり大型化したサイト。

     詳しくは、こちらのドキュメントをご覧ください。

     

  グループでサイトを作るときには、名前空間を用意しましょう

  グループでサイトを作る時、同じサイトを作っているとはいえ、作業はいくつかの班に分かれて行っている場合がありますね。そのような時には、班ごと、必要に応じてユーザーごとに名前空間を持たせると便利です。

  実は、今独りで活動しているか、これといったグループに所属していないユーザーさんも、個人の名前空間を所持しておくことが推奨されています。

 たとえば、あなたが自分の名前空間「ニックネーム」を所持していたとします。仮にあなたが何らかのプロジェクトに参加することになりました。その組織にも名前空間があります。ここでは「某プロジェクト」としておきましょう。
 あなたは名前空間を持っているので、そのプロジェクトに参加するときには、「某プロジェクト」の中の「ニックネーム」として認証されています。すると、プロジェクトで活動をする時には「ニックネーム」として、個人で何かを制作する時には「アカウント名」で活動できるようになります。
 これにより、あなたがこのサイトで複数の活動をするときに、個人的な活動と、プロジェクトでの活動を切り分けることができます。
 

  もちろん、異なる名前空間で作成したサイトには、それぞれ違うURLが与えられます。
 たとえば、あなたが個人的に作成したサイトは、「https://アカウント名.gitlab.io
 あなたがグループで作成したサイトは、「https://グループ名.gitlab.io」というようなURLになります。

 

  GitLab PagesにおけるCI設定について

  GitLab CI設定ファイルを使用すると、ウェブサイトを作成する上で必要な作業をいくつか指定して、自動化させることができます。ファイル名と拡張子は、「.gitlab-ci.yml」です。

  このファイルには、ウェブサイトをランナーでどのようにビルドするかが記載されています。YAMLで設定します。YAMLという言語はシンタックスの一種です。設定の前にこちらのクイックスタートガイドを読んでください。
 このファイルはrootディレクトリに配置する必要があります。

  CI設定でできることは、ビルドの工程を指定することのほか、内容を把握することもあげられます。きちんと内容を把握することで、安心してご利用いただけます。
 サイトをビルドする時の工程は、「パイプライン>ビルド>ビルドIDを付ける」というのが基本です。ここにさらにコマンド追加できます。記述できないコマンドはありません。
 この設定をうまく利用すれば、ローカルマシンと遜色なく効率的に作業がすすむはずです。
 

 
 たとえば、あなたがサイトジェネレータにJekyllを使っていたとして、あなたはそこにJekyll プラグインを導入しようとしています。
 それには、Gemfile の中に必要な gem を入れることと、npmbundleを使用することなど、いくつか設定が必要な部分があります。
 ここで必要なコマンドは、適宜調べていくほかありません。
 

  それから、作成した.gitlab-ci.ymlファイルは、それぞれのレポジトリごと、またはブランチごとに区別することができます。
 これを利用すれば、公開用のマスターブランチの他に、テスト用のパラレルブランチを用意して、そこで新たな設定を試すことができます。うまくビルドできれば、それをそのままマスターブランチにしてしまえばよいでしょう。

  「CI Lint」というツールで.gitlab-ci.ymlのシンタックスに誤りがないかどうかを調べることができます。
 まずはアカウントにログインして、ご自分のプロジェクトを開きます。その中の「Pipelines」という項目に移動してください。そのページの右側にCI Lintボタンがあります。
 

  さらに詳しく知りたい方は、GitLabドキュメントの「.gitlab-ci.yml」の部分を読んでください。


 

  GitLab Pagesで新しくサイトを作成する

  さて、基本的な知識を身につけたところで、本題に入りましょう。
 早速、このサイトで新しくサイトを作っていくのですが、それにはおおよそ次のような工程を踏みます。

  1. プロジェクトを立ち上げる 
  2. コンフィグファイルの編集(.gitlab-ci.yml) 
  3. コンテンツをアップロードする 
  4. カスタムドメインを追加(適宜) 
  5. 完成

  これらのステップをもう少し詳しく具体的に説明します。
 追記:ここで記したものとほとんど同じ方法を、別のチームが映像にしてくれました。そちらもご覧いただくと、さらに分かりやすいでしょう。

 

  ステップ1:プロジェクトを立ち上げる

  これはもう、ログインすればすぐにわかるという方も多いでしょう。

 

  • ダッシュボードに「+ New Project」という大きな緑のボタンがありますね。 これをクリックしてください。
  • それからこの2つを設定してください:
    • Project path - これから作るプロジェクトの名前です。この時のURLは、「 https://gitlab.com/namespace/(ここにプロジェクト名)」となります。
    • Privacy - プロジェクトにアクセスできる範囲を選択してください。「private」を選べばあなただけ、 「internal」ならGitLab.comユーザーだけがアクセスでき、「public」なら誰にでもコードを公開し、閲覧も、コピーも、フォークも可能な状態にします。
 注:GitLab.comでのウェブサイトのホストには、プライベートレポジトリを使うことができます。来訪者にさらされる部分に制限をかけることができるので、プロジェクトを勝手に他人に書き換えられる可能性は下がります。 ただし、ブラウザの「要素を調査」や「ページのソースを表示」などの機能を使えば、どのようにしてそのサイトが作られたかはある程度特定されてしまいます。 

 

  ステップ2:コンフィグファイルを追加する:.gitlab-ci.yml

  さて、ここがサイトを立ち上げるときの難関かもしれません。しかし、使いこなせば色々な工夫ができるようになります。
 ぜひマスターしましょう。

 ここではA、B、Cの3つの事例を紹介します。それぞれあなたのCI設定の参考にしてください。

  例A:プレーンHTMLウェブサイト用

  プレーンなHTMLサイトを立ち上げるときには、 .gitlab-ci.ymlファイルの設定も簡単です。

======================
 pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
   paths:
   - public
  only:
  - master
======================
 この設定は、ランナーを「pages(ページ)」に対して適用するときの具体的な動作を指定しています。ここに記されている指示通りにウェブサイトが展開されます。構築されたウェブサイト(artifacts)は、public パスに移動されます。それから、最終的な変更はmasterブランチに反映された時にのみ(only)適用されます。

  ページのビルドがきちんと成功したあとは、artifacts以下に書かれた設定で、ページのアップロードに向けて準備を進めていくようになっています。

 

  例B:Jekyllウェブサイト用

  Jekyllは静的サイト・ジェネレータの中でも最も人気があります。次に紹介するのは、GitLabで紹介されているものと同じものです。

  JekyllはRubyで書かれたジェネレータです。特にブログの制作を意識してつくられたそうです。なので、サイトといってもブログのようなスタイルでコンテンツを配置します。
 たとえば、コンテンツリストは新しい物順に並べられますし、アーカイブリストの作成や、その他ブログによくある機能の作成に適しています。

  記事は、 LiquidMarkdownYAMLで記述できます。
 Jekyllでビルドできるのは静的ウェブサイトなので、HTML、CSS、JSを使用したサイトを構築します。
 (このツールに人気があることは確かですが、同じような環境を構築し、同じようなテンプレートシステムを使い、複数のマークアップ言語へ対応しているサイト・ジェネレータはたくさんあります。)
 

  JekyllでウェブサイトをビルドするためのCI設定は、次のサンプルをひな型にするとよいでしょう。

======================
 image: ruby:2.1

 pages:
  script:
  - gem install jekyll
  - jekyll build -d public/
  artifacts:
   paths:
   - public
  only:
  - master
======================

 まずこのスクリプトは、 Ruby 2.1.x 環境で動作することを想定しています。これはJekyllをインストールした環境と同じです。
 ビルドされたサイトは、publicパスで移動します。そして、更新はマスターブランチ反映後のみという設定です。
 Jekyllで初めてサイトを作るという方は、ひとまずこのコピーを.gitlab-ci.ymlに貼り付けることをおすすめします。
 

  Jekyllを使っている人なら、ビルドの際に Bundlerを使いたいとお考えでしょう。GitLabでもサンプルを用意しています。
 他のJekyllのバージョンを使いたい場合は、Jekyll Themesサンプルをよく見てに目的にかなったテーマをセットアップするとよいでしょう。今回の記事はそのサンプルを参考に作成されています。
 Jekyll用CIの基本がわかったら、あとはお好きなJekyllプラグインを入れるなどして、色々と工夫してみてください。

 

  例C: Hexoウェブサイト用

  もう1つ、ブログ対応フレームワークでもHexoの設定方法をご覧いただきます。こちらはNodeJSでビルドされたフレームワークです。
 NodeJSは、Google V8というとても高いパフォーマンスを誇るエンジンをベースに作られた、サーバーサイド JavaScript環境です。
 

  Hexoサイトの基本的な .gitlab-ci.yml設定は、次の通りです。

======================
 image: node:4.2.2


 pages:
  cache:
   paths:
   - node_modules/

  script:
  - npm install hexo-cli -g
  - npm install
  - hexo deploy
  artifacts:
   paths:
   - public
   only:
   - master
======================

 注意:node:4.2.2を使うには、あらかじめDockerイメージを支度しておく必要があります。
 この設定では、npmモジュールを「cache」に保管してから、hexo-cliをインストールすることになっています。hexoサイトを展開するのはそれからです。
 展開先はデフォルトでは「public」ディレクトリです。変更はマスターブランチ反映後。これは、他の事例でも同じでしたね。
 

  Pagesというコラムに、デフォルトのHexoサイトをGitLab Pagesに展開した見本が置かれています。また、テンプレートの見本を置いているページには、Hexoで作成したサイトのデモがもう1つ置いてあるので、そちらも参考にしていただけるとよいかと思われます。

 

  ステップ3:コンテンツをアップロードする

  コンテンツをリモートプロジェクトにプッシュすれば、すぐさまビルドが始まります。

  ただし、単純に静的サイト・ジェネレータが作成したローカルディレクトリにコンテンツを入れても、ビルドエラーしか起こりません。
 これは、静的サイト・ジェネレータを使用している方に多い間違いです。
 具体的にいえば、Jekyllなら「 _site」ディレクトリに、Middlemanなら「build」ディレクトリに、Hexoなら「public」ディレクトリにサイトをアップするという間違いです。

 しかし、プロジェクトのroot ディレクトリから、「.gitignore」ファイルを開いて設定すれば、特定のディレクトリに入っているコンテンツをアップロードできるようになります。
 

  たとえば、Jekyllサイトで「_site」ディレクトリでのアップロードをしたい場合は、「.gitignore」ファイルに 「_site」と記述しましょう。

  gitignoreの本来の役割は、リモートレポジトリの中でアップロードさせないファイルを決定することです。今回の使い方はその応用といえるでしょう。
 gitignoreの詳しい使い方については、公式ガイドに従ってください。

 

  ステップ4:カスタムドメインを追加

  注意:TLSサポートが受けられるカスタムCNAMEは、GitLab EE 8.5以降で使えるようになった機能です。

  この工程は任意です。必須ではありません。
 GitLab.comにホストしたウェブサイトに、独自ドメイン名を追加することは可能です。
 独自ドメインを決定しない場合は、そのまま「https://あなたの名前空間.gitlab.io」というURLが割り当てられます。ご安心ください。
 

  独自ドメインで可能なこと

  •  独自ドメインを含め、GitLab Pagesプロジェクトのドメインを変更するには、「カスタム・サブドメイン」にご希望のドメインを追加する必要があります。(例:subdomain.example.com
  • 1つのプロジェクトに複数のエイリアスドメインを付けることができます。(例:『example.com』に『example.net』『my.example.org』などのドメインを追加することができます。他にも、あなたの『 mynamespace.gitlab.io』『 mynamespace.gitlab.io/myproject』の中にあるプロジェクトを識別する目的で、『 another-example.com』などのドメインを追加するという使い道もあります。)
  • ドメインにエイリアスを持たせることで、1つのロケーションにいくつものドアを設けることが可能です。
  • 変更したドメインでもHTTPS接続を使いたい場合は、SSL/TLSデジタル証明書を、プロジェクトで使用するドメインに貼り付けてください。なお、デジタル証明書は1つのドメインに1つづつ必要となります。
     

  カスタムドメインを設定する

  •  まずはプロジェクトのダッシュボードに移動します。そこから「Settings ( ) > Pages > New Domain」に移動します。
  • ドメインを 最初の欄に追加します。(例:mydomain.com)
  • SSL/TLSデジタル証明書とその公開鍵を、それぞれのフィールドに追加します。HTTPSにしたければ、この項目を空にしてはいけません。
  • Create New Domainをクリック
  • 最後に、 domain control panel にアクセスして、新しくDNS A record を作成します。ここでGitLab PagesサーバーでのIPアドレスが与えられます。

 すると、このように表示されるでしょう。

 mydomain.com A 52.167.214.135 

 追記:GitLab PagesのIPアドレスは、2017年3月6日を以て「52.167.214.135」に変更されました。以前のIPアドレス「104.208.235.32」はお使いいただけません。

 

  サブドメインを追加するのも、おおよそ同じ方法です。

  • ファースト・フィールドにサブドメインを追加します。(例: subdomain.mydomain.com)
  • 新しく DNS CNAME recordを作成し、サブドメインが「myusername(あなたの名前空間).gitlab.io」を指すように設定します。

 subdomain.mydomain.com CNAME myusername.gitlab.io 

  
  ドメインにエイリアスを追加するときも、サブドメインと同様の方法を取ります。
 

  追記:組織で活動する場合、DNS recordsはあなたのドメイン名を登録するために使われます。GitLabにおけるすべての組織は、DNS Zone Management機能を持ち合わせており、そこに全メンバーのリンクが集約できます。特定の誰かに詳しく質問するときなど、お互いのやり取りを図る時に便利です。詳しいセットアップの方法は、こちらのヘルプをご覧ください。

  DNS Zone Managementに独自ドメイン名を登録しても、すぐには反映されない場合があります。数分間時間を置いてから、もう一度チェックすると、正常に表示されることがあります。

 

  サイトのサンプルを見るには

  公式サイトの「Pages」というコーナーでは、各ジェネレータを使用したサイトのサンプルが公開されています。ここで、Ruby、NodeJS、Python環境の比較をしてみるとよいかもしれません。
 今回の記事で参考にしたページは以下の4つです。

  

 ですが、これらはあくまでこの記事を作るために適当に選び出したものなので、おすすめであるわけではありません。 もちろん、それぞれのツールでしなくてはならないCI設定は異なります。 

 

  よくある質問

  Q. ここで紹介されたすべての機能を無料で利用できますか

  A. はい。そうです!
 GitLab.comでのアカウントの作成、無制限プライベート・レポジトリ、プロジェクト、ウェブサイト、組織参加、全て無料でできます!
 1つのプロジェクトにつき10GB、公開されるPages artifacts(ウェブページ)1GBの容量が与えられます。しかし、プロジェクトはいくら作成しても構いません。ディスクスペースそのものは無制限です。
 そんな環境で作られた、ファイルの内容まで公開されているプロジェクトをぜひご覧ください➡(移動する)
 

  Q. publicフォルダはどこにありますか

  A. ウェブページをダウンロードするつもりですか?
 それには、ビルドに成功したら、プロジェクトのPipelines > Builds > Build ID > Browseボタンを押してください。するとその画面に表示されているウェブページをダウンロードすることができます。
 

  Q. 本当にどんな静的サイト・ジェネレータでも使えるのですか

  A. はい。静的サイト・ジェネレータなら何でも使えます

  Q. SSL/TLSデジタル証明書は、無料のものでも構いませんか

  A. もちろんです! 自分で書いたりCloudFlareを使う方法もありますよ。
 

  Q. テーマに手を加えても良いのでしょうか

  A. はい。というより、むしろそれが奨励されています。
  ただし、そのテーマを公開する前に、まずはご自分のウェブサイトでセットアップして、きちんと動くかどうかを確かめてください。公開する時には、ご自分のプロジェクトへのリンクを忘れないことです。
  あなたの興味が向いた既存テーマのフォークで構いません。どしどしお待ちしております。
 

  Q. 本当に.phpページを使うことはできないんですか。データベースを自分のサイトに接続することもだめですか

  A. 両方できません。GitLab Pagesでホストできるのは静的サイトだけです。
   なので、使える言語はHTML、CSS、JSのみです。

 

  質問を送る

  GitLab Pagesについて他にも質問がある場合は、GitLab.comのチャンネルに送ってください。これまでの質問はこちらのページで確認できます。
 

  さいごに

  ここで紹介した方法で、あなたがGitLab でウェブページをうまく作ってくれることを願います。

  GitLabのツイッターでは、最新情報がアップされます。ぜひフォローしてください。

  あなたのサイトが楽しみです!

 追記:この記事は新しいGitLab UIに合わせて、2016年6月17日にアップデートされました。


 

  筆者について

 Marcia Ramos
 
 主にWordPressのバックエンドを開発しているウェブディベロッパー。 Virtua CreativeというJekyllサイトでは、フロントエンドもいくつか手掛けている。
 バージョン管理システム関連の開発に15年ほど従事している。まだまだ知識欲旺盛。専門分野を限定せず新しいことを学びたい。記事を書いたり、勉強したり、他人に教えたり、オープンソースプロジェクトにも参加してみたりする。
 追記:2016年5月からGitLabチームに参加。
 

 

PDF
更新日:2017-09-23 11:13:08 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
公開ノート

訳者は一度も使ったことがありません。情報に誤りがあるかもしれません。どうぞ、ご注意を。

[ 原文 ] https://about.gitlab.com/2016/04/07/gitlab-pages-setup/ Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLabには「GitLab Pages」という機能があります。  GitLab…2017-09-23 12:10:55

SSGを知る②:最近の静的サイト・ジェネレータ事情 | from about GitLab.com

 引き続き、静的サイト・ジェネレータ特集です。  前回は、「静的サイトとは何か」というような内容で終わってしまいましたが、いよいよ本題です。  静的サイト・ジェネレータって…2017-09-23 11:58:35

SSGを知る①:静的 vs 動的 ウェブサイト | about GitLab.com

 ウェブサイトは静的なものと、動的なもの2つに分かれますが、それらにはどのような違いがあって、どのような長所があるのでしょう。  GitLab Pagesで扱えるのはどっちだろう?  静…2017-09-23 11:23:00

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!①

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab Pages のこと全部教えます!① 記事の 種類 : 取扱説明書 || 対象 : 初心者 || …2017-09-23 11:17:34