hexo框架blog基于Github pages的搭建

    之前使用过csdn写过blog,但是之前自己糟糕的排版,渐渐打消了我坚持下去的动力,直到最近,开始使用vscode,然后又学了一下markdown,才让我产生了重新开始写blog的想法;
    一开始选用了Jekyll,但是Jekyll框架下实在很难找到一个吸引人的主题,之前做了一个,但感觉实在很一般,于是开始使用hexo;
    配置hexo的过程实在不是一个开心的过程,差不过花了一整天,一个周末,就这样莫名其妙的过去了一大半,所以我觉得有必要整理一下自己在这个过程中的探索;

创建github page Repositories

    创建一个Repositories,必须是username.github.io的形式,username是你的github账号用户名,主要起到github pages部署blog时的识别作用;
    然后选择Repositories对应的settings,选择Choose a theme, 在这一步我们可以下载一个初始的主题,验证一下是否github pages已经发布成功!

生成SSH添加到Github

    这一步主要是针对github新手而言,以下操作都在git bash完成:

  • 设置电脑要关联的github账号
1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  • 验证是否设置正确
1
2
git config user.name
git config user.email
  • 创建ssh,一路回车
1
ssh-keygen -t rsa -C "youremail"

    一般会生成两个文件,id-rsa和id_rsa.pub,你只需要把id_rsa.pub中的内容加入到github账号中去就可以了,具体做法是:登录web端的github账号后,点击settings -> SSH keys -> New SSH key, 把id_rsa.pub中的内容复制进去即可;

  • 验证是否成功
1
ssh -T git@github.com

    为什么需要ssh呢?简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。对于初次在当前电脑使用github同步代码,这一步必不可少;

Hexo安装

    Hexo建站当然需要安装Hexo,要安装Hexo那么首先又要安装npm[^1],而安装npm通常我们通常通过安装Node.js环境安装,至于Node.js环境安装网上资料多如牛毛,这里就不再具体介绍;以下操作均在终端中进行;

1
npm install -g hexo-cli

    这里的-g是指全局安装,一般情况下,我们在安装了Node.js之后,需要设置一个全局安装路径:所有使用npm下载的软件包都会下到该路径下,同时该路径也需要加入到环境变量中,这样无论在任一路径下,打开终端,我们都可以使用相应命令;

Hexo建站

    在想要建站的目录,打开终端,进行以下操作:

1
2
hexo init
npm install

    第一条命令用于建站文件初始化,第二条用于根据package.json文件下载建站相关依赖文件;
完成上述操作后,我们基本上就应经获取了就已经获取了如下目录:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

    _config.yml用于站点各种信息配置,我们可以在链接中获取详细信息,这里不再赘述;
    _post文件是我们用于存储需要发布md文件的目录;
    themes用于存储我们的主题,对于Hexo来说,next模板可能是最常用的了吧,我们只需要下载一套next模板,然后放入thems目录,同时修改_config.yml中为theme: next即可;
    在完成上述操作的情况下,我们基本上已经可以预览一下网站效果了,如果只是预览,那么可以使用:

1
Hexo server

    如果想使用调试模式,那么使用:

1
Hexo s --debug

    在前述步骤完全配置成功的情况下,那么我们将会看到:

INFO Hexo is running at http://localhost:4000 ;

    点击对应网址,即可看到效果了;

next模板

    关于next模板使用的大部分技巧,在这个链接中都可以找到答案,但是这里面提供的next下载模板虽然自由度比较大,但是对于那些并不擅长前段开发的人来说,想要快速使用,同时又要保证效果尚佳的人来说,还是有一定难度,所以我推荐使用在next模板上已经进行一定程度开发的成熟模板,对于程序员来说这也是一种可以接受的做法:尽量找轮子,而非造轮子;
    这是我使用的模板,这个哥们效果做的还是很丰富的,以至于我不得不屏蔽了部分效果;
    需要注意的是,对于next模板中的大部分文件,我们都是不需要操作的,我们所有需要修改的都可以在该目录下的_config.yml中完成;

    但是也可能存在一些问题,下面是我碰到的一些,以及我所找到的解决方案:

  • 在next配置文件中,选择了一些菜单项,例如分类、标签,但是在预览时,点击菜单异常;解决方案
  • next模板的网站访问过慢!解决方案

