Node.js
HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする
FacebookGoogle +Google AnalyticsHexoNode.jsTwitter

HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoはブログツールなのですが、デフォルトだとSEOやSocial Graphの設定がされてません。
Google Analytics, Google +, Facebook, Twitterの設定の方法をご紹介したいと思います。

HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

テンプレートの_config.ymlを修正します

themes/landscape/_config.ymlファイルにありますパラメータを編集します。
themes/landscape/README.mdとhttp://hexo.io/docs/helpers.htmlを参考にしてください。

# Miscellaneous
google_analytics: UA-XXXXXXXXXXXXXXX
favicon:
twitter: f_prg
google_plus: f.prg.ex
fb_admins: YYYYYYYYYYYYYYY
fb_app_id: ZZZZZZZZZZZZZZZ

入力後に更新すれば、生成されるHTMLが下のようになります

<meta property="og:type" content="article">
<meta property="og:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta property="og:url" content="http://blog.star-flare.com/2014/08/31/hexo_site_options/">
<meta property="og:site_name" content="f_prgのブログです。">
<meta property="og:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル1のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta name="twitter:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル1のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:creator" content="@f_prg">
<link rel="publisher" href="f.prg.ex">
<meta property="fb:admins" content="YYYYYYYYYYYYYYY">
<meta property="fb:app_id" content="ZZZZZZZZZZZZZZZ">

ちょっと下には、Google Analyticsの設定があります。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXXXXXXXXX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

まとめ

これでSEOやSocial Graphの効果が出そうですね。
Google Analyticsで効果測定ができそうです。

補足、おまけ

Twitter CardのValidationは
https://dev.twitter.com/docs/cards/validation/validator
で可能です。

参考資料・リンク

http://hexo.io/docs/helpers.html

Hexoの投稿テンプレートを変えて、さらに投稿をしやすくする

Hexoの投稿テンプレートを変えて、さらに投稿をしやすくする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoで投稿する際にいつも前の投稿記事をコピーして編集していたので
コマンドで投稿記事を作った際に、独自の形になるようにする方法を紹介します。

投稿記事を独自の形になるようにする

Scaffoldを編集します

scaffolds/post.mdを編集して独自の設定にします。
http://hexo.io/docs/writing.html#Scaffold
Scaffoldは、ジェネレータの一般的な生成で使われるものですね。

title: {{ title }}
date: {{ date }}
tags:
---

が初期状態なので、下のように編集します。
私はcategoriesの部分などを入れました。

title: {{ title }}
date: {{ date }}
tags:
categories:
---
記事タイトル

# はじめに

こんにちは。インフラエンジニアレベル1の[f_prg](http://twitter.com/f_prg "f_prg")です。


# 記事タイトル

## 見出し


# まとめ


# 補足、おまけ


# 参考資料・リンク

コマンドからテスト記事を生成する

コマンドでテスト記事を生成します。

[10:50:38][f_prg@mba:blog]# hexo new post test
[info] File created at /Users/f_prg/Documents/project/node-hexo-blog/blog/source/_posts/2014/08/24/test.md

生成された記事を確認します。

title: test
date: 2014-08-24 11:21:28
tags:
categories:
---
記事タイトル

# はじめに

こんにちは。インフラエンジニアレベル1の[f_prg](http://twitter.com/f_prg "f_prg")です。


# 記事タイトル

## 見出し


# まとめ


# 補足、おまけ


# 参考資料・リンク

まとめ

これで、これから記事が簡単に生成できました。
前の記事をコピーする際、編集することがなくなりました。
小さいことですが、便利になりました。

参考資料・リンク

http://hexo.io/docs/writing.html#Scaffold

Node.js
nvmを使って、Node.jsをインストールします
Node.jsnvm

nvmを使って、Node.jsをインストールします

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
以前rbenvで紹介したような、
Node.js版があったのでインストールしてみました。
nvmとは、Node Version Managerとのことです。

インストール

Githubからインストールする

今回は、rbenvに似せるためマニュアルインストールを選びました。

[15:28:17][f_prg@mba:~]# git clone https://github.com/creationix/nvm.git ~/.nvm
Cloning into '/Users/f_prg/.nvm'...
remote: Counting objects: 1969, done.
remote: Compressing objects: 100% (967/967), done.
remote: Total 1969 (delta 1047), reused 1865 (delta 985)
Receiving objects: 100% (1969/1969), 369.67 KiB | 423.00 KiB/s, done.
Resolving deltas: 100% (1047/1047), done.
Checking connectivity... done.
[15:28:39][f_prg@mba:~]# source .nvm/nvm.sh

curlのインストールスクリプトもあるようですね。

bash_profileに追記しておきます。

[15:28:59][f_prg@mba:~]# vim .bash_profile
# nvm
[[ -s ~/.nvm/nvm.sh ]] && . ~/.nvm/nvm.sh

Node.jsをインストールする

対象となるパッケージをリモート先から確認し、インストールします。

[15:40:35][f_prg@mba:~]# nvm ls-remote
     v0.1.14
     v0.1.15
     v0.1.16
     :
     :
     長いので省略してます
     :
     :
    v0.11.11
    v0.11.12
    v0.11.13
[16:16:26][f_prg@mba:~]# nvm install v0.11.13
######################################################################## 100.0%
Now using node v0.11.13

使用するパッケージを指定します

使用するバージョンを確認して
デフォルト設定をして
Node.jsのバージョン確認です。

[16:16:49][f_prg@mba:~]# nvm use v0.11.13
Now using node v0.11.13
[16:17:16][f_prg@mba:~]# nvm alias default v0.11.13
default -> v0.11.13
[16:17:32][f_prg@mba:~]# node -v
v0.11.13

最初のインストールで一つしか入れてないので
今v0.11.13使ってるとメッセージがでてますね。

まとめ

これで、rbenvのようにパッケージを自由に使えそうです。
楽になりそうですね。

参考資料・リンク

https://github.com/creationix/nvm

Node.js
Macにパッケージで入れたNode.jsをアンインストールする
MacNode.jsnvm

Macにパッケージで入れたNode.jsをアンインストールする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
nvmを使おうとしたところ、私のMacには既にpkgファイルからダウンロードしたnodeを使っていたので
削除した際の内容を紹介しようと思います。

アンインストール

コマンド

下記コマンドでアンインストールできます。

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*

まとめ

私は最初なんかWarningが出てきまして2回目で成功しました。
コマンドをコピペしてやったので、sudoでパスワード確認が通らなかった部分があったようです。
一回sudoをしてパスワード確認が入らないようにしておくとよいと思います。

参考資料・リンク

http://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x

Node.js
HexoでGruntを使ってみました
AWSGrunt.jsHexoNode.jsS3

HexoでGruntを使ってみました

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
HexoでGruntを組み合わせましたので、その構築方法をご紹介します。

HexoとGruntを組み合わせる

Gruntとは

http://gruntjs.com
JavascriptやCSSの縮小、コンパイル、単体テスト、Lintによる厳密なチェックなどを実装できます。
Gurntのタスク起動により自動ビルド化ができるので、WEB開発業務が更に改善できるようです。

キャプチャ

grunt-cliのインストール

grunt-cliのnpmのパッケージのインストールをします。

[11:59:18][f_prg@mba:~]# npm install -g grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry.npmjs.org/grunt-cli
npm http GET https://registry.npmjs.org/nopt
npm http GET https://registry.npmjs.org/findup-sync
npm http GET https://registry.npmjs.org/resolve
npm http 304 https://registry.npmjs.org/nopt
npm http 304 https://registry.npmjs.org/findup-sync
npm http 304 https://registry.npmjs.org/resolve
npm http GET https://registry.npmjs.org/abbrev
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/abbrev
npm http 304 https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/sigmund
/Users/f_prg/.nvm/v0.11.13/bin/grunt -> /Users/f_prg/.nvm/v0.11.13/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /Users/f_prg/.nvm/v0.11.13/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)

package.jsonにGruntを追加する

下記コマンドで、nodeのpackage.jsonにGruntを追加します。

[15:28:13][f_prg@mba:blog]# npm install grunt --save

package.jsonを確認してみました。

  "dependencies": {
    "grunt": "^0.4.5",

オプションの–save指定で追加になります。

grunt-aws-s3プラグインを追加する

同じように、gurnt-aws-s3プラグインを追加します。

[15:28:56][f_prg@mba:blog]# npm install grunt-aws-s3 --save
npm http GET https://registry.npmjs.org/grunt-aws-s3
npm http 304 https://registry.npmjs.org/grunt-aws-s3
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/aws-sdk
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/setimmediate
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/setimmediate
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/aws-sdk
npm http GET https://registry.npmjs.org/aws-sdk-apis
npm http GET https://registry.npmjs.org/xml2js
npm http GET https://registry.npmjs.org/xmlbuilder
npm http 304 https://registry.npmjs.org/xmlbuilder
npm http 304 https://registry.npmjs.org/aws-sdk-apis
npm http 304 https://registry.npmjs.org/xml2js
npm http GET https://registry.npmjs.org/sax
npm http 304 https://registry.npmjs.org/sax
grunt-aws-s3@0.9.1 node_modules/grunt-aws-s3
├── setimmediate@1.0.2
├── mime@1.2.11
├── async@0.2.10
├── lodash@2.4.1
└── aws-sdk@2.0.15 (xmlbuilder@0.4.2, xml2js@0.2.6, aws-sdk-apis@3.1.6)

gruntのセットアップをします

awsのcredentialのjsonファイルを作成します

AWSのキーとシークレットを外部のjsonファイルで管理します

{
    "AWSAccessKeyId": "XXXXXXXXXXXXXXXXXXXX",
    "AWSSecretKey": "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY",
    "AWSRegion": "ap-northeast-1"
}

Grunt.jsファイルでGruntの設定をします

http://gruntjs.com/api/grunt.option
https://www.npmjs.org/package/grunt-aws-s3
を組み合わせてみました。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // AWS
    aws: grunt.file.readJSON('aws-credentials.json'),
    aws_s3: {
      options: {
        accessKeyId: '<%= aws.AWSAccessKeyId %>', // Use the variables
        secretAccessKey: '<%= aws.AWSSecretKey %>', // You can also use env variables
        region: '<%= aws.AWSRegion %>',
        uploadConcurrency: 5, // 5 simultaneous uploads
        downloadConcurrency: 5 // 5 simultaneous downloads
      },
      development: {
        options: {
          bucket: 'blog.star-flare.com',
        },
        files: [
          {expand: true, cwd: 'public/', src: '**', dest: 'dev'},
        ]
      },
      staging: {
        options: {
          bucket: 'blog.star-flare.com',
        },
        files: [
          {expand: true, cwd: 'public/', src: '**', dest: 'stg'},
        ]
      },
      production: {
        options: {
          bucket: 'blog.star-flare.com',
          differential: true // Only uploads the files that have changed
        },
        files: [
          {expand: true, cwd: 'public/', src: '**', dest: ''},
        ]
      },
    }
  });

  // AWS
  grunt.loadNpmTasks('grunt-aws-s3');
  var target = grunt.option('target') || 'development';
  grunt.registerTask('default', 'aws_s3:' + target);
};

