Web開発

2023-03-20-01-21-05.webp

HugoブログをGithubActionを使ってS3サーバに差分アップする方法

この記事では、Hugoを使用してブログを作成し、Github Actionsでビルド時間超過問題に対処する方法を紹介します。記事の更新を高速化するために、前回のコミットとの差分ファイルを取得し、部分的なビルドとアップロードを行います。Hugoが部分的なビルドを直接サポートしていないため、Pythonスクリプトを用いて対応しています。

2022-08-12-01-05-02.webp

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

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

2022-08-01-01-42-02.webp

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

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

2022-07-28-00-07-25.webp

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

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

2022-07-26-22-33-10.webp

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

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

2022-01-15-23-38-17.webp

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

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

markdown-img-paste-20211027223641773.webp

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

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

markdown-img-paste-2021082616490682.webp

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

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