IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / GitHub / はてなブログに GitHub Pages から JS/CSS ファイルを読み込む

はてなブログに GitHub Pages から JS/CSS ファイルを読み込む

2019/06/27 GitHub, はてなブログ

はてなブログではどこにでも Javascript を書くことができますが、あまり長いコードですとソースを見た時にちょっとかっこ悪いです(笑)。そんな時は外部ファイルにして読み込みましょう。

独自ドメインを持っていれば無料サーバーを提供しているレジストラもありますが、https に対応していなかったりしますので、そんな時は GitHub Pages が便利です。

  • GitHub にアカウントを作成する
  • GitHub Pages 用のレポジトリを作成する
  • GitHub へのアップロード環境をつくる
    • ウェブ上でアップロード
    • ローカルに Git 環境を構築する
    • コンソールから GitHub にアップロードする

www.imuza.com

こちらの記事でも紹介しています。

GitHub にアカウントを作成する

GitHub にアクセスし、右上の Sign up をクリックします。

Username(アカウント名), Email, Password を入力します。すでに使われている Username は taken と表示されます。

何もせず進みます。

何もせず進みます。

アカウントが作成されましたので、メールを確認し、メールの Verify email address をクリックします。

GitHub Pages 用のレポジトリを作成する

Start a project をクリックします。

Repository name に アカウント名.github.io と入力し、レポジトリを作成します。

レポジトリが作成されました。確認のため、右上の Settings をクリックし、GitHub Pages の項目までスクロールします。

あなたのサイトは https://アカウント名.github.io で公開されていると出ています。

次は、GitHub へのアップロード環境の構築ですが、とりあえず確認するのであれば、この状態からレポジトリに入り、ウェブ上で index.html などのファイルを作成し、https://アカウント名.github.io にアクセスすれば確認できます。

テーマも用意されていますので静的なウェブサイトであれば簡単に作れそうですし、Custom Domain の入力項目もありますので、やったことはありませんが、独自ドメインで公開することも可能だと思います。

GitHub へのアップロード環境をつくる

ウェブ上でアップロード

上にも書きましたが、たとえば、はてなブログ用の Javascriptファイルを上げておくだけであれば、ウェブ上でアップロードする方法が一番手間がかかりません。

レポジトリに入り、Upload files をクリックします。

アップロードするファイルをドロップし、Commit Changes に記録用のコメントを記入し Commit Changes をクリックすればアップロードされます。

ローカルに Git 環境を構築する

GitHub は、Git を使ったホスティングサービスですので、ローカルに Git 環境を構築すれば、Windows でも Mac でも Linux でも、どんな環境でも連携できます。

Linux を使う人に Git どうこうと説明する必要もないでしょうから、Windows の場合の環境構築の記事をはっておきます。

www.imuza.com

コンソールから GitHub にアップロードする

Hello World を表示するサンプルです。

$ git clone https://github.com/imuzacom/imuzacom.github.io.gitCloning into 'imuzacom.github.io'...
$ cd imuzacom.github.io/
$ echo "Hello World" > index.html
$ git add index.html 
$ git commit -m "check to see"
[master ffef8f8] check to see
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
$ git push origin master
Username for 'https://github.com': imuzacom
Password for 'https://imuzacom@github.com': 
Counting objects: 3, done.
Writing objects: 100% (3/3), 255 bytes | 255.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/imuzacom/imuzacom.github.io.git
   1833901..ffef8f8  master -> master
$

ローカルにレポジトリのクローンをつくり、できたディレクトリに移動し、ファイルを作成し、add, commit し、push で GitHub にアップロードします。

これで、https://github.com/アカウント名.github.io にアクセスすれば

Hello World

と表示されます。

ということで、はてなブログ用に Javascript や CSS を置いておく環境ができました。これを使って Javascript を使わないとできないテーマを公開しようと考えています。

次期バージョンの Joomla! 4.0.0-alpha9 をインストールしてみる
Joomla! 3.9.9 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com