ネプラスのテックブログ。ネットワーク、クラウド、サーバなどのITインフラ情報を中心に発信中。

  1. ネプラス インフラエンジニア採用
  2. テックマガジン
  3. テクノロジー
  4. GitHubPagesを使ってサイトを公開する方法|公開手順から編集方法まで解説

GitHubPagesを使ってサイトを公開する方法|公開手順から編集方法まで解説

  • テクノロジー
  • プログラミング
公開日時:   更新日時:
GitHubPagesを使ってサイトを公開する方法|公開手順から編集方法まで解説
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    GitHub Pagesを使ってサイトを公開しよう!


    今回は、GitHub Pagesを使ってサイトを公開する方法について説明します。サイトの公開手順から、cloneして編集する方法について紹介します。無料で公開でき、リポジトリごとにサイトを作成できます。

    GitHub Pagesの公開URLは以下のようになります。
    https://{GitHubユーザ名}.github.io/{リポジトリ名}/

    興味のある方はぜひご覧ください。

    公開手順

    GitHub Pages を使ったサイトの公開手順を紹介します。
    GitHubにログインし、画面右上の「+」アイコンをクリックします。「New repository」を選択して、リポジトリを作成します。
    リポジトリ名は、ここでは「github_pages_sample」とし、「Create repository」ボタンをクリックします。

    次に、「creating a new file」リンクまたは「uploading an existing file」リンクをクリックして公開用のHTMLファイルを作成します。
    ここでは、「creating a new file」でindex.htmlを作成します。ここでは、以下のように記述します。

    作成後に、「Commit new file」をクリックしてコミットします。
    次に、GitHubリポジトリのSettingsからGitHub Pages、Sourceと進みmainを選択して、Saveボタンをクリックします。
    公開URLは以下のようになります。ブラウザからアクセスしてみてください。
    https://{GitHubユーザ名}.github.io/{リポジトリ名}/

    GitHubから編集

    GitHub Pagesの公開URLの更新手順を紹介します。
    GitHubリポジトリからindex.htmlを選択し、鉛筆ボタンで編集できます。コミット後に公開URLを更新すると、編集結果が反映されることが分かります。
    簡易的な編集であれば、GitHubで直接編集しても構いません。

    SSHキーの設定

    GitHubにアクセスするための、SSHキーの設定手順を紹介します。ターミナルからssh-keygenコマンドを実行します。

    実行すると.sshフォルダに秘密鍵(id_rsa)と公開鍵(id_rsa.pub)が生成されます。

    作成した公開鍵をGitHubに登録します。以下のURLにアクセスしてください。
    https://github.com/settings/keys

    「New SSH key」ボタンをクリックし、Titleに何かしらのタイトルを入力します。Keyに公開鍵(id_rsa.pub)の内容を入力します。その後、「Add SSH key」ボタンをクリックします。

    次にターミナルからgit cloneコマンドを実行します。

    github_pages_sampleフォルダが取得できました。配下にindex.htmlがあることが確認できます。

    cloneして編集

    取得したindex.htmlを編集します。ここでは、cssを追加してみます。

    次に、style.cssを新規作成します。

    commit, pushします。

    公開URLにブラウザからアクセスしてみてください。
    https://{GitHubユーザ名}.github.io/{リポジトリ名}/
    内容が更新されていることが分かります。

    まとめ


    GitHub Pagesを使ってサイトを公開する方法と、サイトの公開手順からcloneして編集する方法について紹介しました。

    説明したサンプルコードを参考に、ぜひご自身でソースコードを書いて理解を深めてください。

    FEnetを運営しているネプラス株式会社はサービス開始から10年以上
    『エンジニアの生涯価値の向上』をミッションに掲げ、
    多くのインフラエンジニア・ネットワークエンジニアの就業を支援してきました。
    ネプラス株式会社ロゴ

    ネプラス株式会社はこんな会社です

    秋葉原オフィスにはネプラス株式会社をはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • インフラ業界に特化

      インフラ業界に特化

      ネットワーク・サーバー・データベース等、ITインフラ業界に特化。Cisco Systemsプレミアパートナーをはじめ各種ベンダーのパートナー企業です。

      業界を知り尽くしているからこそ大手の取引先企業、経験豊富なエンジニアに選ばれています。

    • 正社員なのにフリーランスのような働き方

      正社員なのにフリーランスのような働き方

      正社員の方でも希望を聞いたうえでプロジェクトをアサインさせていただいており、フリーランスのような働き方が可能。帰社日もありません。

      プロジェクト終了後もすぐに次の案件をご紹介させていただきますのでご安心ください。

    • 大手直取引の高額案件

      大手直取引の高額案件

      案件のほとんどが大手SIerやエンドユーザーからの直取引のためエンジニアの皆様へに高く還元できています。

      Ciscoをはじめ、Juniper、Azure、Linux、AWS等インフラに特化した常時300件以上の案件があります。

    • スキルアップ支援

      スキルアップ支援

      不要なコストを削減し、その分エンジニアの方へのスキルアップ支援(ネットワーク機器貸出、合格時の受験費用支給など)や給与で還元しています。

      受験費用例)CCNP,CCIE:6-20万円、JNCIS:3-4万円、AWS:1-3万円など

      ※業務に関連する一定の資格のみ。各種条件がありますので詳しくは担当者へにお尋ねください。

    • 現給与を保証します!

      100%現給与保証

      前職の給与保証しており、昨年度は100%の方が給与アップを実現。収入面の不安がある方でも安心して入社していただけます。

      ※適用にはインフラエンジニアの業務経験1年以上、等一定の条件がございます。

    • インセンティブ制度

      インセンティブ制度

      ネットワーク機器の販売・レンタル事業等、売上に貢献いただいた方にはインセンティブをお支払いしています。

      取引先企業とエンジニア側、双方にメリットがあり大変好評をいただいています。

    • 社会保険・福利厚生

      社会保険・福利厚生

      社員の方は、社会保険を完備。健康保険は業界内で最も評価の高い「関東ITソフトウェア健康保険組合」です。

      さらに様々なサービスをお得に利用できるベネフィットステーションにも加入いただきます。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      ネプラスは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    ネプラス株式会社に興味を持った方へ

    ネプラス株式会社では、インフラエンジニアを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    オンライン面接も随時受付中。ぜひお気軽にご応募ください。

    ネプラス株式会社へのご応募はこちら↓
    ネプラス株式会社へのご応募はこちら↓

    新着案件New Job