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

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

カテゴリ一覧

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

一覧

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

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

新着翻訳記事

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

  週末にかけて、GitHubに構えていた私のブログをGitLabに移転しました。GitLabだとCIビルドが自動的にできるところが便利です。
 僕はGitLabのレポジトリにNodeJS Dockerイメージを構築して、Hugoをダウンロードしました。さらにNPMから UglifyCSS と HTMLMinifier を入手して、ページをビルドする時に圧縮もかけられるようにしました。そしてページを発表する時は、Gitのマスターブランチを上書きするだけです。

 

  なぜGitLabに移転したか

  Hugo静的サイト・ジェネレータについては、ここ1年くらい使っています。
 ブログはですね、最初はGoogle Firebaseにホストしていました。でも大してせずに、GitHubページに乗り換えました。そこで、こないだまで1年くらいブログを更新していたんです。どちらもブログを作る上で便利でしたよ。

  それでも、どうしてブログを移転することにしたか。

  かいつまんで言えば、GitLabのほうがブログの制作工程を自動化できそうだったから、です。

  もう少し詳しく説明しますね。たしかに、今まではそのサイトの作り方でも困らなかったんですよ。
 僕のサイトの作り方の特徴をあげるなら、だいたいこんな感じです。

 1.まず、僕はVisual Studio Codeを使いながら、Markdownでブログ記事を書いている。

 2.Hugoというツールは、MarkdownをHTMLに素早く変換して、できた記事がすぐに見られるし、バッチファイルではコマンドラインを本格的に使えるという理由で、使っている。

 3.僕のブログのソースファイルは、 Google CIoud Source Repositoriesに同期される。

 4.僕は記事を発表する時に、Hugoのパラメータを変更するんじゃなくて、記事を「public」フォルダに置くというやり方を取っている。
 そのあとにCSSやHTMLファイルを圧縮している。そのためのコマンドもバッチファイルに記述されている。
 

 5.それから、publicフォルダのバックアップをローカルGitクローンに取るために、Free File Syncを使っている。これはオープンソースのフォルダ同期ツール。ブログの更新をマスターブランチに反映させるのは、いつもバックアップを取ってから。

  ただ、この先まだまだブログ記事を書くんだとしたら、記事の1つ1つをこうして作っていくのに少し無理を感じ始めました。週末の時間がどんどん押されていくことが気になってきたのです。

 

  どこを、どのように自動化するか

  Gitレポジトリでサイトを作るということは、コンテンツもソースも公開しているということです。

  そこで、Google CIoud Repository、GitHub Pages、GitLab Pagesの無料プランを比べて表にしてみました。

 Google CIoud RepositoryGitHub PagesGitLab Pages
レポジトリの容量制限1GB1GB10GB
月ごとの通信量制限10GB100GB無制限
非公開レポジトリありなしあり
公開レポジトリなしありあり
使える静的サイト・ジェネレータなしJekyllほぼすべて*

 

  *これはDockerイメージをCIビルドで使うことができるかという意味です。GitLabページにホストできるツールは、こちらのページに詳しく書かれています。

 

  Dockerイメージをどのように使ったか

  GitLab CIコンフィグレーションを3つ比べてみます。コンフィグファイルはYAML形式です。

 

  1.GitLabの場合

  GitLabで使えるDockerは「Alpine Linux」というイメージなんですけど、これのサイズはなんとたった5MBなんです。

  そのキーラインがこちら。

 

 ===============================

 

 image: alpine
 variables:
 HUGO_VERSION: '0.23'
 HUGO_SHA: 'c9cf515067f396807161466c9968f10e61f762f49d766215db37b01402ca7ca7' before_script:
 - apk update && apk add openssl ca-certificates
 - wget -O ${HUGO_VERSION}.tar.gz https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
 - echo "${HUGO_SHA} ${HUGO_VERSION}.tar.gz" | sha256sum -c
 - tar xf ${HUGO_VERSION}.tar.gz && mv hugo* /usr/bin/hugo
 - hugo version

 

 ===============================

 

  変数には設定が必要です。HUGO_VERSIONと書いてある後ろにダウンロードしたバージョンが書かれています。その下のHUGO_SHAの後ろには、SHA256というHugoのリリースが書かれています。

  Dockerイメージが必要な場合は、これが最も無駄のないコンフィグでしょう。

 

  2.Hugoの場合

  Hugoの設定はYAMLで書いておけば、そのあとバージョンに合わせて変更する必要がないようです。今使っているHugoのリリースは、Dockerイメージの中に入っていたSHA256です。

 

 ===============================

 

 image: publysher/hugo

