hexo化してみました

2017-12-14 · 1134 文字 · 3 分くらいで読めます

blog

blog · hexo

tamuraです。

blogをhexoでやってみることにしました。

構成

GitHub Pagesを使って、それを独自ドメインでやっていきます。

アドレス
- https://blog.il-sus-web.net/
リアル
- http://tamurashingo.github.io/blog/
リポジトリ
- https://github.com/tamurashingo/blog

あれな感じですがちゃんといけます。

hexoのインストールから初期設定まで

さくっとインストールしてさくっとblogを作ります。

$ npm install -g hexo
$ hexo init blog
$ cd blog
$ yarn

起動

さくっとローカルで起動します。

hexo server

ブラウザで http://localhost:4000/ にアクセスすると見れます。

初期設定

さくっと初期設定を行う。

vi _config.yml

サイト設定

サブタイトルと詳細って書くことがないな〜と思いながら書いていきます。

# Site
title: Web技術と親しむ
subtitle: 色々な技術をつまみ食いしていきます
description:
author: tamura shingo
language: ja
timezone: Asia/Tokyo

URL設定

今回、blogというサブドメインを使います。

permalinkは:year/:month/:dayとやると細々とフォルダが別れているような感じがしていやなので、一気に:year-:month-:dayのようにまとめてしまいます。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.il-sus-web.net/
root: /
permalink: :year-:month-:day/:title/
permalink_defaults:

ファイル名設定

blogなのでファイル名に日付があったほうが見つけやすいかなと思っています。

post_asset_folder は true にしておきます。

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

デプロイ設定

デプロイはgithubに。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/tamurashingo/blog.git
  branch: master

github側の設定

Settings → GitHub Pages の Source が None になっているので、 master branch を指定します。

Custom domainが入力できるようになっているので、ドメインを入力します。

デプロイ

デプロイすると手元のmdからhtmlが生成されて、その状態でgithubにpushされます。

$ hexo deploy -g

この状態で http://tamurashingo.github.io/blog/ にアクセスすると、文字だけは見えます。ルート構成が違うのでCSSとかが読み込めずに90年代のページみたいな感じになります。

DNS設定

お名前.com でDNSの設定をします。 CNAMEでやります。

こんな感じ。

で、GitHub側にCNAMEっていうファイルを置けば、 blog.il-sus-web.net でアクセスできるようになります。（SettingでCNAMEを入力する欄があるので、そこにCNAMEを入力するとgithubが勝手に作成してくれます）

2回目以降のデプロイ

2回目にデプロイしたらgithubが作ったCNAMEファイルが消されてしまって blog.il-sus-web.net にアクセスすると 404 が出てしまい、 tamurashingo.github.io/blog にアクセスするとCSSがおかしい状態で表示されるという事象が出てしまいました。

なので、CNAMEファイルをもともとのソースの方に置いておきます。 source ディレクトリ直下に配置しておけば大丈夫です。

$ ed source/CNAME
source/CNAME: No such file or directory
i
blog.il-sus-web.net
.
w
20
q

その他

Cloudflareを使ってHTTPSに対応しました。

https://blog.il-sus-web.net

構成