GitLab에서 Hugo 블로그를 간단히 공개하는 방법

최근에 사용하기 시작했다GitLab는 한마디로'좋다'는 뜻이다.지트랩은 패러디GitHub로 제작됐지만, 무료 기능은 조금 다르다.특히 큰 것은 아래다.

개인 창고 사용

GiitLabCI 사용 가능

지금까지 CI와 창고 관리는 다른 서비스에서 많이 사용되고 있다고 생각합니다.GiitHub+Wercker와 GiitHub+Travis 등이다.
하지만 GitLab은 창고(master)로 제작GitLab Pages하고 GitLab CI로 자동 처리하면 바로 페이지를 공개할 수 있다.지금까지 CI 서비스와 연계해 창고 구축을 해왔기 때문에 그 부근은 상당히 간단하다고 생각합니다.
https://gitlab.com/groups/pages
예를 들어hugo 페이지를 제작하려면 다음과 같은 절차에 따라 공개할 수 있다.

$ git clone [email protected]:pages/hugo.git
$ cd hugo
$ rm -rf .git

# 自分のプロジェクト(リポジトリ)にhugoを作成して以下のコマンドを実行
$ git init
$ git remote add origin [email protected]:$USER/hugo.git

# baseurlを自身のものに変更する
$ vim config.toml
baseurl       = "https://$USER.gitlab.io/hugo/"

$ git add .
$ git commit -m "first"
$ git push -u origin master

# ページが出来上がるまで多少待たなくてはいけないかもしれません
$ curl -sL $USER.gitlab.io/hugo

아주 간단하네요..gitlab-ci가 배치되면 원본 파일 페이지를 누르면 구축되고 업데이트됩니다.
여기, $user.gitlab.io 등 항목(창고)의 이름으로 명명되면 주소가 1위가 되고, 이외에 $user.gitlab.io/repo입니다.
이러한 관계로 여기. 중의 사이트 발생기를 사용하여 페이지를 제작할 때 사용하는 주소에 따라 원본을 변경해야 한다.
예를 들어 Octopress$user.gitlab.io의 형식으로 페이지를 만들려면 아래 창고 삭제/octopress를 참고하십시오.그나저나 이 창고를 깃랩$user.gitlab.io 창고에 쓰면 아무것도 하지 않아도 바로 페이지를 표시할 수 있다.다만, _config.yml의 URL은 사용자의 것으로 변경되어야 합니다.

공식이 $user.gitlab.io/octopress 형식으로 예정되어 있기 때문에 코드를 변경하지 않으면 제대로 표시할 수 없습니다.구체적으로 코드에서 /octopress라는 지정을 삭제해야 한다.1등이 아닌 창고명을 사용하려면 창고명으로 바꿔야 한다/octopress.
물론 팀도 이용할 수 있기 때문$user인 곳은 이미 깃랩에서 취득한 계정이 아니면 변경할 수 있다.
특히 CI와의 합작이 작용할 것 같아서요.이 점은 간단한 사이트 제작 절차도 뚜렷하다.

Hugo의 아카이브 페이지 만들기

Hugo에 모든 글을 한눈에 볼 수 있는 페이지를 만듭니다.나는 아래의 보도를 통해 대충 알 수 있을 것이라고 생각한다.
자신의 경우 다음과 같은 포석이다.
layouts/archive/single.html

{{ partial "head" . }}
{{ partial "header" . }}
<div id="container">
   <div class="outer">
        <div id="blog-archives" class="category">
          {{ .Content }}
          {{ range (where .Site.Pages "Type" "post") }}
            <h1>
        <time datetime="{{ .Date }}" itemprop="datePublished">{{ .Date.Format .Site.Params.date_format }}</time>
                <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
            </h1>
          {{ end }}
        </div>
    </div>
</div>
{{ partial "footer" . }}
</body>
</html>

맞춤 제작은 잘 안 됐어요.

Hugo의 검색 시스템

