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

スポンサーリンク

(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

ブラウザに http://localhost:1313/ と打ち込めばサンプルサイトをみることができる。

<参考文献・サイト>

https://teratail.com/questions/79531 https://qiita.com/satzz/items/e24bd703fc04fb45f7ef https://www.sejuku.net/blog/8224#GitHub https://gohugo.io/getting-started/quick-start/ http://d.hatena.ne.jp/shouh/touch/20160108/1452261442 https://git-scm.com/book/ja/v1/Git-の基本-変更内容のリポジトリへの記録 https://teratail.com/questions/79531 http://www-creators.com/archives/2106 http://www.snoopopo.com/entry/2015/05/22/163512 http://pyoonn.hatenablog.com/entry/2014/10/29/191744

www.shangtian.tokyo