どうも、まさとらん(@0310lan)です!
今回は、GitHubのリポジトリを誰でも簡単に個人ブログへと変換できる無料のWebサービスをご紹介します。
マークダウンで書いた記事のファイルをリポジトリにpushするだけで、あとは完全自動でブログ記事に変換されて公開されるのでお手軽です。
また、本記事ではブラウザだけで完結する方法も記載しているので、ご興味ある方はぜひ参考にしてみてください!
【 GitPress】
■「GitPress」の使い方
それでは、実際にGitPressの基本的な使い方から見ていきましょう!
ブログを簡単に作成するため、まずはGitPressが公式に用意しているテンプレート(ボイラープレート)が公開されているのでこれをフォークしておきましょう。
画面右上にある【Fork】ボタンをクリックすると自分のGitHubリポジトリにフォークされます。
このフォークされたテンプレートはのちほどブログを作成するときに利用します。
次に、GitPressの公式サイトから【Login】をクリックします。
GitHubアカウントと連携するので緑色のボタンをクリックします。
一覧からブログにしたいリポジトリを選択します。そこで、さきほどフォークしたテンプレートのリポジトリを選びましょう!
テンプレートにはsourceフォルダ内に記事となるマークダウンファイルが収められているので、ディレクトリ名は /source のように記述しておきます。
GitPressはリポジトリとの同期にWebhookという技術を利用するので【許可】をしておきましょう。
これで準備は完了です!
すると、ブログのトップページが表示されるので、サンプルの記事をクリックしてみましょう。
以下のような感じで記事が公開されます。
あとは、このブログURLをシェアすれば誰でも閲覧することができます。
ちなみに、トップページは自分がアクセスしたときだけ各種オプションの設定をおこなうことが可能で、ユーザー情報やSNSアカウントの登録からリポジトリの設定やWebhookのURLなどを確認することができます。
■記事を書いてみよう!
GitPressが使えるようになったところで、さっそくですが記事を1つ書いてみましょう!
記事の作り方は簡単で、現状はリポジトリ内にある【source】フォルダの中にマークダウンファイルが配置されていますよね。
このsourceフォルダの中にマークダウンファイルをpushするだけで記事を投稿することができるようになっています。
つまり、普段使っている開発環境やコードエディタからマークダウンでどんどん記事を書いてpushしていけばいいだけなので非常にお手軽と言えるでしょう。
ただ、今回はブラウザ上ですべて完結したいのでGitHub上から直接ファイルを編集してみたいと思います。そこで、sourceフォルダ内から【Create new file】をクリックします。
適当なmdファイル名を入力したら、マークダウンで記事を書いていきます。冒頭に設定項目(Front Matter)を記述することができます。
たとえば以下のような項目を記述できます!
---
title: はじめての記事
date: 2019-06-19
tags: ["サンプル", "チュートリアル"]
excerpt: これは抜粋です。
---
記事のタイトルや日付をはじめ、複数のタグや抜粋の文章を設定できるわけです。ここで設定された項目は自動的にブログ記事へ反映されるようになっています。
記事が完成したら最後にコミットボタンをクリックしておきましょう!
これで記事の作成から公開まで完了しました。
ブログのトップページを見てみましょう!
さきほど投稿した記事が新しく追加されているのが分かりますね。
記事を確認すると、マークダウンファイルが変換されてブログ記事になっているのが分かります。
このようにGitPressを使うと、記事を書くことだけに集中できるうえ公開作業も非常に簡単なので誰でも迷うことなく扱えるようになるでしょう。
■高機能なコードブロックを使ってみよう!
GitPressには専用のコードブロックを挿入することが可能で、これを利用するとソースコードを表示するだけでなくコードエディタのように編集したり実行することが可能になります。
使い方としては、一般的なマークダウン形式と同じでバッククォートで囲んだ範囲がコードブロックに変換されます。
```javascript
//ここにプログラムを記述する
```
たとえば、単純なfor文を記述すると以下のようになります。
```javascript
for(let i=0; i<5; i++) {
console.log(i);
}
```
ブログ記事として公開するとコードエディタに変換されているのが分かります。
ソースコードの部分はこのまま直接編集することが可能です。
さらに、【run】ボタンをクリックするとコードを実行することもできます。
ブログ記事を読んでいる読者が、自由にコードを書き換えて実行できるのでプログラミングのチュートリアル記事などにも最適でしょう。
■複数のリポジトリをまとめるコレクションとは?
GitPressは1つのブログに複数のリポジトリをまとめることも可能で、たとえばジャンルや内容の異なるブログをカテゴライズして公開するようなこともできます。
これは【コレクション】という機能を利用するのですが、使い方としてはトップページの下部にある【Collection】の項目をクリックします。
新規にコレクションを作成します。
すると、リポジトリとひも付ける設定画面になります。
これは冒頭で設定した内容とほとんど同じですね。
ここで他のリポジトリを指定することが可能で、マークダウンファイルを配置しているフォルダを指定するのも一緒です。
設定が完了するとコレクションページに指定したリポジトリが表示されます!
もちろん、コレクション内から記事を閲覧することも可能です!
この機能をうまく活用することで、ブログを整理して効率よく記事を公開することができるようになるのでオススメです。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、GitHubのリポジトリから手軽に個人ブログを作成できるWebサービスをご紹介しました!
GitPressはまだ公開されたばかりなので、現在もさまざまな機能追加やバージョンアップがおこなわれています。記事のデータがGitHubにすべて残るという安心感と、誰でも手軽にブログを公開できる軽快さが大きな魅力と言えるでしょう。
これからブログを始めようという方はぜひ参考にしてみてください!
<参考リンク>
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら