手把手教你运用Hexo + Github Pages搭建个人自力博客

2019年8月30日 131次阅读 来源: lhc

体系环境设置

要运用Hexo，须要在你的体系中支撑Nodejs以及Git，假如还没有，那就最先装置吧！

装置Node.js

下载Node.js
参考地点：装置Node.js

装置Git

下载地点：http://git-scm.com/download/

装置Hexo

$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或许hexo generate
$ hexo s # 或许hexo server，能够在http://localhost:4000/ 检察

这里有必要提下Hexo经常使用的几个敕令：

  1. hexo generate (hexo g) 天生静态文件，会在当前目次下天生一个新的叫做public的文件夹

  2. hexo server (hexo s) 启动当地web效劳，用于博客的预览

  3. hexo deploy (hexo d) 布置播客到远端（比方github, heroku等平台）

别的另有其他几个经常使用敕令：

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

经常使用简写

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

经常使用组合

$ hexo d -g #天生布置
$ hexo s -g #天生预览

如今我们翻开http://localhost:4000/ 已能够看到一篇内置的blog了。
《手把手教你运用Hexo + Github Pages搭建个人自力博客》

现在我装置所用的当地环境以下：(能够经由历程hexo -v检察)

hexo: 3.2.0
hexo-cli: 1.0.1
os: Windows_NT 6.3.9600 win32 x64
http_parser: 2.5.2
node: 4.4.1
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g

Hexo主题设置

这里以主题yilia为例举行申明。

装置主题

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

启用主题

修正Hexo目次下的_config.yml设置文件中的theme属性，将其设置为yilia。

更新主题

$ cd themes/yilia
$ git pull
$ hexo g # 天生
$ hexo s # 启动当地web效劳器

如今翻开http://localhost:4000/ ，会看到我们已应用了一个新的主题。

Github Pages设置

什么是Github Pages

GitHub Pages 本用于引见托管在GitHub的项目，不过，因为他的空间免费稳固，用来做搭建一个博客再好不过了。

每一个帐号只能有一个堆栈来寄存个人主页，而且堆栈的名字必需是username/username.github.io，这是迥殊的定名商定。你能够经由历程http://username.github.io 来接见你的个人主页。

这里迥殊提醒一下，须要注重的个人主页的网站内容是在master分支下的。

建立本身的Github Pages

注册GitHub及运用Github Pages的历程已有许多文章讲过，在此不再详述，能够参考：

一步步在GitHub上建立博客主页 全系列

怎样搭建一个自力博客——简明Github Pages与Hexo教程

在这里我建立了一个github repo叫做 jiji262.github.io. 建立完成以后，须要有一次提交(git commit)操纵，然后就能够经由历程链接http://jiji262.github.io/ 接见了。（如今还没有内容，别着急）

布置Hexo到Github Pages

这一步恐怕是最症结的一步了，让我们把在当地web环境下预览到的博客布置到github上，然后就能够直接经由历程http://jiji262.github.io/接见了。不过许多教程文章对这个步骤语焉不详，这里偏重说下。

起首须要邃晓所谓布置到github的道理。

  1. 之前步骤中在Github上建立的谁人迥殊的repo（jiji262.github.io）一个最大的特性就是其master中的html静态文件，能够经由历程链接http://jiji262.github.io来直接接见。

  2. Hexo -g 会天生一个静态网站（第一次会天生一个public目次），这个静态文件能够直接接见。

  3. 须要将hexo天生的静态网站，提交(git commit)到github上。

邃晓了道理，怎么做天然就清楚了。

运用hexo deploy布置

hexo deploy能够布置到许多平台，详细能够参考这个链接. 假如布置到github，须要在设置文件_config.xml中作以下修正：

deploy:
  type: git
  repo: git@github.com:jiji262/jiji262.github.io.git
  branch: master

然后在敕令行中实行

hexo d

即可完成布置。

注重须要提早装置一个扩大：

$ npm install hexo-deployer-git --save

运用git敕令行布置

不幸的是，上述敕令虽然简朴轻易，然则偶然会有稀里糊涂的题目涌现，因而，我们也能够追根究底，运用git敕令来完成布置的事情。

clone github repo

$ cd d:/hexo/blog

$ git clone https://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.io

将我们之前建立的repo克隆到当地，新建一个目次叫做.deploy用于寄存克隆的代码。

建立一个deploy剧本文件

hexo generate
cp -R public/* .deploy/jiji262.github.io
cd .deploy/jiji262.github.io
git add .
git commit -m “update”
git push origin master

简朴解释一下，hexo generate天生public文件夹下的新内容，然后将其拷贝至jiji262.github.io的git目次下，然后运用git commit敕令提交代码到jiji262.github.io这个repo的master branch上。

须要布置的时刻，实行这段剧本就能够了（比方能够将其保存为deploy.sh）。实行历程当中能够须要让你输入Github账户的用户名及暗码，根据提醒操纵即可。

Hexo 主题设置

每一个差别的主题会须要差别的设置，主题设置文件在主题目次下的_config.yml。
以我们运用的yilia主题为例，其供应以下的设置项（themeyilia_config.yml）：

# Header
menu:
  主页: /
  一切文章: /archives
  # 漫笔: /tags/漫笔

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #douban: "#"
  #mail: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true
mathjax: true

# Miscellaneous
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: ""
#是不是开启分享
share: true
#是不是开启多说批评，填写你在多说请求的项目名称 duoshuo: duoshuo-key
#若运用disqus，请在博客config文件中填写disqus_shortname，并封闭多说批评
duoshuo: true
#是不是开启云标签
tagcloud: true

#是不是开启友情链接
#不开启——
#friends: false

#是不是开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁，我从哪里来，我到哪里去？我就是我，是色彩不一样的吃货…

其他高等运用技能

绑定自力域名

购置域名
在你的域名注册供应商那边设置DNS剖析，猎取GitHub的IP地点点击，进入source目次下，增添CNAME文件

$ cd source/
$ touch CNAME
$ vim CNAME # 输入你的域名
$ git add CNAME
$ git commit -m "add CNAME"

运用图床

运用七牛云存储
本身在github上搭建的图床：http://jiji262.github.io/qiniuimgbed/ ，须要起首注册七牛账号运用。

增添插件

增添sitemap和feed插件

$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap

修正_config.yml，增添以下内容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

配完以后，就能够接见http://jiji262.github.io/atom.xml和http://jiji262.github.io/sitemap.xml，发明这两个文件已胜利天生了。

增添404公益页面

GitHub Pages有供应制造404页面的指引：Custom 404 Pages。

直接在根目次下建立本身的404.html或许404.md就能够。然则自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默许分派的二级域名是不起作用的，运用hexo server在本机调试也是不起作用的。

引荐运用腾讯公益404。

增添about页面

$ hexo new page "about"

以后在sourceaboutindex.md目次下会天生一个index.md文件，翻开输入个人信息即可，假如想要增添版权信息，能够在文件末端增添：

<div style="font-size:12px;border-bottom: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BACKGROUND: #f6f6f6; HEIGHT: 120px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid">
<div style="MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px">
<IMG alt="" src="https://avatars1.githubusercontent.com/u/168751?v=3&s=140" width=90 height=100>
</div>
<div style="LINE-HEIGHT: 200%; MARGIN-TOP: 10px; COLOR: #000000">
本文链接：<a href="<%= post.link %>"><%= post.title %></a> <br/>
作者： 
<a href="http://jiji262.github.io/">令狐葱</a> <br/>出处： 
<a href="http://jiji262.github.io/">http://jiji262.github.io/</a>
<br/>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 学问同享签名-雷同体式格局同享 4.0 </a>
国际允许协定宣布，迎接转载，归纳或用于贸易目标，然则必需保存本文的签名 
<a href="http://jiji262.github.io/">令狐葱</a>及链接。
</div>
</div>

增添Fork me on Github

猎取代码，挑选你喜好的代码增添到hexo/themes/yilia/layout/layout.ejs的末端即可，注重要将代码里的you改成你的Github账号名。

增添付出宝捐赠按钮及二维码付出

付出宝捐赠按钮

在D:hexothemesyilialayout_widget目次下新建一个zhifubao.ejs文件，内容以下

<p class="asidetitle">打赏他</p>
<div>
<form action="https://shenghuo.alipay.com/send/payment/fill.htm" method="POST" target="_blank" accept-charset="GBK">
    <br/>
    <input name="optEmail" type="hidden" value="your 付出宝账号" />
    <input name="payAmount" type="hidden" value="默许捐赠金额(元)" />
    <input id="title" name="title" type="hidden" value="博主，打赏你的！" />
    <input name="memo" type="hidden" value="你Y加油，继承写博客！" />
    <input name="pay" type="image" value="转账" src="http://7xig3q.com1.z0.glb.clouddn.com/alipay-donate-website.png" />
</form>
</div>

增添完该文件以后，要在D:/hexo/themes/yilia/_config.yml文件中启用，以下所示，增添zhifubao

widgets:
- category
- tag
- links
- tagcloud
- zhifubao
- rss
二维码捐赠

起首须要到这里猎取你的付出宝账户的二维码图片，付出宝供应了自定义功用，能够增添自定义笔墨。

我的二维码扫描捐赠增添在about页面，固然你也能够增添到别的页面，在D:hexoblogsourceabout下有index.md，翻开，在恰当位置增添

<center>
迎接您捐赠本站，您的支撑是我最大的动力！
![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]
</center>
<br/>

<center>能够让图片居中显现，注重将图片链接地点换成你的即可。

增添百度站内搜索

点击进入，点击别的东西->站内检索->如今运用->新建搜索引擎->检察代码，将代码里的id值复制，翻开/d/hexo/themes/jacman/_config.xml，设置成以下即可。

baidu_search:     ## http://zn.baidu.com/
  enable: true
  id: "1433674487421172828" ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site

运用不蒜子增添访客统计

概况参考搞定你的网站计数，详细做法很简朴，就是在你的themes/your themes/layout/_partial/footer.ejs底部到场这段剧本

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

然后在<p class="copyright"></p>中心增添以下统计信息即可

本站总接见量 <span id="busuanzi_value_site_pv"></span> 次, 访客数 <span id="busuanzi_value_site_uv"></span> 人次, 本文总浏览量 <span id="busuanzi_value_page_pv"></span> 次

不蒜子的官方效劳网站是不蒜子，现在最大的弊病就是不开放注册，所以关于运行了一段时间的网站，不蒜子的数据都是从1最先，没办法设置，只要等后期开放注册以后，登入网站才能对统计计数举行设置。

参考链接

Hexo主页
hexo你的博客
Github Pages个人博客，从Octopress转向Hexo
怎样搭建一个自力博客——简明Github Pages与Hexo教程
怎样在一天以内搭建以你本身名字为域名又具有cool属性的个人博客
手把手教你建github手艺博客by hexo
Markdown 语法申明 (简体中文版)

本文原始链接：手把手教你运用Hexo + Github Pages搭建个人自力博客
作者：令狐葱
本文基于 学问同享签名-雷同体式格局同享 4.0 国际允许协定宣布，迎接转载，归纳或用于贸易目标，然则必需保存本文的签名 令狐葱及链接。

    原文作者：lhc
    原文地址: https://segmentfault.com/a/1190000004947261
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