pages:
 script:
 - hugo
 artifacts:
  paths:
  - public
 only:
 - master

 

 ===============================

 

  このオプションが最もシンプルで分かりやすかったような気がします。

 

  さらに自分がしたこと

  Alpine DockerイメージでNodeJSを使えるように、「.gitlab-ci.yml」をセットアップしました。
 

 ===============================

 

image: node:6.11.2-alpine
before_script:
 - apk update && apk add openssl ca-certificates
 - npm install
 - PATH=$(npm bin):$PATH
 - hugo version
pages:
  script:
  - npm run build
  artifacts:
  paths:
  - public
 only:
 - master
 

 

 ===============================


 今回のセットアップの中では、これが最も複雑になりました。
 でも、そうしたのには理由があります。

  まずは、Node.js NPMパッケージ・マネージャーをインストールして、Hugoで作ったCSSとHTMLに圧縮をかけられるようにしたかったからです。この設定だと、Hugoがサイトを生成したあとに、圧縮プログラムがかかってファイルが小さくなるようになっています。

  他にも、GitLab CIを呼び出すビルドコマンドを、私のpackage.jsonで使われている「npm run build」に変更しました。

 注:このDockerイメージにはPythonが入っていません。Pythonがウェブページで必要なのは、Pygmentsを使う時です。知らない人のために説明しておきますが、これはサーバーサイドで使われるシンタックス・ハイライターです。ちなみに、私のブログで使っているのは、HighlightJSという、クライアントサイドのハイライターです。

 

  package.jsonファイルを作ろう

  NPMに読み込まれるように、以下のようなJSONファイルを作りました。これをHugoのソースフォルダの「root」に置いておくと機能します。

 

 ===============================

 

 {
  "name": "www.leowkahman.com",
  "preferGlobal": true,
  "version": "0.0.1",
  "author": "Leow Kah Man",
  "description": "Leow Kah Man - Tech Blog",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://gitlab.com/kmleow/kmleow.gitlab.io.git"
  },
  "engines": {
    "node": ">=6.00"
  },
  "scripts": {
    "start": "hugo server --theme=leow-kah-man --buildDrafts --disableLiveReload=true",
    "build": "hugo && uglifycss ./public/css/custom.css --output ./public/css/custom.css && html-minifier --collapse-whitespace --keep-CIosing-slash --file-ext html --remove-comments --minify-css true --minify-js true --input-dir public --output-dir public"
  },
  "dependencies": {
    "html-minifier": "^3.5.3",
    "hugo-bin": "^0.12.0",
    "uglifycss": "0.0.27"
  }
}

 

 ===============================

 

  この設定で、MarkdownファイルをHTMLに変換するときに、NPMが作動します(run npm start)。さらにそこで生成されたファイルをHugo側がすぐに保存できるようしました。

  NPMがビルドを開始する(npm run build)と、まずはHugoを使ってファイルを作成させます。それから UglifyCSSHTMLMinifier を使ってファイルに圧縮をかけます。
 このコマンドは、ビルドプロセスをテストするときでもなければ、手動で実行することはほとんどありません。

 

  GitLab CI 起動!

  ここまで設定すれば、Hugoが自動的にGitLabのマスターブランチに記事を届けてくれるはずです。もちろん、ここで設定したCIも自動的に適用されるはずです。もしビルドに失敗したら、すぐさまEmailで通知した方が良いでしょう。うまくいけば、約1分ほどでブログが更新されます。
 

  追加情報

  ここでは、Cl設定方法を説明をしましたが、GitLabページでSSL/TLSのセットアップや、独自ドメインを使う方法については、 GitLab Pages Getting Startedを見てください。

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

すみません。CI(シーアイ)をCl(シーエル)と勘違いしていました。

[ 原文 ] https://www.leowkahman.com/2017/08/15/hugo-static-site-generator-with-ci-deployment-using-gitlab/ 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