ほろ酔い開発日誌スマートフォン用の表示で見るほろ酔い開発日誌AI企業のエンジニアのブログです。機械学習、Web開発の技術的お話、ビジネスチックなお話、日常のお役立ち情報など雑多な内容でお送りします。siteTweetはじめにポートフォリオを手軽にそして安く作りたかったのですが、それを実現させた方法をまとめます。「手軽に」という点ではBootstrapテンプレートを利用することで実現します。Pagesを利用します。無料というのは独自ドメインの取得料金は入っていないのでご注意ください(独自ドメインなしでよければこれもかかりません)。他はサーバー代もかかりません。PagesはHTTPS化もサポートしており、これも無料です。今回私が作ったポートフォリオサイトを掲載しておきます。Bootstrapテンプレートベースで少々いじりましたが2時間程度でできました。このようなサイトが無料で運用できます。Bootstrapテンプレートを利用するテンプレートを探すポートフォリオサイトを一から作るのは時間がかかるので、ポートフォリオの元となるテンプレートを紹介します。Bootstrapです。以下のBoostrapテンプレートを使えば、お洒落なサイトがすぐに手に入ります。コードはMITライセンスとなっているので無料で利用できます。startbootstrap.com例えば、以下のリンク先のようなサイトのコードが無料で使えます。THEMESもおすすめです。好きなテンプレートを見つけて、ダウンロードし、ローカルで確認してみましょう。各テンプレートにダウンロードボタンがあるのでダウンロードして解凍しましょう。その中にindex.htmlがあるのでそれをクリックしてください。ライブプレビューと同じものがブラウザで表示されるはずです。index.htmlがサイトのトップになります。ダウンロードしたファイルの中から必要なファイルををまとめてディレクトリにしましょう。それをGit管理します。commitまでしておきましょう。github.ioのURLを使って静的サイトを公開するそれでは、まず用意したサイトをそのまま公開してみましょう。projects.以下のようにGithubでレポジトリを作成します。Repositoryにしてもサイトの公開ができます。あとは、先程作成したディレクトリで以下のようにpushしてください。masterここまでで、https://(ユーザー名).github.ioにアクセスすると作成したページが公開されます。pushしてから反映まで30秒くらいかかったので少しだけ待つと反映されます。ポートフォリオを充実させるテンプレートの内容を自分の内容に書き換えましょう。HTML、CSSに詳しければ自分流に修正を加えてもよいと思います。テンプレートの利用が必須ではないので、自分のオリジナルのものを作成しても問題ありません。コードを書き換えたら、Githubにpushしましょう。pushすると自動的にサイトに反映されます。以上で(ユーザー名).github.ioのURLで自分のポートフォリオサイトを持つことは可能ですが、独自ドメインにしたい場合は以下に進みます。独自ドメインを設定する独自ドメインの取得にはお名前.comかムームードメインを私はよく使います。今回はムームードメインで取得しました。独自ドメインの設定の手順は以下の2ステップです。domainドメインの設定はAレコードの設定をするとよいと思います。Aレコードで進めます。ムームードメインの場合、「ムームーDNS」からドメインを選択して、カスタム設定を行います。他の業者でも同様の設定場所があるはずなのでそれを探しましょう。以下のように4つのIPアドレスをAレコードとして登録します。サブドメインの場合は画像の空白箇所にプレフィックスを入れます。185.199.108.153185.199.109.153185.199.110.153185.199.111.153Aレコードの設定ちなみに、Cレコードの場合はIPアドレスの箇所に(ユーザー名).github.ioの設定を一つだけすればいけると思います。(ただし、サブドメイン利用の場合のみ)以上を登録の後、以下のコマンドでAレコードの設定の反映が確認できればオーケーです。数秒で反映されました。(ユーザー名).github.ioGithub側に独自ドメインの設定をする次にGithub側の設定をします。domain」という項目に独自ドメインを設定するだけです。カスタムドメインこれで、独自ドメインからアクセスできることが確認できれば完了です。HTTPSに対応させるHTTPSの設定は簡単です。HTTPS」があるのでそれのチェックを入れるだけです。HTTPSセッティング独自ドメインの設定をして2、3分待つとチェックが押せるようになりました。チェックを押してから正常にアクセスできるまで5分程度かかりました。まとめ以上で、自分のポートフォリオサイトが完成です。テンプレートを使うことですぐに自分のサイトを作成できました。Pagesを使うことでサーバー代をかけずにサイトを公開し、独自ドメインの設定、HTTPS化まで無料でできました。(エンジニア向け)新しくMacBookを購入しました。(AND検索にも対応)サイトの記事数が増えてきてサイト内検索が欲しくなりました。はてなブログPro機械学習からWeb開発まで幅広く行っています。ビジネスチックなお話や日常のお役立ち情報まで雑多に有意義な情報を発信しようと思ってます。(2)ABOUTAI企業のエンジニアのブログです。機械学習、Web開発の技術的お話、ビジネスチックなお話、日常のお役立ち情報など雑多な内容でお送りします。seishin55AI企業エンジニア。プロフィールサイトはseishin55.com。LIFEおいおい書いていきます。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。