1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HugoとNetlifyで簡単なportfolio的なホームページ作成

Last updated at Posted at 2020-04-08

portfolioを作る

フロント未経験人間がHUGOとnetifyで作成したportfolioにすることを目指した,その際のログ。
git submoduleの使い方に詰まったので,この記事などを参考にした。
作ったページはここ

HUGOのインストール 

brew update
brew install HUGO

HUGOの準備

まず,自分のportfolioを設置するディレクトリを作成し,.gitを作成する。

hugo new site portfolio
cd portfolio
git init
git add .
git commit -m 'Initial commit'

HUGOテーマのintroductionをsubmoduleとして導入

今回のportfolioにはHUGOのintroductionテーマを用いた。
先ほど作成したportfolioディレクトリに上記のテーマのサブモジュールを追加する。
(注釈)
git submodule は、外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組みです。
通常のレポジトリがブランチ単位で管理するのに対して,サブモジュールはCommitID単位で管理するというのが大きな違い。

sh
git submodule add https://github.com/TsumaR/hugo-theme-introduction.git themes/introduction
git submodule init
git submodule update
git submodule update —remote themes/introduction
git merge --allow-unrelated-histories origin/master

で強行突破

configファイルの編集

cd ../../ #元のportfolioディレクトリに移動
cp ./themes/introduction/exampleSite/config.toml ./config.toml

言語設定を日本語に,contentDirの設定をcontentに変更する。

vim config.toml
git add config.toml
git commit -m "setting config file"

基本ファイルの作成 

とりあえず,骨格となる書類を追加していく。

hugo new home/index.md
hugo new blog/_index.md
hugo new work/_index.md

形式はsubmoduleしたthemes/introduction/exampleSiteの中にあるファイルを参考にしてvimで編集した。

ローカルでサイトの確認

hugo server

上記のコマンドにより,ポート1313のローカルサーバーが立ち上がる。ブラウザからhttp://localhost:1313/にアクセスして挙動を確認する。

netlifyでの公開

次に作成したホームページを公開する。

hugo

でpublicディレクトリの作成。さらに,netlifyの公式サイトよりコピーしたnetlify.tomlこれらのサイトを参考にして修正。

ここまででのエラー 

  1. 写真が表示されない 
  2. latest post,Read more,all postが表示されない。 

1. 写真が表示されないについて

SSL認証による可能性があるので,独自ドメインを取得して,HTTPS設定をした。
参考にしたのはこのサイト
Netlifyではwwwありドメインを強く推奨しているらしい。

結果的にHTTPSにしただけでは表示されなかった。結果的には,おそらく間違いが大量に存在したconfig.tomlを修正して表示された。

2. blogページなどが正しい挙動を示さない

blogの文章がほとんど全て表示されてしまい,'Read more'や'All Post'ボタンも表示されないについて
前半の全て表示されてしまうについては,Hugoが文字数カウントをスペースで行っていることにより,日本語で記事を書いた際に,大量の文章が表示されてしまうことが原因だった。そのため,config.toml

has CJKLanguage = ture

を書き加えることで解決した。

一方で,'Read more'のページが表示されていなかった。これらの問題はHugoのテーマにあるMultiple language対応のための設定を読み落としていることが原因だった。themesに日本語用の設定ファイルを追加してあげることで解決した。具体的には

themes/introduction/layouts/i18n/ja.toml

ファイルをen.tomlをコピーする形で追加することで解決した。

参考文献1
参考文献2

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?