トップ > GitHub > GitHub PagesでブログにCSS・JSファイルを外部共有化する方法【初心者向け】
最終更新日

GitHub PagesでブログにCSS・JSファイルを外部共有化する方法【初心者向け】

GitHub ブログ CSS JavaScript ウェブ開発 GitHub Pages

GitHub

GitHub Mt,Fuji 富士山とギットハブ

この記事では、GitHub Pagesを使用してブログにCSS・JSファイルを外部共有する方法について解説します。外部共有化することで、簡単にスタイルや機能のアップデートを行い、複数のブログやWEBサイトで同じスタイルを利用することもできます。

デモサイトを見る

Style Sheet(.css): yfgq-ziw.github.io/navigation-bar-btest.css

JavaScript file(.js): yfgq-ziw.github.io/navi-drop-demo.js

一生懸命勉強する猫

©nyanco
すべてGitHubで公開（共有化）したものです~ ฅ^•ω•^ฅ

以前こちらの記事で、スタイルシートをテンプレート化し、ページごとにデザインを出し分けする方法をご紹介した際、DropBoxを使用して CSSファイルを外部共有化する方法についても触れました。

スタイルシートをテンプレート化し、ページごとにデザインを変える - hatebcustom

今回は、GitHubを利用します。私も初め苦労しましたが、ようやく人に説明ができるくらい？には理解ができたので、せっかくなので手順をまとめて、共有したいと思いました。

初心者の方にはページが基本英語だったり、 DropBoxよりは少し敷居が高いかもですが、、分かりやすい解説を心掛けますので、これをきっかけにぜひ、GitHubの活用にチャレンジしてみてくださいね。(＾◡＾)🌞

github icon



GitHub Pagesを使ってCSSをはてなブログに共有する手順


ここから、GitHub Pagesを使ってCSSファイルをブログに簡単に共有する手順を説明していきます。※JS（JavaScript）ファイルでも、基本は同じです。以下のステップに従って進めてください。


GitHub Pagesとは？

そもそも「Git」「GitHub」「GitHub Pages」とはそれぞれ何ぞや？ということで、これらの違いについて、以下に記します。


GitとGitHub

Gitは GitHubの略した呼び名ではありません。2つは異なるものです。

  1. Git（ギット）:

    • Gitは分散型のバージョン管理システムです。
    • プログラムのコードや文書などの変更履歴を管理し、複数の人が協力して開発する際に便利です。
    • ローカル環境でも動作し、ネットワークに接続されていなくても利用できます。

  2. GitHub（ギットハブ）:

    • GitHubは、Gitを利用したウェブベースのプラットフォームです。
    • インターネット上でプロジェクトを管理でき、ソースコードを共有し、他の人と協力して開発する際などに便利です。
    • プルリクエスト、イシュートラッキング、ブランチ管理など、協力開発をサポートする様々な機能が提供されています。
  1. GitHub Pages:
    • GitHub Pagesは、GitHubの提供する「ウェブページホスティングサービス」です。GitHubリポジトリ内の特定のブランチ（通常はmasterブランチ）や/docsフォルダなどから静的なコンテンツ（HTML、CSS、JavaScript、画像など）をホストすることができます。主に個人のポートフォリオ、ウェブサイト、ドキュメンテーションなどを公開するために利用されます。


Git はバージョン管理のためのツールであり、GitHub はその Gitリポジトリをクラウド上でホスティング（貸出）し、協力開発を支援するプラットフォームです。

GitHub は Gitを使ったプロジェクトの共有や協力を容易にするためのサービスの一つであり、他にも「 GitLab 」、「 Bitbucket 」などがあります。

GitHub Pages は GitHubリポジトリからウェブコンテンツをホストできるため、個人のウェブサイトやプロジェクトのドキュメンテーションを手軽に公開できます。


ということで、ちょっと横文字が多くて書いてる私もなかなか頭に入ってこないのですが笑；^ω^）…。まとめると、

  • 「Git」はプログラムのバージョン履歴を管理する基礎となるシステムで、
  • 「GitHub」や他の企業はその Gitを利用して、プロジェクト管理をするプラットフォームを提供しており、
  • 「GitHub Pages」はさらにその「Git Hub」の中で提供されているコンテンツ公開サービス、

といった感じでしょうか。。

という訳で、GItHub Pagesは GitHubのサービスということで、以降は便宜上「GitHub」の呼称で統一いたします。😊


【補足】ホスティング（Hosting）