静的サイトを生成して、S3にアップロードします

[23:18:23][f_prg@mba:blog]# hexo generate
[info] Files loaded in 0.855s
  :
  :
  省略します
  :
  :
[info] 62 files generated in 2.604s
[23:22:15][f_prg@mba:blog]# grunt --target production
Running "aws_s3:production" (aws_s3) task
  :
  :
  省略します
  :
  :
12/86 objects uploaded to bucket blog.star-flare.com/

Done, without errors.

これで、ブログがS3にアップロードされるようになりました。

まとめ

今までは静的サイトを生成してからCyberduckを使ってアップロードしてましたが、更に簡単になりました。
targetオプションを使うことで、本番のサイトにアップロードせず確認もできるようになりました。
productionの本番サイトはオプションのdifferentialにより、
更新したファイルだけアップされるようになりました。
Gruntのプラグインで、jsやcssのminifyも組み合わればもっとよくなるでしょう。

補足、おまけ

devとstgは、参考のもので使っておりません。
S3のバケットも用意してもいいですね。

参考資料・リンク

http://gruntjs.com
https://github.com/gruntjs
http://gruntjs.com/getting-started
http://gruntjs.com/api/grunt.option
https://www.npmjs.org/package/grunt-aws-s3

Node.js
HexoにWordPressの記事をマイグレートする
HexoNode.js

HexoにWordPressの記事をマイグレートする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
今までWordPressでブログを構築し運用していたのですが
ログインのブルートフォースアタックなどセキュリティ面を考え、
Hexoでデプロイ静的ファイルのサイトに移行しようと思います。

HexoにWordPressの記事をマイグレートする

ブログを新規構築する

ブログを新規構築します。
既に記事を作っている場合、マイグレートすると記事が混ざりそうなので
ブログを構築してファイルを移動していきたいと思います。
新規構築のブログにWordPressの記事をマイグレートすれば、比較もしやすいと考えました。

[08:33:08][f_prg@mba:node-hexo-blog]# hexo init my-wp-migrate
[info] Copying data
[info] You are almost done! Don't forget to run `npm install` before you start blogging with Hexo!

WordPressのmigratorプラグインをインストールします。

hexoのドキュメントはコチラです。
http://hexo.io/docs/migration.html
npmのページはこちらです。
https://www.npmjs.org/package/hexo-migrator-wordpress

インストールは下のコマンドで実行できます。

