标签：基于 Hexo hexo Gitee themes https ayer 免费
先聊聊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
写在最后
配置到这里基本就结束了，如果你还想要其他的配置，方法也是大同小异，看你怎么折腾了，欢迎留言评论！
文章作者：GentleTK
原文链接：https://gentletk.gitee.io/基于Hexo的免费个人网站
标签：基于,Hexo,hexo,Gitee,themes,https,ayer,免费 来源： https://www.cnblogs.com/gentletk/p/16536721.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。