シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利!
注目記事ピックアップ
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/01/13 21:40

クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利!

jekyllnow_01 どうも、まさとらん(@0310lan)です!

みなさんは、ブログを作る際に以下の項目のいずれかに当てはまりますか?

・手っ取り早く、ブラウザだけで作りたい!
・勝手に変な広告が現れないで欲しい!
・ソースコードは、すべて自分でいじりたい!
・投稿は、マークダウン記法で素早く書きたい!
・独自ドメインを使いたい!
・バックアップを簡単にしたい!
・とりあえず全部無料で始めたい!
…など。

実は、上記条件をすべて満たしてくれる「ブログ」を、誰でも今すぐ作成することが出来るツールがあるのでご紹介しようと思います!

それが、「Jekyll Now」です!
jekyllnow_02

1分でブログを開設してみよう!
「Jekyll Now」は、Githubを利用してブログを作成するので、まずは無料のアカウントを取得しておきましょう。
jekyllnow_03

そして、以下のページにアクセスします。
https://github.com/barryclark/jekyll-now
jekyllnow_04

そのまま、画面右上の「Fork」ボタンをクリック!
jekyllnow_05

すると、先ほどと同じような画面が表示されますが、自分のアカウント名に変更されているのが分かります。
jekyllnow_06 実は、この「Fork」ボタンをクリックするだけで、ブログ環境はもう完成しています!


あとは、ブログのURLを設定するために、「Settings」をクリックします。
jekyllnow_07

「Jekyll-now」と入力されている部分を消して、【自分のアカウント名.github.io】というURLにします。
jekyllnow_08

例えば、「appgiga」というブログにする場合は、「appgiga.github.io」という風に入力して「Rename」ボタンをクリックします。
jekyllnow_09

そして、ブラウザで「appgiga.github.io」にアクセスすると、見事にブログが公開されているのが分かります!
jekyllnow_10

ちなみに、レスポンシブ対応されているので、スマホも快適に閲覧できます。
jekyllnow_11
※環境によっては、すぐ公開されずに「404 Not Found」が表示されることがあります。その場合は、15〜30分程度待ってから再度アクセスしてみてください。


最初の記事を投稿してみよう!
無事にブログが開設されたところで、とりあえず記事を1つ投稿してみましょう!


方法は簡単で、先ほどGithub上に生成されたファイルの中から「_posts」をクリックします。
jekyllnow_12

最初にブログで表示された「デフォルト記事」が1本確認できます。
jekyllnow_13 この「_posts」フォルダ内へ、記事をどんどん追加していくことになるわけです。


次に、「+」をクリックします。
jekyllnow_14

すると、テキストエディタ画面に変わるので、記事のファイル名を設定します。
jekyllnow_15 ファイル名は、「年-月-日-記事名(英数字).md」という形式で設定する必要があります。(このファイル名が、そのまま記事URLとなります…)


あとは、普通にマークダウン記法で好きなように記事を書いていけばOKです!
jekyllnow_16_2 ちなみに、冒頭部分で「layout」と「title」を設定する必要があるので、「デフォルト記事」からコピペすると良いでしょう。


記事を書いたら、画面下にある「Commit new file」ボタンをクリックします。
jekyllnow_17

ブログにアクセスすると、すでに記事が公開されているのが分かります!
jekyllnow_18_2 (※環境によって、すぐに更新されない場合もあります…)

このように、とても簡単な操作でどんどんブログ記事を作っていけるので非常に快適です。


ブログのカスタマイズも、Github上から可能!
基本的に、ブログのソースコードはすべて編集可能なので、プログラミング経験のある人であれば好きなようにカスタマイズできるでしょう。

ただ、初心者の方でも簡単に体裁を整えられる仕組みが用意されているので、一部ですが事例を紹介しておきます。

まず、「_config.yml」というファイルをクリックします。
jekyllnow_19

ここには、ブログの「基本設定」を簡単に行える記述が用意されています。
jekyllnow_20

例えば、
「ブログの名称変更」、「ブログの詳細」、「ロゴ画像」などを設定したり…
jekyllnow_21

「各種SNSとの連携」、「Disqusによるコメント機能追加」、「Googleアナリティクスの設定」などを行えます。
jekyllnow_22

このような設定をすると、かなりブログらしくなってきます。
jekyllnow_23_2 最初は、最低限の設定だけしておいて、あとから本格的にHTML/CSSなどをいじってカスタマイズしていくと良いでしょう。

当然ながら、変更履歴などは保存する度に記録されるので、あとから元に戻すことも簡単ですよ!


おまけ
最後に、独自ドメインを設定する方法も合わせてご紹介しておきます。

まず、「CNAME」というファイルをクリックします。
jekyllnow_24

取得しているドメインを入力して保存すれば完了!
jekyllnow_25 あとは、取得したドメイン会社の管理画面から「DNS設定」を編集して、しばらく待つと独自ドメインでアクセス出来るようになります。

※DNS設定の詳細はコチラから!

大抵の場合は、Aレコードに「192.30.252.153」と「192.30.252.154」を追加することになるでしょう。


まとめ
Githubは、以前から「静的Webページ」を公開できる「Github Pages」というサービスを運営しています。

このサービスへ、手軽にWebサイトを作って公開することが出来る人気のツールとして「Jekyll」がありました。(その他ツールはコチラ

ただし、Gitやプログラミングの知識が必要なので、初心者がいきなり挑戦するのはちょっと敷居が高い内容になっています。

そこで、初心者でも無理なく「Jekyll」を使って「Github Pages」へWebページを公開できるツールが、今回ご紹介した「Jekyll Now」というわけです。

すべて無料で使えるのに自由度は非常に高いので、ぜひみなさんも自分だけのブログを作って情報発信してみてください!

written by まさとらん


※更新:2015-1-14
ブログURLの表記を一部訂正しました。

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る