Macとかの雑記帳

Macにgitwebを導入してハイライト表示とgithub風テーマに変更する方法

gitの公開リポジトリをブラウザで見れるようにするgitwebを導入して、ソースコードのハイライト表示を有効にする方法。そしてgitwebのテーマをgithub風のものに変更する方法です。

私はシステムの設定ファイルやメモ書き、ちょっとした書類等もGitで管理しています。ブラウザで変更履歴を見たり、gitコマンドで変更前に戻したり出来ると管理が楽だからです。

githubや専用のアプリを使った方が簡単ですが、メモ書きや書類をgithubに上げる訳にはいきませんし、「ちょっと見る」だけの為にアプリを起ち上げるのが面倒なので自分専用のgitサーバーをMac上に構築しています。

Macにgitwebを導入する方法  目次

  1. gitwebとhighlightのインストール
  2. gitweb用にApacheでバーチャルホストを設定
  3. github風のテーマに変更
  4. gitweb用の設定ファイルgitweb.confを作成
  5. ハイライト表示の配色を変更する
  6. Descriptionに表示する文字列を変更

Gitサーバー(公開リポジトリ)の構築…

前回同様~/gitを作成して、そこを公開リポジトリとしている前提で進めていきます。詳細は前回の記事を参考にしてください。

1 gitwebとhighlightのインストール

公開リポジトリをブラウザで見れるようにするgitwebと、gitwebでソースを見たときに色付きで表示するhighlightをインストールします。

1-1 highlightのインストール

私はHomebrewを使っているので以下になります。

$ brew install highlight

 

Macportsで入れる場合は下のようになるかと。

$ sudo port install highlight

1-2 gitwebのインストール…

  • HomebrewでGitをインストールしていればgitwebもビルドされてます。/usr/local/shareにリンクが作成されており、すぐに使えるようになっています。あえて入れる必要はありません。
  • Macports等でGitを入れている場合も恐らくビルドされていると思いますが…詳しい事は知りません。探してみてください。
  • それ以外の方はGitのソースファイルを使って自力でビルドします。下記を参考にしてください。

1-3 gitwebを自力でビルドする

例として、デスクトップにGitのソースをダウンロードしてビルドしていきます。

$ cd ~/Desktop
$ git clone https://github.com/git/git.git

 

DLしたら、gitフォルダ内に移動して…

$ cd git

 

下記を実行します。下の場合/Library/WebServer/CGI-Executables/がgitwebのインストール先になります。

$ sudo make GITWEB_PROJECTROOT="/Users/kikaigyo/git" \
GITWEB_CSS="static/gitweb.css" \
GITWEB_LOGO="static/git-logo.png" \
GITWEB_FAVICON="static/git-favicon.png" \
GITWEB_JS="static/gitweb.js" \
bindir=/usr/local/bin \
gitwebdir=/Library/WebServer/CGI-Executables/gitweb \
install-gitweb

1行目の青字部分は公開リポジトリのパスを。6行目の赤字部分にはGitがインストールされているbinディレクトリのパスを入れます。

私はHomebrewでGitをいれているので「/usr/local/bin」になりますが、Gitを単体でいれた場合は/usr/binだったと思います。Xcode4.3で入れたGitを使う場合は/Applications/Xcode.app/Contents/Developer/usr/binになると思います。

どこにGitがあるか分からない場合は$ which gitを実行して調べてください。

which git

 

上記gitwebのインストールをターミナルで実行すると、下のような感じになります。

gweb_00-2

 

:以後の記事はHomebrewで入れたgitwebを使う前提での内容になります。それ以外の方はパス等を環境に合わせて変えてください。

↑ Macにgitwebを導入する方法  目次に戻る

2 gitweb用にApacheでバーチャルホストを設定

gitwebをブラウザで見れるようにするため、Apacheでバーチャルホストの設定をします。

最初にバーチャルホスト用のファイルhttpd-vhost.confを使えるようにします。設定済みの方は読み飛ばしてください。

$ sudo vi /etc/apache2/httpd.conf

上を実行してhttpd.confファイルを開きhttpd-vhost.confを使えるようにします。下のように623行目付近にあるコメントアウトを外してください。

