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

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

使用ツール・サービス

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

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

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

  • 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 initwww.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日目の記事でした.
残りの記事もお楽しみに.