CMSを作りたくて、この動画を見ながら試してみました。

ponzuとは

Goで作られているヘッドレスCMS

ponzu - GitHub

環境

• Go 1.13.5

使い方

インストール

1

$ go get -u https://github.com/ponzu-cms/ponzu/...

ponzuプロジェクト作成

以下コマンドでGOPATH/src以下にプロジェクトが作成される

1

$ ponzu new github.com/sakkuntyo/ponzu-project

以下cd先にプロジェクトが作られている

1
2
3

$ cd ${GOPATH}/src/github.com/sakkuntyo/ponzu-project
$ ls
CONTRIBUTING.md  Dockerfile  LICENSE  README.md  addons  cmd  content  deployment  docs  examples  ponzu-banner.png

この後の操作はこのデイレクトリ内で行う

テンプレコードを作成

1
2
3
4

テンプレートコード作成
ponzu generate content コンテンツ名 コンテンツ内のデータ名:データ型:[入力方法] [コンテンツ内のデータ名:データ型:[入力方法]] ..
$ ponzu generate content author name:string photo:string:file bio:string:richtext
これでテンプレートコード(content/author.go)が作成される

ponzuをビルド

1
2

$ ponzu build
これでponzu-server、及び実行に必要なライブラリ(cmd以下)が配置される

ponzu起動

1
2
3
4
5
6

$ ponzu run
何故かうまくいかないが、もう一度実行すると起動できる
$ ponzu run
Server listening at localhost:8080 for HTTP requests...

Visit '/admin' to get started.

起動中にlocalhost:8080/adminにアクセスする事でCMSのGUIが表示される

CMSで出来ること

記事の追加

左メニューからコンテンツを選び、NEWを選択する事で、記事が書ける

SAVEをすると、内容がsystem.db(BoltDB)に保存される

書いた記事の参照

json形式で記事が参照できる、確認してみる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Authorをgenerate、記事追加したとして、以下コマンドで確認
$ curl "localhost:8080/api/content?type=Author&id=1"
{
    "data": [
        {
            "bio": "ponzu\u305f\u3081\u3057\u3066\u307f\u305fbio",
            "id": 1,
            "name": "ponzu\u305f\u3081\u3057\u3066\u307f\u305f",
            "photo": "/api/uploads/2020/02/4fd4c0e572a4fed83f1d1dc5e64a2ab8600.jpg",
            "slug": "author-77f9980f-db1e-421b-bd3b-ce0879e9d670",
            "timestamp": 1580577064000,
            "updated": 1580577184147,
            "uuid": "77f9980f-db1e-421b-bd3b-ce0879e9d670"
        }
    ]
}

これをブラウザ側でプレビューしてあげたりするとブログっぽくなるのかな

今まで、hexoやexpress-generatorのコマンドラインツールを使用するためには、
npm install -g をしてプロジェクト外にインストールする必要がありました。
npm5.2.0ではnpxが追加され、プロジェクト内にインストールした場合でも使用出来る様になりました。

これからは、プロジェクト内にhexoやexpress-generator等をインストールしておけば使えます。

環境

• Ubuntu18.04

npxを使わない場合

1
2
3
4
5
6
7
8

expressが見つからないと言われる
$ express express-project

グローバルインストールする
$ npm install -g express-generator

コマンドが使える様になる
$ express express-project

npxを使う場合

1
2
3
4
5
6
7
8

expressが見つからないと言われる
$ express express-project

プロジェクトにインストールする
$ npm install express-generator

npxでプロジェクト内のexpressを実行
$ npx express express-project

basenameの初めて見る使い方を見たのでメモ

環境

• Ubuntu18.04
  • bash

出来ること

パスで指定されたファイルやフォルダの名前だけを出力する

以下の様にファイルが配置されているとします。

1
2
3
4
5
6
7
8

$ mkdir test
$ cd test
$ mkdir dir1
$ touch dir1/test.sh
$ find
.
./dir1
./dir1/test.sh

ファイル名を出力する

パスは要らない時などに使える。

1
2

$ basename ./dir/test.sh
test.sh

