友人のブログを構築するのに最適なHeadless CMS選び

友人が運営するための、JAMStackなブログの構築をします。無料で簡単でシンプルなものを選びたいと思います。

「NetlifyCMSのOAuth認証」Githubで失敗する件を解決した

ローカルホストでの認証は成功したものの、公開アドレスから認証をしようとすると失敗していたので、解決しました。

複数ブログ運営とやりたい技術構成をまとめておく

今後ブログに実装する予定の技術構成を、なんとなくまとめています。

移行してきた記事をnetlifycmsで管理する

他ブログから移行してきた記事をnetlifycmsで管理することにしました。導入から設定までを説明しています。

GiphyAPIを使ってブログ記事のヘッダー画像にする

gatsby.jsを使ったブログに、GiphyAPIから取得した画像をimgタグに設定するコンポーネントを作成しました。

NetlifyDNSの利用と独自ドメインの設定

Netlifyで独自ドメインとNelify DNSの設定をしました。

AMPでタグごとの記事リストを「動的に」切り替える

amp-listを使ってjsonによる動的にタグ一覧ページを作成してみました。nuxtとの組み合わせは混乱を招きがちです・・・

AMPバリデーションを自動化してサイト丸ごとチェックする

ブラウザでチェックしていたAMPバリデーション。でもついつい抜けがちなので自動化してみました。

Nuxt2.9.1へのアップデートでAMPエラーが出た時に対応したこと

Nuxt2.0.0から2.9.1にアップデートしました。その影響で生成されるHTMLに影響があり、その対応の様子を書いていきます。

bashからfishに移行して考えたベストなターミナルとは？

ターミナルもカスタムすると楽しい反面、移行や学習コストがかかります。その辺りの自分のベストバランスは何かを考えてみました。

IFTTTの設定に満足できなくなったらZapierに乗り換えよう

IFTTTからZapierに乗り換えました。メリットはブログのディスクリプションをツイートに含められることです。より細かい設定をするならばZapierが有利です。

サイトの表示スピードを改善する2つの方法

webサイトやブログの表示スピードを改善する方法を紹介します。まずはざっくりとどんな方法があるのかを理解して頭を整理しましょう

Feedlyでトップ画像だけが表示されないを解決@nuxt.js

Feedlyで本来表示されるはずの記事冒頭の画像。表示されない理由はフィードのcontentに必要なimgタグがないからでした。markdownで記事を書いている方は是非チェックをしてみてください。

nuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にする

ブログが更新されたことを伝えるフィード。このブログで採用していた仕様をRSS2.0からATOM1.0にアップデートしました。

bascssとHTMLでstyleを設計するメリット

基本中の基本でありながら奥が深く、簡単そうで一筋縄でいかないのが、HTMLとCSSです。bascssはその関係性をちょっとだけマシにしてくれるかも知れません。

AMPを実装するときに、知っておくと便利なことをまとめる

AMPの概念を理解し、いざ実装という方に向けて、スムーズな導入をしていただけるように、ツールやルールをざっくりと説明していきます。

【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにする

AMPでもserviceworkerを使って「ホーム画面に追加」を実現します。オフラインでのアクセスも可能になり大幅にユーザー体験（UX）を改善できるチャンスです。

【PWA】webプッシュを使って、更新通知を行えるようにする

webプッシュの実装を試してみました・・・が、iOSが対応していないことに注意！実装したものの、一旦解除しています。

PWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する

AMPで構築したブログをPWA化！超高速＆オフラインでもアクセスOK、さらにweb pushでプッシュ通知も実現します。エンジニアじゃなくても実装できることを信じて、レッツトライ！

GitLFSは大容量のファイル用！webサイトの画像管理をしてみたけど意味なかった

画像類をGitLFSで管理するのは間違っていました。cloneやpullを早くなりましたが、結局ダウンロードしなければならず。本来の「大容量ファイルのバージョン管理」という用途であることをすっ飛ばしていたのが間違いでした。