Gridsomeでポートフォリオサイト、はじめました

花村貴史のアイコン画像
Diary

はじめまして、ソフトウェアエンジニア&写真家の花村貴史です(@nnammg)。ニックネームは「はなむら」の間をとって「なむ」です。

横浜で生まれ育ち、脱サラ信州移住をへて、今は関西で妻と二人暮らしをしています。どんどん西に向かっています(笑)

エンジニアとしてはSAP(ERP)やフロントエンド系に携わりつつ、写真では人物を撮らせていただいたり、風景やストリートを撮っています。愛用のカメラはFUJIFILM X-H1/X-T1、RICOH GR/GXRです。

そんな僕がGridsomeとTailwindcssの力を借りてポートフォリオサイトを作りました。公開にあわせて写真2作品、グラフィック1作品を載せいてますので、よかったら見てやってください。

GridsomeとTailwindcssを使用

なじみのWordPressではなく静的サイトジェネレーター

僕はもともとWordPressを使っています。

▶︎ Takashi Q. Hanamura Photography

これとは別に、僕の作品をあっちゃこっちゃのサービスに掲載しつつも、総合管理できるサイトがほしくなりました。そう、ポートフォリオサイトですね。

しかも自分好みのデザインにしたかったので静的サイトジェネレーターの「Gridsome」と、CSSフレームワークは「Tailwindcss」を使いました。

僕の好きなVue.jsが使われているし、JavaScriptの勉強にもなるし、自由にデザインできる。めっちゃ楽しそう!ということで技術を選定。

Vue.jsのおかげでサクサク画面遷移するのは気持ちいいです(笑)

こだわりポイント

以下のようなことにこだわっていいます。

  • 心地よい余白

    • 雑誌のような媒体にしていきたいから。
  • フォントは游教科書体 横用

    • 書体として気持ちいいから。
      インストールされてなければmacOSはヒラギノ角ゴシックが、WindowsはBIZ UDPゴシックかメイリオで表示されます。
    • 【2020.10.3追記】
      ヒラギノ角ゴシックに変更しました。無難なフォントだからこそ、とても見やすいと感じます。
  • サイトのカラーリングはシンプルに

    • 作品のサムネイルに目立ってほしいから。

エディタはPyCharm

サイトの雛形を作ったときはVSCodeを使っていました。

雛形をベースにポートフォリオサイト開発段階で、購入したばかりのPyCharmに移行。WebStormにPython機能がくっついているので Web開発も充分。ツールに慣れるためにも実戦投入。

すごく便利なエディタですね。

さすがにGridsome特有のコードはエラーやワーニングになりますが、GitHubにコミットするときにGUIで確認できたり、そのほか開発するための機能がてんこ盛り。

ポートフォリオ、スタートです

Vue.jsやGridsomeのお作法を調べながら作ってきたのでずいぶん時間はかかりましたがようやく形になりました!

とはいえ、サイトはまだ生まれたばかり。昨今のWebサイトがもつ機能として足りていないものがあります。たとえば

  • 各ページのOGP出力(完成)
  • robot.txt(完成)
  • 404ページ
  • アーカイブ画面
  • 検索機能

など。

また、この記事ページだけでもCSSが足りてないですね。これを書いているときにも「もっと見やすくしたい」と思うところがありました。

でも、そういった課題はつど手を入れていけばよいのです。さっさとスタートする方がよっぽど大事だから。

というわけで、「写真」や「グラフィック」、「ブログ(なるべく技術よりの)」などの作品を掲載しつつ、サイト全体をコツコツと育てていきます。

どうぞよろしくお願いします。

※vueファイルなどのデータは GitHub で公開していますので参考にどうぞ。

#Gridsome#tailwindcss
花村貴史のアイコン画像

Software Engineer & Photographer

花村貴史

Takashi Q. Hanamura

個人ではPython/Golang/JSを使い、オシゴトではWeb系システムを開発しつつ、週末は撮られ慣れてない方の笑顔や空気感をそっとすくい撮っています。
横浜育ち38年。脱サラ→信州移住2年半。2018年春から関西在住。翌年秋から夫婦生活スタート。関西に来てよかったことは京都が近くなったこと。