index.html 52.7 KB
Newer Older
T
TRHX 已提交
1
<!DOCTYPE html>
T
TRHX 已提交
2
<html>
T
TRHX 已提交
3 4
<head>
  <meta charset="utf-8">
T
TRHX 已提交
5
  <meta name="baidu-site-verification" content="L6Lm9d5Crl"/>
T
TRHX 已提交
6
  
T
TRHX 已提交
7 8 9 10
  
  
  
  <title>如何使用Github Pages和 Hexo 搭建自己的独立博客 | TRHX&#39;s Blog - Live and Learn!</title>
T
TRHX 已提交
11
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
T
TRHX 已提交
12
  <meta name="description" content="这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程!">
T
TRHX 已提交
13 14
<meta name="keywords" content="Hexo,Github Pages">
<meta property="og:type" content="article">
T
TRHX 已提交
15
<meta property="og:title" content="如何使用Github Pages和 Hexo 搭建自己的独立博客">
T
TRHX 已提交
16 17
<meta property="og:url" content="http://yoursite.com/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/index.html">
<meta property="og:site_name" content="TRHX&#39;s Blog - Live and Learn!">
T
TRHX 已提交
18
<meta property="og:description" content="这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程!">
T
TRHX 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://i.imgur.com/l9qbq4X.png">
<meta property="og:image" content="https://i.imgur.com/qzNCltv.png">
<meta property="og:image" content="https://i.imgur.com/MrqA2oy.png">
<meta property="og:image" content="https://i.imgur.com/EdKdq8c.png">
<meta property="og:image" content="https://i.imgur.com/D4jX96g.png">
<meta property="og:image" content="https://i.imgur.com/RL60g7o.png">
<meta property="og:image" content="https://i.imgur.com/x7h42wm.png">
<meta property="og:image" content="https://i.imgur.com/RnrEl8h.png">
<meta property="og:image" content="https://i.imgur.com/0FqXlSu.png">
<meta property="og:image" content="https://i.imgur.com/jzyEME2.png">
<meta property="og:image" content="https://i.imgur.com/4PAjGms.png">
<meta property="og:image" content="https://i.imgur.com/CYnhV4W.png">
<meta property="og:image" content="https://i.imgur.com/vnTjW4z.png">
<meta property="og:image" content="https://i.imgur.com/NLHp4nz.png">
<meta property="og:image" content="https://i.imgur.com/UJt5utl.png">
<meta property="og:image" content="https://i.imgur.com/KWeHGF1.png">
<meta property="og:image" content="https://i.imgur.com/nNRZVDQ.png">
<meta property="og:image" content="https://i.imgur.com/ulwSVjM.png">
<meta property="og:image" content="https://i.imgur.com/DtH87DK.png">
<meta property="og:image" content="https://i.imgur.com/7vbeY3N.png">
<meta property="og:image" content="https://i.imgur.com/t3aGEQ2.png">
<meta property="og:image" content="https://i.imgur.com/tzpNdzk.png">
<meta property="og:image" content="https://i.imgur.com/ECHuTS9.png">
<meta property="og:image" content="https://i.imgur.com/qBFXpOL.png">
<meta property="og:image" content="https://i.imgur.com/2lUYsjZ.png">
<meta property="og:image" content="https://i.imgur.com/WNzFja7.png">
<meta property="og:image" content="https://i.imgur.com/hf7od2h.png">
<meta property="og:image" content="https://i.imgur.com/FeUbvsS.png">
T
TRHX 已提交
48
<meta property="og:updated_time" content="2018-08-23T16:42:01.200Z">
T
TRHX 已提交
49
<meta name="twitter:card" content="summary">
T
TRHX 已提交
50 51
<meta name="twitter:title" content="如何使用Github Pages和 Hexo 搭建自己的独立博客">
<meta name="twitter:description" content="这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程!">
T
TRHX 已提交
52 53 54
<meta name="twitter:image" content="https://i.imgur.com/l9qbq4X.png">
  
    <link rel="alternative" href="/atom.xml" title="TRHX&#39;s Blog - Live and Learn!" type="application/atom+xml">
T
TRHX 已提交
55 56
  
  
T
TRHX 已提交
57
    <link rel="icon" href="/img/favicon.png">
T
TRHX 已提交
58 59
  
  
T
TRHX 已提交
60
  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
T
TRHX 已提交
61
  
T
TRHX 已提交
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  
      <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <!-- 加载特效 -->
    <script src="/js/pace.js"></script>
    <link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
  <script>
      var yiliaConfig = {
          fancybox: true,
          animate: true,
          isHome: false,
          isPost: true,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false
      }
  </script>
T
TRHX 已提交
84
</head>
T
TRHX 已提交
85 86 87 88 89 90
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
T
TRHX 已提交
91 92 93
        
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>

T
TRHX 已提交
94
        <a href="/" class="profilepic">
T
TRHX 已提交
95
            
T
TRHX 已提交
96
            <img lazy-src="/img/avatar.png" class="js-avatar">
T
TRHX 已提交
97
            
T
TRHX 已提交
98 99
        </a>
        <hgroup>
T
TRHX 已提交
100
          <h1 class="header-author"><a href="/">TRHX</a></h1>
T
TRHX 已提交
101 102 103 104 105
        </hgroup>
        
        <p class="header-subtitle">天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣!</p>
        
        
T
TRHX 已提交
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
            <form>
                <input type="text" class="st-default-search-input search" id="local-search-input" placeholder="搜索一下" autocomplete="off">
            </form>
            <div id="local-search-result"></div>
        
        
            <script type="text/javascript">
                (function() {
                    'use strict';
                    function getMatchData(keyword, data) {
                        var matchData = [];
                        for(var i =0;i<data.length;i++){
                            if(data[i].title.toLowerCase().indexOf(keyword)>=0) 
                                matchData.push(data[i])
                        }
                        return matchData;
                    }
                    var $input = $('#local-search-input');
                    var $resultContent = $('#local-search-result');
                    $input.keyup(function(){
                        $.ajax({
                            url: '/search.json',
                            dataType: "json",
                            success: function( json ) {
                                var str='<ul class=\"search-result-list\">';                
                                var keyword = $input.val().trim().toLowerCase();
                                $resultContent.innerHTML = "";
                                if ($input.val().trim().length <= 0) {
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                }
                                var results = getMatchData(keyword, json);
                                if(results.length === 0){
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                } 
                                for(var i =0; i<results.length; i++){
                                    str += "<li><a href='"+ results[i].url +"' class='search-result-title'>"+ results[i].title +"</a></li>";
                                }
                                str += "</ul>";
                                $resultContent.empty();
                                $resultContent.append(str);
                                $('#switch-area').hide();
                            }
                        });
                    });
                })();
            </script>
        
