Hexo+Github搭建自己的博客
来源:互联网 发布:修改来电显示号码软件 编辑:程序博客网 时间:2024/06/10 07:50
Hexo+Github搭建自己的博客
- 最终效果可以查看:http://lawlite.me/
- 此博客 的地址:点击这里
- 后序继续完善
一、说明
- 关于一些基本软件的安装和配置这里不再给出
- 安装
NodeJS
:http://nodejs.cn/download/ - 需要配置环境变量
- 安装
git
工具:https://git-for-windows.github.io/ - 注册
github
账号 - 配置
SSH-key
- 创建名为
userName.github.io
的仓库,userName
是你申请的用户名
- 安装
二、安装Hexo和基本使用
- 安装Hexo:
npm install -g hexo
- 初始化Hexo:
hexo init
- 生成静态页面:
hexo generate
或者hexo g
- 启动服务器:
hexo server
或者hexo s
- 注意:服务器默认是
4000
端口,若是安装了福昕阅读器可能端口冲突 - 可以制定端口:
hexo s -p5000
- 注意:服务器默认是
- 浏览器中访问:
http://localhost:4000
三、更换主题Theme及基本配置
1、更换主题
- 默认主题是
landscape
,在themes
文件夹下,可以使用别人开发好的主题,这里有很多,我使用的是这一个: https://github.com/litten/hexo-theme-yilia- 下载之后放到
themes
文件夹下即可:git clone git@github.com:litten/hexo-theme-yilia.git
- 下载之后放到
2、主题基本配置
- 配置在
_config.yml
文件中,基本的配置尝试一下就知道了,不在给出
(1) 图片的位置:
- 比如打赏的支付宝二维码图片,是在当前博客的
source/assets/img/
下 (不是当前主题) - 配置:
# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏reward_type: 1# 打赏wordingreward_wording: '谢谢你请我吃糖果'# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpgalipay: /assets/img/alipay.jpg# 微信二维码图片地址weixin: /assets/img/weixin.png
(2) 百度、谷歌统计配置
- 申请账号:https://tongji.baidu.com/web/welcome/login
- 在代码获取的地方只要填入key即可
# Miscellaneousbaidu_analytics: '454d1a5ba8ed29xxxxxxxx'google_analytics: 'UA-9700xxxxxxxx'
- 就可以统计网站访问情况了,如下图,
- 谷歌统计同理
(3) 文章评论设置
- 由于主题之实现了多说和disqus的第三方评论功能,这里不配置
- 因为多说**6月份要关闭了,**disqus需要翻墙访问才行,还有友言不支持
https
协议,因为github
使用的是https
协议 - 下面会给出使用网易云跟帖和来必力的第三方评论功能
四、博客的基本配置
1、部署配置
- 配置到
github
对应的仓库中- 使用
hexo deploy
或hexo d
命令即可发布到github仓库中 - 浏览器输入网址
https://userName.github.io
即可访问(userName
对应你的用户名)
- 使用
deploy: type: git repo: git@github.com:lawlite19/lawlite19.github.io.git branch: master
2、主题配置
- 设置为你下载的主题:
theme: yilia
3、其他
- 加入如下配置,
jsonContent: meta: false pages: false posts: title: true date: true path: true text: true raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true
五、进阶功能配置
1、网站访问量显示
(1) 效果
(2) 实现
- 我使用了不蒜子第三方的统计插件,网址:http://ibruce.info/2015/04/04/busuanzi/
- 在
themes\yilia\layout\_partial
下的footer.ejs
中加入如下代码即可
<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>
2、实现单篇文章浏览统计和评论统计
- 评论数的统计是网易云跟帖中获取的,下面给出
(1) 效果
(2) 实现
- 修改
themes\yilia\layout\_partial
文件夹下的article.ejs
文件 - 在
<%- partial('post/title', {class_name: 'article-title'}) %>
节点下加入:- 注意这里网易云跟帖还没设置,而评论数中使用到了,这里运行会有问题,下面给出
<!-- 显示阅读和评论数 --> <% if (!index && post.comments && config.wangYi){ %> <br/> <a class="cloud-tie-join-count" 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>次 </span> </a> <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:#ef7522;font-size:14px;"> <span class="icon-comment"></span> <span class="join-text" style="color:#ef7522;font-size:14px;">评论数:</span> <span class="join-count">0</span>次 </a> <% } %>
3、实现网易云跟帖评论
(1) 效果
(2) 实现
- 注册账号:https://gentie.163.com/info.html
- 填写完成之后获取
WEB
代码 - 修改
themes\yilia\layout\_partial
文件夹下的article.ejs
文件 - 在最后加入
- 这里需要注意下,一个站点不同端标识文章的方式必须统一(同一站点可以采用以下方式标识文章:①
URL
;②Sourceid+productKey
;③URL+Sourceid+productKey
,建议用②或者③),否则跟贴数据可能错乱。比如同一站点PC端采用URL,APP采用Sourceid+productKey,这种情况跟贴数据会错乱,必选采用统一方式标识。 - 这里使用方式②
- 这里需要注意下,一个站点不同端标识文章的方式必须统一(同一站点可以采用以下方式标识文章:①
<!-- 网易云跟帖 --><% if (!index && post.comments && config.wangYi){ %><section class="duoshuo" id="comments"><div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div><script> var cloudTieConfig = { url: document.location.href, sourceId: "", productKey: "<%= config.wangYi%>", target: "cloud-tie-wrapper" };</script><script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script></section><% } %>
- 在博客的配置文件
_config.yml
最后加入获取代码中的productKey
wangYi: 06ab5cdc0b4c45efb39xxxxxxxxxxxx
- 发布到
github
上可以查看效果
六、绑定到申请的域名
- 可以绑定到自己申请的域名上,不用使用
userName.github.io
访问了,直接使用自己的域名访问
1、申请域名
- 我在万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7
- 我这里是
.me
结尾的域名,一年13
大洋
2、解析域名
- 添加如下的解析
3、配置一下
- 在博客的
source
文件夹下建立一个CNAME
的文件 - 内容写入你的域名信息,比如我这里是
lawlite.me
- 发布到
github
即可
4、细节说明
- 之前网易云跟帖,百度统计设置的域名这里对应该过来一下
七、写作的一些说明
- 执行命令:
hexo new "xxxx"
创建Markdown
文件,在博客的source\_posts
文件夹下 - 比如如下例子,
comments
设置为true
允许评论,若设置为false
则不能评论reward
设置为true
允许打赏,若设置为false
则不能打赏,(注意对应主题的配置文件reward_type
: 设置的为1
)
- 在文章中加入
<!-- more -->
将文章截断显示在主页
1 0
- HEXO+Github,搭建属于自己的博客
- HEXO+Github,搭建属于自己的博客
- HEXO+Github,搭建属于自己的博客
- HEXO+Github,搭建属于自己的博客
- HEXO+Github,搭建属于自己的博客
- Hexo+Github 搭建属于自己的博客
- HEXO+Github,搭建属于自己的博客
- Hexo+Github搭建自己的博客
- 利用github+hexo搭建自己的博客
- 搭建自己的 github + hexo 博客
- HEXO+Github,搭建属于自己的博客
- Hexo+GitHub搭建自己的博客
- hexo+github搭建自己的博客
- hexo+github+域名 搭建自己的博客
- HEXO+Github,搭建属于自己的博客
- Hexo+Github 搭建属于自己的博客
- Hexo+Github/Coding 搭建自己的博客
- 使用HEXO+GitHub搭建自己的博客
- Android APP的退出
- “两头堵模型”计数+取字符
- springmvc 使用@requestBody postman调试报错415/400
- Hibernate框架简述
- input记录
- Hexo+Github搭建自己的博客
- PyTorch预训练
- 九度OJ题目1126:打印极值点下标
- AbsSeekBar
- SAP Development Tools
- selenium+java+testng分层设计(一)
- 文章标题
- 解决Jgit使用SSH验证方式从远程仓库克隆代码时 Unkonwhost 问题
- Linux进程间通信——使用共享内存