もちっとメモ

もちっとメモ

もぐりのエンジニアが日々の中で試してみたことを気が向いたときに書き連ねていきます

Markdownでホームページが書きたくて

最近、導入してみたタグの記事ばかり上げて節操ないですね。でも、導入してみたはいいが、使い勝手やニーズが合わなくてやめることはままあると思います。下調べが足りないと言われればそれまでですが…でも、それくらい気軽に新しい技術に触れられる世の中で私は幸せです。

前口上はこれくらいにして早速今回導入してみたのはHugoです。

詳細は詳しいサイトがいくらでもあるのでそちらを参照ください。ここでは、公開や管理すら無視した最低限のことだけ書いておきます。

  1. 公式からダウンロードする
    Windowsの方
    Hugo の使い方 - knooto

    MacLinuxの方qiita.com

  2. パスを通す
    先ほどダウンロードしてきたファイルを展開するとhugo.exeファイルがあるはずあので,それをコマンドプロンプトやターミナルから呼び出せるようにパスを通します.
  3. コマンドプロンプトを開く
  4. HTMLのソースを置きたいフォルダまで移動する
    cdで移動するだけです.
  5. コマンドプロンプトなどで
    hugo new site [フォルダ名]
    を実行する.
    フォルダ名はなんでもいいです.適当に"HOMEPAGE"とかでいいです.なければその名前のフォルダが作られます.ここでHugoのテーマを入れろとか言われますが,入れなくても動きます.テーマを入れる際はライセンスにお気を付けください.多くがMITライセンスだと思います.

    wisdommingle.com

  6. テンプレートとなる側となるHTMLを書く

    6~8は以下のサイト様をご参照ください.
    Hugoでwebサイト構築(1) レイアウトことはじめ | Watanabe-DENKI Inc. 渡辺電気株式会社

  7. 記事のレイアウトを作る
  8. コンテンツを書く
    マークダウン(md)で先ほどのテンプレートに埋め込む内容を書きます.
  9. コマンドプロンプトなどで
    hugo
    を実行する.
    これで6,7でつくったファイルをindex.htmlへとコンパイルします.コンパイルされたものはpublicフォルダに生成されます.mdで書いたものはその名前のフォルダの中に作られます.例えば"test.md"としたならば「public->test」にindex.htmlがあるはずです.
  10. コマンドプロンプトなどで
    hugo server
    を実行する.
    ローカルサーバーを立ち上げて表示します.適当にIEChromeなどのブラウザを起動して表示されたURLを打ち込こめば見えます.基本的には
    http://localhost:1313/
    になるのではないでしょうか.あくまでローカルサーバーなので,ウェブ上に公開されたわけではありません.ここで表示されるのはpublic直下にあるindex.htmlです.
    http://localhost:1313/test/
    とすればtest.mdから生成されたindex.htmlを表示できます.ちなみに直接htmlファイル名をしていしないでフォルダ名をしていしたときは,そのフォルダ内のindex.htmlという名前のフォルダがデフォルトでは表示されます.
    http://localhost:1313/test/hoge.html
    としておけば,index.html以外のhtmlファイルにもアクセスできます.

とりあえずこれで動きます。

あとはヘッダー、フッターをつけたり、でページを増やしたり、markdownの書き方を覚えたりすればよいのではないのでしょうか。次回辺りに体裁を整えるためにBootstrapを使う話をつけようと思います。

その他参考ページ

qiita.com

https://www-he.scphys.kyoto-u.ac.jp/member/shotakaha/dokuwiki/doku.php?id=toolbox:hugo:start