読者です 読者をやめる 読者になる 読者になる

mitolab's diary

農業もっと楽にしたい...スマート農業見習いの日記.

Hugo、github Pages、wovn.io、ムームードメインを使って楽に短時間でプロフィールページを作る!

プログラミング 雑記

最近、初対面の方にお会いすることが多くなってきたので、先日webサービスとアプリを使ってオシャレな名刺を作ってみました*1

で、この際プロフィールページフリーランス時代のものだったので、現状に即した内容にアップデートをしてみました。

できたもの

f:id:mitolab:20160812131646p:plain mitolab

  • 1枚だけのプロフィールページ
  • PC/スマフォ両対応
  • google analyticsでトラッキング可能
  • メールフォーム利用可能
  • ブログへの拡張性もある
  • 日本語/英語両対応

短時間でこれだけのものが、ドメイン代だけでまかなえます。

プロフィールページ作成に使うもの

  1. Hugo... 静的サイト生成ツール
  2. Github Pages... 静的サイトを公開できるgithubのサービス
  3. ドメイン... ムームードメインで取得
  4. wovn.io... htmlに一行挿入するだけ簡単ローカライズサービス

作成手順

基本的な手順は、

Hugo + GitHub Pagesでブログを作る

の記事を参照しつつ、ドメイン設定に関しては、

GitHub Pagesで静的なサイトを公開し、独自ドメインを設定する

こちらの記事を参照しながら進めました。

最後に、wovn.ioを使って英語と日本語を切り替えられるようにしました。

Hugoテンプレート適用

Hugoのいいところは、多数のフリーテンプレートを用意していること。しかも結構シンプルでオシャレなものが多い印象です。

f:id:mitolab:20160812133009p:plain http://themes.gohugo.io/

多分、テンプレを探すのに一番時間を費やしました...。最終的に決めたものがこちら。

f:id:mitolab:20160812133119p:plain Hugo Theme: Strata

1枚で完結して、且つスマフォ/PC両対応だったのでこれにしました。あとこれは別に選定基準ではなかったんですが、google analyticsのトラッキングコードを設定出来るようになっていたり、メールフォームもすぐ使えるようにしていたりで、かゆいところに手が届くテンプレで素晴らしいです。背景画像くらいは変えたほうがいいかもしれないけどそのまんま使ってます...。

あと、左下のアイコンを出す出さないとか、右カラムの画像類を出す出さないとかは全てconfig.tomlで設定できて便利です。

注意点として、今回は1枚だけのページを作りたかったので、上記参照した手順記事記事の枠を作ってみるから記事を書いてみるまでは飛ばして、テンプレに付属のexampleSiteに入っている、config.tomlhugo new site <site-name>した際のトップディレクトリに配置(デフォのやつを上書き)して、その中身をいじってあげればOKです。

あと、テンプレに付属のメールフォームは、formspree.ioというプロキシサービスを使っていて、使う場合はサイトをgithubにpushして、ドメインも適用してから、実際にフォームから自分宛にメールを送信して、来たメールでconfirmするだけでフォームが利用可能になります。月に1000通までは無料らしいので余裕で足りると思います。

Github Pages

基本的には、

  • githubリポジトリを作る
  • gh-pagesというブランチを作る
  • 上記ブランチにpushする

という作業だけで、http://[ユーザ名].github.io/[リポジトリ名]というurlにページを公開できます。それか、[ユーザ名].github.ioというリポジトリを作ることでも同様のことが出来るようで、2通りのやり方があるみたいです。今回は前者のやり方でやってみました。

ドメイン設定

ムームードメインでの作業と、Github Pagesでの作業にわかれます。

ムームードメインでは既にドメインを取得済だったので、DNSのAレコードを変更/追加してあげました。加えて、tumblrでCNAMEレコードを使っていたんですが不要なので消しました。

GithubPagesでは、リポジトリのSettingsからCustom Domainを設定してあげると、自動的にリポジトリにCNAMEファイルができます。それで、qiita記事のこちらの手順と同等の手順となります。

f:id:mitolab:20160812134456p:plain

ローカライズ

wovn.ioを使うと簡単にローカライズできました。画面もシンプルなのでいじってみれば使い方は理解できると思います。手順も公式で用意されています。

ただ1つわかりにくかったのが、htmlに挿入する1文が見つけにくいこと。上記手順では、ダッシュボードがブランクの際のページに1文が書いてあるのですが、一度ページを登録してしまうと、その1文がどこかに消えていなくなってしまい、色々ボタンを探してみないとわからないという状態になってしまいました。

最終的には、右上のドロップダウンにフォーカスして、アカウント > コードスニペット を選択すると1文が表示されます。

<script src="//j.wovn.io/1" data-wovnio="key=xxxxx" async></script>

こういうやつです。

まとめ

以上です。簡単に多機能なページが作れてしまうのでオススメです。今回は静的ページ生成サービス探しやテンプレ探しに時間がかかりましたが、既にテンプレも決まっていてドメインも取れている状態であれば、1時間では終わりそうなボリュームかと思います。

では、何かの参考になれば幸いです。