スキップしてメイン コンテンツに移動

「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 が発動しない件についての対処方法です。

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…