Hugo의 검색 시스템을 구축하는 방법입니다.
대체로 다음과 같은 코드.구체용Grunt.js과Lunr.js로Hugo구축.
이것은 스스로 세운 방법이다.작성한 대로 설정config하지 않은parmalink한 경우 출력을 얻을 수 있으나 설정한 경우에는 사용할 수 없습니다.그래서 갑자기 셸스크립트로 다시 쓰도록 강요했다.이거 수정Gruntfile.js하면 돼요. 솔직히 귀찮아요...

#!/bin/zsh
d=${0:a:h:h}
# backup
h=${0:a:h}
if cat $j|jq . ;then
    cp $j $h
fi
h=$h/PagesIndex.json
j=$d/static/bower_components/lunr.js/PagesIndex.json
t=`cat $j |jq '.[]'|sed -e 's#/post##g'`
a=`cat $j | sed -e 's#/post##g'`
echo $a >! $j
t=`echo $t|jq -r '.href'|cut -d - -f 1-4`

for (( i=1;i<=`echo "$t"|wc -l`;i++ ))
do
    f=`echo "$t"|awk "NR==$i"`
    c=`echo $f|tr '-' '/'`
    sed -i "" "s#${f}#${c}#g" $j
done

cat $j

diff $j $h

우선, 문장 중Grntfile.js을 적절하게 수정하고 제작하여 구축 후 스크립트와 같은 절차를 수행한다.
출력 파일을 /bower_components/lunr.js/PagesIndex.json에 놓습니다.
layouts/partials/widgets/search.html

<div class="widget-wrap">
<input id="search" type="text" placeholder="search">
<ul id="results">
</ul>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/bower_components/lunr.js/lunr.min.js"></script>
</div>

js/search.html

var lunrIndex,
    $results,
    pagesIndex;

// Initialize lunrjs using our generated index file
function initLunr() {
    // First retrieve the index file
    $.getJSON("/bower_components/lunr.js/PagesIndex.json")
        .done(function(index) {
            pagesIndex = index;
            console.log("index:", pagesIndex);

            // Set up lunrjs by declaring the fields we use
            // Also provide their boost level for the ranking
            lunrIndex = lunr(function() {
                this.field("title", {
                    boost: 10
                });
                this.field("tags", {
                    boost: 5
                });
                this.field("content");

                // ref is the result item identifier (I chose the page URL)
                this.ref("href");
            });

            // Feed lunr with each file and let lunr actually index them
            pagesIndex.forEach(function(page) {
                lunrIndex.add(page);
            });
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.error("Error getting Hugo index flie:", err);
        });
}

// Nothing crazy here, just hook up a listener on the input field
function initUI() {
    $results = $("#results");
    $("#search").keyup(function() {
        $results.empty();

        // Only trigger a search when 2 chars. at least have been provided
        var query = $(this).val();
        if (query.length < 2) {
            return;
        }

        var results = search(query);

        renderResults(results);
    });
}

/**
 * Trigger a search in lunr and transform the result
 *
 * @param  {String} query
 * @return {Array}  results
 */
function search(query) {
    // Find the item in our index corresponding to the lunr one to have more info
    // Lunr result: 
    //  {ref: "/section/page1", score: 0.2725657778206127}
    // Our result:
    //  {title:"Page1", href:"/section/page1", ...}
    return lunrIndex.search(query).map(function(result) {
            return pagesIndex.filter(function(page) {
                return page.href === result.ref;
            })[0];
        });
}

/**
 * Display the 10 first results
 *
 * @param  {Array} results to display
 */
function renderResults(results) {
    if (!results.length) {
        return;
    }

    // Only show the ten first results
    results.slice(0, 10).forEach(function(result) {
        var $result = $("<li>");
        $result.append($("<a>", {
            href: result.href,
            text: "» " + result.title
        }));
        $results.append($result);
    });
}

// Let's get started
initLunr();

$(document).ready(function() {
    initUI();
});

이렇게 하면 검색 시스템이 완성된다.Hugo Build로 Pages Index를 동시에 제작하면 OK.