[08:35:18][f_prg@mba:node-hexo-blog]# cd my-wp-migrate/
[08:39:01][f_prg@mba:my-wp-migrate]# npm install hexo-migrator-wordpress --save
npm http GET https://registry.npmjs.org/hexo-migrator-wordpress
npm http 304 https://registry.npmjs.org/hexo-migrator-wordpress
npm http GET https://registry.npmjs.org/xml2js/0.4.2
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/to-markdown/0.0.1
npm http GET https://registry.npmjs.org/request
npm http 200 https://registry.npmjs.org/async
npm http 200 https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/to-markdown/0.0.1
npm http 200 https://registry.npmjs.org/xml2js/0.4.2
npm http GET https://registry.npmjs.org/xml2js/-/xml2js-0.4.2.tgz
npm http 200 https://registry.npmjs.org/xml2js/-/xml2js-0.4.2.tgz
npm http GET https://registry.npmjs.org/sax
npm http GET https://registry.npmjs.org/xmlbuilder
npm http 304 https://registry.npmjs.org/sax
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/json-stringify-safe
npm http GET https://registry.npmjs.org/mime-types
npm http GET https://registry.npmjs.org/forever-agent
npm http GET https://registry.npmjs.org/node-uuid
npm http GET https://registry.npmjs.org/form-data
npm http GET https://registry.npmjs.org/tough-cookie
npm http GET https://registry.npmjs.org/tunnel-agent
npm http GET https://registry.npmjs.org/http-signature
npm http GET https://registry.npmjs.org/oauth-sign
npm http GET https://registry.npmjs.org/hawk/1.1.1
npm http GET https://registry.npmjs.org/aws-sign2
npm http GET https://registry.npmjs.org/stringstream
npm http 304 https://registry.npmjs.org/json-stringify-safe
npm http 304 https://registry.npmjs.org/forever-agent
npm http 304 https://registry.npmjs.org/node-uuid
npm http 200 https://registry.npmjs.org/qs
npm http 304 https://registry.npmjs.org/form-data
npm http 304 https://registry.npmjs.org/tough-cookie
npm http 304 https://registry.npmjs.org/tunnel-agent
npm http 304 https://registry.npmjs.org/oauth-sign
npm http 304 https://registry.npmjs.org/http-signature
npm http 304 https://registry.npmjs.org/aws-sign2
npm http 304 https://registry.npmjs.org/stringstream
npm http 200 https://registry.npmjs.org/xmlbuilder
npm http 304 https://registry.npmjs.org/mime-types
npm http 304 https://registry.npmjs.org/hawk/1.1.1
npm http GET https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.4.3.tgz
npm http 200 https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.4.3.tgz
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/combined-stream
npm http 304 https://registry.npmjs.org/combined-stream
npm http 200 https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/ctype/0.5.2
npm http GET https://registry.npmjs.org/assert-plus/0.1.2
npm http GET https://registry.npmjs.org/asn1/0.1.11
npm http GET https://registry.npmjs.org/delayed-stream/0.0.5
npm http 304 https://registry.npmjs.org/assert-plus/0.1.2
npm http 304 https://registry.npmjs.org/ctype/0.5.2
npm http GET https://registry.npmjs.org/punycode
npm http 304 https://registry.npmjs.org/delayed-stream/0.0.5
npm http 304 https://registry.npmjs.org/punycode
npm http GET https://registry.npmjs.org/sntp
npm http GET https://registry.npmjs.org/hoek
npm http GET https://registry.npmjs.org/boom
npm http GET https://registry.npmjs.org/cryptiles
npm http 304 https://registry.npmjs.org/sntp
npm http 304 https://registry.npmjs.org/hoek
npm http 304 https://registry.npmjs.org/cryptiles
npm http 200 https://registry.npmjs.org/boom
npm http 304 https://registry.npmjs.org/asn1/0.1.11
npm http GET https://registry.npmjs.org/lodash-node
npm http 200 https://registry.npmjs.org/lodash-node
hexo-migrator-wordpress@0.1.1 node_modules/hexo-migrator-wordpress
├── async@0.9.0
├── to-markdown@0.0.1
├── request@2.40.0 (json-stringify-safe@5.0.0, forever-agent@0.5.2, aws-sign2@0.5.0, oauth-sign@0.3.0, stringstream@0.0.4, tunnel-agent@0.4.0, qs@1.0.2, node-uuid@1.4.1, mime-types@1.0.2, tough-cookie@0.12.1, form-data@0.1.4, hawk@1.1.1, http-signature@0.10.0)
└── xml2js@0.4.2 (sax@0.5.8, xmlbuilder@2.4.3)

wordpressからXMLをダウンロードする。

  1. 使っているwordpressの管理画面にログインする
  2. メニューのツール–>エクスポートよりXMLをダウンロードしてください。
  3. ダウンロードしたファイルを、my-wp-migrateのフォルダに置きます。

migrateコマンドを実行する

下のコマンドのmigrateを実行しますと、解析してファイルが作成されます。

[09:13:52][f_prg@mba:my-wp-migrate]# hexo migrate wordpress ./f_prg.wordpress.2014-08-16.xml 
[info] Analyzing ./f_prg.wordpress.2014-08-16.xml...
[info] Page found: 紹介
[info] Page found: About
[info] Post found: 
[info] Page found: 
[info] Page found: 

  下書きとか一覧に出てるので割愛します。

