Hnoss

Hnoss

GitLabのグループ機能はとんでもないツールだった。
カレンダー

文書タグ

フノス(訳者)(208) IT(184) 解説記事(140) マニュアル(78) GitLab CI(58) オープンソース(50) Linux(38) メディア(33) GitLab(33) コンテナ(28) ウェブ制作(25) DTM(19) HTML5(19) おすすめ オープンソース・ソフトウェア(18) Libre Music(18) 百科事典(14) プラグイン(13) 文化(12) ソフトウェア(11) セキュリティ(11) 録音(11) ミキシング(11) MIDI(10) 西アジア/中東(10) 料理(9) ジョージア(9) グルジア(9) 東ヨーロッパ(9) シーケンス(8) 芸能(8) 音楽編集(8) コマンド(8) 音楽(7) 経済(7) マスタリング(7) 業務効率化(6) Raspberry Pi(6) Google(5) WordPress(5) アプリ(5) JACK(5) マイクロサービス(5) Windows(4) Android(4) ワークフロー(4) 映像制作(4) ハンドブック(4) GNU(4) 欧州(4) 音楽プレーヤー(4) Ubuntu(4) 北米(4) アニメーション(3) IoT(3) Ardour(3) 社会(3) Java(3) ソーシャルメディア(3) DAW(3) 法律(3) Python(3) アニメ(3) ホームオートメーション(3) PlayStation(2) 仮想通貨(2) 古代エジプト(2) マーケティング(2) 有角神(2) エジプト(2) ALSA(2) OS X(2) ERPシステム(2) 電子ブック(2) トヨタ(2) バト(2) Krita(2) 電子書籍(2) ウィッカ(2) GPL(2) ERP(2) オカルト(2) Twitter(2) ロスレス音源(2) BountySource(2) スマホ(2) 牛(2) 歴史(2) ニュース(2) GNOME3(2) iOS(2) 考古学(1) 申命記(1) クヌム(1) 魔女裁判(1) オンデマンド(1) リーナス・トーバルズ(1) バフォメット(1) UNIX(1) 黙示録(1) スタジオジブリ(1) アモン(1) セイラム魔女裁判(1) ねじ巻きラジオ(1) 3D(1) 政治(1) イボ人(1) 国際(1) クリエイティブ・コモンズ(1) amazon(1) キリスト教(1) レビ記(1) Synfig(1) 独占(1) アマナイ(1) 広告(1) KXStudio(1) EU(1) イケンガ(1) 国際公文書館会議(1) マイナビ(1) 募金(1) ユダヤ教(1) ウルガタ聖書(1) 科学技術(1) 出エジプト記(1) 観光案内(1) 絵文字(1) サンフランシスコ(1) パキスタン(1) リクルート(1) ハトホル(1) パン(1) 地方(1) Blender(1) 羊神(1) ギリシャ(1) 高速道路情報無線(1) ツイッター(1) Youtube(1) 中南米(1) モヘンジョ=ダロ(1) CC(1) 声明(1) 悪魔(1) ラジオ(1) アレクサンドロス大王(1) ローマ(1) ポッドキャスト(1) ゲーム(1) パシュパティ(1) 1Password(1) アピス(1) 宗教(1) テレビ(1) OpenToonz(1) 電子教材(1) 船乗りの柱(1) シリア(1) GPS(1) アフリカ(1) リグ・ヴェーダ(1) F-Droid(1) ムネヴィス(1) ネオペイガニズム(1) コミュニティ放送(1) アンビソニック(1) 元ネタ(1) ケルヌンノス(1) ナイジェリア(1) 日記(1) 聖書(1) 任天堂 DS(1) 教育(1) bi-modal IT(1) 魔女宗(1) アクティブSETI(1) バイノーラル(1) Papagayo(1) 写真(1) 意味(1) コシディウス(1) インド(1) ユーコン(1) ヤーウェ(1) CD(1) タブレット(1) 学校(1) 日本(1) 羊(1) ベルゼブブ(1) デジタルサイネージ(1) VR(1) アップストリーム・パッケージング(1) 画像(1) 由来(1) グンデストルップの大釜(1) カナン(1) カナダ(1) サウンドフォント(1) 詩篇(1) チップチューン(1) バ・ネブ・デデト(1) コットン・マザー(1) クラウドキャスティング(1) VST(1) ポータブルソフトウェア(1) エリファス・レヴィ(1) マサチューセッツ(1)
リファレンス

first-time visitors
user guide
謝辞

「みんなの翻訳」は情報通信研究機構言語翻訳グループ東京大学図書館情報学研究室による共同プロジェクトであり、三省堂国立情報学研究所連想情報学研究開発センターが開発に協力しています。三省堂には「グランドコンサイス英和辞典(36万項目収録)」の使用を許可していただきました。

連携研究グループはこちらをご覧ください。

