Lotus Base
< Prev
Blog

2019-07-05

【Laravel + Vue.js】SPAのポートフォリオサイト＆ブログを公開しました。

重い腰をあげて！ようやく自分のWebサイトを立ち上げました。ソースコードは Github からどうぞ。

自己紹介

  • 経済学部4年生（5回生）
  • プログラミング歴は11ヶ月（最初3ヶ月は Java で競プロ的なことを、それ以降はWeb開発）
  • Web開発はPHP（Laravel）からスタートしたため、バックエンドエンジニアになるつもりでしたが、最近は Vue.js・ReactやUIデザインなどフロントに寄っています。
  • ITリテラシーは基本情報技術者レベルです。今秋、APを受験予定。
  • 詳しくは About や Works をご覧ください！

今回使用した技術スタック

  • サーバサイド：Laravel
  • ブログ記事の管理や Contact のメッセージ送信など。ポートフォリオサイトはどうしてもフロントエンドがメインになるので機能は簡素です。
  • フロントエンド：Vue.js
  • Vue Router を導入して SPA にしました。
  • インフラ：Amazon Lightsail（Nginxイメージ）
  • 月額$3.5でVPSが使える & GitHub Student の特典で$150分のデポジットが貰えるのでLightsailが最安でした。（教えてくれた友人に感謝）

大変だったところ、工夫したところ

ブログの記事管理
  • ブログ記事は、生のHTMLを含むマークダウンテキストで管理しています。
  • マークダウン→HTMLパーサーには marked.js を採用しました。
  • 記事は自分しか書かないため、XSS対策が不要なので助かりました。
  • シンタックスハイライトも、Prism.js を使って対応させました。↓サンプル

PostsController.php

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  int  $id
 */
public function update(Request $request, $id)
{
    Post::updateOrCreate([
            'id' => $id,
        ],[
            'title' => request('title'),
            'date' => request('date'),
            'category_id' => request('category_id'),
            'content' => request('content'),
            'is_ready' => request('is_ready'),
            'path' => request('path', null),
            'digest' => request('digest')
        ]
    );
    return redirect("/home");
}
  • CMSおよびエディターを自作しました。
  • マークダウンをリアルタイムでプレビューしながら記事を編集できます。
  • 管理画面ではBootstrapを初めて採用しました。手軽に綺麗な画面が作れてびっくり。
  • SPAあるあるですが、ブログのためのOGP設定がかなり手間でした。
  • サーバサイド・フロントエンド双方でmetaタグの設定・書き換えを行うことで解決しました。Laravelを採用しておいて良かった。
Worksページのスライドショー
  • スライドショーは Eagle.js をベースに作成しました。
  • 加えてスマホでスワイプできるように Hammer.js を、スライドアニメーションは animate.css を使いました。
  • Eagle.js は拡張性が非常に高く良かったです。Hackableを自称してるだけある。
  • ただし公式ドキュメントがミニマムにしか記述されていない為、理解して慣れるまで苦労しました。
  • ここの実装方法については後日、技術エントリとしてまとめたいと思います。
Lightsail へのデプロイ
  • レンタルサーバと比較するとどうしても自分で設定しなければならないことが多いため、２日ほど時間がかかりました。
  • Nginxを触るのも初めてだったのでバーチャルホスト設定などかなり試行錯誤しました。
  • Laravelアプリケーションのデプロイ手順についても、そのうちまとめたいと思います。
デザイン
  • Lotus Baseでは ダークテーマ x グラデーション をベースにデザインしました。
  • 結果として Spotify と Instagram を足して２で割った感じになってます（笑）
  • サイトロゴも Inkscape と Gimp を使って .svg を自作しました。目指せフルスタック・フロントエンドエンジニア（？）

今後の方針

  • ひとまずはブログ記事を増やすところから頑張りたいと思います
  • 記事が増えてきたらカテゴリやタグづけ、Pagination などの基本的なブログシステムを構築する予定です。
  • Google Adsense を導入する予定はありません。
  • サイトが無秩序な広告で汚れてしまう & 当WebサイトはSEOを行うわけでもなければ一般大衆にウケる記事を書くわけでもないので…

最後までお読み頂きありがとうございました！これからよろしくお願いします。

< Prev
Back to Top