ファイル名の末尾文字を削除し出力する

これで拡張子を消したりできる。

1
2

$ basename ./dir/test.sh .sh
test

Google検索エンジンの検索に出すために、
記事を追加する度にサーチコンソールにURLを登録していました、
sitemap.xmlを登録する事で、都度登録する必要がなくなります。

手順

sitemap.xml生成プラグインをインストール

1
2
3

$ npm install hexo-generator-seo-friendly-sitemap --save
package.jsonをgitに追加します
$ git add package.json

_config.ymlに追記

以下の行をHexoプロジェクト直下の_config.ymlに追記する事で、
hexo generate時にsitemapが作成される様になります。

1
2

sitemap:
  path: sitemap.xml

hexo generateをしてみます

1
2
3
4
5
6
7
8

$ hexo generate
INFO  Start processing
INFO  Files loaded in 614 ms
INFO  Generated: post-sitemap.xml
INFO  Generated: sitemap.xml
INFO  Generated: tag-sitemap.xml
INFO  Generated: index.html
INFO  5 files generated in 1.14 s

今回幾つかsitemapが作成された事がわかります。

• post-sitemap.xml
  • 記事毎のページが記載されたsitemap
• tag-sitemap.xml
  • タグ毎のページが記載されたsitemap
• sitemap.xml
  • 内容見てもよくわからない(?)

sitemapをサーチコンソールに登録

sitemapの登録はここから行えます。

登録に失敗する場合は、
_config.ymlに記述しているURL部分が間違っている可能性があります。
このURLはデプロイ後にアクセスするページのURLを指定しておく必要があります。

以下例

1

url: https://sakkuntyo.github.io

go installしてたら「gcc.exe」が無いとビルドできないぞ！
と言われたので、mingw64のバイナリから持ってくる方法を覚えました。

前提

• Windows10
  • Git

手順

Gitをインストール

Windows向けのGitはここからインストーラを入手できます。

起動し、全て「はい」を選択したとして次の手順に進みます。

MinGW-w64のバイナリをダウンロード

ここの下の方にあるx86_64-win32-sjljを選択しダウンロードします。

このファイルはダウンロードフォルダに置いておいてください。
解凍するために、7zipをインストールします。

7-zipのインストール

ここからダウンロードし、インストールします。

解凍

GitBashを管理者権限で開き、以下コマンドを実行して解凍します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$ cd ~/Downloads
前半は7z.exeのパス、xはeXtractのx、最後は7zipファイルのファイル名
$ /c/Program\ Files/7-Zip/7z.exe x x86_64-8.1.0-release-posix-sjlj-rt_v6-rev0.7z
7-Zip 19.00 (x64) : Copyright (c) 1999-2018 Igor Pavlov : 2019-02-21

Scanning the drive for archives:
1 file, 52785774 bytes (51 MiB)

Extracting archive: x86_64-8.1.0-release-posix-sjlj-rt_v6-rev0.7z
--
Path = x86_64-8.1.0-release-posix-sjlj-rt_v6-rev0.7z
Type = 7z
Physical Size = 52785774
Headers Size = 109370
Method = LZMA2:26 LZMA:20 BCJ2
Solid = +
Blocks = 2

Everything is Ok

Folders: 340
Files: 13669
Size:       527855563
Compressed: 52785774

解凍が終わると、またコマンドが打てる様になるため、mingw64フォルダが作成されている事を確認します。

1
2

$ ls
mingw64  x86_64-8.1.0-release-posix-sjlj-rt_v6-rev0.7z

gccなどをGitのインストールディレクトリにコピー

GitBashを管理者権限で開き、以下のコマンドを実行します。

1
2
3
4

解凍してできたmingw64フォルダ内のbinフォルダに移動
$ cd ~/Downloads/mingw64/bin
tarで既存のファイルに上書きはしないオプションを付けて、Gitのmingw64/binにコピー
$ tar -cvf - . | tar -xvf - --keep-newer-files -C /c/Program\ Files/Git/mingw64/bin/

この後GitBashを起動し直すと、gccが使用出来る様になっています。

