この度，新しく自分のwebサイトを開設しました．
今後はここを自分のポータルサイト兼ブログサイトとして，のんびり運用していこうと思います．

さて今回は，このwebサイトの構築について簡単に紹介します。

使用ツール・サービス

このような目標のもとツール等々を選びました

markdownで記事を書ける
Gitで管理できる
コードに変更を加えると自動でデプロイされる

そこで選んだツールとサービスはこちら．

GitHub
- 記事の管理用
- プライベートリポジトリを立てて，そこで全てのコードと設定ファイルを管理
Hugo
- Go製のサイトジェネレータ
- markdownからWebページを生成できる
Netlify
- 静的サイトホスティングサービス
- 作ったサイトの公開用
- GitHubと連動して自動的にデプロイしてくれる
Google Domains
- 自分のドメイン取得とレコード管理
- 今回はもともと持っていたshanpu.infoを使用

構築手順

Webサイトをローカル環境で作る

まずは公式ガイドを参考にHugoをインストールします．
例えばbrewを使ってこんな感じに

$ brew install hugo

インストールできたら，適当なディレクトリでhugo new siteを使って雛形を生成します．

# -fで設定ファイルのフォーマットを指定（デフォルトはtoml）
$ hugo new site -f yaml www.shanpu.info

ついでにgit initでwww.shanpu.infoディレクトリ以下をgit管理します．

この時点でビルドすればサイトは出来上がるのですが，せっかくなのでテーマを入れて見栄えをよくします．
Hugoではここでテーマが色々と紹介されているので，ここから気に入ったものを選びます．

今回はPaperModというテーマを選びました．
先ほど作ったwww.shanpu.infoディレクトリの下でこのコマンドを実行してテーマを適用します．

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
git submodule update --init --recursive

次にHugoのconfigファイルを編集します．
参考として私のconfig.yamlはこんな感じになりました．

baseURL: 'https://www.shanpu.info/'
title: shanpu-portal
paginate: 5
theme: PaperMod
defaultContentLanguage: ja

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

googleAnalytics: G-MY_ID

minify:
  disableXML: true
  minifyOutput: true

params:
  title: shanpu portal
  description: "shanpu's portal site"
  keywords: [shanpu, portal, Blog, Portfolio]
  author: Tomoki Sugiura
  DateFormat: "January 2, 2006"
  defaultTheme: auto
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  socialIcons:
    - name: twitter
      url: "https://twitter.com/chez_shanpu"
    - name: github
      url: "https://github.com/chez-shanpu"
    - name: linkedin
      url: "https://www.linkedin.com/in/tomoki-sugiura/"

languages:
  ja:
    languageName: "Japanese"
    weight: 1
    contentDir: content/ja
    staticDir: static/
    profileMode:
      enabled: true
      title: shanpu portal
      subtitle: "Cloud Native Student"
      imageUrl: "images/shanpu-profile.JPG"
      imageWidth: 120
      imageHeight: 120
      imageTitle: shanpu-profile
      buttons:
        - name: 自己紹介
          url: about
        - name: ブログ
          url: blogs/
    menu:
      main:
        - name: 自己紹介
          url: about
          weight: 5
        - name: ブログ
          url: blogs/
          weight: 10

  en:
    languageName: "English"
    weight: 2 
    contentDir: content/en
    staticDir: static/
    profileMode:
      enabled: true
      title: shanpu portal
      subtitle: "Cloud Native Student"
      imageUrl: "images/shanpu-profile.JPG"
      imageWidth: 120
      imageHeight: 120
      imageTitle: shanpu-profile
      buttons:
        - name: About Me
          url: en/about
        - name: Blog
          url: en/blogs
    menu:
      main:
        - name: About Me
          url: en/about/
          weight: 5
        - name: Blog
          url: en/blogs/
          weight: 10

ここまでできたらGitHubにリポジトリを作って，そこにpushしておきます．

Webサイトを公開する

まずはNetlifyでアカウントを作成します．

その後Netlifyのコンソールをぽちぽちしながら，GitHubに作ったリポジトリと紐付けされた，Netlifyにおけるサイトを作成します．

次にここを参考にリポジトリにnetlify.tomlを追加します．
私の場合はこのようになりました．

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.89.4"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.89.4"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.89.4"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.89.4"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

[[redirects]]
from = "/npmjs/*"
to = "/npmjs/"
status = 200

これでサイト名.netlify.appで構築したサイトを見ることができます．

カスタムドメインを設定する（任意）

つぎに自分の持ってるドメインをNetlify上のサイトに紐付けます．
といっても，NetlifyのコンソールでDomains>Custom domainsをぽちぽちして，ドメインの管理ページ（私はGoogle Domainsを使用）でCNAMEレコードとしてサイト名.netlify.appを登録すれば完了です．

あとは自動的にLet’s EncryptでのTLS証明書の発行処理が行われ，HTTPS化もされます．

ページを作る

現時点だとトップページしかないので，試しにブログ記事を作ってみます．

最初にhugo new siteで生成したディレクトリの一つに，archetypesがあります．
ここにmarkdownファイルを設置することで記事の雛形を用意することができます．
例えばこのようなarchetypes/blog.mdを作成します．

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
tags: ["TODO"]
author: "shanpu"
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: false
hideSummary: false
ShowReadingTime: true
ShowPostNavLinks: true
---

次に以下のようなコマンドを実行することで，contentディレクトリ以下に雛形から生成されたmarkdownファイルが設置されます．

$ hugo new --kind blog blogs/BLOG_NAME.md

なお複数言語で記事を投稿する人で，content/<言語>/blogs/*.mdのような形式で管理している人はこのようになります．

# 日本語記事
$ hugo new --kind blog content/ja/blogs/BLOG_NAME.md

あとは記事を書いていきます．
書いた記事はhugo serverコマンドをターミナルで入力することで，手元のブラウザで確認することができます．

記事を書き終わった後は適当なブランチを切って，Netlifyのデプロイ対象のブランチに対するプルリクエストを生成します．
そうすることで自動的にNetlifyによって事前のチェックが入ります．

チェックが全部通ればマージしましょう．
数秒後には実際のWebサイトに変更が反映されます．

おわりに

これで自分のWebサイトが完成しました．ドメインの取得・維持費を除けば，無料で公開までできるのでありがたいですね．
あとはGoogle Anlyticsを設定すると，どれだけの人が自分の作ったWebページを見てくれているかわかって面白いかもしれません．

さて，この記事はあくあたん工房 Advent Calendar 2021 3日目の記事でした．
残りの記事もお楽しみに．

使用ツール・サービス#

構築手順#

Webサイトをローカル環境で作る#

Webサイトを公開する#

カスタムドメインを設定する（任意）#

ページを作る#

おわりに#