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

アプギガトップ > Webサービス > クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利!
注目記事ピックアップ
クリック一発で「JavaScript」に変換可能なビジュアルプログラミング言語をまとめてみた!
share297
クリック一発で「JavaScript」に変換可能なビジュアルプログラミング言語をまとめてみた!
世界最速2Gbpsの光回線NUROで、PS4の重いゲームを爆速DLレビューしてみた!
share196
世界最速2Gbpsの光回線NUROで、PS4の重いゲームを爆速DLレビューしてみた!
あらゆるWebサービスを、ネット上の仮想部屋にまとめてしまう「myWebRoom」に驚愕!
share597
あらゆるWebサービスを、ネット上の仮想部屋にまとめてしまう「myWebRoom」に驚愕!
ブラウザだけでOK!たった一人で作れる「3DCGアニメーション」の作り方が話題に!
share1208
ブラウザだけでOK!たった一人で作れる「3DCGアニメーション」の作り方が話題に!
コピペ1発で、自分のブログやサイトにSNS機能を実装できる「Spot.IM」がヤバイ!
share1278
コピペ1発で、自分のブログやサイトにSNS機能を実装できる「Spot.IM」がヤバイ!
コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
share2274
コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
未来過ぎる「ワイヤレス給電」の世界!WiTricityで家電製品から電源コードが消える日。
share30
未来過ぎる「ワイヤレス給電」の世界!WiTricityで家電製品から電源コードが消える日。
無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に!
share2810
無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に!
1クリックで他人のYouTube収入を見れる「SocialBlade」で、トップは1億円超え!
share143
1クリックで他人のYouTube収入を見れる「SocialBlade」で、トップは1億円超え!
Twitterで話題騒然!やたら万能過ぎる謎のヒーロー「The Beetle Man」が日本中に出没!
share0
Twitterで話題騒然!やたら万能過ぎる謎のヒーロー「The Beetle Man」が日本中に出没!
イラストからオリジナルの「洋服ブランド」が立ち上げられる! 今夏に始まる『STARted』とは?
share23
イラストからオリジナルの「洋服ブランド」が立ち上げられる! 今夏に始まる『STARted』とは?
小型PC「ラズベリー・パイ」で自作した神作品10選の猛者たちが天才過ぎる!
share333
小型PC「ラズベリー・パイ」で自作した神作品10選の猛者たちが天才過ぎる!
大人気ストラテジー「ロード・オブ・ザ・ガーディアンズ」に大型アップデート!ギルドバトルに熱狂せよッ!
share158
大人気ストラテジー「ロード・オブ・ザ・ガーディアンズ」に大型アップデート!ギルドバトルに熱狂せよッ!
HD端末4台分の超解像度!ドコモから新発表の「ARROWS NX F-02G」最速レビュー!
share138
HD端末4台分の超解像度!ドコモから新発表の「ARROWS NX F-02G」最速レビュー!
顔写真から、年齢・人種・ルックスなどを自動認識する技術「ReKognition」が無料提供中!
share956
顔写真から、年齢・人種・ルックスなどを自動認識する技術「ReKognition」が無料提供中!
クリック一発で、複数ストアへ電子書籍を無料で出版可能な「WOODY」に驚愕!
share207
クリック一発で、複数ストアへ電子書籍を無料で出版可能な「WOODY」に驚愕!
クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利!
share0
クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利!
YouTube動画で世界を騒がした4人の「神業パフォーマー」が、ついに日本のCMに出演!
share166
YouTube動画で世界を騒がした4人の「神業パフォーマー」が、ついに日本のCMに出演!
動画の「人物・背景」に広告を埋め込む新技術「cinematique」がヤバ過ぎ。タッチで購入も可能!
share425
動画の「人物・背景」に広告を埋め込む新技術「cinematique」がヤバ過ぎ。タッチで購入も可能!
エンジニア入社式に突撃! 今どきの若者必須アプリ・WEBサービスとは!?
share172
エンジニア入社式に突撃! 今どきの若者必須アプリ・WEBサービスとは!?
Webサービス
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 まさとらん

まさとらん

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

twitter:0310lan

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

ページトップへ戻る