[info] Post found: 
[info] 159 posts migrated.

生成されたファイルを確認する

今回は手動で記事のファイルを移動させました。その後に改修をした作業内容を紹介します。
「Varnish 4.0 Release Partyに参加してきました。 #v4rp #v4rp_tokyo」
という記事になります。

ファイル名の変更

日本語のタイトル名からファイル名を決定しているようなので
varnish-4-0-release-partye381abe58f82e58aa0e38197e381a6e3818de381bee38197e3819fe38082-v4rp-v4rp_tokyo.md
となってますね。ちょっと使いづらいので、varnish-4-0-release-party.mdに変えます。
/2014/04/29/varnish-4-0-release-party/

ファイルのプロパティ

WordPressのidとcommentが入ってますね。
まあ、これはこのままで大丈夫のようです。

title: "Varnish 4.0 Release Partyに参加してきました。 #v4rp #v4rp_tokyo"
id: 1459
comment: false
categories:
  - Varnish
date: 2014-04-29 20:12:45
tags:
- AWS
- Varnish
- 勉強会

ファイルの内容

markdownの部分には特に問題はありませんでした。
もしかしたら、このファイルは上手く行ったのかもしれませんね。
ただ、画像については次の項目で独自の改修をしました。

画像の変更

画像の保存先を変えます。
_config.ymlで

post_asset_folder: true

と設定していますので
source/_posts/2014/04/29/varnish-4-0-release-party
というフォルダを作成して移動させました。

markdownの画像のパス

画像のパスのwp-contentを変換させます。フォルダをそのままアップしてもよかったのですが
手動で画像の確認をしながら移動させました。

