LoginSignup
1

More than 1 year has passed since last update.

自分のポートフォリオを簡単に作成して公開するまでの8ステップ

Last updated at Posted at 2022-08-03

いかに簡単にポートフォリオを公開する

astroで簡単にポートフォリオを作成して、Herokuでの公開までの手順になります。
自分なりに今現在の修正しているポートフォリオになります。
これからも随時更新する予定です。

1.Nodeのインストール

以下のサイトからインストーラーをダウンロードし、インストーラーからダウンロードを行う

インストール完了後に以下のコマンドにてバージョンを確認する

~$ node -v
v16.16.0
※v16.16.0以上で動作確認済み

2.astroのパッケージをダウンロード

astro-portfolioにて記載がある通り、以下のコマンドをターミナルから実行する。

~$npm init astro -- --template portfolio
Need to install the following packages:
  create-astro
Ok to proceed? (y) y

Welcome to Astro! (create-astro v0.14.3)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … ./my-astro-site ⇒任意のフォルダ名
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes ⇒依存関係をインストールするかどうか
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no ⇒gitリポジトリを作成するか
✔ Setup complete.
✔ Ready for liftoff!

 Next steps

You can now cd into the my-astro-site project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

3.開発モードでのサイトの確認

※Starts local dev server at localhost:3000
下記のコマンドを実行し、localhost:3000へアクセスする。

~$npm run dev
> @example/portfolio@0.0.1 dev
> astro dev

  🚀  astro  v1.0.0-rc.4 started in 148ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

  ▶ This is a  rc  prerelease build
    Feedback? https://astro.build/issues

何も編集していない場合のトップページ

image.png

4.自分のオリジナルにサイトを編集

自分のポートフォリオにするために修正したい箇所を修正する。
トップページの名前を自分の名前にしたり、「About me」についても自分なりに記載するのもよいかと思います。
編集とともに「static.json」ファイルをプロジェクトフォルダ直下に用意し、以下の内容を記載する。

{
  "root": "./dist"
}

5.herokuアプリの作成

herokuにアクセスし、「無料で新規登録」から登録をする。
以下の手順から、新しいAPPをheroku上で作成する。

  • 「New」 ⇒ 「Create new app」 ⇒ [App name]や[Choose a region]を任意で入力する。
  • [Buildpacks]から[heroku/nodejs],[https://github.com/heroku/heroku-buildpack-static.git]を追加
  • [Account settings]から[API Key]の「Regenerate API Key」を押下し、「Reveal」からAPIキーを表示し、コピーする。

6.Githubへのリポジトリ作成

  • 「New repository」 ⇒ 任意のリポジトリ名 ⇒ 「Create repository」
  • 「Settings」 ⇒ 「Secrets」 ⇒ 「Actions」 ⇒ [New repository secret]
    • HEROKU_API_KEY:herokuで確認したAPI_KEY
    • HEROKU_EMAIL:herokuにて登録したEmailアドレス

7.Github Actionsにてherokuへのデプロイ準備を行う

GithubのActionsタブを押下し、「set up a workflow yourself」をクリックする。
以下の内容を記載し「Start commit」をクリックする。

name: Deploy to heroku

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: akhileshns/heroku-deploy@v3.8.8
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "※ポートフォリオ名"
          heroku_email: ${{secrets.HEROKU_EMAIL}}

8.変更内容をGithubへpushする

以下のコマンドを実行する

~$git init
~$git addd .
~$git commit -m "first commit."
~$git remote add prigin https://github.com/XXXXXXX/XXXXXX ⇒自分のリポジトリのURL
~$git push -u origin main 

動作確認

実際にherokuで用意しているURLにアクセスを行い、問題なく表示されることを確認してください。

最後に

herokuの無料プラン内で自分だけのポートフォリオを公開することができました。マークダウンのファイルも表示することができ、ポートフォリオとしても簡単に変更や追記することができるように準備しておけばいつでも転職用のポートフォリオとして活用することができると思います。自分は現時点で追加でresumeページを追加したり、文字フォントを変更したり、画像を変更したりしております。
ちょくちょく手を出して変更した部分等について記事にしていけたらと思っています。
本記事に誤っている部分や抜けている部分がありましたらコメントで教えていただけますと幸いです。

追記:2023/02/08

Herokuの無料枠での公開が終了したため、GithubPagesで公開するように変更しました。
https://6b6169736569.github.io/
方法としては、下記のビルドを行い、distフォルダへ移動したあとに、Githubで[ユーザー名].github.ioの名前でリポジトリを作成すると公開できます。

npm run build
cd dist

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
1