T
TRHX 已提交
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                    </div>
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                    </ul>
                </div>
            </div>
        
        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
T
TRHX 已提交
196
                            <li><a  href="http://trhx.top">博客主页</a></li>
T
TRHX 已提交
197
                        
T
TRHX 已提交
198
                            <li><a  href="/archives/">所有文章</a></li>
T
TRHX 已提交
199
                        
T
TRHX 已提交
200
                            <li><a  href="/about/">关于我</a></li>
T
TRHX 已提交
201 202 203 204 205 206
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
T
TRHX 已提交
207
                                <a class="fl CSDN"  target="_blank" href="https://blog.csdn.net/qq_36759224" title="CSDN">CSDN</a>
T
TRHX 已提交
208
                            
T
TRHX 已提交
209
                                <a class="fl github"  target="_blank" href="https://github.com/TRHX" title="github">github</a>
T
TRHX 已提交
210
                            
T
TRHX 已提交
211
                                <a class="fl mail"  target="_blank" href="mailto:tanrenhou@126.com" title="mail">mail</a>
T
TRHX 已提交
212
                            
T
TRHX 已提交
213
                                <a class="fl qq"  target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273902448&site=qq&menu=yes" title="qq">qq</a>
T
TRHX 已提交
214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
                            
                        </ul>
                    </nav>
                </section>
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <a href="/tags/Github-Pages/" style="font-size: 10px;">Github Pages</a> <a href="/tags/Hexo/" style="font-size: 10px;">Hexo</a>
                    </div>
                </section>
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
T
TRHX 已提交
229 230 231 232 233
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://blog.csdn.net/qq_36759224">CSDN</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://home.cnblogs.com/u/TRHX/">博客园</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://github.com/TRHX">GitHub</a>
T
TRHX 已提交
234 235 236 237 238 239
                    
                    </div>
                </section>
                
                
            </div>
T
TRHX 已提交
240
        </div>
T
TRHX 已提交
241
    </header>
T
TRHX 已提交
242
</div>
T
TRHX 已提交
243

T
TRHX 已提交
244 245 246 247 248
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
T
TRHX 已提交
249
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">TRHX</a></h1>
T
TRHX 已提交
250
      </div>
T
TRHX 已提交
251 252 253 254
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                
T
TRHX 已提交
255
                    <img lazy-src="/img/avatar.png" class="js-avatar">
T
TRHX 已提交
256 257 258
                
            </a>
            <hgroup>
T
TRHX 已提交
259
              <h1 class="header-author"><a href="/" title="回到主页">TRHX</a></h1>
T
TRHX 已提交
260 261 262 263 264 265 266
            </hgroup>
            
            <p class="header-subtitle">天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣!</p>
            
            <nav class="header-menu">
                <ul>
                
T
TRHX 已提交
267
                    <li><a href="http://trhx.top">博客主页</a></li>
T
TRHX 已提交
268
                
T
TRHX 已提交
269
                    <li><a href="/archives/">所有文章</a></li>
T
TRHX 已提交
270
                
T
TRHX 已提交
271
                    <li><a href="/about/">关于我</a></li>
T
TRHX 已提交
272 273 274 275 276 277 278
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                <div class="social">
                    
T
TRHX 已提交
279
                        <a class="CSDN" target="_blank" href="https://blog.csdn.net/qq_36759224" title="CSDN">CSDN</a>
T
TRHX 已提交
280
                    
T
TRHX 已提交
281 282
                        <a class="github" target="_blank" href="https://github.com/TRHX" title="github">github</a>
                    
T
TRHX 已提交
283
                        <a class="mail" target="_blank" href="mailto:tanrenhou@126.com" title="mail">mail</a>
T
TRHX 已提交
284
                    
T
TRHX 已提交
285
                        <a class="qq" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273902448&site=qq&menu=yes" title="qq">qq</a>
T
TRHX 已提交
286 287 288
                    
                </div>
            </nav>
T
TRHX 已提交
289
        </header>
T
TRHX 已提交
290
    </div>
T
TRHX 已提交
291 292 293 294
</nav>
      <div class="body-wrap"><article id="post-如何使用Github Pages和Hexo搭建自己独立博客" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
T
TRHX 已提交
295
      <a  href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/" class="article-date">
T
TRHX 已提交
296 297
      <time datetime="2018-08-15T13:34:58.325Z" itemprop="datePublished">2018-08-15</time>
</a>
T
TRHX 已提交
298

T
TRHX 已提交
299 300 301 302 303 304 305 306
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
T
TRHX 已提交
307
        
T
TRHX 已提交
308 309
  
    <h1 class="article-title" itemprop="name">
T
TRHX 已提交
310
      如何使用Github Pages和 Hexo 搭建自己的独立博客
T
TRHX 已提交
311 312 313
    </h1>
  

T
TRHX 已提交
314

T
TRHX 已提交
315 316 317 318 319 320 321
      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/实用教程/">实用教程</a>
    </div>
T
TRHX 已提交
322 323 324


        
T
TRHX 已提交
325 326 327
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Github-Pages/">Github Pages</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/">Hexo</a></li></ul>
    </div>
T
TRHX 已提交
328

T
TRHX 已提交
329 330 331 332 333 334 335
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
T
TRHX 已提交
336 337 338
        <center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="http://music.163.com/outchain/player?type=2&id=534066497&auto=1&height=66"><br></iframe></center>

