「CMS.js」を使って簡単にSPAなブログを公開する【完全無料】

2018年12月28日金曜日

CMS.js

t f B! P L

「CMS.js」を使って簡単にSPAなブログを公開する【完全無料】

CMS.js公式サイト画像

誰でも簡単に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リポジトリにテンプレートをコピーします。

cms.js-starter

画面右上の[Fork]をクリックして、テンプレートをコピーします。
公式

設定ファイルの編集

[Fork]すると、自分のGitHubリポジトリに、「cms.js-starter」のリポジトリ名でテンプレートがコピーされます。
コピーしたテンプレートの、設定ファイルを編集していきましょう。

  • ブランチを「gh-pages」に切り替えます。

ブランチを「gh-pages」に切り替え

  • 「js」フォルダ内の、「config.js」というファイルをクリックします。

jsフォルダ内の、config.jsというファイルをクリック

  • コードが表示されるので、右上の鉛筆アイコンをクリックします。

右上の鉛筆アイコンをクリック

  • 赤枠の設定箇所を、初期値から変更していきます。

設定内容を初期値から変更する箇所

  • 変更した設定を保存します。

画面の下の方までスクロールすると、[Commit changes]というボタンがあるので、それをクリックして変更内容を保存します。

Commit changesボタンをクリックして、変更内容を保存

設定が反映されるまで、少し時間がかかる為、1分ほど待ってから「https://<自分のGitHubアカウント名>.github.io/cms.js-starter」にアクセスします。
正しく動作していれば、最初からプリセットされている記事の一覧が表示されます。

GitHub Pagesにブログが表示される

これで、ブログを公開する環境の構築は完了です。

記事を書く

ブログを公開する環境が整ったので、次は記事を書く環境を作っていきます。
エディタは人それぞれ好みがあると思いますが、今回は「StackEdit」という Markdownエディタを使って記事を書いていきます。

StackEdit - In-browser Markdown editor

「StackEdit」はブラウザだけで動くMarkdownエディタで、以下の6つの特徴があります。(もっとあるかも)

  1. 無料!!(1年$5払ってスポンサーになる事も可能)
  2. ブラウザだけで動くのでスグに使える
  3. プレビューを見ながら、Markdownが書ける
  4. 作成した記事をGoogle DriveやDrop Boxに同期できる
  5. 作成した記事を、ボタン一発でBlogger/WP/GitHubに簡単に公開できる
  6. Googleフォトから画像を取り込める

特に今回は、5番目の特徴でもある「GitHubに簡単に公開できる」を使って、記事を公開したいと思います。

最初にやる事

作成した記事を、GitHubに公開する為に、StackEditとGitHubアカウントを連携させます。
右のメニューより、[Add GitHub account]をクリックして、認証を行なって下さい。

StackEditとGitHubアカウントの連携

公開する記事を書く

公開する記事を書きましょう。
今回は、サンプル記事の記事を用意しましたので、こちらを公開して行きたいと思います。
StackEdit にアクセスして、以下のMarkdownを入力して下さい。

---
layout: post
title: サンプル記事タイトル
excerpt: 記事の一覧に表示する、記事の抜粋をここに書きます
author: ブログの作成者名
tags: CMS.js, ブログ
---

## 見出し

はじめて「CMS.js」を使って公開した記事です。

### 小見出し

- リスト
- リスト

### 小見出し

**太字** *斜体*

> 引用

記事を公開する

記事の作成が完了したら、早速公開しましょう。
公開を行うには、まず右メニューの[Publish]をクリックします。

記事を公開するには、まずはPublishをクリック

次に[Publish to GitHub]をクリックします。

次はPublish to GitHubをクリック

以下の画面を参考に、GitHubのリポジトリURL等の設定を行います。

公開先のリポジトリ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フォトの認証を行なって下さい。

Add Google Photos accountをクリックして認証を行う

認証が終わったら、次は[Open form Google Photos]をクリックします。

認証が終わったら Open form Google Photosをクリック

Googleフォトにアップロードしている画像が、リストに表示される為、そこから記事に取り込む画像を選択します。

記事に取り込む画像をアップアップから選択

選択を行うと、メインのエディタに画像が表示されると思います。
取り込んだ画像のURLを見てもらえば分かると思いますが、StackEditでGoogleフォトの画像を取り込むと、URLがGoogleフォトを直接参照する為、GitHubのリポジトリの容量を圧迫する事なく、画像を入れる事ができます。

選択した画像が取り込まれる

ブログのカスタマイズ

自分でHTMLやCSSをいじって、カスタマイズしてもいいですが、「CMS.js」では、以下のページにいくつかのデザインテンプレートが用意されています。

テンプレートの数は、そこまで豊富ではありませんが、いいのが見つかったら、ソースコードをダウンロードして自分のブログに適用させる事もできます。

最後に

半分は「CMS.js」ではなく、「StackEdit」の紹介になってしまいました (–)。
しかし、「CMS.js」だけで運用しようと思うと、GitHubのサイトで何回も操作して記事を公開しなければならず、手間になりますが、「StackEdit」を組み合わせる事で、1クリックで簡単に記事を公開出来るようになる為、記事の執筆に集中できると思います。

関連記事

Stackedit から Blogger に投稿する画像を LightBox に対応する

StackeidtからBloggerに画像を投稿すると、LightBox が発動しない件についての対処方法です。

スポンサーリンク

QooQ