particles.jsを使って動く星を描くHugoのテーマを作成した #JavaScript

hugo-theme-air

particles.jsが思った以上にカッコ良かったので、触ってみようかなと思い、作りました。

Demo : http://syui.github.io/hugo-theme-air/

基本的に以下でプレビューできると思います。

$ git clone https://github.com/syui/hugo-theme-air

$ cd hugo-theme-air

$ cp config.toml.backup config.toml

$ hugo new post/foo.md

$ hugo server
---------------------------------
$ curl 127.0.0.1:1313/hugo-theme-air

ビルドとアップロードは以下の様な感じのコマンドを叩けばよいのではないかと思います。

# build
$ hugo 

$ cd public

# make repository
# export YOUR_REPOSITORY="https://github.com/username/repository.git"
$ git init
$ git remote add origin $YOUR_REPOSITORY
$ git add .
$ git commit -m "first commit"
$ git push -u origin master

# push branch:gh-pages
$ git checkout -b gh-pages
$ git commit -m "open pages"
$ git push -u origin gh-pages

# preview
$ curl username.github.io/repository

動く背景をカスタマイズするには、static/js/particles.jsを編集します。値はドキュメントの方を読んでください。

あと、テーマを作成したらspf13/hugoThemes/にて、.gitmodulesにPull Requestすると良いかもです。

.gitmodules

+ [submodule "theme-name"]
+   path = theme-name
+   url = https://repository-url.git

particles.js

Configure, export, and share your particles.js configuration on CodePen:
http://vincentgarreau.com/particles.js/

基本的に、nodeやbowerで使えるので、以下のようにインストールします。

$ npm install particles.js

or

$ bower install particles.js --save

設定ファイルに書く場合は、本家のリポジトリにサンプルが置いてあります。例えば、bowerを使う場合は以下。テーマなどに使う場合は、直接書き込まず、このような設定ファイルを用いると楽かもしれませんね。

$ git clone https://github.com/VincentGarreau/particles.js

# bower
$ cat particles.js/bower.json
{
  "name": "particles.js",
  "main": "particles.js",
  "homepage": "https://github.com/VincentGarreau/particles.js",
  "authors": [
    "Vincent Garreau <vin.garreau@gmail.com>"
  ],
  "description": "A lightweight JavaScript library for creating particles.",
  "keywords": [
    "particle",
    "particles"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}