README Stock
taiga-tech
2021/01/10 - 最終更新 4ヶ月前
readmestock GitHub site
半自動ポートフォリオ
JavaScript SCSS Vue CSS

README Stock

Netlify Status CircleCI issues stars MIT License

サイトURL

https://www.taiga-tech.tk/

開発環境

Version
Mac OS Catalina 10.15.7
Node v15.4.0
npm 7.0.15
Nuxt 2.14.12
Vue 2.6.12
Vuetify 2.4.2
GitHubAPI v4

概要

楽に, 自動的に, 勉強出来る

GitHubAPIでREADMEを取得し、一覧表示&README確認が出来る半自動ポートフォリオ

作成理由 & 技術選定

ポートフォリオ作成する際に、楽にフロントだけで作成する方法を探していると、GitHubのリポジトリ情報を取得することで、
簡単かつ楽に半自動的なポートフォリオを作成することが出来ると考えました。

そして、GitHubAPIを調べていると、APIの種類にRestAPIGraphQLというものがあることを知り、
GitHubAPI v4がGraphQLを使用していて、GraphQLの勉強も出来るため、v4を採用しました。

フロントは、以前Vueを使用したこともあり、Nuxtに興味があったのでNuxtを採用、デザインはVuetifyを採用し、
完全に頼り切ってそれなりかつに作成しました。

しかし、SPAではなく表示速度を意識して作成したいと思いSSGを採用しているため、リポジトリを追加した場合に、
ホスティング先のNetlifyでbuildし直さないと更新されないので、完全自動化とは言えないので、半自動としています。

ホスティング先に関しては、NetlifyVercelどちらにしようか迷ったのですが、VercelはNext.jsを開発している会社らしく、
今後Reactも勉強してNextで何か作成する予定なのでその際にVercelを採用しようと考え、消去法でNetlifyを採用しました。

各ページ解説

├── トップページ
│   ├── 自己紹介
│   ├── 使用言語割合チャート
│   │   # GitHubのプライベートリポジトリ含めて使用したことのある言語の割合
│   ├── アプリ一覧
│   │   # 本番環境に上がっている、アプリ一覧
│   └── 各種リンク
│
├── readmes
│   ├── README一覧
│   └── README
│    # GitHubにpushすると、ほぼリアルタイムで更新
│
├── blogs
│   ├── ブログ記事一覧
│   └── ブログ記事
│    # 現在コンテンツ作成中で、最近勉強したことなどを追加していく予定
│
└── info
    ├── このサイトについて
    └── お問い合わせ
    # Netlify formを使ってみたくて追加したページ、新規メッセージはDiscordで通知される

トップページのLighthouse測定結果

Desktop

Lighthouse_desktop

Mobile

Lighthouse_mobile

測定結果を見て

Mobile測定でのパフォーマンスがかなり悪いようなので、改善していきたいと考えています。

参考サイト