閱讀本文應具備的知識：

• 瞭解 git 和 github

• 具備 markdown 語法基礎知識

1.在 github 建立屬於自己的 github.io

• 你要有一個 github 賬號，並建立自己的 github.io 倉庫，不懂可以查我這篇文章 《在 github 上實現頁面託管預覽功能》

• 瞭解 markdown 語法，簡單入門可以檢視我這篇文章《如何入門簡書》

• 下載和安裝git,教程請自行百度

• 安裝了 node.js 並瞭解npm相關基礎知識；

2.配置 github 的 SSH key

為什麼要配置這個呢？因為你提交程式碼肯定要擁有你的github許可權才可以，但是直接使用使用者名稱和密碼太不安全了，所以我們使用ssh key來解決本地和伺服器的連線問題。

注意：本文是用 git bash 輸入所有命令，用 cmd 可能會出錯

$ cd ~/. ssh #檢查本機已存在的ssh金鑰

如果提示：No such file or directory 說明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"

注意：這裡的郵件地址指的是你註冊 github 的郵箱
然後連續3次回車，最終會生成一個檔案在使用者目錄下，開啟使用者目錄即c:\Users\你的電腦使用者名稱，找到.ssh資料夾下的id_rsa.pub檔案，記事本開啟並複製裡面的內容，開啟你的github主頁，進入個人設定 -> SSH and GPG keys -> New SSH key：

將剛複製的內容貼上到key那裡，title隨便填，儲存。

ssh -T git@github.com # 注意郵箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes，然後會看到：

You’ve successfully authenticated, but GitHub does not provide shell access.

注意，這裡一定要輸入YES，否則連線不成功

此時你還需要配置：

$ git config --global user.name "liuxianan"
 
// 你的github使用者名稱
$ git config --global user.email  "[email protected]"// 填寫你的github註冊郵箱

3.使用hexo寫部落格

$ npm install -g hexo

安裝，然後進入你想存放的資料夾，右鍵 git bash ，輸入

$ hexo init

hexo會自動下載一些檔案到這個目錄，包括node_modules，目錄結構如下圖：

$ hexo g # 生成
$ hexo s # 啟動服務

執行以上命令之後，hexo就會在public資料夾生成相關html檔案，這些檔案將來都是要提交到github去的：

第一次初始化的時候hexo已經幫我們寫了一篇名為 Hello World 的文章，預設的主題比較醜，開啟時就是這個樣子：

4.修改主題

既然預設主題很醜，那我們別的不做，首先來替換一個好看點的主題。這是 官方主題。

個人比較喜歡的2個主題：hexo-theme-jekyll 和 hexo-theme-yilia。

首先下載這個主題：

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下載的主題存放於theme資料夾中

修改_config.yml中的theme: landscape改為theme: yilia，然後重新執行hexo g來重新生成。

如果出現一些莫名其妙的問題，可以先執行hexo clean來清理一下public的內容，然後再來重新生成和釋出。

5.上傳到github

首先，ssh key肯定要配置好。

其次，配置_config.yml中有關deploy的部分：

deploy:
  type: git
  repository: [email protected].com:liuxianan/liuxianan.github.io.git
  branch: master

安裝外掛

$ npm install hexo-deployer-git --save

提交，輸入一下程式碼

$ hexo g
$ hexo d

注意：第一次上傳之前檢查一下根目錄是否有.deploy_git資料夾，如果有將其刪除，否則會出現將整個根目錄的檔案上傳。我們要的只是public裡面的檔案

6.寫部落格

我寫markdown用的是 sublime text 3 編輯器，當然你也可以用其他的。

$ hexo new '你的文章名字'

它會幫我們自動生成 markdown 檔案，位於 source_posts 資料夾下，下面是生成的模板

---
title: postName #文章頁面上的顯示名稱，一般是中文
date: 2013-12-02 15:30:16 #文章生成時間，一般不改，當然也可以任意修改
categories: 預設分類 #分類
tags: [tag1,tag2,tag3] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
description: 附加一段文章摘要，字數最好在140字以內，會出現在meta的description裡面
---

以下是正文

小提示：生成的文章在主頁中預設是全部顯示的，你也可以在文章中的某處加入<!--more--> 使其高度縮小，可以點選閱讀詳情

7.增加分類

yilia主題預設的分類是主頁和隨筆，如果我想增加多幾個分類，怎麼實現呢？

在 theme/yilia 資料夾下找到_config.yml 檔案，修改 menu

menu:
  主頁: /
  隨筆: /categories/隨筆/
  前端: /categories/前端/
  後端: /categories/後端/

然後在scaffolds資料夾中修改post.md檔案

---
title: {{ title }}
date: {{ date }}
tags:
---
categories:
隨筆
前端
後端
---

注意：你的文章必須有該分類，點選分類名才有效果，如下面例子的categories

---
title: 簡單入門小程式 01
date: 2017-09-27 20:23:13
tags: 小程式
categories: 前端
---
**文 | 小皮咖**

8.增加部落格訪問人數和訪問量

