10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

GitHub Pagesでポートフォリオを公開してみる

Posted at

概要

BootStrap5がリリースされて「使ってみたい」ということから調べていたら、GitHub Pagesを使うと、GitHubにコミットするとWebページが公開できる「ワザ」があるということで、急遽「GitHub Pagesにポートフォリオを公開する」ことを目標にBootStrap5を学ぶことにしました。

就活や転職でGitHubが有効とかいう時代になったんですねぇ・・・(遠い目)

GitHub Pagesってなんやねん

■ GitHub Pages

一般的に、GitHubにソースなどをコミットしてリポジトリとして使っている人がほとんどだと思いますが、GitHubのリポジトリでホームページが公開できるというものです。

実際に、今回作って公開しているのが下記となります。

方法

いろんな方がYouTubeや本Qiitaで説明してくれているので、ざっくりまとめると

  • リポジトリを「(自分のGitHubアカウント名).github.io」という名前でPublicとして作成すると、自動的にGitHub Pagesとして公開される
    下記は「たにぐち まことのともすたチャンネル」さんの該当動画です。(毎回わかりやすく説明してくれます)
  • リポジトリを「AAAA(なんでもいい)」でPublicにて作成すると、GitHub Pagesの設定後に「(自分のGitHubアカウント名).github.io/AAAA」で公開される
    下記は「大学生がエンジニアになるまで / コーディングテスト実況」さんの該当動画です。

私の場合は、前者を選択しました。

いざ実食!

BootStrap5の配布されているThemeを使うのは、BootStrapの勉強にならないだろうということで、1からカキカキしてます。

作成の方針としては、

  • 文章量

    • 「すでに20年の社会人経験がある」ITエンジニアなので、書き始めると長くなる・・・・のでシンプルな情報量にする
    • いろいろできるけど、「なんとなく」分かってもらえればヨシとする(誰かにレビューしてもらうためのたたき台とする)
    • 廃れたプログラミング言語とか、最後に使って年数た経ちすぎて忘れかけてるのは除外する
  • デザイン

    • フロントエンドエンジニアではないし、デザイナーでもないので凝った作りはしない
    • ソースを見たらだれでも「ハハーン、マネしたるわ」と思える作りにする
  • その他

    • SEO対策は、ある程度は入れておく
    • GA4なども実装しておく
    • Googleフォントなども面白そうなので使っておく

あとは、もうBootStrap5のDocumentを見ながら作ります。
最初は、載せる文章を決めるほうが進行が楽ですね・・・

所感

BootStrap5の最初のとっかかりとしては、適度なコンテンツになりました。
次は、別のサイトを作るときに使ってみたいと思います。

それでは、もう一度完成したポートフォリオを。

感想や、私のデザインをパクりたい申告などは随時受け付けてます。(私はデザイナーじゃないんで・・・・・)

10
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?