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

2017-09-25 technology

フォローする
  • このエントリーをはてなブックマークに追加

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


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

https://gohugo.io/

静的サイトジェネレーターというとRubyJekyllMiddlemanが有名なのですが、 管理しやすくてコンパイルが鬼速いという事と、欲しかったページ構成のテンプレがあるという理由で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には様々なテーマ(デザインテンプレート)があります。

https://themes.gohugo.io/

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


https://themes.gohugo.io/hugo-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に格納されます。

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


https://pages.github.com

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設定し一元管理しています。






フォローする
  • このエントリーをはてなブックマークに追加


comments powered by Disqus
2017-09-25 technology
hugo+githubpagesで無料のブログ作成

静的サイトをHugoで作成して、GitHubPagesで公開! 無料でブログ管理

Read more

2017-05-07 technology
anyenvでruby/phpを一元管理!

rbenvやphpenvをまとめて管理できる決定版!「anyenv」を使おう

Read more

2017-05-06 technology
railsで簡単にグラフを作成できるgemをご紹介

railsで3つのグラフライブラリから好きなものを選べる「gem chartkick」

Read more