WSLのUbuntuを使っていて、sudoの度に「めんどくさいなあ」と思っていた時に見つけた方法です。

環境

• Windows 10
  • Ubuntu18.04(WSL)
  • Ubuntu16.04(WSL)

手順

Windowsの機能「Windows Subsystem for Linux」を有効化する

Windowsキー -> 「機能の有効化」と検索し、「Windowsの機能の有効化または無効化」を開く -> Windows Subsystem for Linuxを探してチェックする

その後、再起動する

Windows StoreからUbuntuをインストールする

スタートメニューから「Microsoft Store」を開く -> どれでもよいのでUbuntuをインストール

初期ユーザー名を「root」で指定する

スタートメニューからUbuntuを開き、ユーザー名を聞かれたら「root」と入力

既に存在しているユーザーです！(英語)と言われるが、そのまま閉じる

再度Ubuntuを起動する

なんと、rootでログインしています。

環境

• Ubuntu 16.04(KAGOYA VPS KVM)

Apacheって何

• ブログやホームページを公開するために使う事が出来るウェブサーバ

特徴

• phpやCGIを用いた動的コンテンツの表示が出来る
• リバースプロキシとしても使用できる
• 使われ始めてからの歴史が長い

初期ページを表示するまでの手順

ポート解放とApacheのインストール、起動

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$ apt update

ufw(ファイアウォール)をインストール
$ apt install ufw

インストール直後はufwはファイアウォールとして指定されないためufwを有効化
$ ufw enable

「このコマンドを実行するとssh接続が切れるかも知れませんがいいですか？」と聞かれるので y を入力してEnter

sshのポートを開く
これを行わないとssh切断したあと接続出来なくなってしまいます！
$ ufw allow 22

Apacheが使用するポートを開く
$ ufw allow 80

Apacheをインストールする
$ apt install apache2

Apacheが稼働している事を確認する
$ curl localhost && echo success || echo failed

successと表示されればApacheは起動出来ています。
表示された長いhtmlはデフォルトページのhtmlソースです。

自分のIPアドレスを確認する
$ ifconfig | grep "inet addr:"

192.168.1.xや127.0.0.1といったIPアドレスが表示されると思います
これらはローカルIPや、グローバルIPと呼ばれます。
127.0.0.1は、ループバックアドレスと呼ばれ、自分自身を表すIPアドレスとなります。

実際にページを表示してみる

同じネットワーク内の他のPCからウェブサーバを利用してみます。
ブラウザを起動し、先ほど確認したローカルIP、又はグローバルIPをアドレスバーに入力します。

このような画面が表示されると思います。

Apacheではこれが初期ページとして設定されています。

ページを追加、変更する

ページを追加する

Apacheがブラウザに送ってくれているhtmlは /var/www/html/ となっている様です。
ここを ドキュメントルート と呼びます。
ここにファイルを配置する事でApache経由で参照する事ができるようになります。

1
2
3
4

ドキュメントルートに移動する
$ cd /var/www/html/
新しいページのファイルを作成する、アクセスする際のページ名は「test.html」とします
$ echo "Hello World!" > ./test.html

実際にページを表示してみる

他のPCからページを
同じネットワーク内の他のPCからウェブサーバを利用してみます。
ブラウザを起動し、下記のようにアドレスバーに入力します。

この様な画面が表示されます。

以上となります、Nginxが気になる方はこちら

https://qiita.com/noma3629/items/807f25f9eb13525eebef

環境

• Ubuntu16.04(KAGOYA VPS KVM)

Nginxって何

• Apacheの代替となり得るWebサーバ

Apacheとの違い

• C10Kをクリアしていて静的コンテンツを返すレスポンスが早い
  • C10Kとは・・・クライアント一万人接続問題の事
• イベント駆動
  • イベント駆動のおかげでスレッドを有効に使う事ができるため早い
  • 一応Apacheでもイベント駆動には出来るがNginxの方が早い

じゃあApacheは良くないの？

Apacheの武器はそこではなく、Nginxよりも古くからユーザーに使われているため、

様々なモジュールがあり、色々な用途に使う事ができます。

