LoginSignup
117
123

More than 5 years have passed since last update.

@yoheimuta

Hugo + Github Pages + Wercker CI = ¥0（無料）でコマンド 1 発（自動化）でサイト・ブログを公開・運営・分析・収益化

Last updated at Posted at 2015-01-31

完成イメージ

公開・運用までの流れ

  1. 自動化するための準備が必要です（下記に詳述しています、この点はタイトルから誤解されたらお手数です）
  2. 準備が整えば、それ以後は次の手順だけを手元の PC で実行すれば、サイトのコンテンツを公開したり更新していくことができます
    • content/ 以下に **.md というファイルを追加したり、すでにあれば更新したり削除したりする
    • git push origin master などで github にあげる
    • あとは、自動化処理が走ってくれます

前提

hugo とは

wercker CI とは

  • private repository でも無料で使える CI サービスです
  • box という機能が便利で色々な連携が可能な点が売りの一つだと思います

github pages とは

  • gh-pages というブランチを作ってそこに html ファイルなどを配置すると、そのユーザーとレポジトリ名に固有のサイトを公開（=ホスティング）してくれるサービスです
  • 無料です

おおまかな手順

  1. hugo をインストールします
    • 静的サイトを生成できるようになります
  2. テンプレート（既成の見た目）を適用します
    • プロダクト紹介ページっぽくなります
  3. github repository を用意します（説明割愛）
    • wercker CI, gh-pages を使う準備（使うための前提が整います）ができます
  4. wercker CI を使って gh-pages を自動生成するようにします
    • プロダクト紹介ページが [yourusername].github.io/[yourprojectname] に公開されます
    • [] 中はプレースホルダーなので置き換えてください

hugo をインストールする

  • github releases から dl したバイナリを mv /usr/local/bin/hugo する
    • これは mac の場合です
  • hugo new site ./ で、スキャフォールドする
  • hugo new post/intro.md で、新規ページを作成する

テンプレート（既成の見た目）を適用する

  • 今回は hugo-uno を使います
    • 選定方法は $ git clone --recursive https://github.com/spf13/hugoThemes.git themes で全部ダウンロードして、愚直にひとつずつ見て決めました
    • 今後は、サイトで一覧出来るように準備が進んでいるそうです
  • コマンドなど
    • mkdir themesでテーマを配置するディレクトリを作成する
    • git clone https://github.com/SenjinDarashiva/hugo-uno.git themes でテーマをダウンロードする
    • hugo server --theme=hugo-uno --buildDrafts で任意のテーマを元に静的サイトを生成する
  • 設定ファイル 
languageCode = "en-us"
contentdir = "content"
publishdir = "public"
builddrafts = false
baseurl = "http://yoheimuta.github.io/hugo-uno-mobile-videoplayer.js"
canonifyurls = true
title = "mobile-videoplayer.js"
author = "yoheimuta"

[indexes]
    category = "categories"
    tag = "tags"
[Params]
    AuthorName = "yoheimuta"
    github = "yoheimuta/mobile-videoplayer.js"
    bitbucket = "yoheimuta"
    twitter = "yoheimuta"
    email = "yoheimuta@gmail.com"
    description = "Web video player for mobile browser, especially for ios safari which is disabled to autoplay mp4"
    muut = "mobilevideoplayerjs"
    logo = "https://golang.org/doc/gopher/run.png"
    gaid = "UA-58932361-1"

wercker CI を使って gh-pages を自動生成する

box: wercker/default
build:
  steps:
    - arjen/hugo-build:
        version: 0.12
        theme: hugo-uno
        flags: --buildDrafts=true
deploy:
  steps:
    - lukevivier/gh-pages@0.2.1:
        token: $GITHUB_TOKEN
        basedir: public

その他

GA (Google Analytics) を追加する

Adsense 広告を表示する

nend 広告を表示する

117
123
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
117
123