「CMS.js」を使って簡単にSPAなブログを公開する【完全無料】
誰でも簡単にSPAのブログを始められるライブラリ「CMS.js」を使って、手間なくブログ運用が出来る環境を作ってみます。
※SPA … Single Page Application
用意するもの
- 自分のGitHubアカウント
- StackEdit (Markdownエディタ)
「CMS.js」って何？
Markdownで書いた記事を、JavaScriptだけで簡単に公開できるCMSツールです。
PHPなどのサーバーサイド・スクリプトが不要のため、ほとんどのWEBホスティング環境で使えるという特徴があります。
また、公開先をGitHub Pagesにすると、WEBサーバまで不要になり、まさに完全無料でブログを作る事ができます。
その反面、HTMLの読み込みをJavaScriptで行なっている為、サーバーサイド・レンダリングに比べ、SEQ対策に弱いのが弱点です。
ブログ公開環境の構築
さっそく、「CMS.js」を使って、ブログを作っていきましょう。
「CMS.js」は、自前で用意したWEBサーバ上でも、ブログを公開する事もできますが、今回はGitHub Pages上で公開できるよう、設定します。
テンプレートのコピー
「CMS.js」では、基本のテンプレートがGitHub上で公開されています。
まず、そこから自分のGigHugリポジトリにテンプレートをコピーします。
画面右上の[Fork]をクリックして、テンプレートをコピーします。
設定ファイルの編集
[Fork]すると、自分のGitHubリポジトリに、「cms.js-starter」のリポジトリ名でテンプレートがコピーされます。
コピーしたテンプレートの、設定ファイルを編集していきましょう。
- ブランチを「gh-pages」に切り替えます。
- 「js」フォルダ内の、「config.js」というファイルをクリックします。
- コードが表示されるので、右上の鉛筆アイコンをクリックします。
- 赤枠の設定箇所を、初期値から変更していきます。
- 変更した設定を保存します。
画面の下の方までスクロールすると、[Commit changes]というボタンがあるので、それをクリックして変更内容を保存します。
設定が反映されるまで、少し時間がかかる為、1分ほど待ってから「https://<自分のGitHubアカウント名>.github.io/cms.js-starter」にアクセスします。
正しく動作していれば、最初からプリセットされている記事の一覧が表示されます。
これで、ブログを公開する環境の構築は完了です。
記事を書く
ブログを公開する環境が整ったので、次は記事を書く環境を作っていきます。
エディタは人それぞれ好みがあると思いますが、今回は「StackEdit」という Markdownエディタを使って記事を書いていきます。
StackEdit - In-browser Markdown editor
「StackEdit」はブラウザだけで動くMarkdownエディタで、以下の6つの特徴があります。（もっとあるかも）
- 無料！！（1年$5払ってスポンサーになる事も可能）
- ブラウザだけで動くのでスグに使える
- プレビューを見ながら、Markdownが書ける
- 作成した記事をGoogle DriveやDrop Boxに同期できる
- 作成した記事を、ボタン一発でBlogger/WP/GitHubに簡単に公開できる
- Googleフォトから画像を取り込める
特に今回は、5番目の特徴でもある「GitHubに簡単に公開できる」を使って、記事を公開したいと思います。
最初にやる事
作成した記事を、GitHubに公開する為に、StackEditとGitHubアカウントを連携させます。
右のメニューより、[Add GitHub account]をクリックして、認証を行なって下さい。
公開する記事を書く
公開する記事を書きましょう。
今回は、サンプル記事の記事を用意しましたので、こちらを公開して行きたいと思います。
StackEdit にアクセスして、以下のMarkdownを入力して下さい。
---
layout: post
title: サンプル記事タイトル
excerpt: 記事の一覧に表示する、記事の抜粋をここに書きます
author: ブログの作成者名
tags: CMS.js, ブログ
---
## 見出し
はじめて「CMS.js」を使って公開した記事です。
### 小見出し
- リスト
- リスト
### 小見出し
**太字** *斜体*
> 引用
記事を公開する
記事の作成が完了したら、早速公開しましょう。
公開を行うには、まず右メニューの[Publish]をクリックします。
次に[Publish to GitHub]をクリックします。
以下の画面を参考に、GitHubのリポジトリURL等の設定を行います。
設定する内容は、以下の通りです。
設定が終わったら、右下の[OK]ボタンをクリックすると、記事が公開されます。
| 項目 | 設定内容 |
|---|---|
| Repository URL | https://github.com/<自分のGitHubアカウント>/cms.js-starter |
| File path | 記事は「posts」フォルダ内に格納します。被らない任意のファイル名でよいです。 例) posts/2018-12-22_sample.md |
| Branch | 「gh-pages」を入力します |
| Template | HTML等に変換せず、Markdownのまま公開したい為、「Plain text」を洗濯します |
これまでの手順で、記事の公開は完了です。
「https://<自分のGitHubアカウント名>.github.io/cms.js-starter」にアクセスすると、公開した記事が表示されていると思います。
＜記事の一覧＞
＜記事の詳細＞
画像を入れる
やはり、記事には画像を入れたい所です。
GitHubに画像ファイルを置いて、そこを参照してもいいのですが、容量等も問題が懸念されます。
※ 2018/12時点では、GitHubに容量制限はありませんが、もしかすると将来的には入るかもしれません
そこで今回は、StackEditの機能を使って、Googleフォトに置いた画像ファイルを、記事に取り込みたいと思います。
まず画面上のツールバーより、画像のアイコンをクリックします。
ポップアップで表示された画面の、[Add Google Photos account]をクリックして、Googleフォトの認証を行なって下さい。
認証が終わったら、次は[Open form Google Photos]をクリックします。
Googleフォトにアップロードしている画像が、リストに表示される為、そこから記事に取り込む画像を選択します。
選択を行うと、メインのエディタに画像が表示されると思います。
取り込んだ画像のURLを見てもらえば分かると思いますが、StackEditでGoogleフォトの画像を取り込むと、URLがGoogleフォトを直接参照する為、GitHubのリポジトリの容量を圧迫する事なく、画像を入れる事ができます。
ブログのカスタマイズ
自分でHTMLやCSSをいじって、カスタマイズしてもいいですが、「CMS.js」では、以下のページにいくつかのデザインテンプレートが用意されています。
テンプレートの数は、そこまで豊富ではありませんが、いいのが見つかったら、ソースコードをダウンロードして自分のブログに適用させる事もできます。
最後に
半分は「CMS.js」ではなく、「StackEdit」の紹介になってしまいました (–)。
しかし、「CMS.js」だけで運用しようと思うと、GitHubのサイトで何回も操作して記事を公開しなければならず、手間になりますが、「StackEdit」を組み合わせる事で、１クリックで簡単に記事を公開出来るようになる為、記事の執筆に集中できると思います。
関連記事
■ Stackedit から Blogger に投稿する画像を LightBox に対応する
StackeidtからBloggerに画像を投稿すると、LightBox が発動しない件についての対処方法です。
0 件のコメント:
コメントを投稿