SyntaxHighlighterというのは、プログラミングコードの予約語に色付けして、コードを見やすくしてくれるもので、本ブログでも多用している。
だが、しばらく放置している間に、SyntaxHighlighter本家が用意しているホスティングサービスが使えなくなってしまった。
本稿では、FirebaseのWebホスティングを用いてSyntaxHighlighterを使う方法を解説する。アイディア自体はこの記事の通りなのだが、初心者向けとは言えない内容なので、自分の備忘録の意味を含め、改めて筆を起こす。
-
Googleアカウントの準備
Bloggerを使っている時点でアカウントはあると思うが、Firebaseには、Googleアカウントが必要だ。用意されたい。 -
Webサイト用プロジェクトの作成
Firebaseにアクセスし、無料で開始
ボタンを押してWebサイト用のプロジェクトを新規作成する。
-
Node.jsとnpmのインストール
npm
というのは、Node Packaged Modulesの頭文字を取ったもので、Node.jsのライブラリやパッケージを管理することができるツール
だそうだ。
FirebaseでWebサイトをホスティングするためのツールを動かすためには、これが必要らしいのでインストールする。
ちなみにNode.js
というのは、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境
だそうだ。本稿はNode.jsやnpm
の解説記事ではないので、これ以上書かない。(要はjavascriptの実行環境なんだろう、多分…。)
インストールはこちらにアクセスすれば、プラットホーム(MacとかWinとか)に合ったインストーラーを表示してくれるので、それをダウンロードして実行するだけである。(Macでインストラーパッケージを扱う手順は、流石に書かない) -
firebase-toolsのインストール
ターミナル.appを開き、次のように入力する。sudo npm install -g firebase-tools
Macの場合、sudo
をつけて実行する必要がある。 -
firebaseへのログイン
上記に続き、ターミナル.appの画面で、次のように入力する。sudo firebase login
Macの場合、sudo
をつけて実行する必要がある。
ターミナル.appの画面で次のように表示され、y
を入力すると、Webブラウザの認証画面(Googleアカウントとの紐付け)が開くので、許可する。? Allow Firebase to collect anonymous CLI usage information? (Y/n) yes Visit this URL on any device to log in: https://accounts.google.com/....(省略) Waiting for authentication...
許可すると、ターミナル.appの画面で次のように表示される。これでログインは完了である。Success! Logged in as youreGMailAccount@gmail.com
ブラウザの画面は下図のようになる。 -
Webサイト用プロジェクトの設定
FirebaseのWebホスティングでは、ターミナル.appのカレントディレクトリにpublicというフォルダを作成して、そこにローカルのファイルを保存する。
よってまず、ターミナル.appの画面でpublicというフォルダを作成すべき任意のディレクトリに移動する(筆者はSitesにHP関連のファイルを置いているので、Sitesにした)cd Sites
次に、そのディレクトリで、次のようにタイプする。sudo firebase init
Macの場合、sudo
をつけて実行する必要がある。
すると、ターミナル.appの画面に次のように表示されるので、Databaseをスペースキーで非選択にした上で、Hostingの方に矢印キーで移動してEnterを押す。 続けてターミナル.appの画面に次のように表示されるので、さきほど新規作成したプロジェクトに矢印キーで移動しEnterを押す。=== Project Setup First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? What Firebase project do you want to associate as default? (Use arrow keys) [don't setup a default project] > YourFirebaseProjectName (YourFirebaseProjectName-XXXXX) [create a new project]
続けてターミナル.appの画面に次のように表示されるので、そのままEnterを押す。? What do you want to use as your public directory? (public)
続けてターミナル.appの画面に次のように表示されるので、y
と入力しEnterを押す。? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
完了すると、ターミナル.appの画面に次のように表示される。=== Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? public ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? File public/index.html already exists. Overwrite? Yes ✓ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... ✓ Firebase initialization complete!
なお、Macではsudo
をつけて実行するため、出来上がるpublicディレクトリの所有者がrootになる。これでは、ファイルの出し入れに一々認証が必要になるので以下を実行する。sudo chown yourMacAccount:staff public
-
SyntaxHighlighterの準備
SyntaxHighlighterは、こちらからダウンロードする。ダウンロードしたZIPアーカイブは展開し、中身のscripts
、src
、styles
フォルダを前項で作成したpublicフォルダに入れる。 -
FirebaseWebサイトへのアップロード
敢えてアップロードという言葉を使ったが、Firebaseでは、デプロイと言うらしい。いずれにせよローカルのpublicフォルダの内容は、次のように入力することで、インターネット上に公開される。sudo firebase deploy
Macの場合、sudo
をつけて実行する必要がある。
-
FirebaseWebサイトのURL確認
まず、Firebaseホームページ右上のコンソールへ移動
リンクをクリックする。 移動したコンソール画面で、先程Webホスティングに設定したプロジェクトリンクをクリックする。 横に並んだメニューのHosting
をクリックすると、次の画面になり、ドメインと書かれているところにFirebaseWebサイトのURLが書いてある。 -
SyntaxHighlighter本家のホスティングURLの置き換え
あとは、Bloggerのテンプレートに書いてあるSyntaxHighlighter本家のホスティングURLを、前項で確認したURLに置き換えれば良い。
ちなみに置き換える対象は次の部分である。http://alexgorbatchev.com/pub/sh/current/
-
参考サイト
Google Driveのホスティングサービス終了によるSyntaxHighlighter周りの修正
FirebaseでWebをホスティングしてみた
FirebaseでWebサイトを無料でサクッと公開してみる
以上。
多分あなたは記事 "世界で最高の17のプロバイダーからの格安Webホスティング"に興味を持っています、うまくいけばそれはあなたのために便利です。
返信削除