<h1 id="–-前言"><a href="#–-前言" class="headerlink" title="– 前言"></a><strong>– 前言</strong></h1><p>首先感谢您能访问我的博客:<a href="http://trhx.github.io" target="_blank" rel="noopener">TRHX’Blog</a> <br></p>
T
TRHX 已提交
339 340
<p>这是一篇有关如何使用 <font color="#DC143C">Github Pages</font><font color="#DC143C">Hexo</font> 搭建属于自己独立博客的详尽教程,本人是软件工程专业本科生,目前只学习了C和C++编程语言,对网站开发的有关知识几乎为零,这也是我搭建好自己的博客之后写的第一篇博客,刚开始搭建博客的时候自己也是网上各种百度,由于自己属于<font color="#DC143C">小白</font>那种,历经了千辛万苦才弄好,所以借这个机会写一篇小白真正能看懂的博客搭建教程,教你一步一步走向成功的彼岸! <br></p>
<p>推荐文章: <a href="http://www.cnblogs.com/jhzhu/p/3893297.html" target="_blank" rel="noopener">《我为什么写博客》</a> (By 知明所以)<br>      <a href="http://mindhacks.cn/2009/02/15/why-you-should-start-blogging-now/" target="_blank" rel="noopener">《为什么你应该(从现在开始就)写博客》</a>  (By 刘未鹏 | Mind Hacks)</p>
T
TRHX 已提交
341
<h1 id="–-入门"><a href="#–-入门" class="headerlink" title="– 入门"></a><strong>– 入门</strong></h1><blockquote>
T
TRHX 已提交
342 343 344 345 346 347 348
<p><strong>Github Pages</strong></p>
</blockquote>
<p>Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。</p>
<blockquote>
<p><strong>Hexo</strong></p>
</blockquote>
<p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。</p>
T
TRHX 已提交
349
<h1 id="–-安装Node-js"><a href="#–-安装Node-js" class="headerlink" title="– 安装Node.js"></a>– 安装Node.js</h1><p><a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">点击此处</a>访问官网,按需下载相应版本,默认安装可以了</p>
T
TRHX 已提交
350
<p><img src="https://i.imgur.com/l9qbq4X.png" alt=""></p>
T
TRHX 已提交
351
<p><br><br>注:本人在安装过程中出现了Warning 1909,无法创建快捷方式,这种情况很少出现,如果在安装过程中也有这种情况请参考百度文库(win10系统实测可行):<a href="https://wenku.baidu.com/view/4ad59110964bcf84b9d57ba5.html" target="_blank" rel="noopener">《Win7安装程序警告1909无法创建快捷方式》</a><br><br></p>
T
TRHX 已提交
352
<p><img src="https://i.imgur.com/qzNCltv.png" alt=""></p>
T
TRHX 已提交
353 354 355 356
<p><br></p>
<h1 id="–-安装Git"><a href="#–-安装Git" class="headerlink" title="– 安装Git"></a><strong>– 安装Git</strong></h1><p><a href="https://git-scm.com/download/win" target="_blank" rel="noopener">点击此处</a>访问官网,按需下载相应版本,默认安装即可 <br><br>参考资料:<a href="https://www.cnblogs.com/jytx/p/5602927.html" target="_blank" rel="noopener">《如何在windows下安装GIT》</a>  (By 俊雨廷休)<br>     <a href="http://git.oschina.net/progit/" target="_blank" rel="noopener">《Pro Git(中文版)》</a></p>
<p><br></p>
<h1 id="–-检验软件是否安装成功"><a href="#–-检验软件是否安装成功" class="headerlink" title="– 检验软件是否安装成功"></a><strong>– 检验软件是否安装成功</strong></h1><p>同时按下 Win 键和 R 键打开运行窗口,输入 <font color="#DC143C">cmd</font> ,然后输入以下命令,有相应版本信息显示则安装成功,若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠标,可以看到菜单里多了 <font color="#DC143C">Git GUI Here</font><font color="#DC143C">Git Bash Here</font>两个选项,第一个是<font color="#DC143C">图形界面的Git操作</font>,另一个是<font color="#DC143C">命令行</font></p>
T
TRHX 已提交
357
<blockquote>
T
TRHX 已提交
358
<p>$ git –version<br>$ node -v<br>$ npm -v   </p>
T
TRHX 已提交
359
</blockquote>
T
TRHX 已提交
360 361 362 363
<p><img src="https://i.imgur.com/MrqA2oy.png" alt=""></p>
<p><img src="https://i.imgur.com/EdKdq8c.png" alt=""></p>
<p><br></p>
<h1 id="–-Hexo安装"><a href="#–-Hexo安装" class="headerlink" title="– Hexo安装"></a><strong>– Hexo安装</strong></h1><p>选择一个磁盘,新建一个文件夹,自己重命名文件夹(如:我的文件夹为:<font color="#DC143C">E\TRHX_Blog</font>),博客相关文件将储存在此文件夹下,在该文件夹下右键鼠标,点击 <font color="#DC143C">Git Bash Here</font>,输入以下 npm 命令即可安装,第一个命令表示安装 hexo,第二个命令表示安装 hexo 部署到 git page 的 deployer,如图所示即为安装成功</p>
T
TRHX 已提交
364
<blockquote>
T
TRHX 已提交
365
<p>$ npm install hexo-cli -g<br>$ npm install hexo-deployer-git –save  </p>
T
TRHX 已提交
366 367
</blockquote>
<p><img src="https://i.imgur.com/D4jX96g.png" alt=""></p>
T
TRHX 已提交
368 369
<p><br></p>
<h1 id="–-Hexo初始化配置"><a href="#–-Hexo初始化配置" class="headerlink" title="– Hexo初始化配置"></a><strong>– Hexo初始化配置</strong></h1><p>在刚才新建的文件夹里面再次新建一个 <font color="#DC143C">Hexo</font> 文件夹(如:我的文件夹为:<font color="#DC143C">E\TRHX_Blog\Hexo</font>),进入该 <font color="#DC143C">Hexo</font> 文件夹右键鼠标,点击 <font color="#DC143C">Git Bash Here</font>,输入以下命令,如图所示则安装成功</p>
T
TRHX 已提交
370 371 372
<blockquote>
<p>$ hexo init</p>
</blockquote>
T
TRHX 已提交
373 374 375 376 377
<p><img src="https://i.imgur.com/RL60g7o.png" alt=""></p>
<p><br><br>Hexo 安装完成后,将会在指定文件夹中新建所需要的文件,Hexo 文件夹下的目录如下:</p>
<p><br><br><img src="https://i.imgur.com/x7h42wm.png" alt=""></p>
<p><br></p>
<h1 id="–-本地查看效果"><a href="#–-本地查看效果" class="headerlink" title="– 本地查看效果"></a><strong>– 本地查看效果</strong></h1><p>执行以下命令,执行完即可登录 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> 查看效果</p>
T
TRHX 已提交
378
<blockquote>
T
TRHX 已提交
379
<p>$ hexo generate<br>$ hexo server  </p>
T
TRHX 已提交
380 381 382 383 384
</blockquote>
<p>显示以下信息说明操作成功:</p>
<blockquote>
<p>INFO Hexo is running at <a href="http://0.0.0.0:4000/" target="_blank" rel="noopener">http://0.0.0.0:4000/</a>. Press Ctrl+C to stop.</p>
</blockquote>
T
TRHX 已提交
385
<p>登录 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> 查看效果:</p>
T
TRHX 已提交
386
<p><img src="https://i.imgur.com/RnrEl8h.png" alt=""></p>
T
TRHX 已提交
387 388
<p><br></p>
<h1 id="–-将博客部署到Github-Pages上"><a href="#–-将博客部署到Github-Pages上" class="headerlink" title="– 将博客部署到Github Pages上"></a><strong>– 将博客部署到Github Pages上</strong></h1><p>到目前为止,我们的本地博客就成功搭建了,但是现在我们只能通过本地连接查看博客,我们要做的是让其他人也能够访问我们的博客,这就需要我们将博客部署到Github Pages上<br></p>
T
TRHX 已提交
389
<p>一、注册 Github 账户:<a href="https://github.com" target="_blank" rel="noopener">点击此处</a>访问 Github 官网,点击 Sign Up 注册账户<br></p>
T
TRHX 已提交
390 391
<p>二、创建项目代码库:点击 <font color="#DC143C">New repository</font> 开始创建,步骤及注意事项见图:</p>
<p><img src="https://i.imgur.com/0FqXlSu.png" alt=""></p>
T
TRHX 已提交
392
<p><br><br>三、配置 <font color="#DC143C">SSH</font> 密钥:只有配置好 <font color="#DC143C">SSH</font> 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步,在你第一次新建的文件夹里面(如:我的文件夹为:<font color="#DC143C">E\TRHX_Blog</font><font color="#DC143C">Git Bash Here</font> 输入以下命令:</p>
T
TRHX 已提交
393
<blockquote>
T
TRHX 已提交
394
<p>$ ssh-keygen -t rsa -C “your <a href="mailto:email@example.com" target="_blank" rel="noopener">email@example.com</a></p>
T
TRHX 已提交
395
<font color="#00CD00">//引号里面填写你的邮箱地址,比如我的是<a href="mailto:tanrenhou@126.com" target="_blank" rel="noopener">tanrenhou@126.com</a></font>
T
TRHX 已提交
396
</blockquote>
T
TRHX 已提交
397 398
<p>之后会出现:</p>
<blockquote>
T
TRHX 已提交
399
<p>Generating public/private rsa key pair.<br>Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  </p>
T
TRHX 已提交
400
<font color="#00CD00">//到这里可以直接回车将密钥按默认文件进行存储</font>
T
TRHX 已提交
401
</blockquote>
T
TRHX 已提交
402 403
<p>然后会出现:</p>
<blockquote>
T
TRHX 已提交
404
<p>Enter passphrase (empty for no passphrase):  </p>
T
TRHX 已提交
405
<p><font color="#00CD00">//这里是要你输入密码,其实不需要输什么密码,直接回车就行</font><br>Enter same passphrase again:  </p>
T
TRHX 已提交
406
</blockquote>
T
TRHX 已提交
407 408 409 410 411 412 413 414 415 416 417
<p>接下来屏幕会显示:</p>
<blockquote>
<p>Your identification has been saved in /c/Users/you/.ssh/id_rsa.<br>Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.<br>The key fingerprint is:<br>这里是各种字母数字组成的字符串,结尾是你的邮箱<br>The key’s randomart image is:<br>这里也是各种字母数字符号组成的字符串  </p>
</blockquote>
<p>运行以下命令,将公钥的内容复制到系统粘贴板上</p>
<blockquote>
<p>$ clip &lt; ~/.ssh/id_rsa.pub</p>
</blockquote>
<p>四、在 GitHub 账户中添加你的公钥</p>
<p>1.登陆 GitHub,进入 <font color="#DC143C">Settings</font></p>
<p><img src="https://i.imgur.com/jzyEME2.png" alt=""></p>
T
TRHX 已提交
418 419 420 421 422 423 424
<p><br><br>2.点击 <font color="#DC143C">SSH and GPG Keys</font></p>
<p><br><br><img src="https://i.imgur.com/4PAjGms.png" alt=""></p>
<p><br><br>3.选择 <font color="#DC143C">New SSH key</font></p>
<p><br><br><img src="https://i.imgur.com/CYnhV4W.png" alt=""></p>
<p><br><br>4.粘贴密钥:</p>
<p><br><br><img src="https://i.imgur.com/vnTjW4z.png" alt=""></p>
<p><br><br>五、测试</p>
T
TRHX 已提交
425
<p>输入以下命令:<font color="#DC143C">注意:<a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>不要做任何更改!</font></p>
T
TRHX 已提交
426 427 428 429 430
<blockquote>
<p>$ ssh -T <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a></p>
</blockquote>
<p>之后会显示:</p>
<p><img src="https://i.imgur.com/NLHp4nz.png" alt=""></p>
T
TRHX 已提交
431
<p>输入 <font color="#DC143C">yes</font> 后会显示:</p>
T
TRHX 已提交
432 433
<p><img src="https://i.imgur.com/UJt5utl.png" alt=""></p>
<p>此时表示设置正确</p>
T
TRHX 已提交
434 435
<p>六、配置 Git 个人信息</p>
<p>Git 会根据用户的名字和邮箱来记录提交,GitHub 也是用这些信息来做权限的处理,输入以下命令进行个人信息的设置,把名称和邮箱替换成你自己的,名字可以不是 GitHub 的昵称,但为了方便记忆,建议与 GitHub  一致</p>
T
TRHX 已提交
436
<blockquote>
T
TRHX 已提交
437
<p>$ git config –global user.name “此处填你的用户名”<br>$ git config –global user.email  “此处填你的邮箱”</p>
T
TRHX 已提交
438
</blockquote>
T
TRHX 已提交
439
<p>到此为止 SSH Key 配置成功,本机已成功连接到 Github</p>
T
TRHX 已提交
440 441
<p><br></p>
<h1 id="–-将本地的Hexo文件更新到Github的库中"><a href="#–-将本地的Hexo文件更新到Github的库中" class="headerlink" title="– 将本地的Hexo文件更新到Github的库中"></a><strong>– 将本地的Hexo文件更新到Github的库中</strong></h1><p>一、登录 Github 打开自己的项目 <font color="#DC143C">your name.github.io</font></p>
T
TRHX 已提交
442
<p><img src="https://i.imgur.com/KWeHGF1.png" alt=""></p>
T
TRHX 已提交
443 444 445 446 447 448 449 450 451
<p><br><br>二、鼠标移到 <font color="#DC143C">Clone or download</font> 按钮,选择 <font color="#DC143C">Use SSH</font></p>
<p><br><br><img src="https://i.imgur.com/nNRZVDQ.png" alt=""></p>
<p><br><br>三、一键复制地址</p>
<p><br><br><img src="https://i.imgur.com/ulwSVjM.png" alt=""></p>
<p><br><br>四、打开你创建的 <font color="#DC143C">Hexo</font> 文件夹(如:<font color="#DC143C">E:\TRHX_Blog\Hexo</font>),右键用记事本(或者Notepad++)打开该文件夹下的 <font color="#DC143C">_config.yml</font> 文件</p>
<p><br><br><img src="https://i.imgur.com/DtH87DK.png" alt=""></p>
<p><br><br>五、按下图修改 <font color="#DC143C">_config.yml</font> 文件并保存</p>
<p><br><br><img src="https://i.imgur.com/7vbeY3N.png" alt=""></p>
<p><br><br>六、在 <font color="#DC143C">Hexo</font> 文件夹下分别执行以下命令</p>
T
TRHX 已提交
452
<blockquote>
T
TRHX 已提交
453
<p>$ hexo g<br>$ hexo d</p>
T
TRHX 已提交
454 455 456 457 458
</blockquote>
<p>或者直接执行</p>
<blockquote>
<p>$ hexo g -d</p>
</blockquote>
T
TRHX 已提交
459
<p>执行完之后会让你输入你的 Github 的账号和密码,如果此时报以下错误,说明你的 deployer 没有安装成功</p>
T
TRHX 已提交
460 461 462 463 464 465 466
<blockquote>
<p>ERROR Deployer not found: git</p>
</blockquote>
<p>需要执行以下命令再安装一次:</p>
<blockquote>
<p>npm install hexo-deployer-git –save</p>
</blockquote>
T
TRHX 已提交
467
<p>再执行 <font color="#DC143C">hexo g -d</font>,你的博客就会部署到 Github 上了</p>
T
TRHX 已提交
468
<p>七、访问博客</p>
T
TRHX 已提交
469
<p>你的博客地址:<font color="#DC143C">https://你的用户名.github.io</font>,比如我的是:<font color="#DC143C"><a href="https://trhx.github.io" target="_blank" rel="noopener">https://trhx.github.io</a></font> ,现在每个人都可以通过此链接访问你的博客了</p>
T
TRHX 已提交
470 471
<p><br></p>
<h1 id="–-如何在博客上发表文章"><a href="#–-如何在博客上发表文章" class="headerlink" title="– 如何在博客上发表文章"></a><strong>– 如何在博客上发表文章</strong></h1><p>博客已经成功搭建了,但是我们该怎么写博客呢?</p>
T
TRHX 已提交
472
<p>一、新建一个空文章,输入以下命令,会在项目 <font color="#DC143C">\Hexo\source\_posts</font> 中生成 <font color="#DC143C">文章标题.md</font> 文件,文章标题根据需要命名</p>
T
TRHX 已提交
473 474 475
<blockquote>
<p>$ hexo n “文章标题”</p>
</blockquote>
T
TRHX 已提交
476
<p>也可以直接在 <font color="#DC143C">\Hexo\source\_posts</font> 目录下右键鼠标新建文本文档,改后缀为 <font color="#DC143C">.md</font> 即可,这种方法比较方便</p>
T
TRHX 已提交
477
<p>二、用编辑器编写文章</p>
T
TRHX 已提交
478 479
<font color="#DC143C">md</font> 全称 Markdown, Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用,常用的标记符号屈指可数,几分钟即可学会, <font color="#DC143C">.md</font> 文件可以使用支持 Markdown 语法的编辑器编辑,然后保存文件到 <font color="#DC143C">\Hexo\source\_posts</font> 文件夹下即可<br><br>推荐 Windows 上使用 <font color="#DC143C">MarkdownPad2</font> 编辑器,macOS 上使用 <font color="#DC143C">Mou</font> 编辑器,Linux 上使用 <font color="#DC143C">Remarkable</font>编辑器,Web 端上使用<font color="#DC143C">简书</font> 

T
TRHX 已提交
480 481
<p>当我们用编辑器写好文章后,可以使用以下命令将其推送到服务器上</p>
<blockquote>
T
TRHX 已提交
482
<p>$ hexo g<br>$ hexo d</p>
T
TRHX 已提交
483
</blockquote>
T
TRHX 已提交
484
<p>或者将两个命令合二为一输入以下命令:</p>
T
TRHX 已提交
485 486 487 488
<blockquote>
<p>$ hexo d -g </p>
</blockquote>
<p>现在访问你的博客就可以看见写好的文章啦!</p>
T
TRHX 已提交
489 490
<p>参考资料:<a href="https://blog.csdn.net/jinhui157/article/details/73872795" target="_blank" rel="noopener">《10款流行的Markdown编辑器,总有一款适合你》</a> (By xiaoxiao_engineer)<br>     <a href="https://www.jianshu.com/p/q81RER/" target="_blank" rel="noopener">《献给写作者的 Markdown 新手指南》</a> (By 简书)<br>     <a href="https://sspai.com/post/25137" target="_blank" rel="noopener">《认识与入门 Markdown》</a> (By Te_Lee)<br>     <a href="http://ibruce.info/2013/11/26/markdown/" target="_blank" rel="noopener">《markdown简明语法》</a> (By 不如)<br>     <a href="https://www.jianshu.com/p/191d1e21f7ed" target="_blank" rel="noopener">《markdown基本语法》</a> (By 高鸿祥)<br>     <a href="http://www.liuhaihua.cn/archives/143443.html" target="_blank" rel="noopener">《Markdown 公式指导手册》</a> (By Harries)<br>     <br>     <br><br></p>
<h1 id="–-如何为博客更换自己喜欢的主题"><a href="#–-如何为博客更换自己喜欢的主题" class="headerlink" title="– 如何为博客更换自己喜欢的主题"></a><strong>– 如何为博客更换自己喜欢的主题</strong></h1><p>博客也搭建好了,文章也会写了,但是!!!默认的主题并不喜欢怎么办?现在,我们就来为自己的博客更换自己喜欢的主题</p>
T
TRHX 已提交
491 492
<p><a href="https://hexo.io/themes/" target="_blank" rel="noopener">点击此处</a>进入 Hexo 官网的主题专栏,我们可以看见有许多的主题供我们选择</p>
<p><img src="https://i.imgur.com/t3aGEQ2.png" alt=""></p>
T
TRHX 已提交
493 494 495 496 497
<p><br><br>我们要做的就是把主题克隆过来,在此我们以主题 <font color="#DC143C">Aero-Dual</font> 为例,点进去我们就可以看见该主题作者的博客,鼠标滑到底,我们可以看见 <font color="#DC143C">Theme By Levblanc</font> 的字样(其他主题类似),点击作者 <font color="#DC143C">Levblanc</font> ,页面就会跳转到该主题所有的相关文件在 Github 上的地址,复制该地址</p>
<p><br><br><img src="https://i.imgur.com/tzpNdzk.png" alt=""></p>
<p><br><br><img src="https://i.imgur.com/ECHuTS9.png" alt=""></p>
<p><br><br><img src="https://i.imgur.com/qBFXpOL.png" alt=""></p>
<p><br><br>再打开 <font color="#DC143C">Hexo</font> 文件夹下的 <font color="#DC143C">themes</font> 目录(如:<font color="#DC143C">E:\TRHX_Blog\Hexo\themes</font>),右键 <font color="#DC143C">Git Bash Here</font>,输入以下命令:</p>
T
TRHX 已提交
498 499 500 501 502 503 504 505
<blockquote>
<p>$ git clone 此处填写你刚才复制的主题地址</p>
</blockquote>
<p>比如要安装 <font color="#DC143C">Aero-Dual</font> 主题,则输入命令:</p>
<blockquote>
<p>$ git clone <a href="https://github.com/levblanc/hexo-theme-aero-dual" target="_blank" rel="noopener">https://github.com/levblanc/hexo-theme-aero-dual</a></p>
</blockquote>
<p>等待下载完成后即可在 <font color="#DC143C">themes</font> 目录下生成 <font color="#DC143C">hexo-theme-aero-dual</font> 文件夹,然后打开 <font color="#DC143C">Hexo</font> 文件夹下的配置文件 <font color="#DC143C">_config.yml</font> ,找到关键字 <font color="#DC143C">theme</font>,修改参数为:<font color="#DC143C">theme:hexo-theme-aero-dual</font> (其他主题修改成相应名称即可),再次注意冒号后面有一个空格!</p>
T
TRHX 已提交
506 507
<p><br><br><img src="https://i.imgur.com/2lUYsjZ.png" alt=""></p>
<p><br><br>返回 <font color="#DC143C">Hexo</font> 目录,右键 <font color="#DC143C">Git Bash Here</font> ,输入以下命令开始部署主题:</p>
T
TRHX 已提交
508 509 510 511 512 513
<blockquote>
<p>$ hexo g<br>$ hexo s</p>
</blockquote>
<p>此时打开浏览器,访问 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a>  就可看见我们的主题已经更换了,如果感觉效果满意,我们就可以把它部署到Github上了</p>
<p>打开 <font color="#DC143C">Hexo</font> 文件夹,右键 <font color="#DC143C">Git Bash Here</font> ,输入以下命令:</p>
<blockquote>
T
TRHX 已提交
514
<p>$ hexo clean  </p>
T
TRHX 已提交
515
<p><font color="#00CD00">//该命令的作用是清除缓存,若不输入此命令,服务器有可能更新不了主题</font><br>$ hexo g -d</p>
T
TRHX 已提交
516 517
</blockquote>
<p>此时访问自己的博客即可看见更换后的主题,但我们仍然需要对主题的相关配置进行修改,比如网站标题,图标等等,Hexo 中有两份主要的配置文件,名称都是  <font color="#DC143C">_config.yml</font> ,它们均是用于站点配置使用的。其中,一份位于站点根目录下(比如我的:<font color="#DC143C">E:\TRHX_Blog\Hexo\_config.yml</font>),主要包含 Hexo 本身整站的配置;另一份位于主题目录下(比如我的:<font color="#DC143C">E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml</font>),这份配置由主题作者提供,主要用于配置主题相关的选项,一般  <font color="#DC143C">_config.yml</font>  文件里都有相关注释,按需修改即可</p>
T
TRHX 已提交
518
<p>参考资料:<a href="https://www.zhihu.com/question/24422335" target="_blank" rel="noopener">《有哪些好看的 Hexo 主题?》</a> (知乎)<br>     <a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="noopener">《Hexo | 配置》</a> (Hexo官方文档)<br>     <a href="https://segmentfault.com/a/1190000002632530" target="_blank" rel="noopener">《hexo常用命令笔记》</a> (By 小弟调调)</p>
T
TRHX 已提交
519 520
<p><br></p>
<h1 id="–-为你的-Hexo-博客配置个性域名"><a href="#–-为你的-Hexo-博客配置个性域名" class="headerlink" title="– 为你的 Hexo 博客配置个性域名"></a>– 为你的 Hexo 博客配置个性域名</h1><p>本人在配置域名的时候问题百出,百度的各种方法都不管用,打开网站总是 404,可能是我太笨了  o(╥﹏╥)o ,不过好在后来终于解决了这个问题</p>
T
TRHX 已提交
521 522
<p>首先我们要购买域名,<a href="https://www.aliyun.com" target="_blank" rel="noopener">阿里云</a><a href="https://cloud.tencent.com" target="_blank" rel="noopener">腾讯云</a>都可以,也不贵,一年几十块钱,最便宜几块钱也能买到,以阿里云为例,我购买的域名是 <a href="http://trhx.top" target="_blank" rel="noopener">trhx.top</a>,购买过程就不赘述了,选择阿里云的解析平台,来到阿里云的管理控制台,点击进入域名解析列表或者直接点击域名后面的解析</p>
<p><img src="https://i.imgur.com/WNzFja7.png" alt=""></p>
T
TRHX 已提交
523
<p><br><br>点击添加记录,需要添加两个记录,两个记录类型都是 <font color="#DC143C">CNAME</font> ,记录值都是填你自己的博客地址(比如我的是:<font color="#DC143C"><a href="http://trhx.github.io" target="_blank" rel="noopener">trhx.github.io</a></font>),第一个主机记录为 <font color="#DC143C">@</font> ,第二个主机记录为 <font color="#DC143C">www</font> ,保存之后域名解析就完成了!</p>
T
TRHX 已提交
524
<p>【注:百度大多数方法是这样的:两个记录类型为 <font color="#DC143C">A</font> ,记录值都为博客的 <font color="#DC143C">IP</font> 地址,<font color="#DC143C">IP</font> 地址可以 <font color="#DC143C">cmd</font> 中输入 <font color="#DC143C">ping 你的博客地址</font> 获得(比如我的:<font color="#DC143C">ping trhx.github.io</font>),但我尝试这种方法并没有成功,目前也不知道具体原因,强调一下,我还是这方面<font color="#DC143C">小白!小白!小白!</font>所以不太懂,欢迎大佬来指点!】</p>
T
TRHX 已提交
525 526 527 528
<p><br><br><img src="https://i.imgur.com/hf7od2h.png" alt=""></p>
<p><br><br>为了使 GitHub 接收我们的域名,还需要在博客的根目录下添加一个名为 <font color="#DC143C">CNAME</font> 的文件(<font color="#DC143C">注意不要加.txt,没有任何后缀名!</font>),这个文件放到 <font color="#DC143C">Hexo</font> 文件夹的 <font color="#DC143C">source</font> 里面,(比如我的是:<font color="#DC143C">E:\TRHX_Blog\Hexo\source</font>),文件里面填写你的域名(<font color="#DC143C">去掉www</font>),比如要填写我的域名,文件里面就放一句话:<font color="#DC143C">trhx.top</font>,经过以上操作,别人就可以通过 <a href="http://www.trhx.top" target="_blank" rel="noopener">www.trhx.top</a><a href="http://trhx.top" target="_blank" rel="noopener">trhx.top</a><a href="http://trhx.github.io" target="_blank" rel="noopener">trhx.github.io</a> 三个当中任意一个访问我的博客了!你的也一样!</p>
<p><br><br><img src="https://i.imgur.com/FeUbvsS.png" alt=""></p>
<p><br><br>如果你在其他平台购买域名,或者选择 <a href="https://www.dnspod.cn" target="_blank" rel="noopener">DNSPod</a> 等其他域名解析,操作方法大同小异,遇到问题可自行百度解决!</p>
T
TRHX 已提交
529
<p>参考资料:<a href="https://zhuanlan.zhihu.com/p/27349039" target="_blank" rel="noopener">《推荐几家域名注册服务商》</a>  (By Jelly Bool)<br>     <a href="http://www.chinaz.com/web/2015/0122/380042.shtml" target="_blank" rel="noopener">《盘点十大免费DNS域名解析服务:稳定、可靠》</a></p>
T
TRHX 已提交
530
<h1 id="–-结语"><a href="#–-结语" class="headerlink" title="– 结语"></a><strong>– 结语</strong></h1><p>一顿操作下来虽然有点儿累,但看见拥有了自己的博客还是非常有成就感的,人生就是需要折腾,那么现在就开始你的创作之旅吧!文章的不断积累,你会从中受益很多的!另外,这是一篇小白写的适用于小白的博客搭建教程,比较详细,有这方面基础的可以百度有简略一点儿的教程,文中如有错误还请大佬指出改正!文中涉及参考资料如有侵权请联系我删除!</p>
T
TRHX 已提交
531

T
TRHX 已提交
532
      
T
TRHX 已提交
533
    </div>
T
TRHX 已提交
534
    
T
TRHX 已提交
535
  </div>
T
TRHX 已提交
536 537 538
  
    
    <div class="copyright">
T
TRHX 已提交
539 540
        <p><span>本文标题:</span><a  href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用Github Pages和 Hexo 搭建自己的独立博客</a></p>
        <p><span>文章作者:</span><a  href="/" title="访问 TRHX 的个人博客">TRHX</a></p>
T
TRHX 已提交
541
        <p><span>发布时间:</span>2018年08月15日 - 21时34分</p>
T
TRHX 已提交
542
        <p><span>最后更新:</span>2018年08月24日 - 00时42分</p>
T
TRHX 已提交
543
        <p>
T
TRHX 已提交
544 545
            <span>原始链接:</span><a class="post-url" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/" title="如何使用Github Pages和 Hexo 搭建自己的独立博客">http://yoursite.com/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/</a>
            <span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/  作者: TRHX" title=""></span>
T
TRHX 已提交
546 547 548 549 550 551 552 553 554 555 556
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



<nav id="article-nav">
  
  
T
TRHX 已提交
557
    <a  href="/2018/08/10/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
T
TRHX 已提交
558 559 560 561 562 563
      <div class="article-nav-title">Hello World</div>
      <strong class="article-nav-caption">></strong>
    </a>
  
</nav>

T
TRHX 已提交
564

T
TRHX 已提交
565
  
T
TRHX 已提交
566
</article>
T
TRHX 已提交
567

T
TRHX 已提交
568 569
    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
T
TRHX 已提交
570
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#–-前言"><span class="toc-number">1.</span> <span class="toc-text">– 前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-入门"><span class="toc-number">2.</span> <span class="toc-text">– 入门</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-安装Node-js"><span class="toc-number">3.</span> <span class="toc-text">– 安装Node.js</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-安装Git"><span class="toc-number">4.</span> <span class="toc-text">– 安装Git</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-检验软件是否安装成功"><span class="toc-number">5.</span> <span class="toc-text">– 检验软件是否安装成功</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-Hexo安装"><span class="toc-number">6.</span> <span class="toc-text">– Hexo安装</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-Hexo初始化配置"><span class="toc-number">7.</span> <span class="toc-text">– Hexo初始化配置</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-本地查看效果"><span class="toc-number">8.</span> <span class="toc-text">– 本地查看效果</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-将博客部署到Github-Pages上"><span class="toc-number">9.</span> <span class="toc-text">– 将博客部署到Github Pages上</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-将本地的Hexo文件更新到Github的库中"><span class="toc-number">10.</span> <span class="toc-text">– 将本地的Hexo文件更新到Github的库中</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-如何在博客上发表文章"><span class="toc-number">11.</span> <span class="toc-text">– 如何在博客上发表文章</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-如何为博客更换自己喜欢的主题"><span class="toc-number">12.</span> <span class="toc-text">– 如何为博客更换自己喜欢的主题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-为你的-Hexo-博客配置个性域名"><span class="toc-number">13.</span> <span class="toc-text">– 为你的 Hexo 博客配置个性域名</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#–-结语"><span class="toc-number">14.</span> <span class="toc-text">– 结语</span></a></li></ol>
T
TRHX 已提交
571
</div>
T
TRHX 已提交
572 573 574 575 576 577 578 579
<style>
    .left-col .switch-btn {
        display: none;
    }
    .left-col .switch-area {
        display: none;
    }
</style>
T
TRHX 已提交
580
<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">
T
TRHX 已提交
581

T
TRHX 已提交
582
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
T
TRHX 已提交
583

T
TRHX 已提交
584 585 586 587 588 589 590 591 592 593
<script>
    var valueHide = "隐藏目录";
    var valueShow = "显示目录";
    if ($(".left-col").is(":hidden")) {
        $("#tocButton").attr("value", valueShow);
    }
    $("#tocButton").click(function() {
        if ($("#toc").is(":hidden")) {
            $("#tocButton").attr("value", valueHide);
            $("#toc").slideDown(320);
T
TRHX 已提交
594
            $(".switch-btn, .switch-area").fadeOut(300);
T
TRHX 已提交
595 596 597 598
        }
        else {
            $("#tocButton").attr("value", valueShow);
            $("#toc").slideUp(350);
T
TRHX 已提交
599
            $(".switch-btn, .switch-area").fadeIn(500);
T
TRHX 已提交
600 601 602 603
        }
    })
    if ($(".toc").length < 1) {
        $("#toc, #tocButton").hide();
T
TRHX 已提交
604
        $(".switch-btn, .switch-area").show();
T
TRHX 已提交
605 606 607 608 609 610 611 612 613 614 615 616 617 618 619
    }
</script>




<div class="bdsharebuttonbox">
	<a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
	<a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
	<a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
	<a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
	<a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a>
	<a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
	<a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="分享到复制网址"></a>
</div>
T
TRHX 已提交
620
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
T
TRHX 已提交
621 622 623 624 625




    
T
TRHX 已提交
626 627 628 629 630 631 632 633 634 635 636
        <section class="changyan" id="comments">
  <!--<div id="uyan_frame"></div>-->
  <div id="SOHUCS"></div>
  <script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js"></script>
  <script type="text/javascript">
    window.changyan.api.config({
      appid: 'xxxx',
      conf: 'xxxxxxxxx'
    });
  </script>
</section>
T
TRHX 已提交
637 638 639 640 641 642
    



    <div class="scroll" id="post-nav-button">
        
T
TRHX 已提交
643
            <a  href="/" title="回到主页"><i class="fa fa-home"></i></a>
T
TRHX 已提交
644 645 646
        
        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
        
T
TRHX 已提交
647
            <a  href="/2018/08/10/hello-world/" title="下一篇: Hello World">
T
TRHX 已提交
648 649 650 651
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>
T
TRHX 已提交
652 653 654 655
    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2018/08/15/如何使用Github Pages和Hexo搭建自己独立博客/">如何使用Github Pages和 Hexo 搭建自己的独立博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/08/10/hello-world/">Hello World</a></li></ul>
    
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>

T
TRHX 已提交
656 657
    <script>
        $(".post-list").addClass("toc-article");
T
TRHX 已提交
658
        // $(".post-list-item a").attr("target","_blank");
T
TRHX 已提交
659 660 661 662 663 664
        $("#post-nav-button > a:nth-child(2)").click(function() {
            $(".fa-bars, .fa-times").toggle();
            $(".post-list").toggle(300);
            if ($(".toc").length > 0) {
                $("#toc, #tocButton").toggle(200, function() {
                    if ($(".switch-area").is(":visible")) {
T
TRHX 已提交
665
                        $("#toc, .switch-btn, .switch-area").toggle();
T
TRHX 已提交
666 667 668 669 670
                        $("#tocButton").attr("value", valueHide);
                        }
                    })
            }
            else {
T
TRHX 已提交
671
                $(".switch-btn, .switch-area").fadeToggle(300);
T
TRHX 已提交
672 673 674 675 676 677
            }
        })
    </script>



T
TRHX 已提交
678

T
TRHX 已提交
679 680 681
    <script>
        
    </script>
T
TRHX 已提交
682

T
TRHX 已提交
683 684 685 686 687 688 689 690
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2018 TRHX
            </div>
            <div class="footer-right">
T
TRHX 已提交
691
                <a href="http://hexo.io/" target="_blank">Hexo &nbsp;&nbsp;</a><a href="https://github.com/maochunguang" target="_blank">Blog</a> by tommy
T
TRHX 已提交
692 693 694 695 696 697
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
T
TRHX 已提交
698
                        <span id="site-visit" >本站到访数: 
T
TRHX 已提交
699 700 701 702 703 704 705 706 707
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
T
TRHX 已提交
708
                        <span id="page-visit">本页阅读量: 
T
TRHX 已提交
709 710 711 712 713 714
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
T
TRHX 已提交
715 716 717
    </div>
</footer>

T
TRHX 已提交
718 719
<font size=1.5>
    <center>
T
TRHX 已提交
720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737
        <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> 
        <script> 
            var now = new Date(); 
            function createtime() { 
              var grt= new Date("08/10/2018 17:38:00");//此处修改你的建站时间或者网站上线时间 
              now.setTime(now.getTime()+250); 
              days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
              hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
              if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
              mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
              seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
              snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
              document.getElementById("timeDate").innerHTML = " 本站已安全运行 "+dnum+""; 
              document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + "" + snum + ""; 
              } 
          setInterval("createtime()",250); 
        </script>
    </center>
T
TRHX 已提交
738
</font>
T
TRHX 已提交
739

T
TRHX 已提交
740
    </div>
T
TRHX 已提交
741 742 743
    
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>

T
TRHX 已提交
744 745 746 747
<script src="/js/main.js"></script>

    <script>
        $(document).ready(function() {
T
TRHX 已提交
748
            var backgroundnum = 31;
T
TRHX 已提交
749 750 751 752 753 754 755
            var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
            $("#mobile-nav").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
            $(".left-col").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
        })
    </script>


T
TRHX 已提交
756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'xxxxx', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->



	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?xxxxxx";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
T
TRHX 已提交
780

T
TRHX 已提交
781 782 783 784 785 786 787


<div class="scroll" id="scroll">
    <a href="#"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments"><i class="fa fa-comments-o"></i></a>
    <a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
T
TRHX 已提交
788
<script>
T
TRHX 已提交
789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820
    $(document).ready(function() {
        if ($("#comments").length < 1) {
            $("#scroll > a:nth-child(2)").hide();
        };
    })
</script>

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

  <script language="javascript">
    $(function() {
        $("a[title]").each(function() {
            var a = $(this);
            var title = a.attr('title');
            if (title == undefined || title == "") return;
            a.data('title', title).removeAttr('title').hover(
            function() {
                var offset = a.offset();
                $("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({
                    top: offset.top - a.outerHeight() - 15,
                    left: offset.left + a.outerWidth()/2 + 1
                }).fadeIn(function() {
                    var pop = $(this);
                    setTimeout(function() {
                        pop.remove();
                    }, pop.text().length * 800);
                });
            }, function() {
                $("#anchortitlecontainer").remove();
            });
        });
T
TRHX 已提交
821
    });
T
TRHX 已提交
822
</script>
T
TRHX 已提交
823

T
TRHX 已提交
824

T
TRHX 已提交
825
  </div>
T
TRHX 已提交
826
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":50,"height":100},"mobile":{"show":true},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
T
TRHX 已提交
827
</html>