editorを使用しているのですが、vueファイルでpugを書こうとするとうまく言語設定がされないのが、微妙にストレスでした。stylusを使ってみました。これは大正解で無茶苦茶楽です。AMPを採用しているので、一切使えません。これは微妙に不便です。CSSを使いだすと依存関係がカオスになりがちな気もするので、結果オーライです。GULPgulpですが、ごく一部しか利用していません。画像の最適化を行っています。軽量化と画像サイズを切り抜いています。これによってすべての画像は100kb以下に抑えています。scriptsに挑戦しています。このブログレベルなら、そっちの方が向いている感じがします。セクションごとの画像は他の記事とも共有することでスピードアップを図っています。FIREBASE)インフラ系には最も疎く、全く知識がない状態でした。githubは実務で使っていたものの、いわゆる「サーバーレス」という環境を触るのが初めて。いうか、それすらわからない状態。詳細はわかっていないにも関わらず、かなり快適な環境を作ることに成功しています。githubやはりこれなしでは語れません。個人でもissuで思考を整理しながら進めています。どんな小さな規模でも使う価値はありますね。pagesだけで機能、使い勝手ともに十分です。ワークフロー的にも理想的で、githubリポジトリにプッシュするだけで、自動的に更新が走ったりと、至れり尽くせり。Pages!privateリポジトリでも公開可能privateリポジトリでもちゃんと公開できます。簡単設定でブランチにプッシュするだけのオートデプロイを導入し超効率的なワークフローを実践しましょう。さりげなくハイスペックなのも見逃せません。...こういったことを、専門的な知識不要で、しかも簡単に実現できるのは素晴らしい。CICIツールの導入にチャレンジしました。この恩恵はかなり大きかったです。generatefirebaseにデプロイgenerateにかかる時間を気にしなくて済むようになったのも、ストレス軽減の一つ。CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジシンプルな直列のワークフローを実現して効率化を測る!素人でもできるCircleCIの活用法...Firebaseとにかく表示スピードの早いホスティングサービスを選びました。pagesも上がったのですが、それぞれ試してみたところ、firebaseが一番早かったです。Firebase】爆速で静的サイトのホスティングができるのはどれ?Firebaseが速くておどろいた!静的サイトをホスティングするサービスを、ためしに幾つか使用してみて、メリットとデメリットを比較・検討しました。...また、googleのサービスということで、AMPとの相性やSEOなどにも有利かも?という「あわよくば感」満載のチョイス。CIの導入でクリアしました。MARKDOWNマークダウンで記事を書きます。markdownの使い勝手の良さに、改めて驚愕しました。このブログにおいては、記事ごとにパラメータを設定できるのが素晴らしいです。jsonに変換する際に、記事ごとに紐づいていたら便利なデータをパラメータとして書いておけます。記事のアイキャッチ画像を設定する。アフィリエイトコードをできるだけ簡単に入力できるように工夫中---yamlスタイル(スタイルは選べるようです)で、記事固有の情報を書き込めます。パラメータ自身も途中で増やしたりできるのも利便性が良いです。app)PWA化しています。AMPでPWAすることを、PWAMPと呼ぶらしいですね。2019-03-06_whats_pwd_and_serviceworker現段階では、ServiceWorkerを実装しており、ホーム画面に追加することが可能です。そもそも爆速であるがゆえに、速度面でServiceWorkerの恩恵を感じづらいのがアレですね。現在、OneSignalを使った通知も実装準備しています。iOS関連の対応がされていないので、少し温めている状況ですね。個人プロジェクトとして始めたことですが、めちゃくちゃエキサイティングで楽しいものとなりました。メリット新しい技術を積極的に習得する問題や課題が出しやすいマネタイズを指標とする為、改善のモチベーション高いアフィリエイト含め、お金が絡むとモチベーションと改善の視点が変わります。いう意味で、「自分ごと化」の好例と言える結果となりました。何より思うのは、技術はコンテンツを支える重要な要素であることです。コンテンツが良いだけではダメだし、技術が先進的なだけでも、人に受け入れられるとは限りません。その両方が、文脈に沿ってバランスよく融合された時に、ユーザーに好かれるものになるのだと学ぶことができました。一つ、新しいブログを作っていますAMPでタグごとの記事リストを「動的に」切り替えるAMPバリデーションを自動化してサイト丸ごとチェックするNuxt2.9.1へのアップデートでAMPエラーが出た時に対応したことIFTTTの設定に満足できなくなったらZapierに乗り換えようサイトの表示スピードを改善する2つの方法Feedlyでトップ画像だけが表示されないのでフィードを調整する@nuxt.jsnuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にするAMPを実装するときに、知っておくと便利なことをまとめる【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにするPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみるAMPを最適化して更に高速化する!ブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。Nextウェブ系の人こそブログを作った方がいいと思う理由#blog#amp#nuxtもう一つ、新しいブログを作っていますAMPでタグごとの記事リストを「動的に」切り替えるAMPバリデーションを自動化してサイト丸ごとチェックするNuxt2.9.1へのアップデートでAMPエラーが出た時に対応したことIFTTTの設定に満足できなくなったらZapierに乗り換えようサイトの表示スピードを改善する2つの方法Feedlyでトップ画像だけが表示されないのでフィードを調整する@nuxt.jsnuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にするAMPを実装するときに、知っておくと便利なことをまとめる【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにするPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。AMPを最適化して更に高速化する!ブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。コメントはtwitterでお気軽に。