[![20140429-201943.jpg](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-201943.jpg)](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-201943.jpg)
[![20140429-201953.jpg](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-201953.jpg)](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-201953.jpg)
[![20140429-202000.jpg](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-202000.jpg)](http://blog.star-flare.com/wp-content/uploads/2014/04/20140429-202000.jpg)

だったのを

[![20140429-201943.jpg](/2014/04/29/varnish-4-0-release-party/20140429-190537.jpg)](/2014/04/29/varnish-4-0-release-party/20140429-201943.jpg)
[![20140429-201943.jpg](/2014/04/29/varnish-4-0-release-party/20140429-201943.jpg)](/2014/04/29/varnish-4-0-release-party/20140429-201943.jpg)
[![20140429-201953.jpg](/2014/04/29/varnish-4-0-release-party/20140429-201953.jpg)](/2014/04/29/varnish-4-0-release-party/20140429-201953.jpg)
[![20140429-202000.jpg](/2014/04/29/varnish-4-0-release-party/20140429-202000.jpg)](/2014/04/29/varnish-4-0-release-party/20140429-202000.jpg)

としました。

まとめ

私は記事の見直しをかけて、手動で行いました。
記事のファイルを移動し、wp-contentファイルをアップロードすれば
移行にそれほど時間がかからないかもしれませんね。

参考資料・リンク

http://hexo.io/docs/migration.html
https://www.npmjs.org/package/hexo-migrator-wordpress

Node.js
Hexoの新規投稿をちょっと使いやすくする
HexoNode.js

Hexoの新規投稿をちょっと使いやすくする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoで新規投稿でファイルを生成しますと、source/_postsフォルダにファイルが生成されます。今後投稿していきますと、ファイルの管理が必要になりそうです。
今回はちょっとだけ投稿を使いやすくする方法をご紹介します。

日付ごとにファイルを生成するようにする

_config.ymlの設定を変更する

初期状態のconfigは下記の通りですが

new_post_name: :title.md # File name of new posts

new_post_name: :year/:month/:day/:title.md # File name of new posts

と変更します。

新規投稿を生成する

[01:20:43][f_prg@mba:_posts]# hexo new hexo_easy_post
[info] File created at /Users/f_prg/Documents/project/node-hexo-blog/blog/source/_posts/2014/08/16/hexo_easy_post.md

と日付ごとのフォルダができて、ファイルが生成されます。

まとめ

できるかなーと思ってちょっとやったら、とても簡単にできました。
ちょっと_config.yml変更させるだけで、いろいろとできそうです。
その前の記事は、自分で移動させました。まあ。仕方が無いですね。
管理画面のhexo-adminプラグインを使っており
一覧で投稿日時がでてましたので、面倒な作業はなくドラッグアンドドロップの移動だけでした。

http://hexo.io/docs/migration.html
こちらに同じような内容がありました。

参考資料・リンク

http://hexo.io/docs/migration.html

Node.js
Hexoのhexo-adminプラグインで管理画面を使う
HexoNode.js

Hexoのhexo-adminプラグインで管理画面を使う

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoはブログのツールなのですが、管理画面がやはり欲しくなったりします。
管理画面はプラグインで提供されているのでご紹介したいと思います。

管理画面を使えるようにする

ドキュメント

ドキュメントはコチラです。
https://github.com/hexojs/hexo/wiki/Plugins

プラグインのインストール

hexo-adminプラグインをインストールします。

[01:20:08][f_prg@mba:blog]# npm install hexo-admin
npm http GET https://registry.npmjs.org/hexo-admin
npm http 200 https://registry.npmjs.org/hexo-admin
npm http GET https://registry.npmjs.org/hexo-admin/-/hexo-admin-0.1.3.tgz
npm http 200 https://registry.npmjs.org/hexo-admin/-/hexo-admin-0.1.3.tgz
npm http GET https://registry.npmjs.org/body-parser
npm http GET https://registry.npmjs.org/moment
npm http GET https://registry.npmjs.org/serve-static
npm http 200 https://registry.npmjs.org/serve-static
npm http 200 https://registry.npmjs.org/body-parser
npm http GET https://registry.npmjs.org/serve-static/-/serve-static-1.5.1.tgz
npm http GET https://registry.npmjs.org/body-parser/-/body-parser-1.6.3.tgz
npm http 200 https://registry.npmjs.org/serve-static/-/serve-static-1.5.1.tgz
npm http 200 https://registry.npmjs.org/body-parser/-/body-parser-1.6.3.tgz
npm http 200 https://registry.npmjs.org/moment
npm http GET https://registry.npmjs.org/escape-html/1.0.1
npm http GET https://registry.npmjs.org/parseurl
npm http GET https://registry.npmjs.org/send/0.8.1
npm http GET https://registry.npmjs.org/utils-merge/1.0.0
npm http GET https://registry.npmjs.org/iconv-lite/0.4.4
npm http GET https://registry.npmjs.org/qs/1.2.1
npm http GET https://registry.npmjs.org/media-typer/0.2.0
npm http GET https://registry.npmjs.org/raw-body/1.3.0
npm http GET https://registry.npmjs.org/type-is
npm http GET https://registry.npmjs.org/bytes/1.0.0
npm http GET https://registry.npmjs.org/depd/0.4.4
npm http 304 https://registry.npmjs.org/escape-html/1.0.1
npm http 200 https://registry.npmjs.org/send/0.8.1
npm http 304 https://registry.npmjs.org/utils-merge/1.0.0
npm http 200 https://registry.npmjs.org/qs/1.2.1
npm http 200 https://registry.npmjs.org/parseurl
npm http 200 https://registry.npmjs.org/media-typer/0.2.0
npm http 200 https://registry.npmjs.org/iconv-lite/0.4.4
npm http 200 https://registry.npmjs.org/raw-body/1.3.0
npm http 304 https://registry.npmjs.org/bytes/1.0.0
npm http 304 https://registry.npmjs.org/depd/0.4.4
npm http 200 https://registry.npmjs.org/type-is
npm http GET https://registry.npmjs.org/send/-/send-0.8.1.tgz
npm http GET https://registry.npmjs.org/qs/-/qs-1.2.1.tgz
npm http GET https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz
npm http GET https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz
npm http GET https://registry.npmjs.org/media-typer/-/media-typer-0.2.0.tgz
npm http GET https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz
npm http GET https://registry.npmjs.org/type-is/-/type-is-1.3.2.tgz
npm http 200 https://registry.npmjs.org/qs/-/qs-1.2.1.tgz
npm http 200 https://registry.npmjs.org/send/-/send-0.8.1.tgz
npm http 200 https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.4.tgz
npm http 200 https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz
npm http 200 https://registry.npmjs.org/raw-body/-/raw-body-1.3.0.tgz
npm http 200 https://registry.npmjs.org/type-is/-/type-is-1.3.2.tgz
npm http 200 https://registry.npmjs.org/media-typer/-/media-typer-0.2.0.tgz
npm http GET https://registry.npmjs.org/mime/1.2.11
npm http GET https://registry.npmjs.org/fresh/0.2.2
npm http GET https://registry.npmjs.org/debug/1.0.4
npm http GET https://registry.npmjs.org/finished/1.2.2
npm http GET https://registry.npmjs.org/ms/0.6.2
npm http GET https://registry.npmjs.org/range-parser
npm http 200 https://registry.npmjs.org/debug/1.0.4
npm http 200 https://registry.npmjs.org/mime/1.2.11
npm http 304 https://registry.npmjs.org/fresh/0.2.2
npm http 304 https://registry.npmjs.org/range-parser
npm http GET https://registry.npmjs.org/debug/-/debug-1.0.4.tgz
npm http GET https://registry.npmjs.org/mime/-/mime-1.2.11.tgz
npm http 304 https://registry.npmjs.org/finished/1.2.2
npm http 304 https://registry.npmjs.org/ms/0.6.2
npm http 200 https://registry.npmjs.org/mime/-/mime-1.2.11.tgz
npm http 200 https://registry.npmjs.org/debug/-/debug-1.0.4.tgz
npm http GET https://registry.npmjs.org/ee-first/1.0.3
npm http 304 https://registry.npmjs.org/ee-first/1.0.3
npm http GET https://registry.npmjs.org/mime-types
npm http 304 https://registry.npmjs.org/mime-types
hexo-admin@0.1.3 node_modules/hexo-admin
├── serve-static@1.5.1 (escape-html@1.0.1, utils-merge@1.0.0, parseurl@1.3.0, send@0.8.1)
├── body-parser@1.6.3 (media-typer@0.2.0, bytes@1.0.0, raw-body@1.3.0, depd@0.4.4, qs@1.2.1, type-is@1.3.2, iconv-lite@0.4.4)
└── moment@2.8.1

管理画面にアクセスする

http://localhost:4000/admin/
にアクセスしてください。
Posts(投稿)とAbout(プラグインについて)の2つだけのシンプルなものです。
ログインもありません。プレビューがあるのがいいですね。
※最初Safariでアクセスしたら、プレビューがでてませんでした。
Firefoxにしたところプレビューが出るようになりました。
管理画面

管理画面から記事を投稿してみる

New Postより投稿しようとしたところ、上手くできませんでした。

管理画面から記事を編集してみる

記事の編集は編集は可能でした。
一覧の、鉛筆マークから編集ができます。
記事編集

記事の編集

記事の編集ができます。プレビューができますが、見出しが同じさいずのようでちょっと見づらいです。

記事のプロパティの編集

右上の歯車のアイコンで、記事の日付、タグ、カテゴリの編集ができます。

記事の公開・非公開の編集

Unpublish と Publishをコントロールできるようです。
コマンドから記事を生成すると、
/source/_post/
フォルダにMarkdownファイルができます。
非公開にすると、ファイルが
/source/_draft/
というフォルダに移動されるようです。
_config.ymlの

post_asset_folder: true

でのフォルダ、/source/_draft/hexo_admin_plugin
は移動されないようです。

まとめ

まだまだ挙動が微妙なところがあるようです。
改善を期待した所です。

参考資料・リンク

今回はございません。

Node.js
Hexoでgithubにデプロイする
HexoNode.jsgithub

Hexoでgithubにデプロイする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoには、deployする機能があります。
http://fprg.github.io/
にデプロイしたいと思います。

Hexoのデプロイ、github編

ドキュメント

ドキュメントはコチラです。
http://hexo.io/docs/deployment.html

_config.ymlに設定を記述します。

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repo: https://github.com/fprg/fprg.github.io
  branch: master
  message: Hexo deploy

デプロイを実行します。

デプロイのコマンドはコチラを参考にしてください。
http://hexo.io/docs/commands.html#deploy
-g オプションでデプロイ前にサイトの生成が実行されます。

[22:55:38][f_prg@mba:blog]# hexo deploy -g
[info] Files loaded in 0.212s
[update] Generated: archives/index.html (174ms)
[update] Generated: archives/2014/index.html (61ms)
[update] Generated: archives/2014/08/index.html (72ms)
[update] Generated: categories/Nodejs/index.html (33ms)
[update] Generated: categories/Ruby/index.html (11ms)
[update] Generated: index.html (48ms)
[update] Generated: 2014/08/11/hexo_deploy_github/index.html (41ms)
[update] Generated: 2014/08/10/hexo_image_setting/index.html (23ms)
[update] Generated: 2014/08/10/hexo_feed_plugin/index.html (18ms)
[update] Generated: 2014/08/10/hexo_site_setup/index.html (11ms)
[update] Generated: 2014/08/10/hexo_install/index.html (38ms)
[update] Generated: 2014/08/10/mac_ruby_rbenv/index.html (15ms)
[update] Generated: 2014/08/10/hello-world/index.html (10ms)
[update] Generated: tags/Mac/index.html (19ms)
[update] Generated: tags/Ruby/index.html (28ms)
[update] Generated: tags/rbenv/index.html (23ms)
[update] Generated: tags/Hexo/index.html (36ms)
[update] Generated: tags/Nodejs/index.html (33ms)
[update] Generated: tags/github/index.html (12ms)
[update] Generated: atom.xml (2ms)
[update] Generated: 2014/08/10/hexo_install/hexo_install_001.png (5ms)
[info] 21 files generated in 0.740s
[info] Start deploying: github
[info] Setting up GitHub deployment...
Initialized empty Git repository in /Users/f_prg/Documents/project/node-hexo-blog/blog/.deploy/.git/
[master (root-commit) 3bb6716] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
[info] Clearing .deploy folder...
[info] Copying files from public folder...
[master 358b0db] Hexo deploy
 45 files changed, 12032 insertions(+)
 create mode 100644 2014/08/10/hello-world/index.html
 create mode 100644 2014/08/10/hexo_feed_plugin/index.html
 create mode 100644 2014/08/10/hexo_image_setting/index.html
 create mode 100644 2014/08/10/hexo_install/hexo_install_001.png
 create mode 100644 2014/08/10/hexo_install/index.html
 create mode 100644 2014/08/10/hexo_site_setup/index.html
 create mode 100644 2014/08/10/mac_ruby_rbenv/index.html
 create mode 100644 2014/08/11/hexo_deploy_github/index.html
 create mode 100644 archives/2014/08/index.html
 create mode 100644 archives/2014/index.html
 create mode 100644 archives/index.html
 create mode 100644 atom.xml
 create mode 100644 categories/Nodejs/index.html
 create mode 100644 categories/Ruby/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 index.html
 create mode 100644 js/script.js
 delete mode 100644 placeholder
 create mode 100644 tags/Hexo/index.html
 create mode 100644 tags/Mac/index.html
 create mode 100644 tags/Nodejs/index.html
 create mode 100644 tags/Ruby/index.html
 create mode 100644 tags/github/index.html
 create mode 100644 tags/rbenv/index.html
Username for 'https://github.com': fprg
Password for 'https://fprg@github.com': 
To https://github.com/fprg/fprg.github.io.git
 + 3ef2c41...93ca6dc master -> master (forced update)
Branch master set up to track remote branch master from https://github.com/fprg/fprg.github.io.git.
[info] Deploy done: github

github.ioで確認する

http://fprg.github.io/
でブログが見れるようになりました。

補足

最初はgithubのユーザー・パスが聞かれますが
2回目移行のデプロイコマンド実行の際には聞かれませんでした。

まとめ

Markdownを編集しデプロイして、github.ioでブログが構築できますね。
github.ioは、ユーザーに最初のテンプレートが提供されていますが
サイトとしてちょっと一味変えたい場合にも有効ですね。

参考資料・リンク

http://fprg.github.io/
気まぐれでサイトがなくなってたら、すいません。

Node.js
Hexoで画像の設定する
HexoNode.js

Hexoで画像の設定する

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoで画像を使いたいので、設定をしてみます。

設定を変更する

configを変更する

configの参考はコチラを。
http://hexo.io/docs/configuration.html

# Writing
new_post_name: :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: false
relative_link: false
highlight:
  enable: true
  line_number: true
  tab_replace:

post_asset_folder: true

とします。

記事を追加する

次のプラグインの記事用を追加してみます。

[19:54:00][f_prg@mba:blog]# hexo new hexo_plugin
[info] File created at /Users/f_prg/Documents/project/node-hexo-blog/blog/source/_posts/hexo_plugin.md
[19:54:42][f_prg@mba:blog]# ls -al source/_posts/
total 104
drwxr-xr-x  10 f_prg  staff    340  8 10 19:54 .
drwxr-xr-x   3 f_prg  staff    102  8 10 11:59 ..
-rw-r--r--@  1 f_prg  staff   6148  8 10 19:45 .DS_Store
-rw-r--r--   1 f_prg  staff    814  8 10 11:59 hello-world.md
drwxr-xr-x   4 f_prg  staff    136  8 10 19:43 hexo_install
-rw-r--r--   1 f_prg  staff  22155  8 10 19:48 hexo_install.md
drwxr-xr-x   2 f_prg  staff     68  8 10 19:54 hexo_plugin
-rw-r--r--   1 f_prg  staff     55  8 10 19:54 hexo_plugin.md
-rw-r--r--   1 f_prg  staff   1419  8 10 19:50 hexo_site_setup.md
-rw-r--r--   1 f_prg  staff   6338  8 10 18:08 mac_ruby_rbenv.md
[19:54:53][f_prg@mba:blog]#

記事のmarkdownファイルとディレクトリが作成されてます。

記事に画像を追加するには

こちらは、Hexoインストール時の記事で使った際のものですが、下記のように使います。

![キャプチャです](/2014/08/10/hexo_install/hexo_install_001.png "キャプチャです")

専用のフォルダがあるのですが、
まだまだ使いづらいですね。都度あげるのは辛い作業になりますね。
適当にアップしても、いい感じようなのが否めません。

補足

専用のタグもあるのですが、Markdownをそのままコピペできないので私は使ってません。
http://hexo.io/docs/tag-plugins.html#Image

まとめ

ブログとすると、画像のアップロードの楽にしたい希望はありますね。
プラグインがあるようなので期待してみます。

参考資料・リンク

http://hexo.io/