Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
127
Help us understand the problem. What is going on with this article?
@yoheimuta

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

More than 5 years have passed since last update.

完成イメージ

公開・運用までの流れ

  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 広告を表示する

127
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yoheimuta
blog: https://yoheimuta.hatenablog.com twitter: https://twitter.com/yoheimuta career: https://www.wantedly.com/users/30494 zenn: https://zenn.dev/yoheimuta

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
127
Help us understand the problem. What is going on with this article?