paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

Pushするだけ!GitHubのリポジトリを個人ブログに変えてくれる【GitPress】を使ってみた!

f:id:paiza:20190619111741p:plain
どうも、まさとらん(@0310lan)です!

今回は、GitHubのリポジトリを誰でも簡単に個人ブログへと変換できる無料のWebサービスをご紹介します。

マークダウンで書いた記事のファイルをリポジトリにpushするだけで、あとは完全自動でブログ記事に変換されて公開されるのでお手軽です。

また、本記事ではブラウザだけで完結する方法も記載しているので、ご興味ある方はぜひ参考にしてみてください!

GitPress

f:id:paiza:20190619111920p:plain
 

■「GitPress」の使い方

それでは、実際にGitPressの基本的な使い方から見ていきましょう!

ブログを簡単に作成するため、まずはGitPressが公式に用意しているテンプレート(ボイラープレート)が公開されているのでこれをフォークしておきましょう。

GitPress公式テンプレート|GitHub

f:id:paiza:20190619112000p:plain


画面右上にある【Fork】ボタンをクリックすると自分のGitHubリポジトリにフォークされます。

f:id:paiza:20190619112016p:plain

このフォークされたテンプレートはのちほどブログを作成するときに利用します。


次に、GitPressの公式サイトから【Login】をクリックします。

f:id:paiza:20190619112105p:plain


GitHubアカウントと連携するので緑色のボタンをクリックします。

f:id:paiza:20190619112118p:plain


一覧からブログにしたいリポジトリを選択します。そこで、さきほどフォークしたテンプレートのリポジトリを選びましょう!

f:id:paiza:20190619112129p:plain


テンプレートにはsourceフォルダ内に記事となるマークダウンファイルが収められているので、ディレクトリ名は /source のように記述しておきます。

f:id:paiza:20190619112141p:plain


GitPressはリポジトリとの同期にWebhookという技術を利用するので【許可】をしておきましょう。

f:id:paiza:20190619112155p:plain

これで準備は完了です!


すると、ブログのトップページが表示されるので、サンプルの記事をクリックしてみましょう。

f:id:paiza:20190619112210p:plain


以下のような感じで記事が公開されます。

f:id:paiza:20190619112225p:plain

あとは、このブログURLをシェアすれば誰でも閲覧することができます。

ちなみに、トップページは自分がアクセスしたときだけ各種オプションの設定をおこなうことが可能で、ユーザー情報やSNSアカウントの登録からリポジトリの設定やWebhookのURLなどを確認することができます。

■記事を書いてみよう!

GitPressが使えるようになったところで、さっそくですが記事を1つ書いてみましょう!

記事の作り方は簡単で、現状はリポジトリ内にある【source】フォルダの中にマークダウンファイルが配置されていますよね。

f:id:paiza:20190619112249p:plain

このsourceフォルダの中にマークダウンファイルをpushするだけで記事を投稿することができるようになっています。

つまり、普段使っている開発環境やコードエディタからマークダウンでどんどん記事を書いてpushしていけばいいだけなので非常にお手軽と言えるでしょう。


ただ、今回はブラウザ上ですべて完結したいのでGitHub上から直接ファイルを編集してみたいと思います。そこで、sourceフォルダ内から【Create new file】をクリックします。

f:id:paiza:20190619112306p:plain


適当なmdファイル名を入力したら、マークダウンで記事を書いていきます。冒頭に設定項目(Front Matter)を記述することができます。

たとえば以下のような項目を記述できます!

---
title: はじめての記事
date: 2019-06-19
tags: ["サンプル", "チュートリアル"]
excerpt: これは抜粋です。

---

f:id:paiza:20190619112436p:plain

記事のタイトルや日付をはじめ、複数のタグや抜粋の文章を設定できるわけです。ここで設定された項目は自動的にブログ記事へ反映されるようになっています。


記事が完成したら最後にコミットボタンをクリックしておきましょう!

f:id:paiza:20190619112516p:plain

これで記事の作成から公開まで完了しました。


ブログのトップページを見てみましょう!

f:id:paiza:20190619112532p:plain

さきほど投稿した記事が新しく追加されているのが分かりますね。


記事を確認すると、マークダウンファイルが変換されてブログ記事になっているのが分かります。

f:id:paiza:20190619112547p:plain

このようにGitPressを使うと、記事を書くことだけに集中できるうえ公開作業も非常に簡単なので誰でも迷うことなく扱えるようになるでしょう。

■高機能なコードブロックを使ってみよう!

GitPressには専用のコードブロックを挿入することが可能で、これを利用するとソースコードを表示するだけでなくコードエディタのように編集したり実行することが可能になります。

使い方としては、一般的なマークダウン形式と同じでバッククォートで囲んだ範囲がコードブロックに変換されます。

```javascript

//ここにプログラムを記述する

```

たとえば、単純なfor文を記述すると以下のようになります。

```javascript
for(let i=0; i<5; i++) {

console.log(i);

}
```

ブログ記事として公開するとコードエディタに変換されているのが分かります。

f:id:paiza:20190619112723p:plain

ソースコードの部分はこのまま直接編集することが可能です。


さらに、【run】ボタンをクリックするとコードを実行することもできます。

f:id:paiza:20190619112737p:plain

ブログ記事を読んでいる読者が、自由にコードを書き換えて実行できるのでプログラミングのチュートリアル記事などにも最適でしょう。

■複数のリポジトリをまとめるコレクションとは?

GitPressは1つのブログに複数のリポジトリをまとめることも可能で、たとえばジャンルや内容の異なるブログをカテゴライズして公開するようなこともできます。

これは【コレクション】という機能を利用するのですが、使い方としてはトップページの下部にある【Collection】の項目をクリックします。

f:id:paiza:20190619112757p:plain


新規にコレクションを作成します。

f:id:paiza:20190619112808p:plain


すると、リポジトリとひも付ける設定画面になります。

f:id:paiza:20190619112826p:plain

これは冒頭で設定した内容とほとんど同じですね。

ここで他のリポジトリを指定することが可能で、マークダウンファイルを配置しているフォルダを指定するのも一緒です。


設定が完了するとコレクションページに指定したリポジトリが表示されます!

f:id:paiza:20190619112842p:plain


もちろん、コレクション内から記事を閲覧することも可能です!

f:id:paiza:20190619112855p:plain

この機能をうまく活用することで、ブログを整理して効率よく記事を公開することができるようになるのでオススメです。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、GitHubのリポジトリから手軽に個人ブログを作成できるWebサービスをご紹介しました!

GitPressはまだ公開されたばかりなので、現在もさまざまな機能追加やバージョンアップがおこなわれています。記事のデータがGitHubにすべて残るという安心感と、誰でも手軽にブログを公開できる軽快さが大きな魅力と言えるでしょう。

これからブログを始めようという方はぜひ参考にしてみてください!


<参考リンク>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud