フリーランスとして活動するにあたり、Webサイトを制作しました。今回は撮影、デザイン、コーディング、システム実装まで一から制作しています。

サイトに使う素材を撮影する

普段使用しているMacbook ProやiMac、モバイル端末、鉛筆、ノートあたりを用意してメイン画像周りに支える写真素材をすしぱく（@susipaku）さんの協力のもと一緒に撮影しました。このとき撮影した写真については、後日フリー素材になる予定です。

デザインを作る

実際にPhotoshopなどでカンプを作るのではなく、基本的にはコーディングしながらデザインしてます。ロゴやピクトグラムのようなものはIllustratorでSVGで出力しておき、写真加工に関しては、撮影したRawデータをPhotoshopで修正する感じです。

コーディングとシステム

今回はWordPressではなく、golang製のHugoという静的ジェネレーターを使ってサイト構築しています。なのでこのサイトはHTML+CSS+JavaScriptのみを使った静的サイトでできています。これでアップデートだったりセキュリティの脆弱性を特に気にすることがなくなるのと、記事もマークダウンで書けるので、更新・管理のハードルがかなり下がった気がします。

実際に記事を投稿する際は、下記コマンドを実行します。

$ hugo new blog/new-post.md
/www/content/blog/new-post.md created

あとは、作られたマークダウンファイルを編集するだけ

記事ができたらGitHubにPushします。Pushをフックにホスティングサーバに自動デプロイされるため、基本的にはこれで公開作業は完了です。

今回のようにオリジナルテーマを作らないのであれば、公式にテーマが配布されているのでブログであれば簡単に利用できます。CMSのように管理画面はないのでファイルベースの作成方法になりますが、ページコーディングすることに慣れていると、使い慣れたエディタでファイル保存してGitプッシュするほうが楽なんじゃないかなって思ってます。

一部公式で対応していない機能に関しても、例えば人気記事にしてもJavaScriptで実装できたりするので、その辺は記事が増えてきたらおいおい対応していこうかと。足りない導線や機能についても徐々に増やしていきますので、よろしくお願いします。