「みんなの翻訳」を使っている翻訳グループについてはこちらをご覧ください。

バナー

logo

ポスター

poster

フライヤー

poster poster
Mozilla Firefox ブラウザ無料ダウンロード
本サイトはブラウザ「Mozilla Firefox」推奨です。
Firefox3で動作確認しています。

Valid XHTML 1.0 Transitional


 週末にかけて、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.jsNPMパッケージ・マネージャーをインストールして、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を見てください。

 チップをください。 この記事はお役に立ちましたか?もしよければ、僕にお茶代を渡していただけると嬉しいです。励みになります。(このページ暗号化効いてないんで、原文ページからをおすすめします。)
www.paypal.me/leowkahman/12
bitcoin:14vH7vDj7eyvvc7mxCkrgTx2HUntpeKhAn
www.leowkahman.com/images/bitcoin.png

すみません。CI(シーアイ)をCl(シーエル)と勘違いしていました。
原文:https://www.leowkahman.com/2017/08/15/hugo-static-site-generator-with-ci-deployment-using-gitlab/
Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス外部リンク
新着文書(Hnoss)

Signing legal documents
現在の位置: チームハンドブック 目次 >法的文書に署名する  法的文書への署名は、他社・他組織などに直接出向いてNDAsを取り扱った人物を除...
Team Handbook
現在の位置:チームハンドブック 目次  このハンドブックは、GitLabという企業が、どのようにサービスを維持運営していくかを記したものだ。ここに...
GitLab Pages documentation
  新しいドキュメント はこちらです。このドキュメントは旧式です。 GitLab Documentation > User documentation > Projects >GitLab P...
GitLab Pages
GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLab Pagesなら、無料でウェブサイトをホスティングできる...

新着文書

Social leader killed in Cordoba is fourth in same town in 2018
3月11日日曜日、地方評議会リーダーでアフリカ系コロンビア人の子孫であるトマス・バレトが、コルドバ県サン・ホセ・デ・ウレの自宅で殺害された。 2...

新着Wikipedia翻訳

E (programming language)
E(プログラミング言語) AmigaE や e(検証言語) 、 GNU E と混同しないこと。 E -------- パラダイム マルチパラダイム:オブジ...
Van Eck phreaking
Van Eck phreaking(ファン・エック・フリーク) Van Eck phreakingは盗聴の一形態であり、その中では特殊な装置が使用され、電子機器を探るため、隠...
Trusted Computer System Evaluation Criteria
Trusted Computer System Evaluation Criteria(信頼されたコンピュータ・システム評価基準) 【画像のキャプション】オレンジブック 信頼されたコ...

更新履歴

※文書量によっては処理に数十秒かかる場合があります
バージョン 比較対象 更新日時 更新者
1(最新) 2017-12-19 22:31:59 Hnoss
2 2017-12-11 23:58:16 Hnoss
3 2017-11-18 13:00:00 Hnoss
4 2017-11-18 12:59:47 Hnoss
5 2017-10-27 20:53:44 Hnoss
6 2017-08-26 20:09:44 Hnoss
7 2017-08-26 20:07:58 Hnoss
8 2017-08-19 13:12:27 Hnoss
9 2017-08-19 13:11:23 Hnoss
10 2017-08-19 13:10:46 Hnoss

    
ブックマーク登録

タグを「;(半角セミコロン)」区切りで入力して下さい(例)tag1;tag2;tag3
10タグまで登録可能。各タグ30文字まで

履歴
状態 作業中 作業予定あり 作業予定なし 作業完了
テーマ 社会 政治 法律 経済 文化 芸能 科学技術 IT 健康/医療 スポーツ メディア 植物 動物 菌類 地方 国際
地域 日本 東アジア アフリカ 南アジア 東南アジア 西アジア/中東 太平洋 北米 中南米 欧州
ジャンル ニュース 解説記事 論文 日記 百科事典

コメントを入力して下さい
0 / 250
    
ブックマーク登録

ブックマークに登録しました。


言語選択

    
ファイルプロパティ

使用許諾条件
ファイル情報
あなただけがこのファイルを閲覧・編集できます。
みんながこのファイルを閲覧できますが、
編集ができるのはあなただけです。
あなたに加えて、指定された人やグループが
このファイルを自由に閲覧・編集できます。
公開設定
編集設定
グループ:0組 翻訳者:0人
    
アクセス属性
この文書は「非公開」設定になっています。
一般公開する場合は、編集ページの書誌情報で「公開」設定に変更して下さい。
翻訳者選択

※メニュー「翻訳者管理」で翻訳者、グループを追加することができます。


    
ノート

非公開ノート
0 / 2000 ※「公開・編集」権限を持つ翻訳者のみに公開されます。
公開ノート
0 / 2000 ※文書を「公開」にした場合、一般に公開されます。

言語選択

 →