2018-07-16

イントロダクション

自己紹介

名前：濃野剛(こいの　たけし)
職業：フリーランスエンジニア
開発年数：2014年8月～(現在)
主な使用言語
- サーバー系
  - Java
  - C#
- フロント系
  - JavaScript
  - jsp
  - aspx
- DB
  - oracleSQL
  - SQLServer
  - Transact-SQL
- その他
  - VBA
保有資格
- 基本情報技術者
- 応用情報技術者
- 英検準2級
- 臨床工学技士

2018-07-01

Github-Pages-Hexo-CircleCiでホームページを作る-番外編-カスタムドメイン

タイトルの通り、ホームページを構築したので、最初の記事の練習と備忘録として記事を作成

カスタムドメイン編

ドメインを用意する

任意のドメイン取得サイトなどを使用して、ドメインを取得する
今回使用したのはこちら
→https://navi.onamae.com/

DNSの設定

取得したドメインのDNSの設定を参照したいリポジトリのGithub Pagesのドメインに設定する。

お名前.comの場合、以下の手順で設定画面を開くことができる

[DNS]のタブを開き、設定したいサーバー(今回は共用サーバー)を選択
今回使用するドメインを選択
サーバーの画面から「独自ドメイン設定」を押下
ドメイン設定の画面の、今回使用するドメインの「DNS設定」を押下
任意のレコードタイプがAのレコードの「変更」を押下
※ ftp,pop,smtp,imapはそれぞれ別の用途のものなので、今回はwwwを使用
TYPEをCNAMEに変更し、ホストをgithubuser.github.ioに変更する
自分のドメイン(今回はhttp://www.koino.engineering)にアクセスして確認する
この段階ではGithub側の設定ができていないので、Githubの404エラー画面が表示される

Githubの設定

CircleCiとHexoの挙動の都合上以下の方法ではダメだった方法
Githubの設定はSettingsの画面から簡単に行うことができるが、それだと直接リモートのgh-pagesブランチを更新してしまうため、別の方法で実施することにする。
- ~~CNAMEというファイルをリポジトリの直下に作成し、中に連携したいドメインをホスト込みで記載する~~
  1
  www.koino.engineering
- ~~これをpushすれば設定完了~~

正しい方法
circle.ymlのhexo generateの後に以下の記載を追加する

1	- run: echo "(ホスト名込みの自分のドメイン)" > public/CNAME

サンプル

1	- run: echo "www.koino.engineering" > public/CNAME

`_config.yml`の設定

カスタムドメインの設定をするとURLがサブフォルダで無くなるため、_config.ymlの以下の設定を戻す

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

変更をpushした後、設定したドメインにアクセスする

画面が正しく表示できればカスタムドメインの設定完了

2018-06-30

Github-Pages-Hexo-CircleCiでホームページを作る_04_記事を書く編

タイトルの通り、ホームページを構築したので、最初の記事の練習と備忘録として記事を作成

記事作成と画像の挿入編

記事を書く

各種設定

各種と言っても入れたいものは今の所は1つだけ
記事を作成する際に、付随情報を格納する用フォルダが作成される

post_asset_folder: true

今後、使って行きたい機能が増えたら追記していくかもしれない

記事の作成

記事の作成は以下のコマンドを実行し、作成されるMDファイルにマークダウン形式で記事を書くだけ
また、上記の設定をしていると、付随する情報を格納するためのディレクトリが同時に作成される

1	hexo new <記事のタイトル>

その後hexo generateのコマンドを作成する事でその記事のHTMLが生成される

画像の挿入

Hexoを使用して記事に画像を挿入する方法として、一般的なマークダウン形式の記法も使用可能だが、
今回はpost_asset_folder: trueの設定をいれてあるので、Hexoの独自記法を使用することにした。

前提として、Hexo newした時に精製される、 記事のタイトルのディレクトリ に画像を格納する
その上で以下のように記載する

1	{% asset_img [class names] slug [width] [height] [title text [alt text]]%}

詳細はこちら→img / asset_img

サンプル

MDサンプル
1
{% asset_img lena.jpg 150 "lena" %}
画像の表示

2018-06-29

Github-Pages-Hexo-CircleCiでホームページを作る_03_CircleCI編

タイトルの通り、ホームページを構築したので、最初の記事の練習と備忘録として記事を作成

CiecleCI編

CircleCIと連携する

masterブランチへマークダウンをコミットした際に、
今までしてきたHexoのデプロイの設定～デプロイまでを自動でやってもらうように設定する

CircleCIの設定のデフォルトを取得する

実際にやっていないので不明だが、こちらを先にやった方がいいかもしれない
→ SSHの設定

以下の手順でcircle.ymlの雛形を取得する

プロジェクトを追加を選択
プロジェクトを追加をクリック
言語の設定はNodeを選択
circle.ymlのデフォルトの設定が表示される

Github側の設定

circle.ymlを作成し、masterブランチへpushする
上記で取得したデフォルトと、CircleCI 2.0 Docsを参考に、
circle.ymlをこのように編集した

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:8.11.3
        environment:
          TZ: /usr/share/zoneinfo/Asia/Tokyo
      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/HomePage
    branches:
      only:
        - master
    steps:
      - run:
          name: update-npm
          command: 'sudo npm install -g npm@6'
      - checkout
      - run:
          name: install-npm
          command: npm install
      - run: git config --global user.name "KoinoEngineering with CircleCI"
      - run: git config --global user.email "email@koino.engineering"
      - run: git submodule init
      - run: git submodule update
      - run: ./node_modules/.bin/hexo clean
      - run: ./node_modules/.bin/hexo generate
      - run: ./node_modules/.bin/hexo deploy

設定の概要

nodeのバージョンは8.11.3(準備編でインストールしたバージョン)
作業ディレクトリはリポジトリ名
masterブランチへのpushにのみ反応する
npmをアップデート（デフォルトのnpmが古かったため）
run:コマンドに実行したい内容を１行づつ記載

CircleCI側の設定

CircleCIの設定のデフォルトを取得するでやったところの続きから
(戻ってしまっていた場合にはもう一度やればOK)

Start buildingをクリック

　　　　
成功時はCircleCIのサイトの方で以下のようにログが出力されていくが、正しく設定できていても
初回はhexo deployコマンドで失敗する
理由は下記
```
※deploy以外のコマンドで失敗した場合には設定が誤っているので、ログ等を確認して修正する  
{% asset_img WorkCricleCI.PNG "WorkCricleCI" %}
```
SSHの設定
CircleCIが持っているSSHキーは読み取り権限しかもっていないため、pushできない
pushできるようにするために以下の設定を行う
1. Add User Keyをクリック
2. githubとの連携の認証を聞かれるので承諾する
3. SSHキーが追加される

自動デプロイ

ここまでの設定が正しくできていれば、masterブランチがpushされると
CircleCIが自動でgh-pagesブランチへのデプロイを行うようになる

2018-06-29

Github-Pages-Hexo-CircleCiでホームページを作る_02_Hexo編

タイトルの通り、ホームページを構築したので、最初の記事の練習と備忘録として記事を作成

ここはHexoの設定からGithub Pagesの設定までを行う

Hexoの設定

初期化

ここで使用するフォルダをそのままGitHubにpushする予定なので、
gitのホームディレクトリ で GitHubに作成したリポジトリと同じ名前 で初期化
そのままホームページのディレクトリに移動して画面を起動する

$ Hexo init HomePage
$ cd HomePage
$ Hexo server

ホームページのディレクトリでコマンド実行
URLにアクセス

テーマの設定

テーマの変更をしたい場合はこちらを実施する。余談なので短く
Hexoのthemesからテーマを選んで、そのテーマのリポジトリを見る
手順に従ってthemesのディレクトリにCloneして_config.ymlを修正するだけ。
使ってないlandscapeは消しちゃってもいいかもしれないけど、
デフォルトはなんかどこかから参照していることがあるので放置。未調査。

themesのディレクトリにClone

git clone <https://github.com/hexojs/hexo-theme-light.git> themes/light

_config.ymlを修正

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: light

適用されていることを確認

masterブランチへコミット

ここまでで作成したものをオリジナルのHexoの設定やマークダウンを管理するためにmasterブランチへ追加する

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:KoinoEngineering/HomePage.git
$ git push -u origin master

Github Pagesの設定(デプロイの準備)

gh-pagesブランチの作成

Hexoのデプロイ先で、Github Pagesの本体となるgh-pagesブランチを作成する。
中身は何でもいいので今回はHelloWorldだけのindex.htmlを作成した

$ git checkout -b gh-pages  
$ echo HelloWorld>index.html  
$ git add index.html  
$ git commit -m "make gh-pages branch"  
$ git push origin gh-pages  
$ git checkout master

リポジトリの設定を変更する

リポジトリのSettingsタブ＞GitHub Pagesにある、Sourceをgh-pagesに変更してsaveを押す
Enforce HTTPSにチェックを入れる

この段階で表示されているURLに接続して、以下のようなっていれば設定はOK
HelloWorld

デプロイ

_config.ymlの設定

_config.ymlに以下の設定をする

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:KoinoEngineering/HomePage.git
  branch: gh-pages

また、今回はリポジトリ名がusername.github.ioではないため、Github Pagesを設定した場合の URLが
https://KoinoEngineering.github.io/HomePage
のようにサブディレクトリとなる。
その設定がこちら

# URL
url: http://yoursite.com/HomePage
root: /HomePage/

ついでにここを見ながらサイトの設定もした

# Site
title: "こいのエンジニアリング"
subtitle:
description: "こいのエンジニアリングのホームページ"
keywords:
author: "濃野 剛"
language: ja
timezone: Asia/Tokyo

注意点

_config.ymlに日本語を入力した個所は"で囲わないとHTML生成時にエラーになった。2バイト文字だから？
ファイルがSJISだったためか文字化けした。UTF-8に変換して解消

設定内容の確認

設定が正しく反映されているかを、もう一度画面を起動しなおして確認

デプロイの実施

→ デプロイが失敗する場合はこちら

以下のコマンドをホームページのディレクトリで実行する

$ hexo clean
$ hexo generate
$ hexo deploy

または

$ hexo deploy -g

デプロイが失敗する場合

type:gitでdelpyer not foundのエラーが発生する場合
プラグインhexo-deployer-gitが必要な模様

$ npm install hexo-deployer-git --save

デプロイの確認

デプロイに成功したらGithub Pagesの設定に表示されているURLにアクセスして確認する
作成したホームページがきれいに表示できていれば成功
DisplayOnWeb

これで、Hexoを用いてホームページを作成するところまでが完了した

2018-06-28

Github-Pages-Hexo-CircleCiでホームページを作る_01_準備編

タイトルの通り、ホームページを構築したので、最初の記事の練習と備忘録として記事を作成

ここは準備編

前提条件

OS：Windows10 Home
Githubアカウントあり
ssh設定済み

その他の環境など

エディタ：Atom
Gitのホームディレクトリを変更している
GitHubはssh設定済み

下準備１ node.js

Hexoを動作させるのにnode.jsが必要なためインストール
今回はバージョン管理も必要かと思ったためnodistを使用することにした
ちなみにMacの場合にはnodebrewというものがあるらしい

Nodistのインストール

AssetsのSetup-v0.8.8.exeをダウンロードして手順に従ってインストールする

インストールの確認

nodeの安定板をインストール

Hexoのインストール手順を見たら$ nvm install stableとなっていたため最新の安定板をインストールしようとしたが、
nodistで

nodist stable

とやってみたらエラーになった
Helpコマンド叩いてみてもlastestはいたが、stableキーワードはいなかった。

よくよく調べてみると、
stableHasBeenRemoved
nodistでは0.8.1でstableキーワードが削除されていたようだ。
node.jsのサイトを見ると8.11.3がRecommended For Most Usersとなっていたため、これをインストールすることにした
install8_11_3

下準備２ Github

今回はGithubのGithub Pagesを使用してホームページを作成するため、Github Pages用の設定を行う。

任意のリポジトリを作成する

このホームページに使用する用のリポジトリを作成する。

今回はHomePageというリポジトリを作成した
HomePageRepository
※username.github.io というリポジトリを作れば細かい設定をしなくてもGithub Pagesが使用できるが、
自動的にmasterブランチを使用する設定になってしまう 。今回は、gh-pagesブランチを使用した設定をしたかったため、今回は逆にやりづらいかもしれないと思いやめた
(設定の変更は可能なので、できないことはない)

下準備３　Hexoのインストール

Hexoのインストール手順に従って、以下のコマンドを実行し、インストールする

$ npm install -g hexo-cli

インストールの確認

下準備３ CircleCi

circleciに接続してSign Up with GitHubからCircleCiを連携する

これで必要なものが全てそろった状態になった

準備編はここまで

自己紹介

ドメインを用意する

DNSの設定

Githubの設定

_config.ymlの設定

記事を書く

各種設定

記事の作成

画像の挿入

CircleCIと連携する

CircleCIの設定のデフォルトを取得する

Github側の設定

CircleCI側の設定

自動デプロイ

Hexoの設定

初期化

テーマの設定

masterブランチへコミット

Github Pagesの設定(デプロイの準備)

gh-pagesブランチの作成

リポジトリの設定を変更する

デプロイ

_config.ymlの設定

設定内容の確認

デプロイの実施

デプロイが失敗する場合

デプロイの確認

前提条件

下準備１ node.js

Nodistのインストール

インストールの確認

nodeの安定板をインストール

下準備２ Github

任意のリポジトリを作成する

下準備３ Hexoのインストール

下準備３ CircleCi

`_config.yml`の設定

下準備３　Hexoのインストール