StaticWebサイトは決して新しい概念ではありません。ですが、テクノロジーも進化し、現在Static Webサイトが見直しされています。

1. 温故知新、
Static Webのサイトを構築しよう
古きを温め、新しきを知る。Webサイトの1つの考え方
1
SBCloud
ソリューションアーキテクト
森 真也
2018年1月25日

2. Who are you?
2
名前：森 真也 (@mosuke5)
仕事：
Alibaba Cloud ソリューションアーキテクト
以前はソフトウェアエンジニア。休日プログラマ。
ネタ：
Alibaba Cloud MVPになりました。
フリーランサーとして開業しました。

3. 自称、日本で一番Alibaba Cloudに詳しい人間（ネタです）
3

4. 4
https://blog.mosuke.tech

5. ブログ歴
2010年 Seesaaブログで初のブログ開設（当時大学1年生?）
2011年 さくらのVPSでWordPress運用
2014年 はてなブログで現「Goldstine研究所」開設
2017年 はてなブログからStaticWebブログへ移行
5
ブログ
サービス
サーバ
自前運用
ブログ
サービス
再び
サーバレス
運用
2010年 2011年 2014年 2017年

6. Always on SSL の考え方
6

7. 技術選定が可能なこと
×
書くことに集中できること
結果、StaticWebサイトを選択
7

8. Static Web Siteの考え方とは？
8
Database
Web Server
(CMS)
①リクエスト
②データ
問い合わせ
③データ
取り出し
④HTML組み立て、
レスポンス
一般的なCMSの
データフロー
Web Server
①リクエスト ②HTMLをそのまま
レスポンス
事前にHTMLを作って
おいてアップロード
Static Webの
データフロー

9. 増え続けるStatic Web Generatorたち
9

10. Static Web Siteのメリットとデメリット
<メリット>
・静的ファイルなので障害に強い
・静的ファイルなので移行が簡単
・静的ファイルなのでキャッシュが簡単
・静的ファイルなのでセキュリティのリスクも少ない
<デメリット>
・静的ファイルなので動的な動作ができない
・検索や関連記事表示、コメント書き込みなどは工夫が必要
10

11. いま流行る理由は？クラウドのホスティングサービス
11
「オブジェクト単位（ファイル単位）で出し入れのできる、 ネット
ワークストレージ」
オブジェクトストレージでは直接にストレージ上のファイルをRead/Writeすることはでき
ない。いうなれば、FTPサーバに近い存在。HTTP(S)で通信。
一方、安価であり、保存したデータ量だけの課金、三重のサーバに保存されるので高い
耐久性を誇る。
オブジェクトストレージの仕組みについてはこちら参照
「https://blog.mosuke.tech/entry/2017/03/18/182252/」
AWS S3 Alibaba Cloud
OSS

12. Alibaba Cloud Object Storage Service (OSS)
12
ストレージ機能に加え「Webサイトホスティング」が可能
・ホスティング機能
OSSに静的ファイルを配置するだけでWebホスティング
機能として利用できる。
・独自ドメイン設定
”example.com”など独自のドメインを設定が可能。
・CDNとの連携
CDNと連携しキャッシュ、配信が可能。
Alibaba Cloud
OSS

13. マネージドサービスの活用
13
Database
Web Server
(CMS)
①リクエスト
②データ
問い合わせ
③データ
取り出し
④HTML組み立て、
レスポンス
一般的なCMSの
データフロー
Web Server
①リクエスト ②HTMLをそのまま
レスポンス
事前にHTMLを作って
おいてアップロード
Static Webの
データフロー
この部分も
マネージドサービス

14. Alibaba Cloudで構築するStatic Webサイト
14
Alibaba Cloud
CDN
Object Storage
DNS
サイトのHTMLや
CSSファイルは
ObjectStorageに保存。

15. 15
Static WordPressも
出てきている。

16. Static Webは１つの選択肢
16
Static Web型 CMS運用型 サービス型
サーバ運用 不要 必要 不要
費用 利用するサービス
による。※
サーバ代金 無料（オプション課
金）
独自ドメイン 設定可能 設定可能 オプション対応
チューニング ある程度可能 高度に可能 不可能
※一般的にクラウドサービスのオブジェクトストレージの場合はデータ転送料と
データ保存料も格安だが発生。

17. ブログ記事にCI/CDの概念が適応できる
Continuous Integration(CI) とは、もともとソフトウェア開発の手
法のひとつで、自動でビルドやテストを実行することで品質の確
認を確実に行うようにする手法のこと。
この考え方を、ソフトウェアのコーディングだけでなく、ブログ記事
にも同じことが当てはめられる。
ex) 自動で画像サイズの圧縮を行う、
記事のディスクリプション・タグ設定が適切に行われているか確認する
17

18. 実際の運用例
18
Github Pages
(公開サイト)
Github
(レポジトリ)
Hugo本体
公開データ・
コンパイルデータ。
CloudFlare
blog.mosuke.tech
- SSL終端
- HTTP/2対応
- キャッシュ
執筆・push
デプロイ
CI連携
通知
Gill Search
(Search Engine)
記事データ更新

19. デモンストレーション
実際のStatic Webサイトの記事執筆から
デプロイまでのフローをみてみよう。
1. 実際に記事をどのように書くか
2. 書いた記事をどのように確認するか
3. 自動ビルド、テスト、圧縮の工程を確認
4. リリースされるまで
19

20. Static Webも選択肢の1つ。
どちらが良いとか悪いではない。
20

21. 実際にやってみての所感は？？
1. ツールが整ってきているので、格安で安定した配信が十分に
できていて。キャッシュも簡単なためページの速度もあげるこ
とができている。
2. ブログ記事にもCI/CDの考え方が適応できている。
3. 書くことに集中できる（サーバ運用を気にしなくていい）こと
と、技術的な楽しみを両立できてよい。
4. 一方、関連記事表示が難しいなど考えなければいけない点
もある。
21

22. 参考文献
● HTTPS をランキング シグナルに使用します
● HTTPS Everywhere
● Hugo | A fast and flexible website generator
● Shifter | Serverless WordPress hosting
● Alibaba Cloud Object Storage
● 万能じゃない。オブジェクトストレージの仕組みと利用を正しく
理解する
22