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

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

カテゴリ一覧

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

一覧

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

ホーム > 翻訳記事

翻訳記事

SSGを知る③:様々な静的サイト・ジェネレータを使うための予備知識 | from about GitLab.com / Marcia Ramos

  GitLabPagesで静的サイト・ジェネレータを使う時に、
 どんなCI設定をすればいいの?
 だいたいどんなサイトが出来上がるの?
 

  前回、静的サイト・ジェネレータの使い方を大まかに紹介しましたが、今回は、静的サイト・ジェネレータ使いこなすために最低限必要な知識を紹介します。

  例示サイトで使用されている各SSGのGitLab CI設定が、どのような内容を設定しているかも大まかにわかりますので、ぜひご一読ください。
 

  【前回の記事】

SSGを知る①:静的 vs 動的 ウェブサイト
SSGを知る②:最近の静的サイト・ジェネレータ事情 

注:今回は、ウェブ開発に関する知識をある程度持ち合わせている人を対象にした記事です。
 静的サイト・ジェネレータに興味があり、特にGitLab Pagesへのデプロイを真剣に考えている方は、ぜひご一読ください。

 

  

  それぞれのSSGの特徴

  前回の記事までは、静的サイトと動的サイトの違い
 最近の静的サイト・ジェネレータの大まかな傾向をご説明しました。

 それでは今回は、GitLab PagesでSSGを使いこなすために、それぞれのSSGの違いを理解していきましょう。
 

  GitLab PagesではどんなSSGでも使えます。本当です。
 カスタムドメインも使えます。SSL/TLSも可能です。
 非公開レポジトリからでもサイトを公開することができます。
 無料です。
 思い通りのサイトを作れるはずです。

  GitLabPagesでサイトを展開する方法を詳しく知りたい方は、こちらの手順を書いたページをご覧ください。
 また、公式のクイックスタートガイドと、ドキュメントも併せてご覧いただくと、詳しい情報が得られます。


 

  SSGの紹介

  GitLab Pages は公式で、いくつかのSSG使用見本を公開しておりますが、それらがどのようにビルドされたかを下の表にまとめました。

 見本の中には、コミュニティから発信されたものもあります。個人で作成した使用見本も受け付けております
 

  サイトをビルドするにあたって、鍵となるのが、GitLab CI設定ファイル.gitlab-ci.yml)です。

  GitLab CIの設定の中でも、pagesというjobグループが中心的な役割を果たします。主にこれの指示に従って、サイトをコンパイルし、publicフォルダに保存します。
 サイトをどのようにビルドするかについては、pagesグループを調整すると良いというわけです。
 

  以下に示す表は、ページ見本として紹介されているSSGを、それぞれ使用言語(開発環境)ごとに分類したものです。
 

 開発環境: Ruby

SSG サイト見本 ソースコード CI設定の内容
Jekyll Default Theme Source on GitLab Building Jekyll 3.1.2 と 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 サイト見本 ソースコード CI設定
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 サイト見本 ソースコード CI設定
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 言語

SSG サイト見本 ソースコード CI設定
Hugo Lanyon Theme (Default) Source on GitLab Default

 

 

  よりたくさんの見本ページを探したい

  見本ページを積極的に公開しているグループはいくつもあります。代表的なものを紹介します。

Group 開発環境 SSGs
Pages (Official) Ruby, Node, Python, etc. この記事で紹介したSSGがすべて載っている
Jekyll Themes Ruby Jekyll
Middleman Themes Ruby Middleman
Themes and Templates Miscellaneous Miscellaneous

 

 注:ここで紹介したテーマ、テンプレートにつきましては、上の表にの情報を参考に、開発環境やSSGに合っているものをお選びください。開発環境等が一致していても、ものによってはCI設定に変更を加えなくては使えません。

 

  FAQ: どの静的サイト・ジェネレータがおすすめですか。

  ややこしいこと訊いてきますね。そんなの簡単に答えられませんよ。
 ですが、基本的にはSSGをローカル環境に3つか4つインストールして、比較してみることです。こちらのページも参考になります。
 

  ですが、「静的サイトの始め方なんて知らない」「静的サイト・ジェネレータなんて触ったこともない」
