基于Hexo的免费个人网站

先聊聊Gitee和GitHub的Pages服务

今天跟大家分享一下利用Hexo+Gitee Pages搭建个人网站的一些经验，之所以用Gitee Pages而不是GitHub Pages，完全是因为GitHub的服务器在国外，国内访问速度慢到令人发指！！不过GitHub虽然慢，但人家不要钱啊，而且你完全能在阿里花一块钱买个域名绑定一下，比如我的：gentletk.top这样你的网站就看起来就有私人定制的那种高端感了。至于Gitee，虽然快，但你每次都得手动部署，而且它不支持自定义域名，你要访问的话只有老老实实访问gentletk.gitee.io，这样一看就有种廉价感。当然，如果你愿意充钱，Gitee是很乐意为你推荐他们的Gitee Pages Pro服务的，这样一来自动更新部署和自定义域名都无需你操心了。我原先选择的是GitHub Pages，其实它没什么不好，慢是因为我在国内，所以我不打算放弃它，来个双管齐下，国内访问:gentletk.gitee.io，国外访问:gentletk.top。

1 Gitee相关

1.1 注册你的Gitee

点我前往Gitee注册

2.1 创建你的仓库

登陆到Gitee后，点击右上角+，选择新建仓库，其中仓库名要设置成你注册Gitee时的用户名：

2 Hexo相关

2.1 安装并配置Git

2.1.1 安装

点我前往下载

安装适合你的版本

2.1.2 配置用户信息

git config --global user.email "email address"
git config --global user.name "username"

2.1.3 配置SSH Key

首先检查本机已存在的ssh密钥

cd ~/.ssh

如果提示No such file or directory

说明是第一次使用

ssh-keygen -t rsa -C "e-mail address"

持续三次回车，此时会生成一个文件在用户目录找到.ssh/id_rsa.pub文件，

复制里面的内容打开github主页，进入个人设置->SSH and GPG keys->New SSH key

将复制内容填入key，title随便设置，保存即可。

测试是否成功

ssh -T git@github.com

2.2 安装Node.js

点我前往下载

安装最新版即可

2.3 安装Hexo

进入任意本地磁盘，右键Git Bash Here进入命令行输入

npm install -g hexo-cli

npm install hexo-deployer-git --save

在本地磁盘下新建文件夹Hexo存放工程文件

初始化

hexo init Hexo

编译

hexo g

启动本地服务器进行预览

hexo s

如果hexo正常工作了，输入http://localhost:4000/ 就能看到博客的初始模样

另外常用的hexo命令有：

部署：hexo d

生成并预览：hexo s -g

生成并部署：hexo d -g

清除缓存：hexo clean

升级hexo：npm update hexo -g

新建页面：hexo new page 'PageName'

新建文章：hexo new 'PostName'

如果本地预览没什么问题，那么可以试着部署到Gitee上

在部署前唯一要注意的是Hexo文件夹下的_config.yml

repository填你刚刚创建的仓库地址

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: https://gitee.com/gentletk/gentletk.git
    branch: master

在你创建的仓库里点击服务，选择Gitee Pages

勾选强制使用https，部署/更新，过一会就能看到

2.4 更换Hexo主题并修改

默认的主题不够酷炫狂霸拽？来这里逛逛

我下载的是Ayer，这个主题看着挺干净，可以看看原作者博客。点我查看

下面说说怎么更换主题。

还是刚刚Hexo下的_config.yml，改成这样，是不是简单到爆？

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: ayer

改完直接来一波编译部署(部署完千万别忘了在Gitee Pages那里手动更新！！！)

hexo d -g

不知道你们的效果如何，我的反正不尽如人意，如果没达到你想要的效果，那么跟我一起来修改一下这个主题。

2.4.1 流量与运行时间统计

(1) cnzz流量统计

先在友盟+注册个账号，选择网站统计，添加站点，填好相关信息就好

添加成功后会看到

点击统计代码，选一个好看的样式复制

找到Hexo/themes/ayer下的_config.yml，开启cnzz统计：

# 友盟cnzz统计(url填js代码src链接)
cnzz:
  enable: true
  #url: 

在Hexo/themes/ayer/layout/_partial下找到footer.ejs中的cnzz统计，将复制的统计代码粘贴在下方：

<ul>
  <li>
    <% if (theme.pageFooter){ %>
    <% var hexoLink = '<a href="https://hexo.io" target="_blank">Hexo</a>'; %>
    <% var themeLink = '<a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>'; %>
    <%- __('powered_by', hexoLink) %>
    <span class="division">|</span>
    <%- __('theme', themeLink) %>
    <% } %>
    <span class="division">|</span>
    <!-- cnzz统计 -->
    <% if (theme.cnzz&&theme.cnzz.enable){ %>
    <!-- 站长统计-[在线人数] -->
    <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278636399'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1278636399%26online%3D2' type='text/javascript'%3E%3C/script%3E"));</script>
    <% } %>
  </li>
