mainvisual

新しくサイトを立ち上げるには、ある目的が有ります。

現在、私は複数のエンジニアブログを運用しています。 Typescript関連、雑記、linux関連など様々に分割しています。 分割したのには、それぞれで読者のターゲットが異なると考えたからです。

しかし、もっとたくさん調べたり、サイトの調査をすると、 どうやら自分の思っていたような大きな差は無いことがわかりました。

また、このhackerslog.netというドメインは長すぎてわかりにくいような気もします。

先日、自分の同級生にこのドメインを教えたとろこ、長すぎてとろこ、 とても打ちづらそうに見えました。そこで、この機会に新ドメインv8os.netに移行し、 その際にHugoを使おうと思いました。

Hugoでブログの基礎を作り上げるまで!

まずは、サイトの基盤を作るために、Scaffoldを行いましょう。 次のコマンドを実行します。ログが役に立ちそうだったので、一緒に貼り付けました。

$ hugo new site v8os.net && cd $_
Congratulations! Your new Hugo site is created in /Users/k4zzk/Desktop/v8os.net.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

次に、フォルダなどが生成されましたが、フォルダ内部がならなのでgit管理が出来ません。 git管理用に.gitkeepファイルを作ります。

$ touch archetypes/.gitkeep \
  content/.gitkeep \
  data/.gitkeep \
  layouts/.gitkeep \
  static/.gitkeep \
  themes/.gitkeep

git管理をするので、初期設定しましょう。

$ git init && git add -A && git commit -m "first commit"

githubの設定も済ませましょう

$ echo "# v8os.net" >> README.md
$ git add README.md
$ git commit -m "add README.md"
$ git remote add origin git@github.com:k4zzk/v8os.net.git
$ git push -u origin master

次に、仮のテーマをインストールします。 今回は、rakuishi/hugo-zenをカスタマイズしたものを使用しています。

@rakuishiさん、ありがとうございます。

別リポジトリをインストールするには、git submodule addを使用します。 そして、テーマに関する設定をして、gitリポジトリに反映させましょう。

$ cd themes/ && \
  git submodule add https://github.com/k4zzk/hugo-zen-custom.git hugo-zen-custom && \
  cd ..

config.tomlを設定します。

baseurl = "https://v8os.net"
languageCode = "ja"
title = "v8os.net"
author = "k4zzk"
copyright = "v8os.net All rights reserved."

[params]
  logo      = "/images/logo.png"
  twitter   = "https://twitter.com/k4zzk"
  facebook  = "https://www.facebook.com/k4zzk"
  github    = "https://github.com/k4zzk/"
  email     = "v8os.net@gmail.com"
  analytics = "UA-12345678-9"

ユーザーアイコンが無いので、githubから適当なのを取ってきましょう

$ mkdir static/images && \
  wget https://help.github.com/assets/images/help/profile/identicon.png && \
  mv identicon.png static/images/logo.png
$ git add -A && git commit -m "add theme hugo-zen-custom" && git push

テストページを作って、Hugoを起動させてみます。

$ hugo server --theme=hugo-zen-custom --buildDrafts --watch

出来ました!

記事を追加してみよう!

hugo new post/article-title.md

内容はこんなかんじで

---
date: 2016-12-22T01:57:00+09:00
layout: post
title: "初めての投稿だよ!"
---

初めての投稿だよ!

CircleCIでサイトをビルドしよう!

CircleCIは、JenkinsやTravisCIなどのCIツールの1つです。 circle.ymlの設定はこんな感じになりました。

参考: https://hori-ryota.com/blog/create-blog-with-hugo-and-circleci/

machine:
  pre:
    - sudo apt-get install language-pack-ja && sudo apt-get autoremove
    - sudo locale-gen ja_JP.UTF-8
  timezone: Asia/Tokyo

dependencies:
  pre:
    - go get -v github.com/spf13/hugo
    - git config --global user.name "CircleCI"
    - git config --global user.email "circleci@example.com"

deployment:
  master:
    branch: master
    commands:
      - git clone git@github.com:k4zzk/v8os.net.git v8os.net
      - cd v8os.net && git pull
      - cd v8os.net && git submodule init
      - cd v8os.net && git submodule sync
      - cd v8os.net && git submodule update --init --recursive
      - cd v8os.net && hugo
      - cd v8os.net && git add -A
      - cd v8os.net && git commit -m "[ci skip] publish"
      - cd v8os.net && git push origin master

test:
  pre:
    - echo "---- test start ----"
  post:
    - echo "---- test end ----"

後は、publicフォルダをデプロイするだけです!

もっと知りたいなと思ったときは!

この記事でわからないことがあったら、teratialというサービスを利用するといいですよ! 初歩的な質問からマニアックな質問に幅広く答えてくれます! 是非、一度使ってはいかがでしょうか?

参考サイト

comments powered by Disqus