RealCoding技術ブログ
🇰🇷 한국어 * 🇺🇸 English *

GitHub Pagesで技術ブログを始める

Kevin Park ブログ, GitHub 1분 읽기
github-pages jekyll ブログ 開始

こんにちは！今日はGitHub Pagesを利用して技術ブログを始める方法について学んでみましょう。

開発者なら一度は自分だけの技術ブログを運営してみたいと思ったことがあるでしょう。GitHub Pagesは無料で静的ウェブサイトをホスティングできる優れたサービスです。

なぜGitHub Pagesなのか？

GitHub Pagesを選んだ理由は以下の通りです：

1. 完全無料

  • username.github.ioドメインを無料で提供
  • ホスティング費用完全無料
  • SSL証明書自動提供

2. 開発者フレンドリー

  • Gitによるバージョン管理
  • Markdownでの投稿作成
  • コード構文ハイライト標準サポート

3. カスタマイズの自由度

  • Jekyllによるテーマカスタマイズ
  • HTML、CSS、JavaScript直接修正可能
  • プラグインによる機能拡張

設定プロセス

ステップ1：リポジトリ作成

GitHubで新しいリポジトリを作成する際、名前をusername.github.io形式で設定します。

# 例
realcoding.github.io

ステップ2：Jekyll設定

_config.ymlファイルを作成し、基本設定を追加します：

title: Real Coding Blog
description: 実務で学んだ開発ノウハウと技術的インサイト
url: "https://realcoding.github.io"
baseurl: ""

# Author information
author:
  name: Kevin Park
  email: kevin@realcoding.blog

# Build settings
markdown: kramdown
highlighter: rouge
permalink: /:year/:month/:day/:title/

# Plugins
plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag

ステップ3：最初の投稿作成

_postsディレクトリにYYYY-MM-DD-タイトル.md形式でファイルを作成します：

---
layout: post
title: "最初の投稿"
date: 2025-06-04 14:30:00 +0900
categories: [ブログ]
tags: [開始, github-pages]
---

こんにちは！最初の投稿です。

## 小見出し

ここに内容を記述します。

```javascript
console.log("Hello, Blog!");


## 便利なTips

### 1. ローカル開発環境構築

```bash
# Ruby インストール後
gem install bundler jekyll

# 新しいJekyllサイト作成
jekyll new my-blog
cd my-blog

# ローカルサーバー実行
bundle exec jekyll serve

2. カスタムドメイン設定

GitHub Pagesではカスタムドメインも簡単に設定できます：

  1. リポジトリにCNAMEファイル作成
  2. 希望するドメインを入力（例：blog.example.com）
  3. DNS設定でCNAMEレコード追加

3. SEO最適化

# _config.ymlに追加
plugins:
  - jekyll-seo-tag

# 各投稿にメタデータ追加
---
title: "投稿タイトル"
description: "投稿についての簡単な説明"
image: /assets/images/post-thumbnail.jpg
---

まとめ

GitHub Pagesでブログを始めることは思っているより簡単です。無料でありながら強力な機能を提供するため、開発者にとって最適な選択と言えるでしょう。

次回の投稿では、Jekyllテーマのカスタマイズと高度な機能について学んでいきます。

もし疑問点がございましたら、コメントでお聞かせください！😊

参考資料：