概要
github
「Google app engin」や「 GitHub」って…プログラマーじゃなければ…
趨勢に流されて…お試し的に「Hello World!」したら…
後は…とりたててやる事も見つからず…そのまま放置
…ってなパターンが多いと思われます…あくまでも自分基準です…
2014年の大カスタマイズでは…「Page Speed」と「YSlow」で…
「AA」を維持したまま…如何にページ読み込み速度を上げるか
…を大テーマとして行って来ましたが…
検証のために…トップページから広告を外して…
ページ読み込み「1秒」以内を目処に5月以降検証を続け…結論は…
「CSS」や「JavaScript」は…直書きが最も速い…でした…
とても…ユーザーフレンドリーで良いのですが…しかしながら…それでは…
「YSlow」では高スコアが出るものの…
「Page Speed」では外部ファイル化を推奨していますから…
「Page Speed Grade」が「A」ギリギリで伸び悩む事になります…
なので…世の中から無用な「Hello World!」を撲滅するためにも…
「Hello World!」しただけの静的な Web ページの「 GitHub Pages」を…
Blogger の外部ファイル置き場として活用しましょう…
「browser caching」は…10分で…充分とは言えませんが…
「Page Speed」での高スコア狙いのために…と割り切れる方だけにお薦めします…
そもそも…直書きの方が速いのだし…ブラウザのキャッシュは…
「空っぽ」な来訪者が殆どでしょうしね…記事にするにあたって…
「Hello World!」した当時と多少変わっていたので一から作り直しました…
なので…軽く…手順を画像で残しておきます…
因みに…既存の「Repository」を削除するには…意味を理解した上で…
ダッシュボードから既存の「Repository」を選択して…
「Repository」ページの「Settings」タブから…
「Danger Zone」の「Delete this repository」で行います…
「GitHub Pages」を作成して「CSS」と「JavaScript」を外部ファイル化
冒頭の「 github」リンクから必要事項を入力して…
「Sign up for GitHub」をクリック…「username」が…
「 GitHub Pages」のドメイン名になります…
▲画像-01
「Finish sign up」をクリック…
▲画像-02
「+ New repository」をクリック…
▲画像-03
「Repository name」に「ユーザー名.github.io/」
…と入力…私の場合だと…
「passer-by198.github.io/」ってな感じです…
「Create repository」をクリック…
▲画像-04
コマンドラインが表示されたらウエブでの操作は完了
▲画像-05
…をダウンロードして解凍＆インストールします…
▲画像-06
デスクトップにショートカットが作成されます…
「GitHub」のショートカットをダブルクリック…
▲画像-07
画像-01 で入力したユーザー名とパスワードを…
入力してログインします…
▲画像-08
入力されている内容を確認して「Skip」をクリック…
▲画像-09
「+」をクリックして何も弄らずに…
「Clone」をクリック…
▲画像-10
画像-04 での「Repository name」が…
表示されたら「Repository name」をクリック…
▲画像-11
下部の「Clone repository」ボタンが…
クリック出来る状態に変わりますのでクリックします…
▲画像-12
エクスプローラーが立ち上がり「GitHub」の…
ディレクトリが選択されていますので「OK」をクリック…
▲画像-13
「Repository name」を右クリックして…
「Open in Explorer」をクリックすると…
エクスプローラーが立ち上がり「GitHub」の…
ディレクトリが開きますので…外部ファイル化する…
「CSS」や「JavaScript」ファイルを入れて閉じます…
仮に…「custom01」というファイル名の…
「JavaScript」ファイルを入れてみましょう…
10分とは言え「browser caching」されますので…
変更も勘案して…「バージョン管理」は必須です
▲画像-14
「Uncommitted changes」が表示されます…
▲画像-15
「Summary」を分かり易い名前…仮に…
「Script」として「Commit to master」をクリック…
▲画像-16
このような状態になりますので「Publish」をクリック…
▲画像-17
最後に…「Sync」をクリックして完了です
▲画像-18
更にファイルを追加するには…
画像-14…以降を繰り返します…勿論…ファイルは…まとめて追加も出来ますが…
「History」の分かり易さも勘案すると個別に「Sync」して行く事をお薦めします…
外部化したファイルにアクセスするには…
新規の場合…アクセス出来るようになるまで…
多少のタイムラグがありますので…気長に待ちましょう……反映されると…
「CSS」なら…
//ユーザー名.github.io/ファイル名.css「JavaScript」なら…
//ユーザー名.github.io/ファイル名.js…ってな感じの URL で外部化したファイルにアクセスできるようになります…
おわりに…
現在は…「世間体」という魔物に押し込まれ…暫定的に…この記事を書くため…
…や…スコア重視で「CSS」や「JavaScript」を外部ファイル化していますが…
確かに…ページ遷移時の速さは特筆すべきではありますが…
ブラウザキャッシュが「空っぽ」な初回アクセス時の「もたつき感」は…
安定の「直書き」に比べ…やはり…かなり…気になりますねぇ～
まぁ…アカウント名は…当然ながら…早い者勝ちですから…
勢いが半端無い「 GitHub」ですので…「好みのアカウント名を取得する」…
…という目的だけでも…ソコソコ価値はあるかと思い…記事にしてみました…
以上です…最後までお読みいただきましてありがとうございます…
こちらの記事も併せてお読み下さい…
「GitHub」で外部ファイル化した場合のキャッシュ問題を「RawGit」の「CDN」で解決
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