Hexo部署到github pages

    这里体现了Jekyll和Hexo一个很大的不同:前者其站点的基础建站文件和github page对应的仓库文件是一样的,我们甚至可以修好md后直接放到其_post目录,刷新网页即可看到更新;后者github page对应仓库的文件实际是建站文件经过hexo编译后上传的文件;
    所以对于Hexo,建议使用两个仓库,一个用于发布Github pages,另一个则用于同步基础的建站文件,每次建站仓库部署后发布到前者上面;
    所以,对于Hexo部署,是必不可少的重要一步,操作流程如下:

  1. 安装hexo-deployer-git部署工具;
1
$ npm install hexo-deployer-git --save

    只要执行过一次即可;

  1. 修改建站文件中的_config.yml;
1
2
3
4
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master

    要注意,一般必须要求在主分支部署;

  1. 部署;
1
2
3
hexo clean
hexo generate
hexo deploy

    其中 hexo clean清除了你之前生成的东西,也可以不加。
    hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写;
    hexo deploy 部署文章,可以用hexo d缩写;

    注意deploy时可能要你输入username和password,目前发现输慢了可能导致部署失败,所以手速很重要;需要注意的是,该操作尽量在git bash中进行,因为git bash已经登录了github账号,所以要求输入账号密码的可能性不大,如果使用其他终端,则基本上每次都需要输入;
    这个步骤在我们每次有新文章同步到blog中都需要执行,但是也可以使用简化版:

1
hexo d -g

    此时我们可以不用hexo clean,hexo d -g会识别增量渲染,不会全部重新生成,感觉更安全一点;