• 在theme/yilia/layout/_partial 下的footer.ejs , 在程式碼最後加入

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

增加文章訪問量

找到 article.ejs ，修改程式碼，增加如下程式碼。位置可以自選，但不能放於文首，這樣會出現主頁出現一片文章有訪問量，其他文章不出現訪問量的情況。

<div style="color:#666">
  <span id="busuanzi_container_page_pv">
    本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
  </span>
</div>

你也可以參考我存放的位置，程式碼如下：

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost">
  <div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <% } %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link) { %>
          <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
        <% } %>
      <% } else { %>
        <%- post.content %>
      <% } %>

      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
        <div class="page-reward">
          <a href="javascript:;" class="page-reward-btn tooltip-top">
            <div class="tooltip tooltip-east">
            <span class="tooltip-item">
              賞
            </span>
            <span class="tooltip-content">
              <span class="tooltip-text">
                <span class="tooltip-inner">
                  <p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i class="icon icon-quo-right"></i></p>
                  <div class="reward-box">
                    <% if(theme.alipay) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.alipay%>">
                      <span class="reward-type">支付寶</span>
                    </div>
                    <% } %>
                    <% if(theme.weixin) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.weixin%>">
                      <span class="reward-type">微信</span>
                    </div>
                    <% } %>
                  </div>
                </span>
              </span>
            </span>
          </div>
          </a>
        </div>
        <div style="color:#666">
          <span id="busuanzi_container_page_pv">
            本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
          </span>
        </div>
      <% } %>
    </div>
    <div class="article-info article-info-index">
      <%if(post.top){%>
        <div class="article-pop-out tagcloud">
          <i class="icon-tuding"></i>
          <a class="article-tag-list-link color3">置頂</a>
        </div>
      <% } %>

      <%- partial('post/tag') %>
      <%- partial('post/category') %>
      <% if (index && theme.show_all_link){ %>
        <p class="article-more-link">
          <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
        </p>

      <% } %>

      <% if (!index && theme.share_jia){ %>
        <%- partial('post/share') %>
      <% } %>
      <div class="clearfix"></div>
    </div>

  </div>

</article>
<% if (!index){ %>
  <%- partial('post/nav') %>
<% } %>
<%- partial('_partial/aside') %>


<% if (!index && post.comments){ %>
  <% if (theme.duoshuo){ %>
  <%- partial('post/duoshuo', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.wangyiyun){ %>
  <%- partial('post/wangyiyun', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.changyan_appid && theme.changyan_conf){ %>
  <%- partial('post/changyan', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.disqus || config.disqus_shortname){ %>
    <section id="comments">
      <div id="disqus_thread"></div>
        <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = '<%= theme.disqus || config.disqus_shortname %>'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </section>
  <% } %>

  <% if (theme.gitment_owner && theme.gitment_repo &&theme.gitment_oauth && theme.gitment_oauth.client_id && theme.gitment_oauth.client_secret){ %>
  <%- partial('post/gitment', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>

增加訪問人數和訪問量

找到 left-col.ejs，增加程式碼，位置自選

<div style="color:#666">
    <span id="busuanzi_container_site_pv">
      訪問量 <span id="busuanzi_value_site_pv"></span>
    </span><br>
    <span id="busuanzi_container_site_uv">
      你是第<span id="busuanzi_value_site_uv"></span>個來到我部落格的小夥伴,歡迎你！！٩(๑❛ᴗ❛๑)۶ 
    </span>
</div>

當然你可以修改上述程式碼，只要id不要修改即可，也可以參考我程式碼位置

<% var defaultBg = '#4d4d4d'; %>
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="<%=theme.root%>" class="profilepic">
            <img src="<%=theme.avatar%>" class="js-avatar">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="<%=theme.root%>"><%=theme.author%></a></h1>
        </hgroup>
        <% if (theme.subtitle){ %>
        <p class="header-subtitle"><%=theme.subtitle%></p>
        <%}%>

        <nav class="header-menu">
            <ul>
            <% for (var i in theme.menu){ %>
                <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
            <%}%>
            </ul>
        </nav>
        <nav class="header-smart-menu">
            <% for (var i in theme.smart_menu){ %>
                <% if(theme.smart_menu[i]){ %>
                <a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
                <% } %>
            <%}%>
        </nav>

        <nav class="header-nav">
            <div class="social">
                <% for (var i in theme.subnav){ %>
                    <a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
                <%}%>
            </div>
            <div style="color:#666">
            <span id="busuanzi_container_site_pv">
              訪問量 <span id="busuanzi_value_site_pv"></span>
            </span><br>
            <span id="busuanzi_container_site_uv">
              你是第<span id="busuanzi_value_site_uv"></span>個來到我部落格的小夥伴,歡迎你！！٩(๑❛ᴗ❛๑)۶ 
            </span>
        </div>
        </nav>

    </header>       
</div>

以上就是 hexo 與 github pages 搭建個人部落格的全部教程！希望對你有用~

感謝 ‘不蒜子’的 js 指令碼，實現了靜態檔案訪問量

想了解我更多可以前往我的個人部落格——小皮咖