Nginxとは？Apacheとの違いについてエンジニアに聞いてみた
https://academy.gmocloud.com/qa/20160616/2761

phpやCGIを使用した動的な処理をしたい場合にはApache
速度やアクセス数を求めたい場合にはNginx
といった使い方がよさそうです。
どっちも使って、お互いのデメリットを埋める事も出来るそうです

初期ページを表示するまでの手順

ポート解放とNginxのインストール、起動

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$ apt update

ufw(ファイアウォール)をインストール
$ apt install ufw
インストール直後はufwはファイアウォールとして指定されないためufwを有効化
$ ufw enable
「このコマンドを実行するとssh接続が切れるかも知れませんがいいですか？」と聞かれるので y を入力してEnter

sshのポートを開く
これを行わないとssh切断したあと接続出来なくなってしまいます！
$ ufw allow 22

Nginxが使用するポートを開く
$ ufw allow 80

Nginxをインストールする
$ apt install nginx

Nginxが稼働している事を確認する
$ curl localhost
curlでウェブページにアクセスすると、そのページのhtmlの内容が帰って来ます

自分のIPアドレスを確認する
$ ifconfig | grep "inet addr:"
192.168.1.xや127.0.0.1といったIPアドレスが表示されると思います
これらはローカルIPや、グローバルIPと呼ばれます。
127.0.0.1は、ループバックアドレスと呼ばれ、自分自身を表すIPアドレスとなります。

実際にページを表示してみる

同じネットワーク内の他のPCからウェブサーバを利用してみます。
ブラウザを起動し、先ほど確認したローカルIP、又はグローバルIPをアドレスバーに入力します。

このような画面が表示されると思います。

Nginxではこれが初期ページとして設定されています。

ページを追加、変更する

ドキュメントルートを確認する

1
2

$ grep "root" -r /etc/nginx/ | grep "html"
/etc/nginx/sites-available/default:     root /var/www/html;

私の場合はこう表示されました。
Nginxのバージョンなどによってパスが違う様なので、このように調べるのが確実です。
どうやらページとなるhtmlファイルが保存されているのは　/var/www/html　ディレクトリの様です。
ここを ドキュメントルート と呼びます。

ページを追加する

1
2
3
4

ドキュメントルートに移動する
$ cd /var/www/html/
新しいページのファイルを作成する、アクセスする際のページ名は「test.html」とします
$ echo "Hello World!" > ./test.html

実際にページを表示してみる

他のPCからページを
同じネットワーク内の他のPCからウェブサーバを利用してみます。
ブラウザを起動し、下記のようにアドレスバーに入力します。

この様な画面が表示されます。

以上となります。

Apacheが気になる方はこちら

UbuntuとApacheでウェブサーバを立てる - Qiita

ターミナルに出てきた文字列をコピーしたい、
ただしマウス触るのがめんどくさい。。。
そんな時に

環境

• Ubuntu18.04

インストール

1
2

$ apt update
$ apt install xsel -y

使い方

1. 出力をクリップボードにコピー

1

$ echo "Hellow" | xsel --clipboard --input

この後右クリックやCtrl+Vで貼り付けできる様になっています。

GitHubにリポジトリを作りたい、
けどそのためだけにマウスを動かすのがめんどくさい、、、
そんな時に行う操作です。

環境

• Ubuntu18.04

手順

hubコマンドのインストール

1
2
3

$ sudo add-apt-repository ppa:cpick/hub
$ sudo apt update
$ sudo apt install hub

sshの設定

hubコマンドはsshの接続名(github.com)を使用するため、
~/.ssh/configにgithub.comの設定を記述しておく必要があります。

そのため、以下の様な内容にしておきます。

1
2
3

Host github.com
  Hostname github.com
  IdentityFile <githubに登録済の鍵のパス>

GitHubにリポジトリを作成する

1
2
3
4
5
6
7

$ mkdir test-repository
$ cd test-repository
$ hub init
以下のコマンドでgithubにリポジトリが作成されます、プライベートで作成する場合は-pオプションを付けます。
$ hub create
Updating origin
created repository: sakkuntyo/test-repository