Web開発

HugoでAmazonのアフェリエイトリンクをいい感じに表示する

はじめに 負けヒロインが多すぎる! というアニメを見始めました。 舞台が以前住んでいた愛知県 豊田の近く豊橋市ということもありチラホラ見覚えがある風景がある気がします。 とりあえずヒロインが可愛いので好きです。 負けヒロインが多すぎる! amazon.co.jp ということで、上記のようなアフェリエイトリンクをHug

Amazonアフェリエイトリンク生成に必要な、ASINコードと商品名をURLから取得する

はじめに 前回の記事でAmazonアフェリエイトリンクを生成してブログに貼り付けるようにしました。 コンテンツ登録が面倒なので簡単なスクリプトを書いたのでここにおいておきます。 スクリプト Product APIを使ってやろうと思っていましたが、タイトルとASINさえ分かれば良いので Amazonのリン

ブログの広告収入向上とRSSフィードの導入

はじめに ブログの広告収入は完全に赤字です。 ドメイン代やサーバ運用費は微々たるものなのですが、ChatGPTへの課金が上乗せされて赤字運営脱却が急務となっています。 ドメインは年間1400円ぐらい、AWSのS3バケットなどの利用料のみなので、年間1200円いかないぐらいです。 ここにC

再帰的なウェブサイト内リンクチェッカーをPythonで作成する

はじめに ウェブサイトを運営していると、リンク切れを起こすことがあります。リンク切れはユーザーエクスペリエンスを低下させ、SEOにも悪影響を与えるため、定期的にチェックして修正することが重要です。しかし、手動でサイト内のすべてのリンクをチェックするのは大変な作業です。この記事では、

HugoでSEO対策を施し、関連記事機能を実装した

はじめに ChatGPTの力を借りてSEO対策を施していきます。 SEO対策の一般知識 聞いたらごくごく一般的な回答が得られましたので、できるところから対策していきます。 これらのアイデアを実行し、ブログのSEO対策を改善していくことで、アクセス数の増加が期待できます。 最適な結果を得るた

HugoでSEOスコアを改善するためにやったこと

イントロダクション WordpressからHugoに移行してからというものブログの更新頻度も落ちたこともあってか ブログのSEOスコアが落ちていて検索順位も順当に落ちていました。 要因としては、更新頻度が落ちたことや、TwitterなどのSNSなどの外部リンクが少なくなっていたことも考

HugoでMobile端末向けのSEO対策を実践していく【画像の適正サイズ】

イントロダクション コンテンツの更新頻度もさることながら、せっかく書いた記事をみんなに見てほしい気持ちもありブログのSEO対策を進めます。 広告収入も0円の日々が続いており、ブログ運営も赤字になっていることをなんとかしたいところです。 せっかくHugoに移行してメンテや運用費を低減した

Hugoで404ページを作る

イントロダクション 応用情報技術者試験を受けてきました。 午後問の解答速報見る感じ選択した大問(1,2,4,5,7)の中で、4,5,7が満点だったので非常にご満悦です。自己採点で80点ぐらいはありました。 午前は5点ぐらい足りず落ちてたので来年に乞うご期待って感じですが……もったいない

ブログでの使用画像をWebpフォーマットに変換してサイト軽量化する

はじめに アルバイトも一段落して平穏の日々が帰ってきました。 情報処理資格取るために勉強しないといけないなと思いつつも、スプラトゥーン3を買いました。 弓を使いながらポチポチやっています。ランクは10になったところです。 このブログの運営費用は以前の1/5ぐらいになったのですが、アクセス

Hugoを使ってSSGサイトを作ろう4

はじめに ブログの管理費高騰に伴い、安くて早いそしてメンテも簡単な形に移行したいと思います。 構成としてはこんな感じです。 やっていきましょう AWS IAM Userの作成 Github ActionからHugoを使って作成するサイトHTMLを、S3にアップロードする際に使用するIAM Userを作成します。 ユー

Hugoを使ってSSGサイトを作ろう3

はじめに Hugoでブログ作り3日目です。 Wordpressから記事を移植して行きます。 Markdown形式では上手に記事内の画像が表示されないため、Hugoでの記載方式に変換していきます。 markdown形式での記載 Wordpressで画像を出力すると、Markdown形式で書い

Hugoを使ってSSGサイトを作ろう2

はじめに Hugoでブログ作り2日目です。 Wordpressから記事を移植して行きます。 ついでに一覧からサムネイル画像を取得できるようにしたいと考えています。 Wordpressの記事を移植する Wordpressの記事を移植するため、プラグインを導入し取得できるXMLファイルをMar

Hugoを使ってSSGサイトを作ろう

はじめに このブログも記事が増えてきて、300円ちょっとで運営できていたのが月500円ぐらいの運用費がかかるようになってきました。 広告収入で運営費は賄っていたのですが最近赤字気味ですので、運用コストを落として行きたいところです。 そこで早いと言われているStatuc Site Generator Hugoを使っ

Wordpressからmarkdown記事を抜き出して、Nuxt.jsのブログに移植する方法

はじめに 最近、肩こりがひどくて痛みを伴うため接骨院に通院しています。 典型的な猫背となで肩らしくそこの矯正を始め、2週間がたちました。 通院している患者の中でも1番か2番を争うぐらい肩が凝ってると言われなんとも言えない気持ちになりました。 肩甲骨を左右に広げるような施術があるのですが、

Componentをブログっぽい配置にしてみる【Vuetify+Nuxt.js】

はじめに 少し前からNuxt.jsを使って移行先のブログを作っています。 昨日カテゴリを用意して満足してたんですが、あんまりブログっぽくないなぁと思っていたので整形したよって話です。 今日は配置をいい感じにしようっていうのが趣旨になります。 前回の記事ではこんな体たらくだったのを直してい

【Nuxt.js】ブログにカテゴリ検索機能を追加しよう

はじめに Nuxt.jsを使ってブログを作成し、デザインやレイアウトを整えることで、より魅力的なブログに仕上げることができます。この記事では、VuetifyのGrid systemを使用して、カテゴリやコンポーネントの配置を整える方法を紹介しています。これらの手法を利用することで、効

Nuxt.jsブログに全文検索機能を追加する方法

地獄の釜が開かれた 本業の方は、納期が2ヶ月近く圧縮されました。当初の計画でもショートしていたので当然間に合うはずもありませんが、サラリーマンなのでそうも言ってられない。言いますけど…。 このまま進むと私を含めて全員が炎上プロジェクに焼かれて朽ちてしまいます。無駄な死体を増やさないた

ブログ作りを進める - パンくずリストの実装方法

はじめに ブログ作りを少しずつではありますが進めています。 今回はパンくずリストと呼ばれる、サイト上の今どこにいるのかを示すやつを作っていきます。 イメージはこちらです。このバーを作っていきましょう。 今回参考にしたのはこのブログ記事です。 参考元:The Perfect Breadcrumbs (in Nuxt) Nuxt.js+Vueti