DUICUO

現在の場所： ホーム > 記事 > PelicanとGitHub Pagesを使ってブログを構築する

PelicanとGitHub Pagesを使ってブログを構築する

今日はこのブログの立ち上げ方法についてお話します。始める前に、GitHubの使い方に慣れていて、開発用のPython仮想環境を構築できる方をお待ちしています。もしそれができない場合は、上記の内容に加え、さらに詳しい内容を網羅したDjango Girlsのチュートリアルをぜひご覧ください。

これは、GitHubでホストされている個人ブログを公開するためのチュートリアルです。このチュートリアルでは、通常のGitHubユーザーアカウント（プロジェクトアカウントではありません）が必要です。

まず最初に、コードを格納するGitHubリポジトリを作成する必要があります。ブログをサブフォルダ（例：rsip22.github.io/blog）ではなくユーザー名（例：rsip22.github.io）のみにリンクさせたい場合は、フルネームでリポジトリを作成する必要があります。

GitHub のスクリーンショットでは、新しいリポジトリを作成するためのメニューが開いており、「rsip22.github.io」という名前の新しいリポジトリが作成されています。

リポジトリを初期化する際には、 README 、Pythonの場合は.gitignore 、そしてフリーソフトウェアライセンスを使用することをお勧めします。フリーソフトウェアライセンスを使用すると、コードの所有権は維持されますが、他の人がコードから恩恵を受けられるようになります。コードを学習・再利用できるようになるだけでなく、さらに重要な点として、コードを楽しんでもらうことができるようになります。

リポジトリが作成されたので、コードを保存するローカル マシン上のフォルダーにリポジトリのクローンを作成します。

  1.  $ git clone https : //github.com/YOUR_USERNAME/YOUR_USERNAME.github.io.git

新しいディレクトリに切り替えます。

  1.  $ cd YOUR_USERNAME . github . io

GitHub Pagesはmasterブランチのファイルを優先的に提供するため、Pelicanの静的ファイルがmasterブランチに出力されないように、ソースコードを新しいブランチに配置する必要があります。そのためには、sourceという名前のブランチを作成する必要があります。

  1.  $ git checkout - b source

システムにインストールされている Python 3 を使用して仮想環境 (virtualenv) を作成します。

GNU/Linux システムでは、コマンドは次のようになります。

  1.  $ python3 - m venv venv

または次のようになります:

  1.  $ virtualenv -- python = python3 . 5 venv

そしてそれをアクティブ化します:

  1.  $ source venv / bin / activate

仮想環境では、pelicanとその依存関係をインストールする必要があります。また、ghp-import（GitHubへの公開に必要）とMarkdown（Markdown構文で記事を書くため）もインストールする必要があります。以下のコマンドを実行してください。

  1.  ( venv ) $ pip install pelican markdown ghp - import

完了したら、 pelican-quickstartを使用してブログの作成を開始できます。

  1.  ( venv ) $ pelican - quickstart

一連の疑問が浮かび上がってきます。それらの疑問に答える前に、以下の私の回答をご覧ください。

  1.  > Where do you want to create your new web site ? [.] ./
  2.  > What will be the title of this web site ? Renata 's blog
  3.  > Who will be the author of this web site? Renata
  4.  > What will be the default language of this web site? [pt] en
  5.  > Do you want to specify a URL prefix? eg, http://example.com (Y/n) n
  6.  > Do you want to enable article pagination? (Y/n) y
  7.  > How many articles per page do you want? [10] 10
  8.  > What is your time zone? [Europe/Paris] America/Sao_Paulo
  9.  > Do you want to generate a Fabfile/Makefile to automate generation and publishing? (Y/n) Y **# PAY ATTENTION TO THIS!**
  10.  > Do you want an auto-reload & simpleHTTP script to assist with theme and site development? (Y/n) n
  11.  > Do you want to upload your website using FTP? (y/N) n
  12.  > Do you want to upload your website using SSH? (y/N) n
  13.  > Do you want to upload your website using Dropbox? (y/N) n
  14.  > Do you want to upload your website using S3? (y/N) n
  15.  > Do you want to upload your website using Rackspace Cloud Files? (y/N) n
  16.  > Do you want to upload your website using GitHub Pages? (y/N) y
  17.  > Is this your personal page (username.github.io)? (y/N) y
  18.  Done. Your new project is available at /home/username/YOUR_USERNAME.github.io

タイムゾーンに関しては、TZ タイムゾーンとして指定する必要があります (完全なリストはこちら: tz データベースのタイムゾーン リスト)。