「ホスト・ホスティング」とは、ウェブサイトやアプリケーションなどのデジタルコンテンツを保存し、公開可能なオンラインサーバー上に配置するプロセスやサービスを指します。これにより、他のユーザーがインターネット経由でそのコンテンツにアクセスできるようになります。

ホスティングのサービスプロバイダは、物理的なサーバーのインフラを所有して、ユーザーに対しそれを利用するためのリソースを提供します。これにより、個々のユーザーや組織は自分たちのウェブサイト、アプリケーション、データなどを公開できます。

はてなブログやWordPressもホスティングシステムの一つです。これらを利用することで、ウェブサイトやアプリケーションを安定して運用し、🌍世界中のユーザー🌏にアクセス可能にできます。🌐✨


ステップ 1: Gitをインストール

では、実際の手順を見ていきましょう。発破を掛けて貰ったらイザ！(｡･ω･｡)ﾉ🌸

GitHubを利用するために、先ずはGitをご利用のPCにインストールする必要があります。手順は以下の通りです。

  1. 公式ウェブサイトへアクセス:
    Gitの公式ウェブサイトのダウンロードページにアクセスします。以下がそのリンクです。

  2. ダウンロード:
    バージョンを選択（通常は一番上のlatestでOK）し、クリックすると、Gitのインストーラがダウンロードされます。ダウンロードが完了したら、そのファイルを開いてください。

  3. インストールウィザードの実行:
    ダウンロードした実行ファイルを開くと、Gitのインストールウィザードが表示されます。指示に従って進み、設定を選択してください。（よく分からなければ、Nextをクリックして進み、最後はInstallをクリックでOK）

  4. インストールの確認:
    インストールが完了したら、正常にインストールさせているか、確認しましょう。シェルを起動します。

