Hugo, Bitbucket, S3, CloudFrontで独自ドメインのhttpsブログをホスティングする(Part1)

最終目標

  • ソースをBitbucketのprivateリポジトリで管理
  • Bitbucketにpush すると 自動ビルドされてS3でホスティング
  • Route53, CertificateManager, CloudFrontにより独自ドメインかつhttps化

Part1の目標

Part1では下記を進めます。

  • Hugoでローカル環境でのサイト構築
  • BitbucketのPrivateリポジトリでソースを管理

Hugoのインストール

ターミナルからbrew install hugoでインストールします。

Bitbucketの準備

アカウント作成

Bitbucketのホームページからアカウントを作成します。

リポジトリ作成

アカウントを作成するとまず、チームを作成するかリポジトリを作成するか聞かれるので、リポジトリを作成します。今回は単純にusername/blogとしてGitを選択します(デフォルト)。またプライベートリポジトリにしたいのでThis is a private repositoryにチェックを入れるのを忘れずに(デフォルトでチェックが入っている)。

image.png (89.8 kB)

SSHキーの登録

個人的な好みでgitのリモートリポジトリはhttpsじゃなくsshで接続したいので、SSHキーを登録する。

SSHキーの作成

$ cd ~/.ssh
$ ssh-keygen -t rsa #色々聞かれるが全部Enterで良い
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/(username)/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
$ pbcopy < id_rsa.pub #公開鍵の中身をクリップボードにコピー

Bitbucketに公開鍵を登録

  • 左下の自身のアイコンからBitbucket Settingsに入ります

image.png (43.2 kB)

  • SECURITY -> SSH keys -> Add keyよりKeypbcopyの結果を貼り付けてAdd keyする

image.png (268.3 kB)

ローカルでサイト構築

参考 Hugo | Quick Start

以下では、私がローカルのリポジトリをGithubやBitbucketなどのリモートリポジトリと対応させたディレクトリ構造にするのが好きなので、~/bitbucket.org/okash1n/blogで作成していますが、どこでも良いので適宜読み替えてください。

サイトを作って一度Pushしておく

$ mkdir -p ~/bitbucket.org/okash1n
$ cd ~/bitbucket.org/okash1n
$ hugo new site blog #[~/bitbucket.org/okash1n/blog] が作成される
$ cd blog
$ git init
$ git remote add origin git@bitbucket.org:okash1n/blog.git #httpsでやりたい人はhttpsでも良い
$ git add .
$ git commit -m "hugo new site"
$ git push origin master
Are you sure you want to continue connecting (yes/no)? yes #接続するか聞かれるのでyes
Warning: Permanently added 'bitbucket.org,2401:1d80:1010::152' (RSA) to the list of known hosts. #気にしなくてよい
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 482 bytes | 482.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0)
To bitbucket.org:okash1n/blog.git
 * [new branch]      master -> master

themeの設定

Hugo Themesから好きなテーマを選んで設定する。今回はIcarusというテーマを使って設定していきます。

$ pwd
/Users/okash1n/bitbucket.org/okash1n/blog
$ git submodule add https://github.com/digitalcraftsman/hugo-icarus-theme.git themes/icarus #gitに慣れていない場合は、icarus配下の.git*フォルダを削除しておくと良い
Cloning into '/Users/okash1n/bitbucket.org/okash1n/blog/themes/icarus'...
$ cp -r themes/icarus/exampleSite/* . #exampleSite配下をHugoのルートディレクトリにコピー
$ vim config.toml

config.tomlの最上部を下記のように変更します。

baseurl = "https://blog.okash1n.com/"
languageCode = "ja"
title = "ブログのタイトル"
# Enable comments by entering your Disqus shortname
disqusShortname = "okash1n"
# Enable Google Analytics by entering your tracking code
googleAnalytics = ""
# Define the number of posts per page
paginate = 10
footnotereturnlinkcontents = "↩"
# exampleSiteの設定ではtheme名とthemeのフォルダがおかしいので下記のように修正しておくこと。
theme = "icarus"
themesDir = "themes"

ローカルでhugoサーバーを起動する

hugo server

http://localhost:1313/を確認する。 ここまでの手順がうまくいっていればhttps://themes.gohugo.io/theme/hugo-icarus/と同じページが開かれるはずです。

変更をpushしておく

$ git add .
$ git commit -m "example site"
$ git push origin master

続きます

Part2では

  • Route53でドメインの取得
  • CertificateManagerでワイルドカード証明書の発行
  • S3でホスティング用のバケットを作成
  • CloudFrontでブログ配信用のディストリビューションを作成
  • サブドメインをAレコードのエイリアスとして登録

をやっていきます。

Share Comments
comments powered by Disqus