index.html

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>balar Blog</title>
  <meta name="author" content="balar">
  <link rel="author" href="humans.txt">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  
    
  
  <meta name="description" content=" ">
  
  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="canonical" href="http://marefa9cb8.github.io/">
  <link href="/favicon.png" rel="icon">
  <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <link href="/atom.xml" rel="alternate" title="balar Blog" type="application/atom+xml">
  <meta name="og:type" content="website" />
  <meta name="og:site_name" content="balar Blog" />
  <meta name="og:title" content="balar Blog" />
  <meta name="og:description" content=" " />
  <meta name="og:url" content="http://marefa9cb8.github.io/index.html"/>
  <meta name="url" content="http://marefa9cb8.github.io/index.html">
  
  <meta name="distribution" content="global">
  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

  

</head>

<body   >
  <div id="front-wrapper">
  <div id="hero">
    <div id="hero-inner" >
      <div class="container">
        <div class="span10 offset1">
  <h1>
    balar Blog
  </h1>
  <h2>balar's Memorandum by octopess.</h2>
</div>

      </div>
    </div>
  </div>
  <section id="sub-hero">
    <div class="container">
      <div class="row">
  <div class="navbar">
    <div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="/">balar Blog</a>
    <ul class="nav">
      <li><a href="/blog/archives">All Blogs</a></li>
      
    </ul>
    <ul class="nav" data-subscription="rss">
      <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
      
    </ul>
      
    <form class="navbar-form" action="https://www.google.com/search" method="get">
      <fieldset role="search">
        <input type="hidden" name="q" value="site:marefa9cb8.github.io" />
        <input class="span2" type="text" name="q" results="0" placeholder="Search"/>
      </fieldset>
    </form>
      
    
  </div>
</div>

  </div>
</div>

    </div>
  </section>
  <div class="container">
    <div class="row" id="post-container">
    
    
    
      <article class="span4">
        <div class="article-format">

  <header>
    
      <h1 class="entry-title"><a href="/blog/2015/07/12/first-octopress/">Octopressの導入(1)</a></h1>
    
    
      <p class="meta">
        
  


  
    <span class="byline author vcard">by <span class="fn">balar</span></span>
  

 - 
        








  


<time datetime="2015-07-12T03:40:49+09:00" pubdate data-updated="true"></time> - 
        

posted in
<span class="categories">
  
    <a class='category' href='/blog/categories/octopress/'>octopress</a>
  
</span>


        
      </p>
    
  </header>


  <div class="entry-content"><h1>Octopressの導入(1)～準備から記事の公開まで～</h1>

<h2>目次</h2>

<ul>
<li><a href="#pre">準備</a></li>
<li><a href="#install">インストール</a></li>
<li><a href="#setting">設定</a></li>
<li><a href="#post">記事の作成</a></li>
<li><a href="#end">最後に</a></li>
</ul>


<h2><a name="pre"> 準備 </a></h2>

<h4>Rubyのインストール</h4>

<p>Rubyをインストールします。</p>

<ul>
<li>ArchLinuxの場合</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ sudo pacman -S ruby</span></code></pre></td></tr></table></div></figure>


<p></p>

<p>bundlerをインストールします。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ gem install bundler</span></code></pre></td></tr></table></div></figure>


<h4>Gitのインストール</h4>

<p>Gitをインストールします。<br/>
* ArchLinuxの場合</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ sudo pacman -S git</span></code></pre></td></tr></table></div></figure>


<p></p>

<h4>GItHubでのリポジトリ作成</h4>

<p><a href="https://github.com/">GitHub</a>でリポジトリを作成します。<br/>
リポジトリ名は<em>username.github.io</em>とします。<br/>
<em>username</em>には自分のユーザー名を入力します。</p>

<h2><a name="install"> インストール </a></h2>

<p>Octopressをインストールします。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git clone git://github.com/imathis/octopress.git octopress
</span><span class='line'>$ cd octopress
</span><span class='line'>$ bundle install
</span><span class='line'>$ rake install</span></code></pre></td></tr></table></div></figure>


<h2><a name="setting"> 設定 </a></h2>

<h4>Gitの設定</h4>

<p>Gitのユーザー情報を設定します。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git config --global user.name "username"
</span><span class='line'>$ git config --global user.email "username@example.com"</span></code></pre></td></tr></table></div></figure>


<p>次に、鍵の設定をします。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ ssh-keygen -t rsa -C "username@example.com"</span></code></pre></td></tr></table></div></figure>


<p>
GitHubの<a href="https://github.com/settings/profile">Personal settings</a>のページを開きます。<br/>
左側のメニューより<a href="https://github.com/settings/ssh">SSH Keys</a>のページを開きます。<br/>
<em>ADD SSH key</em>をクリックし、Titleは任意の名称を、Keyには先程生成した鍵(<code>./ssh/id_rsa.pub</code>)の内容を書き込み、最後にAdd keyをクリックします。</p>