「シェル」は、オペレーティングシステムとユーザーの対話を仲介するプログラムで、ユーザーがコマンドを入力し、それを解釈して実行する役割を果たします。コマンドプロンプト（WIndows）やターミナル(mac）とも言います。


シェルの操作

ここで、シェルの操作について少し、説明します。

シェルの起動手順

起動場所 入力ワード 実行キー
タスクバーの検索窓から 「cmd」 Enter
Spotlight Search (Cmd + Space) またはから 「Terminal」 Enter


実行すると、シェルの、いかにもコンピューター的？なアプリが起動します。
cmd コマンドプロンプト画面


通常、シェルを開くと以下のようなディレクトリ位置で立ち上がります。

  • cmd : 「C:\Users\ユーザー名>」
  • Terminal : 「/Users/ユーザー名$」
  • cmd

       C:\Users\ユーザー名>

  • Terminal

       /Users/ユーザー名$


ここで以下のコマンドを入力し、Gitのバージョンが表示されるか確認してください。

   git --version
  • コピペでOKです。貼り付けのときは、cmd上だと右クリックだけで貼り付けが行われます。Terminalだと、、すみません、macユーザでないので確証はないのですが、通常通りCommand + V貼り付けだと思います。

正常にインストールされていれば、Gitのバージョン情報が表示されるはずです。これで、Gitのインストールは無事完了です。


ステップ 2: GitHubアカウントの作成

  1. GitHubのホームページ にアクセスします。
  2. "Sign up" ボタンをクリックして、新しいアカウントを作成します。

ポイント

Sign up →Enter a usernameのところで付ける「ユーザーネーム」は、共有化するファイルのURLアドレスの一部となります。

  1. アカウントが作成できたら、そのままログイン。


ステップ 3: リポジトリの作成

  1. ログイン後、右上のプラス＋ボタンをクリックして "New repository" を選択します。
  2. リポジトリ名を入力し、「Public」に設定（デフォルト）します。READMEファイルもそのまま作成しないで進めます。


リポジトリ（repository）とは英語で「貯蔵庫」、「倉庫」などを表す言葉で、一般用語としては、さまざまなデータ、情報、知識や成果物を蓄積するデータベースやアーカイブを指します。あまり聞かない言葉ですね。

GitHubではこの「リポジトリ」というのがよく出てきますが、そういう呼び方をしている、程度の認識でいい気がします笑


ポイント

大事なポイントは、この「Repository name」を

自分のユーザ名.github.io

と、付けてください。ここを間違えると、以下の作業が一からやり直しになってしまいます（私？；^ω^）。

  1. Repository nameを入力したら、あとは右下の「Create repositoryボタン」をクリック。

    2. Create repositoryボタン

  2. 新たなリポジトリ（倉庫）が作成されます。


この倉庫が、のちにローカルに作成するフォルダと連動します。DropBoxなどの同期フォルダのようなイメージです。


ステップ 4: プロトコルを使用したリポジトリのクローン実行

ポイント

ここは説明が必要だと思うので、ちょっとだけ中断します。また、馴染みのないワードが出てきましたね。( ´•ᴗ•ก )💦「プロトコル？クローン？」という方はとりあえず、？？のまま読み進めてください笑。私も以前はなんのこっちゃ？でしたので。。

またここから、cmdを使います。cmdにあまり馴染みのない方もいるかと思いますが、決まったフレーズをコピペで順番に打ち込んでいけばOK♪ですので、ご安心ください。ｸﾞｯ(๑•̀ㅂ•́)و✧


  1. リポジトリのURLをコピー
    • Create repository後に表示される、リポジトリのURLをコピーします。
    2.

GitHubリポジトリのURLコピー画面


2つの違いですが、

  • HTTPSプロトコル: 
       git clone https://github.com/ユーザ名/ユーザ名.github.io.git
    • HTTPSプロトコルを使用してクローンします。この場合、ユーザー名とパスワードまたはトークンが認証に使用されます。
    • HTTPSを使用する場合、GitHubのユーザー名とパスワードまたはトークンが（のちほど）必要です。
  • SSHプロトコル:
    •    git clone git@github.com:ユーザ名/ユーザ名.github.io.git
    • SSHプロトコルを使用してクローンします。この場合、SSHキーが認証に使用されます。
    • 事前にSSHキーをGitHubアカウントに登録している必要があります。


どちらのプロトコルを選択するかは、通常、個人の好みや環境のセキュリティ設定に依存します。SSHを使用すると、キー認証の利点があり、HTTPSを使用するとユーザー名とパスワードの入力が必要ないため、操作がスムーズに行えるという違いがあります。


プロトコル（Protocol）とクローン（Clone）

ソフトウェア開発やリモートリポジトリからのデータ取得に関連する用語です。

  • プロトコル (Protocol):
    コンピュータネットワーク上での通信やデータ転送のための規約や取り決めを指します。例えば、HTTP（HyperText Transfer Protocol）やHTTPS（HTTP Secure）は、ウェブ上でのデータ通信のためのプロトコルです。Gitの場合、通信に使用されるプロトコルとして主にHTTPやHTTPS、SSH（Secure Shell）があります。

  • クローン (Clone):
    サーバ上にあるリモート（遠隔）リポジトリから、コピーを作成する操作を指します。Gitでは、リモートリポジトリからローカルマシンにプロジェクトを複製することを「クローン」と呼びます。これにより、プロジェクトの完全な履歴やファイルがローカルにコピーされ、その後の作業や変更を行うことができます。


  1. クローンの実行
    • シェルを立ち上げ、ここで先ほどコピーした、リポジトリのURLの文頭に「`git clone`」を加えたコードを貼り付け、Enterキーを押すとクローンが実行されます。

      このとき念のため、以下のフォルダがカレントになっているか、確認してください。このフォルダ配下にクローンによって新たなリポジトリ用のフォルダが生成されます。

      • cmd : 「C:\Users\ユーザー名>」
      • Terminal : 「/Users/ユーザー名$」 
         git clone コピーしたリポジトリのURL
      実行後、こんなメッセージが表示されれば成功、です。

      Cloning into 'リポジトリ名'...
      warning: You appear to have cloned an empty repository.

      「からっぽのクローンを作成したようです…。」的な警告がされますが、まだ何もファイルを置いていませんので、問題ありません。心配しないでくださいね笑

      クローンしたときにリモートリポジトリが空である場合、ローカルにはリポジトリの構造（フォルダ）のみが作成されます。クローン後にローカルでコミットを行い、それをリモートリポジトリにプッシュすることができますので、リモートリポジトリがまだ何もコミットされていなくても、将来的にプロジェクトを進める際には問題ありません。

      コミット (Commit) とは Gitなどのバージョン管理システム（Version Control System, VCS）で使用される重要な概念の一つです。ファイルやディレクトリの変更履歴を管理し、異なるバージョンを比較・復元する機能を提供します。代表的なバージョン管理システムは他に、Mercurial、Subversionなどがあります。
      コミットコミット、と頻出しますので、覚えておいてください笑


これで、「HTTPS（SSH）プロトコルを使用した、GitHub上のリポジトリのクローン実行」が完了しました。

このコマンドの実行により、GitHubのリポジトリがローカルにコピーされ、それを操作することができるようになります。

エクスプローラで確認すると、

C:\Users\PCのユーザー名\GitHubのユーザ名.github.io.git

というフォルダが生成されたかと、思います。（ハズです~ ฅ^•ω•^ฅ）

ちなみに、Windowsキーを押しながらを押すと、エクスプローラーが開きます。
…macユーザのかた、すみません(^^;


ステップ 5: GitHubに接続

CSSファイルを置くPC上のフォルダ（ローカルリポジトリ）と、リモートリポジトリ（遠隔倉庫）を同期させるため、シェルを経由しデスクトップと GitHubを接続します。

連携させるためのコマンドは、以下の手順で入力します。なお例では、HTTPSプロトコルを使用しています。SSHを使用する場合は、対応するURLに置き換え、実行してください。

  1. 以下のコマンドでローカルのリポジトリに対し、外部のリモートリポジトリとの接続情報を設定します。`origin`は慣習的な名称のようです。 
       git remote add origin https://github.com/GitHubのユーザ名/GitHubのユーザ名.github.io.git
    • このコマンドで、ローカルのGitリポジトリが外部のリモートリポジトリと接続され、データのやり取りが可能になります。ローカルとネットが、繋がったことになります。
  1. リモートリポジトリとの接続を確認します。 
       git remote -v
    • リモートのURL（共有化されたリンクのアドレス）が表示されれば、無事接続されていることになります。


これで、GitHub上のリポジトリとローカルのリポジトリが連携されました。次のステップで、共有化したいファイルをローカルリポジトリに配置し、それをリモートリポジトリに反映させていきます。


ステップ 6: ローカル変更をリモートリポジトリに反映

ここからいよいよ、シェルで実行する基礎的なGitコマンドを用い、ファイルを共有化していきます。

git add、git commit、git pushなどのコマンドを使用します。これは、Gitの基本的なコマンドです。また、git initというGitリポジトリを初期化するための基本コマンドもありますが、これは新たにプロジェクトを始める際に使うもので、すでにリポジトリを作成してますので、ここでは不要です。

コマンドを表にまとめてみました

git コマンド効果 用途 ポイント・補足
add ローカルの変更をステージングエリアに追加 変更をコミットの対象とする。ステージングエリアとは、変更を一時的に保管する場所のこと コミットする前に不要な変更を取り除いたり、開発者が変更を精査してからコミットするための一時エリア
commit ステージングエリアに追加された変更をローカルリポジトリにコミット（保存） ファイルに変更があった場合、それを確定して履歴に追加する コミットメッセージで変更内容をクリアで簡潔に表現
push ローカルのコミットをリモートリポジトリに反映 外部に変更内容を共有。したがってgit commitまででは変更は反映されません リモートリポジトリに変更を送信するので、認証情報を含む情報など取り扱いは慎重に
pull リモートリポジトリの変更をローカルに取り込む リモートで行った変更をローカルに反映させる pushと対になる
init リポジトリの初期化 新規プロジェクトの開始や、既存プロジェクトをGitでトラッキングするとき使用 .gitディレクトリが新たに作成され、Gitの管理が始まる


コマンドを打つ前に、クローンで生成したローカルフォルダに、共有したいファイルを置いておきましょう。ϵ( 'Θ' )϶

C:\Users\PCのユーザー名\GitHubのユーザ名.github.io.git

ちなみに、Windowsキーを押しながらを押すと、エクスプローラーが開きます。
…macユーザのかた、またまたすみません(^^;


準備ができたら、コマンドを打っていきましょう。

  1. cd: カレントディレクトリを変更
    • 先ず、Gitコマンドを実行するフォルダの場所（クローンで作成したローカルフォルダ）に、カレントディレクトリを移動します。これには、Gitではなくシェルのコマンドを使います。
      •    cd C:\Users\PCのユーザー名\GitHubのユーザ名.github.io.git
      場所を移してから、gitコマンドでファイルをデプロイしていきます。デプロイとは、GitHub上で管理したり、変更したコードを実際にアプリケーションやウェブサイトなどに反映させることを指します。


  1. git add: 変更をステージングエリアに追加する。
    • 変更したファイルをGitがトラッキング（追跡）するためには、変更をステージングエリアに追加する必要があります。
      •    git add ファイル名
    • ワイルドカード（`*`）を使用して、全ての変更をステージングすることもできます。
      •    git add *
  2. git commit: ステージングエリアに追加された変更をローカルリポジトリにコミットする。
    • コミットは変更の保存単位で、メッセージも付けることができます。簡潔な変更内容を付けておくと、のちのち管理がしやすくなります。
      •    git commit -m "Update styles"
      `-m`はメッセージを直接指定するオプションです。

  3. git push: ローカルのコミットをリモートリポジトリに反映する。
    • これにより、外部に公開され、共有できるようになります。リモートリポジトリへの`push`（プッシュ）は、変更を共有する手段の一つです。
      •    git push origin main
    • originは慣習的なリポジトリの名称です。

      GitHubにサインアップ後、ログインして「New repository」からリポジトリ名を入力し。「Create repositoryボタン」で作成した際の「Repository name」（＝現在地のフォルダ名）も、その名の通りリポジトリの名称です。

      同じリポジトリの名前なので混乱しますが、両者の違いは
      • GitHubでリポジトリ（プロジェクトの箱）を作るときにつけた名前は、GitHubの中にできた箱の名前で、
      • `git push origin main`の`origin`は、その箱にコードを送るための合言葉、
      という風にイメージしておいてください。

    • mainの方は、現在のブランチ名（branch）を指します。

      ※王様のブランチは「brunch」です笑。「breakfast（朝食）」と「lunch（昼食）」を組み合わせた造語です。ฅ^•ω•^ฅ

      `git push origin ブランチ名` コマンドで使用される「ブランチ名」は、プッシュしたいローカルのブランチの名前を指します。このコマンドは、指定されたブランチをリモートリポジトリにプッシュするために使用されます。

      `main` ブランチに変更を加えてそれをリモートリポジトリに反映させたい場合、上記のようなコマンドを使用します：

      この場合、`main` はプッシュしたいローカルのブランチ名です。

      以下は一般的な使用例です：
      • master: 以前はデフォルトのメインブランチだったようです。最近のリポジトリでは `main` がデフォルトになることが一般的です。
      • main: 現在の主流のメインブランチ名。
      • feature/some-feature: 新しい機能の開発用に作成されたブランチ。
      • その他プロジェクトやチームによって異なります。

      プロジェクトの設定に基づいて適切なブランチ名を指定します。


考え、悩む少女
「ややこしいんですが。。」


ややこしい説明になってしまいましたが、、デフォルトで新規に、しかも一人の利用で GitHubを立ち上げた直後は、通常mainとなっていると思いますので、上のコードをそのまま打てば、基本問題ありません。(„◕᎑◕„)⸝⸝꙳ｸﾞｯ

万が一、errorメッセージなどが表示され、うまくいかないときは、以下のコマンドを実行すればデフォルトのブランチ名を確認できますので、ブランチ名の部分をそちらに変更して実行してください。

   git branch


以上、これらの基本的なコマンドを使用することで、ローカルの変更をステージングし、コミットし、最終的にリモートリポジトリに反映させることができます。これでファイルの共有化が完了しました。



ステップ 7: ブログに反映

CSSスタイルシートの例で、手順を説明します。

. ブログの管理画面から<head>タグを編集できる場所に移動します。

はてなブログなら、

「ダッシュボード」 「設定」 「詳細設定」 「<head>要素にメタデータを追加」

最後に、「変更する」ボタンを押すのを忘れずに!

また、Markdown・はてな記法であれば、記事に直接貼り付けることも可能です。その場合、その記事のみにスタイルは反映されます。


. 以下のリンクコードを追加します。ユーザ名はGitHubのものに置き換えてください。

   <link rel="stylesheet" href="https://ユーザー名.github.io/ファイル名">


以上で、GitHubで共有化したファイルをブログやその記事ページが読み込むようになります。 ちなみに、このアドレスに直接ブラウザからアクセスすると、コードのRaw（生）データが表示されます。

美味しそうなラテアートカフェとスイーツ
一服　ﾄﾞｰｿﾞ(∩´｡•ω•)⊃🍵


おわりに

GitHub Pagesを利用したページの共有化をご紹介しました。

以前から、GitHubには登録はしていたものの、最初公開用のソースコードの埋め込みに利用して、正直最近は、ほとんど使っていませんでした。^_^;

公開できているのだから外部シートとして共有もできるのでは？と思い、調べ出したのが今回のきっかけで、普通にRawデータのリンクを貼るだけでイケそうと考えていたのですが、さすがにそう簡単には行かず…。思ったより方法を探すのに苦戦してしまいました。( ´•ᴗ•ก )💦

調べる中で、GitHubには他にも色々と便利な機能が提供されていることを知り、長くなるので今回は割愛した部分とかもあったりするので、今後まとめられた時また、公開できたらいいなとか、勝手に思っています。

一生懸命勉強する猫

©nyanco
最後までお読みいただきありがとうございました。みなさまの、ご参考になれば幸いです。それではお疲れさまでした！ ฅ^•ω•^ฅ