SPA というものを作ってみたかった

昨年くらいから ReactNative を利用したアプリ開発に関わっていたので、その経験を生かそうと思い立った。
どうせだから自分のポートフォリオも兼ねて SPA というものに挑戦してみようと思った。

しもにんぐ

制作について

工数

制作期間はおよそ1ヶ月。
業後や休みの日などを使ってちまちまと作っていたので、実際の工数的には30時間くらいかな？

環境

SPA は静的ファイルが置ければ良いので、 s3 を使うことにした。
SSL も使いたかったので cloudfront を利用。
どうせだからとドメインの管理も お名前.com から route53 に移管した。

結果、全て AWS 上に構築することができた。

デザイン

material-ui に一任した。
デザインセンスは皆無なのですよ。

SPA は必要か？

必要なかったと思う。
そもそもアプリケーションじゃないし。

今後の目標

本来ならこの手のサイトは全てのページをベタがきでも良いのだけど、わざわざデータを配列で持たせている。
なので、今後は API を用意して動的にデータを取得したり、そのための CMS を作ってみようと思う。

公開

黒柴の柚子

構築

また hexo

そういえば hexo ってなんて読むの？
「へくそ」「へきそ」「へぉ」？
最後のはないと思うけど、心の中では「へくそ」って読んでる。
でもなんかアレな文字列が入っているので「へきそ」って読むことにしようか悩めるお年頃。

環境

ここは github だけど、今回は AWS 上に構築してみた。
S3 + CloudFront + CertificateManager + Route53 で、ドメインの取得以外は全部 Amazon 様にお願いした。
いやーサーバレス最高。メンテレス最高。

悩み

Qiita にも書いたのだけど、 S3 + CloudFront でブログを公開するのには課題がいくつかある。
CloudFront を S3 のバケットと直接繋げると、ディレクトリ / にアクセスした時に index.html を参照してくれない。
そのため、 CloudFront には S3 の URL を指定することになる。
しかし S3 の URL　を指定するためには、ウェブサイトホスティング状態にしておかなければならない。
そうするとブラウザから S3 に直接アクセスすることができる。

SEO

何が問題なのかというと、本来は一つのページなのに検索結果で複数の URL が表示されてしまうのだ。
「 SEO 効果が分散する」などと言われるアレ。
最悪なところ、コピーサイトを量産している悪質なサイトと Google に認定されてしまう可能性もあるらしい。
ウェブ解析士ではないので、詳しくはどうなってるかわからないけど、なんとも恐ろしい話だ。

模索中

S3 の URL を CloudFront からのみアクセスできるような設定ができないか色々調べてみる予定。

うちの犬

プロフィール

性格

• 人間大好き
• 犬猫苦手
• 食欲旺盛

スキル

• おすわり
• お手
• 待て

SNS

• Instagram
• Twitter

柴犬について

しばいぬ？しばけん？

正しい読み方は「しばいぬ」らしい。
「しばけん」と呼ぶ人もいるし、自分もそう呼んだりしていたけど、正しくはないそうだ。
そもそも「柴」が訓読みなので「犬」も訓読みにするのが普通ということだろうか。

hexo との出会い

フラストレーション

昨年あたりから Qiita を書いていたのだが、技術的な話だけしか書けないので、なんとなくフラストレーションが溜まっていた。
とりわけ文章を書きたい欲求があるわけではなく、文章も上手なわけでもない。
だが「書けない」というのは、不思議なことに「書きたい」という感情を突き動かす。

模索

さて、書きたいが、場所はどうしよう。

何かプラットフォームを使うか？
でも会員登録や ID/PW の管理が面倒くさい。

自分で作るか？
そういえば過去に WordPress でブログを立ち上げたが、全く手をつけてないな。
テーマ弄る時間がなくてやめたんだっけ。
そもそも WordPress のソースの書き方がちょっと自分と合わないんだよな。

セキュリティ

動的なサイトってのはいつでも外部からの攻撃にさらされる危険がある。
VPS なんかでやろうものなら、 OS やらミドルウェアやらのセキュリティアップデートなども気にしなければならない。
面倒くさい。
かといって AWS のマネージドのやつは、もし万が一、仮に、億が一でもアクセスが増えてしまったら請求額に泣いてしまう。

静的なブログという道

WordPress にもそういうプラグインがあったが、ブログ自体を静的にしてしまえば色々な攻撃から身を守れる。
置く場所だって自分の責任がないところにすればいい。
何かないものか。

hexo

他にも候補は色々あったが、 hexo は以下の点が良かった。

• コマンドラインで操作すること
• マークダウンで記述できること
• github のホスティングに対応していること
• テーマが色々ある
• カスタマイズできる
• js/css でゴリゴリいじれる
• node

構築してみる

ドキュメント読む

そのまんまだった。
とくにない。

テーマを変更する

現在(2018年3月時点)採用しているのは apollo のもの。

プラグインを入れる

自分は以下のプラグインを採用した。

• hexo-generator-amp
• hexo-generator-archive
• hexo-generator-category
• hexo-generator-feed
• hexo-generator-index
• hexo-generator-search
• hexo-generator-seo-friendly-sitemap
• hexo-generator-tag
• hexo-renderer-ejs
• hexo-renderer-marked
• hexo-renderer-stylus
• hexo-server
• hexo-tag-googlemaps
• hexo-tag-instagram
• hexo-tag-twitter