关于hexo中的其他问题

  • hexo中markdown的语法区别;
  1. 使用```标记代码块时,后面一个不要加空格,否则代码块范围会识别错误,同时代码最好顶格处理,否则可能会莫名其妙的对不齐;
  2. 写脚注时,[^1]:中的冒号必须是中文的,否则显示异常;
  • 在hexo中显示图片;

    _config.yml中设置:

1
post_asset_folder: true

    使用下述命令创建文章:

1
hexo new [layout] </span><br></pre></td></tr></tbody></table></figure><p>    则会自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。这一步也可以手动完成,之后把我们的图片资源放在这个目录下;<br>    使用下述方式引用图片资源:</p><figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% asset_img 1.jpg %}</span><br></pre></td></tr></tbody></table></figure><p>    然后我们就能在blog中看到图片的正常显示了;<br>    需要注意的是:这里并不需要我们把资源目录也加进去,因为hexo会把这些文件编译后部署到github pages,如果我们打开目录将会发现图片已经和生成的对应html放在同一目录下了;</p><p>参考:<a herf="https://blog.csdn.net/sinat_37781304/article/details/82729029">链接1</a></p><p>[^1]: 软件包管理器,用于下载一些软件包, 包括Hexo;</p></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者:</strong> Kevin</li><li class="post-copyright-link"><strong>本文链接:</strong> <a href="https://kevincoders.github.io/2020/05/24/hexo%E6%A1%86%E6%9E%B6blog%E7%9A%84%E5%BB%BA%E7%AB%8B/" title="hexo框架blog基于Github pages的搭建">https://kevincoders.github.io/2020/05/24/hexo%E6%A1%86%E6%9E%B6blog%E7%9A%84%E5%BB%BA%E7%AB%8B/</a></li><li class="post-copyright-license"><strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 许可协议。转载请注明出处!</li></ul></div><footer class="post-footer"><div class="post-tags"><a href="/tags/hexo/" rel="tag"># hexo</a></div><div class="post-widgets"><div id="needsharebutton-postbottom"><span class="btn"><i class="fa fa-share-alt" aria-hidden="true"></i></span></div></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/2016/03/13/IO%E7%B1%BB/" rel="next" title="IO类"><i class="fa fa-chevron-left"></i> IO类</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"></div></div></footer></div></article><div class="post-spread"></div></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">站点概览</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="Kevin"><p class="site-author-name" itemprop="name">Kevin</p><p class="site-description motion-element" itemprop="description"></p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script><script type="text/javascript">$("#sidebar").hover(function(){$("#mydivshow").velocity("stop").velocity({opacity:1})},function(){$("#mydivshow").velocity("stop").velocity({opacity:0})})</script><div id="mydivshow" class="mydivshow"><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives%7C%7C%20archive"><span class="site-state-item-count">9</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/index.html"><span class="site-state-item-count">2</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/index.html"><span class="site-state-item-count">2</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"></div></div></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#创建github-page-Repositories"><span class="nav-number">1.</span> <span class="nav-text">创建github page Repositories</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生成SSH添加到Github"><span class="nav-number">2.</span> <span class="nav-text">生成SSH添加到Github</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo安装"><span class="nav-number">3.</span> <span class="nav-text">Hexo安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo建站"><span class="nav-number">4.</span> <span class="nav-text">Hexo建站</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#next模板"><span class="nav-number">5.</span> <span class="nav-text">next模板</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Hexo部署到github-pages"><span class="nav-number">6.</span> <span class="nav-text">Hexo部署到github pages</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关于hexo中的其他问题"><span class="nav-number">7.</span> <span class="nav-text">关于hexo中的其他问题</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© 2017 — <span itemprop="copyrightYear">2020</span> <span class="with-love"><i class="fa fa-user"></i> </span><span class="author" itemprop="copyrightHolder">Kevin</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span class="post-meta-item-text">Site words total count:</span> <span title="Site words total count">6.4k</span></div><div class="theme-info">主题 — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script><script>AV.initialize("","")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){var t=".leancloud-visitors-count";if(0===e.length)return void o.find(t).text(0);for(var i=0;i<e.length;i++){var r=e[i],s=r.get("url"),l=r.get("time"),c=document.getElementById(s);$(c).find(t).text(l)}for(var i=0;i<n.length;i++){var s=n[i],c=document.getElementById(s),u=$(c).find(t);""==u.text()&&u.text(0)}}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){var t=$(document.getElementById(n));t.find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var r=new e,s=new AV.ACL;s.setPublicReadAccess(!0),s.setPublicWriteAccess(!0),r.setACL(s),r.set("title",o),r.set("url",n),r.set("time",1),r.save(null,{success:function(e){var t=$(document.getElementById(n));t.find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css"><script src="/lib/needsharebutton/needsharebutton.js"></script><script>pbOptions={},pbOptions.iconStyle="box",pbOptions.boxForm="horizontal",pbOptions.position="bottomCenter",pbOptions.networks="Weibo,Wechat,Douban,QQZone,Twitter,Facebook",new needShareButton("#needsharebutton-postbottom",pbOptions)</script><script type="text/javascript" src="/js/src/js.cookie.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/scroll-cookie.js?v=5.1.3"></script><script type="text/javascript" src="/js/src/exturl.js?v=5.1.3"></script><script src="/js/src/Aplayer-Controler.js"></script><div id="AP-controler"></div><script type="text/javascript">var myapc=new APlayer_Controler({APC_dom:$("#AP-controler"),aplayer:ap,attach_right:!1,position:{top:"300px",bottom:""},fixed:!0,btn_width:100,btn_height:120,img_src:["http://oty1v077k.bkt.clouddn.com/bukagirl.jpg","http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg","http://oty1v077k.bkt.clouddn.com/pentigirl.jpg","http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif"],img_style:{repeat:"no-repeat",position:"center",size:"contain"},ctrls_color:"rgba(173,255,47,0.8)",ctrls_hover_color:"rgba(255,140,0,0.7)",tips_on:!0,tips_width:140,tips_height:25,tips_color:"rgba(255,255,255,0.6)",tips_content:{},timeout:30})</script><script>!function(){var t=document.createElement("script"),s=window.location.protocol.split(":")[0];"https"===s?t.src="https://zz.bdstatic.com/linksubmit/push.js":t.src="http://push.zhanzhang.baidu.com/push.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}()</script><script type="text/javascript" src="/js/src/love.js"></script><script type="text/javascript" charset="utf-8" src="/js/lazyload-plugin/lazyload.intersectionObserver.min.js"></script></body></html><!-- rebuild by neat -->