さあ、最初のブログ投稿を作成し始めましょう！お気に入りのコードエディタでプロジェクトディレクトリを開き、 contentフォルダを見つけてください。次に、新しいファイルを作成します。ファイル名はmy-first-post.md 」で構いません（これはテスト用なので、後で変更できます）。投稿コンテンツの前に、タイトル、日付、目次などを識別するメタデータを以下のように記述します。

  1.  . lang = "markdown" # DON 'T COPY this line, it exists just for highlighting purposes
  3.  Title: My first post
  4.  Date: 2017-11-26 10:01
  5.  Modified: 2017-11-27 12:30
  6.  Category: misc
  7.  Tags: first, misc
  8.  Slug: My-first-post
  9.  Authors: Your name
  10.  Summary: What does your post talk about? Write here.
  12.  This is the *first post* from my Pelican blog. **YAY!**

それがどのように見えるか見てみましょう。

ターミナルを開き、静的ファイルを生成してサーバーを起動します。これを行うには、次のコマンドを使用します。

  1.  ( venv ) $ make html && make serve

このコマンドを実行すると、お気に入りの Web ブラウザのアドレス バーにlocalhost:8000と入力してアクセスできるようになります。

ブログのホームページのスクリーンショット。「Renataのブログ」というタイトルのヘッダー、左側に最初のブログ投稿、右側に投稿情報、下部にリンクとソーシャル機能があります。

とてもシンプルですよね？

さて、記事に画像を追加するにはどうすればいいでしょうか？まず、コンテンツディレクトリ内に記事を配置するディレクトリを作成します。ここでは、便宜上、このディレクトリの名前を「 imageとします。次に、Pelicanでこのディレクトリを使用できるようにする必要があります。システムを設定する「 pelicanconf.py 」ファイルを見つけ、画像ディレクトリを含む変数を追加します。

  1.  . lang = "python" # DON 'T COPY this line, it exists just for highlighting purposes
  3.  STATIC_PATHS = [' images ']

保存します。記事を開き、次のように画像を追加します。

  1.  . lang = "markdown" # DON 'T COPY this line, it exists just for highlighting purposes
  3.  ![Write here a good description for people who can' t see the image ]({ filename }/ images / IMAGE_NAME . jpg )

ターミナルでCTRL+Cを押すと、いつでもサーバーを中断できます。ただし、サーバーを再起動してイメージが正しいかどうかを確認する必要があります。その方法を覚えていますか？

  1.  ( venv ) $ make html && make serve

コードを完成させる前の最初のステップ：ATOMまたはRSSストリーミングを使って誰でも記事を読めるようにする必要があります。システムを設定するpelicanconf.pyファイルを探し、RSSストリーム生成に関するセクションを編集してください。

  1.  . lang = "python" # DON 'T COPY this line, it exists just for highlighting purposes
  3.  FEED_ALL_ATOM = ' feeds / all . atom . xml '
  4.  FEED_ALL_RSS = ' feeds / all . rss . xml '
  5.  AUTHOR_FEED_RSS = ' feeds /% s . rss . xml '
  6.  RSS_FEED_SUMMARY_ONLY = False

GitHubにコードをアップロードできるように、すべて保存してください。すべてのファイルを追加し、メッセージ（「最初のコミット」）を使用してコミットし、 git push実行することでコミットできます。GitHubのユーザー名とパスワードの入力を求められます。

  1.  $ git add - A && git commit - a - m 'first commit' && git push -- all

さて…冒頭で、Pelican が静的ファイルをマスターブランチに出力しないようにする方法について説明しましたね。さて、次は実際に出力してみましょう。

  1.  $ make github

GitHubのユーザー名とパスワードを再度求められます。OK！新しいブログがhttps://YOUR_USERNAME.github.ioに作成されます。

プロセスのどの段階でもエラーが発生した場合は、このマニュアルをもう一度読み直して、エラーが発生した箇所を見つけてください。これがデバッグの第一歩です。Pythonでは、タイプミスやインデントの誤りといった単純なことでも問題が発生することがあります。オンラインやコミュニティで声を上げ、助けを求めてください。

Markdown を使用して記事を書く方法については、Daring Fireball Markdown ガイドをお読みください。

他のテーマについては、Pelican テーマを参照することをお勧めします。

この記事は、Bottstrap 3 テーマを使用して GitHub でホストされる Pelican ブログを構築する方法に関する Adrien Leger の記事を基に作成されています。

ラベル

関連するおすすめ記事

ランダムにおすすめされた記事

人気のタグ