という本当の初心者だけれども、この記事に目を通している方だって本当はいらっしゃいますよね。
そのような方には、Jekyllをおすすめしています。なぜかというと、

  • 説明が豊富
  • ウェブ上に情報が多く載っている
  • テンプレートが既に出来上がっていて、コードを変更する必要がない
  • 要はそこまで重く考えなくても使える

 という点が挙げられます。初心者の方には「サイトをどう作るか」を大まかに知ってもらうことが、ひとまずの目標だと考えています。

 しかし、この回答は決して万人受けするわけではありません。
 たとえば、世の中にはサイト作りに関しては初心者でも、プログラミング言語に明るい方もいらっしゃいます。
そのような方には、ご自分の得意な言語(Ruby, JavaScript, Pythonなど)で書かれたSSGを使うことがおすすめです。
 これまでPHPを中心に扱ってきたプログラマの方は、SSGもPHPテンプレート・エンジンを採用したほうが、有効に使いこなせると思います。他の言語でも同じことが言えます。


 

  質問を送る

  GitLab Pagesに関する疑問がなかなか解決しない場合は、ヘルプチャンネルに質問をお送りください。また、Pagesグループの掲示板に質問を掲載することもできます。

 

  しめくくり

  シリーズ「SSGを知る」は今回で終了です。
 これまで静的サイトが大まかにどんなものかを説明してきました。
 このシリーズを読んでみて、実際に静的サイト・ジェネレータを使ってみるきっかけにしていただけると、こちらもうれしいです。

  そして、サイト作りになれて来たら、新たなSSGでご自分のサイトをカスタマイズしてみたり、テーマやテンプレートを制作してみてください。
 出来上がったページやテンプレートは、できる限り早くテーマグループ側(上の表にもあるような)にご報告ください。皆さんのひな型を待ちわびている方がいらっしゃるかもしれません。

  すでにSSGを使ったことがあるという方は、アンケートにご協力いただけると幸いです。
 内容は「あなたが便利だと思ったSSG」を選択肢から選び取るというものです。GitLabPages開発の大事な参考データになります。
 できれば、お知り合いにもこのアンケートを紹介してください。

  

 

 
PDF
更新日:2017-10-27 21:00:57 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文 ] https://about.gitlab.com/2016/06/17/ssg-overview-gitlab-pages-part-3-examples-ci/ Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

僕がHugo静的サイト・ジェネレータをGitLabで使うときにしたCI設定 | from Leow Kah Man - Tech Blog

 週末にかけて、GitHubに構えていた私のブログをGitLabに移転しました。GitLabだとCIビルドが自動的にできるところが便利です。  僕はGitLabのレポジトリにNodeJS Dockerイメージを構…2017-11-18 13:00:02

【GitLab 公式 を訳してみた】Dockerイメージを使う

GitLab Documentation > GitLab Continuous Integration (GitLab CI) > Docker integration >Dockerイメージを使う  GitLab CIは、GitLab ランナーと連携して、Dockerエンジンを様…2017-11-18 00:10:16

【GitLab 公式 を訳してみた】 .gitlab-ci.yml 設定メニュー

 (訳者より:翻訳がもうだいぶ進んだところで、GitLab CIについてネットで検索をかけてみたところ、 Qiitaにてynott様が公開されたバージョン があることに気がつきました。  原…2017-11-17 23:50:27

【GitLab 公式 を訳してみた】GitLab CI/CDで使える変数

GitLab Documentation > GitLab Continuous Integration (GitLab CI) >GitLab CI/CDで使えるAPI変数  GitLab ランナーは、CIから送られてきたjobをもとに、ビルド環境を整えます。…2017-11-17 23:50:02