</ul>

(2) 运行时间统计

在Hexo/theme/ayer中的_config.yml里添加如下字段，方便计算运行时间。

# 运行时间统计 月/日/年 时/分/秒
runtime: 
  start: 02/25/2020 5:22:00
  tip: 本站勉强运行

然后在footer.ejs中添加以下代码可自动计算网站运行时间：

<ul>
  <li>
  <!-- 运行时间统计 -->
    <span id="runtime_span"></span>
    <script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new Date("<%= theme.runtime.start%>");
	Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
    a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
    runtime_span.innerHTML="<%= theme.runtime.tip%>: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();</script>
  </li>
</ul>

2.4.2评论系统

我用的是Valine + leancloud

先在LeanCloud创建个应用，点我去创建

在创建好的应用中找到应用keys

在Hexo/themes/ayer下的_config.yml中找到leancloud

# Valine [一款快速、简洁且高效的无后端评论系统] (https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
leancloud:  
  enable: true
  app_id: your app_id
  app_key: your app_key

在valine官方文档中发现还可以增加其他配置项，如允许获取QQ头像并自动补全邮箱和文章阅读量统计：

# Valine配置
valine:
  enable: true                        # 是否启用
  avatar: monsterid                   # 头像样式(https://valine.js.org/avatar.html)
  placeholder: 建议使用QQ邮箱~          # placeholder
  enableQQ: true                      # 允许获取QQ头像
  visitor: true                       # 阅读量

在Hexo/themes/ayer/layout/_partial/post下的valine.ejs中增加如下配置：

其中meta字段设置成只填写昵称与邮箱，必填字段也设置成昵称与邮箱：

<script>
  new Valine({
    el: "#vcomments",
    app_id: "<%- theme.leancloud.app_id %>",
    app_key: "<%- theme.leancloud.app_key %>",
    path: window.location.pathname,
    avatar: "<%- theme.valine.avatar %>",
    placeholder: "<%- theme.valine.placeholder %>",
    recordIP: true,
	meta: ['nick','mail'],
	enableQQ: "<%- theme.valine.enableQQ %>",
	requiredFields: ['nick', 'mail'],
	visitor: "<%- theme.valine.visitor %>",
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>

其中文章阅读量统计还需要在Hexo/themes/ayer/layout/_partial/post下的word.ejs中添加如下配置：

<% if (!theme.word_count.only_article_visit || (!index && theme.word_count.only_article_visit)){ %>
<div class="word_count">
  <!--字数统计-->
  <span class="post-time">
    <span class="post-meta-item-icon">
      <i class="ri-quill-pen-line"></i>
      <span class="post-meta-item-text"> <%= __('post.word_count') %>:  </span>
      <span class="post-count"><%= wordcount(post.content) %></span>
    </span>
  </span>
  <!--阅读时间统计-->
  <span class="post-time">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
      <i class="ri-book-open-line"></i>
      <span class="post-meta-item-text"> <%= __('post.read_time') %>≈</span>
      <span class="post-count"><%= min2read(post.content) %> <%= __('post.minutes') %></span>
    </span>
  </span>
  <!--阅读次数统计-->
  <span id='/<%= page.path %>' class="leancloud-visitors" data-flag-title="<%= page.title %>">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
    <i class="ri-eye-line"></i>
      <span class="post-meta-item-text">阅读次数:</span>
    <i class="leancloud-visitors-count"></i>
  </span>
</div>
<% } %>

2.4.3封面更改与打赏功能

如果你对封面的图片不满意，也可以在images下添加你自己喜欢的图片

在Hexo/themes/ayer下的_config.yml里替换成你喜欢的图片名称

# 封面配置
# enable-是否启用封面；path-封面背景图；logo-封面logo
cover:
  enable: true
  path: /images/cover1.jpg # images目录下附送多张美图，可更换
  logo: /images/ayer.svg   # 如果不要直接设置成false

在Hexo/themes/ayer/source/images下将alipay.jpg与wechat.jpg替换成你自己的收款二维码

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: "请我喝杯咖啡吧~"
# 支付宝二维码图片地址，跟你设置logo的方式一样。比如：/images/alipay.jpg
alipay: /images/alipay.jpg
# 微信二维码图片地址
weixin: /images/wechat.jpg

写在最后

配置到这里基本就结束了，如果你还想要其他的配置，方法也是大同小异，看你怎么折腾了，欢迎留言评论！

文章作者：GentleTK
原文链接：https://gentletk.gitee.io/基于Hexo的免费个人网站