GitHub Pages+PelicanでつくるBlog:セットアップ方法@Windows11

GitHub PagesとPelicanのセットアップ方法:公開前の準備、ローカルでの確認まで

みずのり 2025-12-01(月) 2 mins

シリーズ全体のリンクはこちら

まず、セットアップ方法を雑メモとしてまとめておきます。Windows派のセットアップ方法です。
自分が再度最初からセットアップするなら、記載するように進めるとよいかなー、という手順です。
 「公開前の準備・動作確認までの手順」として紹介します。


前提とバージョン

前提

  • コマンドラインでgitは使える、ブランチなどの基本用語がわかる
  • pythonやpipも実行できる ※gitやpythonのセットアップの説明は除外します
  • GitHubのアカウントも獲得している

(参考)バージョン


Github Pagesの準備と簡易な動作チェック

まず、GitHub Pagesで公開までの手順を試してみましょう。

参考情報

一番楽に作れる構成としては、アカウント名.github.io(自分はユーザー名mizunoriなので、mizunori.github.io)という名前のリポジトリを作成することです。
参考情報を辿って公開するリポジトリのブランチとディレクトリを準備することで、リポジトリ名がURLとなる形式で公開されます。
 上記のmizunoriアカウントの場合、https://mizunori.github.io が公開アドレスになります。ブログ作成用のリポジトリはhttps://github.com/mizunori/mizunori.github.ioとなります。
 ※mizunori部分は各自のアカウント名となります

動作確認の例として、mainブランチのREADME.mdに以下のように記載してみます。

# mizunori.test

公開先をmainブランチのrootに設定すると、以下のように公開されます。

First Step


Windows環境へのmakeのセットアップ

参考情報

Windowsではmakeを使う場合にはインストールが必要となります。

Pathへの追加

インストール後に、makeのインストールされたディレクトリを環境変数に追加すると動く
Windowsの検索で「システム環境変数の編集」から辿る画面で、「Path」にmakeをインストールしたパスを追加します。
 ※何も考えないで動かしたいなら、「システム環境変数」への追加でよいです。

自分の場合はパスがC:\GnuWin32\bin\binとなっておりました。make.exeのあるディレクトリが対象となります。

動作確認

登録後、pwshなりコマンドプロンプトで、バージョン確認のコマンド実行に対して応答を確認できればOK。

> make --version
GNU Make 3.81

おまけ

上記インストールでうまくいかなかった、makeが使えないといった状況でも、Pelicanのコマンドだけでも同等のことは可能となります。(参考



Pelicanを含めた必要なモジュールのインストールと環境作成

以下の環境作成は、Github Pagesの準備と簡易な動作チェックで作成したリポジトリで構築するとわかりやすいです。
 まずはPelicanのインストールを行います。

参考

インストール

以下コマンドで3つのモジュールをインストールします。

> pip install pelican markdown ghp-import

各モジュールの概要

  • pelican:今回のメイン
  • markdown:マークダウンで記事を作成するため、インストール対象に入れます
  • ghp-importCopy your docs directly to the gh-pages branch. という説明あり
     特定のディレクトリを別のブランチ(別リポジトリも可)へpushするために使います ※後のデプロイ時に利用します

Blog環境作成(quickstart)

Blogをつくりたいディレクトリで、以下コマンドを実行します。

> pelican-quickstart

以下それぞれに回答していきます。
 記載の内容は今回のBlog作成で入力した内容です。ここで多少違った内容を入れても、あとで設定ファイルで変更可能ですので、気軽に入れておく感じでよいです。

> Where do you want to create your new web site? [.]
> What will be the title of this web site? 雑メモ
> Who will be the author of this web site? みずのり
> What will be the default language of this web site? [Japanese] 
> Do you want to specify a URL prefix? e.g., https://example.com   (Y/n) n
> Do you want to enable article pagination? (Y/n) 
> How many articles per page do you want? [10] 
> What is your time zone? [Asia/Tokyo] 
> Do you want to generate a tasks.py/Makefile to automate generation and publishing? (Y/n) 
> Do you want to upload your website using FTP? (y/N) 
> Do you want to upload your website using SSH? (y/N) 
> Do you want to upload your website using Dropbox? (y/N) 
> Do you want to upload your website using S3? (y/N) 
> Do you want to upload your website using Rackspace Cloud Files? (y/N) 
> Do you want to upload your website using GitHub Pages? (y/N) y
> Is this your personal page (username.github.io)? (y/N) y

Done. Your new project is available at ...



記事の作成とテストページ生成

テスト記事の作成

quickstartで作成されたcontentディレクトリに任意のマークダウンファイルを作成します。
 例えばtest.mdファイルを以下のようにつくります。

Title: テストページですよ
Date: 2025-11-22
Category: テスト
Tags: テスト, Pelican
Slug: Test-Page
Authors: みずのり
Summary: テストページが動くところまで見ましょう
TOC: show

## テストページ用の投稿

**テストページ**ですよ。

- 箇条書きも
- こんな感じ

## 表の例

|表|カラム|タイトル|
|---|---|---|
|テスト1|テスト2|テスト3|

## mdのコードブロック

    :::md
    ## mdのコードブロックです

    サンプル用の見た目はこんな感じ
    - :::pythonとすると、pythonコードのハイライトが適用されます

※記事の書き方で困ったら、Pelicanドキュメントで確認するのがよいでしょう

ローカルでのテストページ生成

mdファイルが準備できたら、テストページを作成してみます。
pelicanconf.py の存在するルートディレクトリで、以下のコマンドを実行することでoutputディレクトリにHTMLが作成されます。

> make html

続いて以下のコマンドでブラウザでの動作確認が可能となります。

> make serve

デフォルトでは、http://localhost:8000/ もしくはhttp://127.0.0.1:8000/にて確認できます。
 先ほどのtest.mdだけ作成した状況では、以下のように表示されます。

Test Page

記事を書きながら更新結果を見る方法

実際にBlog記事を書く際には細かくチェックしたい状況となります。以下コマンドで、プロジェクトの中身が変更するたびにブラウザ側を更新させることが可能です。

> make devserver

見た目などはテーマ設定などで対処することになります。
※テーマの調整もそれはそれで大変ですが…



(参考)makeを使わない生成コマンド

なんかmakeがうまく動かない?という場合でも、pelicanのコマンドで同等のことが可能です。
pelicanconf.py の存在するルートディレクトリで以下を実行すると、HTMLが作成されます。

> pelican content -s pelicanconf.py

続いて以下のコマンドでブラウザでの動作確認が可能です。

> pelican --autoreload --listen

この辺も、Pelicanのドキュメントを参考とするのがよいでしょう。




Read more:

Related posts: