hexo+GitHub Pages搭建个人博客

阅读数: 次 2017-07-27

一、前提

在Windows10 X64环境安装操作
Hexo 中文文档
 Hexo Themes列表

1、安装node.js和git

node.js
git

2、node.js是否成功安装

1 2	E:\www\blog>node -v v8.1.4

3、git是否成功安装

1 2	E:\www\blog>git --version git version 2.13.0.windows.1

如果两者都显示相应的版本号，接下来我们安装hexo

二、安装hexo

1、全局安装

1	E:\www\blog>npm install -g hexo #-g 表示全局安装

2、hexo是否安装成功

E:\www\blog>hexo -v
hexo: 3.3.8
hexo-cli: 1.0.3
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 8.1.4
v8: 5.8.283.41
uv: 1.12.0
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

如果看到上述版本信息列出则说明hexo安装成功

3、初始化hexo

1	E:\www\blog>hexo init

初始化成功后可以到blog文件夹看到如下目录

.
├── _config.yml   //这里是网站的配置信息
├── package.json  //HEXO项目依赖
├── scaffolds     //模板文件夹
|   ├──post.md    //文章模板
|   ├──draft.md   //
|   └──page.md
├── source       //资源文件夹，
|   ├── _drafts
|   └── _posts
└── themes       // 主题文件夹。Hexo会根据主题来生成静态页面

4、本地运行

1	E:\www\blog>hexo server #开启服务等价于hexo s

然后在浏览器输入localhost:4000,会看到如下效果
index
如果无法访问，可能是端口号占用，更改服务端口号：hexo s -p 5000

5、常用到的命令

hexo init #执行站点的初始化
hexo g == hexo generate #生成静态页面。在生成时可以加上-d或–deploy参数在生成后立即部署。生成的静态文件在public文件夹下，没有则会自动建立。
hexo d == hexo deploy #将 .deploy 目录部署到 gitHub,也就是将public目录下生成的静态文件上传到某个特定的位置，部署时可以加上-g或–generate参数，在部署前先生成一遍静态文件。
hexo s == hexo server #开启预览访问端口（默认：4000，’ctr+c’关闭server）,在本地 http://localhost:4000 启动一个hexo服务器，可以用来预览hexo站点的效果。
hexo n == hexo new #新建一个markdown文件。
hexo new [layout] # [layout]是该文件的类型，取值有post、draft和page三种，分别对应新建文章、草稿、页面。在运行该命令时，会调用scaffolds下的对应模板。<br>hexo clean #清理Hexo缓存。该操作会强制Hexo清空已生成的全部静态文件以及Hexo自身的数据库，有时候相当有效（更换主题后建议运行）。<br>hexo publish <title>#发布某篇草稿（即将该markdown文件转移到_post文件夹下）

#命令可以复合使用：
hexo clean && hexo g -d

三、Github创建仓库

1、注册一个Github账号

开始创建仓库
new_repo
点击New repository
create_new_repo
创建成功后，我们得到远程仓库的地址
repo_url

2、下载yilia主题的模板

一个简洁优雅的hexo主题,作者 litten

1	E:\www\blog>git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

我们发现blog博客的themes文件夹多一个yilia文件，说明我们下载成功

3、配置根目录下_config.yml

title: William的博客 #网站标题
subtitle: 伟大的人不是生下来就伟大的，而是在成长过程中显示其伟大的。 #子标题
description: Laravel、Linux、Mysql、PHP、Redis、技术爱好者，喜欢追求新鲜的事物，想通过微博来记录学习技术的点滴过程，同时也可以分享自己的故事
author: William #作者
#修改模板landscape改为yilia
theme: yilia
#远程仓库地址配置
deploy:
  type: git
  repo: https://github.com/william-wqq/william-wqq.github.io.git
  branch: master
#添加代码
jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

4、配置yilia目录下_config.yml

在blog/sources 创建assets/img目录,放入网站图标favicon.ico和你的头像william.png

#图标地址
favicon: /assets/img/favicon.ico
#头像地址
avatar: /assets/img/william.png

5、生成静态文件

1	E:\www\blog>hexo generate #等价于 hexo g

生成public文件，里面包含生成静态文件

6、部署hexo到Github

1	E:\www\blog>hexo deploy #等价于 hexo d

如果部署失败

1 2	E:\www\blog>hexo deploy ERROR Deployer not found: git

输入命令：

1	E:\www\blog>npm install hexo-deployer-git --save

解决后重新部署 INFO Deploy done: git,部署成功

7、本地运行

开启服务

1	E:\www\blog>hexo server #等价于 hexo s

在浏览器分别出入 http://localhost:4000 和http://william-wqq.github.io 都能看到如下界面
index
一个简单的博客就搭建成功了，它应该还包括站点访问量统计、评论、相册、视频等基本的功能，我们有时间在去讨论这些。

四、高级进阶配置

1、安装评论插件

多说在2017-6-1评论系统服务关闭，无法使用
网易云跟帖在2017-8-1关闭服务，也没法使用
畅言需要备案，麻烦。因为我只买了万网的域名，没有购买服务器所以说没法备案
disqus是国外比较受欢迎的评论插件，我们需要翻墙才能使用，so你懂的
友言是一个简单的，用起来很方便，但对于我这种强迫症来说，还是一般般
于是我们选择了来必力

(1)申请账号，来必力在代码管理看到我们需要安装的代码
libili

(2)配置yilia目录下的_config.yml添加

1	laibili: MTAyMC8xxxxxxxxxx

(3)创建文件laibili.ejs
在yilia\layout\_partial\post目录下创建laibili.ejs加入代码

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.laibili%>">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];
       if (typeof LivereTower === 'function') { return; }
       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;
       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

(4)修改文件article.ejs

修改yilia\layout\_partial目录下的article.ejs文件

在<% if (!index && post.comments){ %>节点添加代码

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

hexo generate -d 在浏览器输入 http://william-wqq.github.io 查看结果
libili

2、网站访问量显示

(1)效果
访问量

(2)实现

使用了不蒜子第三方的统计插件，网址：http://ibruce.info/2015/04/04/busuanzi/

在themes\yilia\layout_partial下的footer.ejs中<div class="footer-right">上面加入如下代码即可

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
总访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

3、文章阅读量显示

(1)效果
访问量

(2)实现

修改themes\yilia\layout\_partial文件夹下的article.ejs文件

在<%- partial('post/title', {class_name: 'article-title'}) %>节点下加入：

<% if (!index && post.comments && theme.laibili){ %>
<br/>
<a href="javascript:void(0);" style="color:gray;font-size:14px;">
<span class="icon-sort"></span>
<span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
          阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
</span>
</a>
<% } %>

本文作者: William
本文链接: http://www.williamwqq.site/2017/07/27/quick-build-blog/
本文参考: Lawlite的博客搭建
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！