hugo+githubpagesで無料のブログ作成

静的サイトをHugoで作成して、GitHubPagesで公開!

無料でブログ管理できる技を紹介します。

hugo+githubpagesで無料のブログ作成

Hugo + GitHub Pages + (独自ドメイン+SSL)

hugo

HUGOは、GO言語で作られた静的サイトジェネレーターです。

The world’s fastest framework for building websites
The world’s fastest framework for building websites

静的サイトジェネレーターというとRuby``Jekyll``Middlemanが有名なのですが、
管理しやすくてコンパイルが鬼速いという事と、欲しかったページ構成のテンプレがあるという理由でHUGOをチョイスしました。

静的サイトジェネレーターを使えば、皆が大好きな黒い画面だけでWordpress的なサイトを構築できちゃいます。

Markdownも対応しています。

HUGOは、まるでプログラムを組むように使用する事ができます。

例えば、プロジェクト作成、ページの作成や、ローカルサーバー管理などは、rails generate的なコマンドを使って1発でOK。

これにGitHub Pagesを組み合わせる事で、ほぼ設定なしでgit push1発でデプロイできてしまうのです!

インストール〜プロジェクト作成

  • hugoのインストールは以下のコマンド1発。

    $ brew install hugo
  • version確認

    $ hugo version
    Hugo Static Site Generator v0.27.1 darwin/amd64 BuildDate: 2017-09-24T16:24:33+09:00
  • hugoのアップグレードも以下のコマンド1発。

    $ brew upgrade hugo
    $ hugo version
    Hugo Static Site Generator v0.44/extended darwin/amd64
  • プロジェクトの作成も以下のコマンド1発です。

    $ hugo new site your_project

テーマに関して

Hugoには様々なテーマ(デザインテンプレート)があります。

Complete List

上記のサイトを見てるとJekyll`と同じテーマも結構混じっていますが、今回は`HUGOにしかないUniversalをチョイスしました。


Hugo Universal Theme
A port of the Universal theme


インストール方法や、設定なんかもreadmeに全て記載されています。


テーマのインストール

  • ルートディレクトリ内にthemesディレクトリがあればOK。なければ作成。

    $ mkdir themes
  • themesディレクトリに移動して、任意のテーマをgit cloneすればOKです。

    $ cd themes
    $ git clone https://github.com/devcows/hugo-universal-theme.git
  • 記事の作成も1発。

    $ hugo new post/hogehoge.md
  • このサイトではcontent/blogディレクトリ格納しているので、こんな感じ。

    $ hugo new blog/20170925.md
  • このサイトではcontent/blogディレクトリ格納しているので、こんな感じ。

    +++
    date = "2017-09-25T01:16:53+09:00"
    tags = []
    +++
    // ここにページ内容のmarkdownを書く

実行/レビューとコンパイル

railsと同じように以下のコマンドでプロジェクトを実行し、確認する事ができます。

  • プロジェクトの実行

    $ hugo server

    ローカル環境でのサイトの確認は以下のURLになります。

    http://localhost:1313/
  • コンパイルも1発

    $ hugo

    これ一発で、テンプレートから自前で作成したMarkdownファイルを読み込んでコンパイルしてくれます。
    できたファイルはpublicに格納されます。

あとは、これらをサーバーにデプロイするだけです。

GitHub Pages

GitHub Pages
Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHubの静的サイトのホスティングサービスです。

GitHub のアカウントがあればすぐに静的サイトが公開できますので、非常にお手軽です。

  • デプロイ方法
    • gh-pagesというブランチを作成しアップするとrepository_name.github.ioで公開されます。

  • HUGOの管理体制
    • 全体をgithubにアップしmasterブランチで管理
    • publicフォルダだけをgh-pagesブランチで管理

  • 独自ドメイン
    • 独自ドメイン業者側のDNS設定を変更する事で、独自ドメインを割り当てる事ができます。
    • https://help.github.com/articles/setting-up-an-apex-domain/

      ※ このサイトの場合は、ドメイン業者のDNSサービスを使わずに、AWSにDNS設定し一元管理しています。

コメント

タイトルとURLをコピーしました