<h4>Octopressの初期設定</h4>

<p>_config.ymlを編集します。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>title:              # Used in the header and title tags
</span><span class='line'>subtitle:           # A description used in the header
</span><span class='line'>author:             # Your name, for RSS, Copyright, Metadata</span></code></pre></td></tr></table></div></figure>


<p>上記の項目を自身の情報に編集します。(他の情報も必要に応じて編集します)</p>

<h4>OctopressのGitHubへのデプロイ設定</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake setup_github_pages
</span><span class='line'>Enter the read/write url for your repository:</span></code></pre></td></tr></table></div></figure>


<p>と表示されるので、先程作成したGitHubのページのリポジトリURLを指定します。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git@github.com:username/username.github.io.git</span></code></pre></td></tr></table></div></figure>


<p><em>username</em>には自分のユーザー名を入力します。<br/>
最後に以下のコマンドを入力します。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake generate
</span><span class='line'>$ rake deploy</span></code></pre></td></tr></table></div></figure>


<p>これで <a href="http://username.github.io">http://username.github.io</a> にアクセスすると出来上がっています。<br/>
追記</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake gen_deploy</span></code></pre></td></tr></table></div></figure>


<p>でも上記の二つのコマンドを入力したことになります。</p>

<h2><a name="post"> 記事の作成 </a></h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake new_post
</span><span class='line'>Enter a title for your post:</span></code></pre></td></tr></table></div></figure>


<p>と表示されるので、記事のタイトルを入力します。(注：日本語入力不可)<br/>
すると、</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>source/_posts/*-*-*-new-post.markdown</span></code></pre></td></tr></table></div></figure>


<p>という記事が作成されるので、それを編集します。<br/>
記事の記法はMarkdownです。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>---
</span><span class='line'>layout: post
</span><span class='line'>title: "new-post"
</span><span class='line'>date: *-*-* *:*:* 
</span><span class='line'>comments: true
</span><span class='line'>categories: [category1, ...]
</span><span class='line'>---
</span><span class='line'>ここに記事を書きます。</span></code></pre></td></tr></table></div></figure>


<p>記事を書いたらデプロイします。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake generate
</span><span class='line'>$ rake deploy</span></code></pre></td></tr></table></div></figure>


<h2><a name="end"> 最後に </a></h2>

<p>以上でOctopressの導入が完成しました。<br/>
次回はテーマの変更について書こうと思います。</p>

<p>Fin.</p>
</div>
  
  


</div>

      </article>
    
    </div>
      <div class="row">
        <ul class="pager">
          
          
        </ul>
      </div>
  </div>
</div>


  <div id="footer-widgets">
  <div class="container">
    <div class="row">
  <div class="span3">
    <h2>recent posts</h2>
    <ul class="recent_posts">
      
        <li>
          <a href="/blog/2015/07/12/first-octopress/">Octopressの導入(1)</a>
        </li>
      
    </ul>
    <h2><a href="/blog/archives">archives</a></h2>
  </div>
  <div class="span6">
    
<h2>recent public projects</h2>
<dl id="gh_repos" class="dl-horizontal" data-github-user="marefa9cb8" data-github-repo-count="0" data-github-skip-forks="true">
  <dd class="loading">Status updating...</dd>
</dl>
<script src="/javascripts/github.js" type="text/javascript"> </script>
<script src="/javascripts/libs/jXHR.js" type="text/javascript"> </script>


  </div>
  <div class="span3">
    
<h2>twitter</h2>
<a href="https://twitter.com/marefa9cb8" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @marefa9cb8</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="tweet" data-twitter-user="marefa9cb8">
</div>


  </div>
</div>

  </div>
</div>
<footer class="footer">
  <div class="container">
    <p class="pull-left">
  <a href="/">balar Blog</a>
  - Copyright &copy; 2015 - balar
</p>
<p class="pull-right">
  
    <span>Designed by <a href="http://blog.hyfather.com" target="_blank">Nikhil
  Mungel</a>. Based on <a href="https://github.com/sevenadrian/foxslide"
  target="_blank">foxslide</a>.</span><br/>
  
  <span>
    Powered by <a href="http://octopress.org/" target="_blank">Octopress</a>.
  </span>
  <span>
    Cover photo
    by <a href="http://www.flickr.com/photos/69912667@N07/6778147487/"
    target="_blank">Carrie Nelson</a>.
  </span>
</p>

  </div>
</footer>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="/javascripts/libs/jquery-1.7.2.min.js" type="text/javascript"><\/script>')</script>
<script src="/javascripts/libs/bootstrap.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.tweet.js" type="text/javascript"></script>
<script src="/javascripts/jquery.instagram.js" type="text/javascript"></script>
<script src="/javascripts/libs/jquery.masonry.min.js" type="text/javascript"></script>
<script src="/javascripts/custom.js" type="text/javascript"></script>








  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>




</body>
</html>