先聊聊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
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">
|
<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 %>">
|
<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
写在最后
配置到这里基本就结束了，如果你还想要其他的配置，方法也是大同小异，看你怎么折腾了，欢迎留言评论！
1906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
