Github＋Hugoでブログを作る|github pagesの導入方法

(1)はじめに
(2)環境
(3)Githubの設定
(4)brewのインストール
(5)Hugoセットアップ
<参考文献・サイト>

(1)はじめに

Githubにはgithub pagesっていう

サービスがあって静的なサイト

を無料で作って公開することができる。

htmlやcssを一から書いてホームページ

を作るのは大変なんで静的サイト

ジェネレーターを使って楽してブログを作ってしまおう（あんま楽じゃない）

今回はHugoっていうジェネレーターを使ってテンプレート例ローカルサーバーで確認するところまで。

イロイロつっかえたんで備忘録的な感じで書いていく。

(2)環境

mac book air

(3)Githubの設定

まずはGithubからほとんど使ったことがなかったんで結構つまずいた

(3-1)Githubに登録する

github.com

(3-2)レポジトリを作る

赤丸で囲った部分をクリックして新しいレポジトリを作成

f:id:shangtian:20180618210719p:plain

次に下の写真の赤丸で囲った部分にレポジトリ名を記入

f:id:shangtian:20180618210802p:plain

数学とか物理とかを話すブログを作りたいのでレポジトリ名を MathAndPhysicsにした。

お好きな名前でどうぞ

f:id:shangtian:20180618210437p:plain

(3-3)github個人情報の設定

githubにアップロードするとアップロードした人の名前が記録されるんで、ここは公開しても大丈夫なよう設定を変える（最初パソコンのユーザー名がそのまま記録されたので焦った）

以下のコマンドで設定するユーザー名とメールは自分のに変更して実行して下さい

(メールの方は設定しなかったです。)

$ git config --global user.name "ugeuge"
$ git config --global user.email johndoe@example.com

(3-4)gitリポジトリ

Documentsフォルダ内に MathAndPhysicsフォルダを作成してそのフォルダ内で作業する

$cd Documents
$mkdir MathAndPhysics
$cd MathAndPhysics
$echo "first commit" >> README.md
$git init
$git add README.md
$git commit -m "first commit"
$git remote add origin https://github.com/ugeugeHigh/MathAndPhysics.git
$git push -u origin master

下の写真のようになったら成功

f:id:shangtian:20180618222234p:plain

コマンドの解説を少しする

echoコマンド

$echo "first commit" >> README.md echoコマンドは $echo "aaa" でaaaを画面出力するが、>でファイル出力することができる。>>は追記モード。

つまりREADME.mdファイルに first commitを追記したということ。

git init

$git init で既存のディレクトリでのリポジトリの初期化を行っている。

git add

$git add README.md でREADME.mdを追跡対象にしている

git commit

git commitはローカルリポジトリに変更を反映する。まだサーバーにアップされてない。 -mオプションでコミットメッセージを入力できる。

$git commit -m "first commit"

git remote add origin [URL]

[URL]は長いので[URL]にoriginという名前をつけますってこと　 originじゃなくてaaaとかでも大丈夫

$git remote add aaa [URL]

git push

Githubのmasterブランチへアップロードする。もし

fatal: remote origin already exists.

て来ちゃったら

$git remote rm origin

でもういど

$git remote add origin [URL]
$git push origin master

(4)brewのインストール

macでHugoをインストールするには

brewっていうソフトが必要なんで

brew.sh

以下のコマンドでダウンロードする。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

(5)Hugoセットアップ

(5-1)hugoインストール

brewを使ってHugoをインストール

$brew install hugo

(5-2)新しいプロジェクトを立ち上げる

$hugo new site ファイル名

今回はファイル名をquickとしたので

$cd Documents
$hugo new site quick

(5-3)Hugoのテーマをダウンロード

以下のサイトに色々なレイアウトが載っているので、気に入ったやつをダウンロードする。

Complete List | Hugo Themes

NEDERBURGというテーマが気に入ったんでこれをダウンロードしていく

themes.gohugo.io

以下のコマンドを実行するとダウンロードしたテーマのサンプルサイトが立ち上がる。

f:id:shangtian:20180618223322p:plain 上の写真の赤線部分のアドレスを入れて実行する。他のテーマであればそのアドレスを入れる。

$git submodule add [URL]

$cd themes
$git init
$git submodule add https://github.com/appernetic/hugo-nederburg-theme.git
$cd ~/Documents/quick
$cp -r themes/hugo-nederburg-theme/exampleSite/ .
$hugo server -D

f:id:shangtian:20180618223009p:plain