My Note

自己理解のためのブログ

Hugoとbootstrapを使ったブログの作り方

はてなブログに移行する前はGitHub Pagesでブログを運用していました。そのときの簡単な備忘録です。 Hugoはオープンソースの静的サイトジェネレーターです。これを使えば、独自ドメインSSL証明書を自前で用意せずにブログを公開することができます。

公式Hugo についてはこちら!

※ 実行環境はMacOS

  • hugoをMacにインストールする

    • $ brew install hugo
  • ディレクトリ構成について

    • ~/MyBlog/yhidetoshi.github.io : ブログ公開のモジュール
    • ~/MyBlog/yhidetoshi_data : ブログ作成のモジュール
  • Hugo実行パス

    • yhidetoshi_data/
  • Hugoのテーマ一覧を確認する

  • Hugoのテーマをインストールする

    • $ cd ~/MyBlog/yhidetoshi_data/themes
    • $ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
  • Hugoの初期データをセットする

    • $ cp themes/minimal-academic/archetypes/* archetypes
    • $ cp themes/minimal-academic/exampleSite/config.toml .
  • localhostで実行

  • 新規ブログ記事を作成

    • hugo new post/[name-of-file].md
    • content/post/ にファイルが生成される
  • public/に公開するモジュールを出力

    • $ hugo -t hugo-tranquilpeak-theme
  • 公開するリポジトリにpublic/のデータを配置する

    • $ cp -pr public/* ../yhidetoshi.github.io
  • 公開ブログを確認

  • 画像を貼り付ける方法

    • [hogo-top-dir]/content/img/example.png
    • ![test](/img/example.png)