gweb_01

2-1 バーチャルホストを設定

次に下を実行してバーチャルホストを設定します。

$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

開いたファイルの一番下に以下を追加します。4行目と6行目のgitwebのパスは、環境に合わせて変更してください。

## gitweb ##
<VirtualHost *:80>
	ServerName gitweb.local
	DocumentRoot /usr/local/share/gitweb
	ErrorLog "/private/var/log/apache2/gitweb-error_log"
	<Directory "/usr/local/share/gitweb">
		Options FollowSymLinks ExecCGI SymLinksIfOwnerMatch
		Order allow,deny
		Allow from all
		AddHandler cgi-script .cgi
		DirectoryIndex gitweb.cgi
		RewriteEngine On
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule ^.* /gitweb.cgi/$0 [L,PT]
	</Directory>
</VirtualHost>

2-2 hostsファイルを編集

/etc/hostsファイルに設定を追加し、バーチャルホストで設定したアドレスでアクセスできるようにします。

$ sudo vi /etc/hosts

上を実行して開いたファイルの一番下に、以下のような設定を追加します。赤字部分は、MacのIPアドレスを入れます。

192.168.x.xxx gitweb.local

gweb_03

ブラウザで見てみる

ここまで済んだら、動作確認もかねて一度ブラウザで見てみます。「システム環境設定」「共有」「Web共有」をONにして…

gweb_05

 

ブラウザで http://gitweb.local にアクセスします。下のような画面が表示されたら成功です。404エラーが出てますが、あとで設定し直すので気にしないでください。

gweb_04

 

自力でビルドした場合は404のエラーは表示されず、下のように公開リポジトリが表示されると思います。

gweb_06

 

↑ Macにgitwebを導入する方法  目次に戻る

3 github風のテーマに変更

kogakureという方が公開されてるgithub風のテーマに変更します。

gweb_07

kogakure/gitweb-theme @ GitHub

下を実行して/usr/lcoa/etcに移動し…

$ cd /usr/local/etc

 

gitwebというフォルダ名でダウンロードします。

$ git clone https://github.com/kogakure/gitweb-theme.git ./gitweb

gweb_08

Homebrewを使っているのでここに入れましたが、どこに入れても機能すると思います。好きなところに落としてください。

3-1 バーチャルホストに追記

先ほど設定したバーチャルホストに、ダウンロードしたテーマ用の設定を追加します。

$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

 

</VirtualHost>の前に以下を追加します。

Alias /gitweb /usr/local/etc/gitweb
<Directory "/usr/local/etc/gitweb">
	Order allow,deny
	Allow from all
</Directory>

 

最初に設定したものと合わせると下のようになります。

## gitweb ##
<VirtualHost *:80>
	ServerName gitweb.local
	DocumentRoot /usr/local/share/gitweb
	ErrorLog "/private/var/log/apache2/gitweb-error_log"
	<Directory "/usr/local/share/gitweb">
		Options FollowSymLinks ExecCGI SymLinksIfOwnerMatch
		Order allow,deny
		Allow from all
		AddHandler cgi-script .cgi
		DirectoryIndex gitweb.cgi
		RewriteEngine On
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule ^.* /gitweb.cgi/$0 [L,PT]
	</Directory>

	Alias /gitweb /usr/local/etc/gitweb
	<Directory "/usr/local/etc/gitweb">
		Order allow,deny
		Allow from all
	</Directory>
</VirtualHost>

 

↑ Macにgitwebを導入する方法  目次に戻る

4 gitweb用の設定ファイルgitweb.confを作成

gitwebの設定ファイルを/etcに作成します。

$ sudo vi /etc/gitweb.conf

下は私が使っているgitweb.confです。Ubuntuにgitwebをインストールすると設定ファイルも自動で作成してくれるのですが、それのコピーを変更したものです。

2行目の公開リポジトリのパスと、46行目のhighlightのパスは環境に合わせてください。また、33行目と49行目のサイト名は表示したい名称に変更してください。

# 公開リポジトリのパス。
$projectroot = "/Users/kikaigyo/git";

# tmpディレクトリのパス。
$git_temp = "/tmp";

