Hugo + GitHub + Circle CIでブログを作成しました

Hugo + GitHub + Circle CIでブログを作成しました

株式会社ローカルワークスではエンジニア以外もGitHubのアカウントを持っています。
GitHub上で運用中のサービスのIssueの作成やメールの文言などのレビューなどをエンジニア以外でもさらに行って欲しいということで、Hugo + GitHub + Circle CIでブログを作成しました。

README.mdにブログの書き方が乗っているのですが、14枚のsketchで加工された画像にGitHubからCommitの仕方、PullRequestの作り方などが載っていますが、今回は割愛します。

基本的にGitHubの🖊を押して作成していく形になります。
今回は重要そうなところを載せていきます。

masterへのcommitの禁止

  1. RepositoryのSettings
  2. Branches
  3. Protected branchesでmasterを選択


上記の順に移動し、masterにcommitできる人を制限します。
masterの🖊を押して編集してもbranchを切る設定にしました。  

GitHubから画像のpreviewを見れるようにする

  • Hugoをインストールさせることはchrome bookを使っている方がいるため難しい
  • ブランチごとにCIからPreview Appが立ち上がらせるのにも時間がかかる

上記の理由により short codeを使わずに 、markdownだけで画像もGitHubのpreviewから見れる必要がありました。 Hugoの基本的な使い方からそれますが、以下のルールの元で画像と記事を設置することによってGitHubのPreviewから画像を確認できるようにしました。

├── content
│   └── post
│       ├── new-office-party
│       │   ├── 02_office.jpg
│       │   ├── 03_guest.jpg
│       │   ├── 04_flower.jpg
│       │   └── index.md
│       └── office-diy
│           ├── A-plan.jpg
│           ├── Freespace-001.jpg
│           ├── IMG_2116.jpg
│           ├── IMG_2149.jpg
│           └── index.md

urlにしたい名前でディレクトリを作り、記事はindex.mdで作成します。
画像はそのディレクトリに内に追加します。
記事内では![](02_office.jpg)のように書き、GitHubのpreviewからでも画像を確認できます。  

未解決問題点・その他

画像のリサイズをする必要がある

最近のスマホは2~3MBの画像です。 CIでリサイズしたいのですが、現状アップロード前に自前でリサイズを強要しています。

デプロイ先はさくらサーバー

はじめは、GitHub pagesでデプロイの予定だったのですが、大人の事情でさくらサーバーにデプロイしています。
masterにmerge後、Circle CIでhugoを実行し、さくらサーバーにFTPでアップロードしています。

Contents