Hugoブログの始め方[超初心者向け]

· ☕ 3
🏷️
  • #aws
  • #hugo
  • #s3
  • hugoブログを始めたいっていう非エンジニアの友達のために、hugo開発環境作りのための、超初心者向けの導入記事を書きます。

    私の今の環境を書いていきますが、他にも色々な方法があります。

    この方法でないとダメって事ではありません。一例としてご覧ください。

    環境

    versionなど
    静的サイトジェネレーター hugo
    テーマ とりあえずhugo-uno
    ストレージ s3
    OS windows10
    WSL Ubuntu 18.04 LTS
    エディタ vsCode

    必要なもの

    • awsのアカウント

    • 開発環境

      • Ubuntu 18.04 LTS

      • ワークスペース

      • vscode

      • aws cli

      • hugo

    環境作っていきます

    awsアカウント

    この流れ通りに作っていきます。

    AWS アカウント作成の流れ

    Ubuntu 18.04 LTS

    microsoft storeにあります。

    スタートから「microsoft store」で検索

    ubuntu

    windowsストアで「Ubuntu 18.04 LTS」で検索

    ubuntu

    インストール

    ubuntu

    開いて、指示通りにアカウントの設定をします。

    ワークスペース

    ワークスペースを作っておく

    cドライブ、dドライブなどの直下に作業フォルダを作っておく。

    私の場合は、cドライブにgithubっていうフォルダを作っています。

    ubuntu

    WSLは仮想環境で、windows上で仮想のlinuxが動きます。

    なので、通常WSL上のファイルはwindowsからは触ることが出来ず、初心者にはちょっと面倒だったりします。

    cドライブやdドライブなどは、マウントと言ってWSL上のファイルとwindows上のファイルが同期されます。

    なので、ここで作業をすると、WSLからも通常のwindowsからも同じファイルにアクセスができ、初心者には便利でおすすめです//

    vscode

    ここからダウンロードしてインストール

    インストールしたvscodeを開いて「F1」を押す。

    ↓のようなのが出るので、Remote WSLをクリック

    ubuntu

    新しいウィンドウが開くので、そこで、ファイル⇒フォルダを開く

    で、さっきつくったワークスペースを開きます。

    ubuntu

    cドライブ=/mnt/c

    dドライブ=/mnt/d

    です。

    私の場合は、cドライブにgithubというフォルダを作ったので、

    /mnt/c/github

    を開きます。

    ↓の赤枠の部分が「WSL」になっていればOK!

    ubuntu

    新しいターミナルを開きます。

    ubuntu

    すると、下にこんな感じの子ウィンドウが開くので、以降の作業はここでやります。

    ubuntu

    aws cli

    Linux での AWS CLI バージョン 2 のインストール

    hugo

    以下を実行

    $ brew install hugo
    

    以下のコマンドでhugo-blogというサイトが作れます。

    $ hugo new site hugo-blog
    $ cd hugo-blog/themes
    $ git clone https://github.com/SenjinDarashiva/hugo-uno.git
    $ cd ../
    

    以下のコマンドで新しい記事が作れます。

    $ hugo new post/記事の名前.md
    

    以下のコマンドを実行して、http://localhost:1313/にアクセスするとプレビューが見れます。

    $ hugo server -t hugo-uno -w
    

    プレビューをやめるときはctrl+C

    思ったより長くなりそうなので、続きは明日…。


    るな
    るな
    エンジニア