# target of the home link on top of all pages
#$home_link = $my_uri || "/";

# html text to include at home page
#$home_text = "indextext.html";

# file with project list; by default, simply scan the projectroot dir.
#$projects_list = $projectroot;

# スタイルシートのパス。
@stylesheets = ("gitweb/gitweb.css" , "gitweb/highlight.css");

# javascriptのパス。
$javascript = "gitweb/gitweb.js";

# gitwebに表示するロゴのパス。
$logo = "static/git-logo.png";

# ファビコンのパス。
$favicon = "static/git-favicon.png";

# git-diff-tree(1) options to use for generated patches
#@diff_opts = ("-M");
@diff_opts = ();

# ページに表示されるサイト名。
$home_link_str = "Git.local";

## Added by admin ##
# Enable PATH_INFO so the server can produce URLs of the
# form: http://git.cdwilson.us/project.git/xxx/xxx
# This allows for pretty URLs *within* the Git repository, where
# my Apache rewrite rules are not active.
$feature{'pathinfo'}{'default'} = [1];

# description(リポジトリの簡単な説明を表示する部分)の幅。
$projects_list_description_width = 20;

# highlightのパス。
$highlight_bin = "/usr/local/bin/highlight";
 
# ブラウザのタブに表示されるサイト名。
$site_name = "GitWeb >> local repos";

# アバターの表示を有効にする。
$feature{'avatar'}{'default'} = ['gravatar'];

# ハイライトを有効にする。
$feature{'highlight'}{'default'} = [1];

# リポジトリのダウンロードを有効にする。下はzip形式でダウンロード。
$feature{'snapshot'}{'default'} = ['zip'];

※注意:上をコピペしてそのまま使うとエラーになります。空白行の先頭にスペースが入ってしまうのが原因のようです。Gistにgitweb.confを置いてあるので、そっちを使ってください。

gitweb.confで設定できることについて詳しく知りたい方は$ man gitweb.confをみてください。

ブラウザで見てみる

「システム環境設定」 → 「共有」 → 「Web共有」をOFF/ONするか、下記を実行してApacheを再起動します。

$ sudo apachectl restart

 

再起動後、ブラウザでhttp://gitweb.localにアクセスすると、gitwebのテーマが変更されていると思います。

gweb_09

 

好みによりますが、デフォルトよりは見栄えがよくなったと思います。

gweb_11

 

表示されるリポジトリが増えれば、多少githubっぽくなるかと。

gweb_11

 

↑ Macにgitwebを導入する方法  目次に戻る

5 ハイライト表示の配色を変更する

 

設定ファイルでhighlightを有効にしているので、下のようにコードが色付きで表示されます。

gweb_12

これもテーマを変更することができます。

5-1 使えるテーマと名称を調べる

最初に下を実行して使用できるテーマの名称を調べます。

$ highlight -w

この記事を書いている時点で、使用できるテーマは80個あります。

gweb_13

 

どのように表示されるか確認したい場合はtheme_examplesで幾つかサンプルを見ることができます。

gweb_14

theme_examples

5-2 テーマの変更

スタイルシート用に作成した/usr/local/etc/gitwebに移動し…

$ cd /usr/local/etc/gitweb

 

下を実行してハイライト表示用のスタイルシートを作成します。

$ highlight --print-style -s edit-xcode

赤字部分に使いたいテーマの名称を入れます。私はedit-xcodeというテーマにしたいので上のコマンドになります。

 

コマンド実行後にコードを見ると、テーマが変更されてると思います。

gweb_15

 

↑ Macにgitwebを導入する方法  目次に戻る

6 Descriptionに表示する文字列を変更

リポジトリの簡単な説明「Description」に表示する文字列を変更するには、公開リポジトリ側にあるdescriptionというファイルをエディタで開き…

gweb_16

 

ファイルの内容を表示したい文字列にすれば変更されます。

gweb_17

 

参考リンク:

8 ways to share your git repository

apache2 - How to set up Gitweb - Server Fault

Gitで遊ぶ | ももーい鯖覚書

Jeff Mesnil ― (Updated) Gitweb Setup on Mac OS X

スポンサード リンク