您的位置:首页 > 编程语言

hexo+github+coding 搭建个人博客,你要的 大佬资料 都在这(项目完结整理)

2020-04-07 18:30 1521 查看

1.前言

原本是计划刷题继续提升自己的,奈何看了一个b站up主的关于搭建个人博客的视频,其中有提到对于计算机的我们来说,有一个属于自己的博客是挺重要的,不仅能作为自己的记录,而且还能写进自己简历,丰富大学生活等等。

于是,我就折腾了大概10多天左右,从一开始搭建hexo博客

搭建个人博客 Hexo框架 (自制)

到使用了yila主题,但做着做着发现原来主题上面还有升级版的主题,我看到了yilia主题的升级版yelee主题,于是花了3天左右的时间按照教程快速开发了一个个人主页如下图:

Hexo yilia主题 搭建个人主页【整合目录】

可以进去瞧一瞧,传送门

当然,关于yilia主题,挺适合刚入门hexo的伙伴。

这篇博客是我用yilia主题常用的,推荐阅读

Hexo yilia 主题一揽子使用方案

然后就是我上面那个图关于yelee主题,下面就是官方文档,按照教程来的话,最多一周就能快速拥有一个自己的博客了

yelee主题使用说明(官方文档)

2.我的主题

然而,最后我搭建选择的主题呢,以上都不是,我采用的是hexo-theme-matery

以下就是原主题相关特性,大家可以简单看一看

主题特性:

  • 简单漂亮
    文章内容美观易读
  • Material Design 设计
  • 响应式设计
    ,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页
    轮播文章
    及每天动态切换 Banner 图片
  • 瀑布流式
    的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替)
  • 时间轴式
    的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我
    页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
  • 可自定义的数据的
    友情链接
    页面
  • 支持文章置顶和文章打赏
  • 支持
    MathJax
  • TOC 目录
  • 可设置复制文章内容时追加
    版权信息
  • 可设置阅读文章时做
    密码验证
  • Gitalk、Gitment、Valine 和 Disqus
    评论模块
    (推荐使用 Gitalk)
  • 集成了
    不蒜子统计
    谷歌分析
    (Google Analytics)和
    文章字数统计
    等功能
  • 支持在首页的音乐播放和视频播放功能

3.简单概述

显然,看完了特性也还不知道会是啥样,那就整点图???

什么?看完图,还想直接上手体验,好,满足你

超逸の博客——传送门

好了,到此结束…

4.我的搭建过程

显然,我也是一个小白,花了一周的时间才有了现在这样个人博客,我就简述一下我的零基础搭建过程:

配置hexo环境——创建好了第一个hexo框架——尝试学习yilia主题

发现了yelee主题,果断重新写——三天就搭建了一个测试版,不断优化压缩(gulp,cdn等等)

成功搭建了一个个人博客(喜悦,成就感)——从大佬的友链里面发现了更大佬,界面非常美观——赶紧按着大佬教程从零再码一次(因为有了之前的基础,开发也还算挺快的)

又是三天成型,有了测试版——域名备案——解决在国内访问速度慢的原因

github+coding双部署——添加各种插件(豆瓣,天气,看板娘等)——测试访问速度

最后,开发完毕!

嘿! 传送门

5.学习资料合集(重点在这!)

前面还是稍微扯了一点个人总结,下面我将分享,我这一周来查阅的资料。

当然,只分享真正能解决问题的博客,我查阅的资料很多很多,下面是一些我遇到的问题以及一些优秀的大佬整理的超详细搭建教程:

5.1 搭建全教程(真大佬写的,超详细)

洪卫大佬写的教程,我就是跟着他的教程开发的,首推!

Hexo+Github博客搭建完全教程

下面这位大佬总共写了四篇,这里我就链接了他的第一篇,剩下几篇去主页找找就好了,和上面洪卫大佬主题风格不一样,而且还专门写了一篇pwa,真是好心人!不过我更喜欢这位大佬的主题颜色,所以我结合了洪卫和sitoi大佬的博客搭建教程!

基于 Hexo GitHub 从零开始搭建个人博客


下面是过客~励心大佬的超详细版搭建教程,后面才发现,我很多问题是在这篇文章中解决的!关于解决github访问速度问题,部署在coding和码云上等等,总之,这位大佬干货分享满满,我看完简直要感动哭了,居然如此详细,终于解决了我的bug!!!

Hexo+github搭建博客(超级详细版,精细入微)

5.2关于我搭建过程问题解决

(以下问题不分先后,能够解决你的问题那就很好了,如果不能解决你的问题,请在评论区留言,看到了立即回复您,然后更新博客)

入门必看

Hexo yilia主题 搭建个人主页【整合目录】

修改主题颜色(调整自己喜欢的背景颜色)

在主题文件的

/source/css/matery.css
文件中,搜索
.bg-color
来修改背景颜色:

.bg-color {
background-image: linear-gradient(to right, #1f4d71 0%, #71bbb6 100%);
opacity: 0.9;
/* 透明度*/
}

相关插件

每日诗词api

Hitokoto(一言)api

给hexo博客添加天气插件的网站

hexo博客添加一级分类相册功能

Tidio聊天机器人插件

基于 Hexo GitHub 从零开始搭建个人博客(四):让你的博客完美支持 PWA

Matery主题安装豆瓣插件

优化加速

利用 Gulp 来压缩你的 Hexo 博客

国内Github访问加速

静态博客访问优化之终极解决方案

Hexo进阶之各种优化

hexo使用katex引擎(markdown渲染加速)

使用Jsdelivr CDN加速博客访问速度

SEO优化

部署相关

如何申请阿里云免费SSL证书(可用于https网站)并下载下来

为自定义域名的Hexo博客升级到Https网站

Hexo博客系列(六):部署到七牛

(站长工具)ping服务器,网站测速

coding国内部署——传送门

Hexo博客部署到码云和Coding(提高国内访问速度)

其它

定制个人logo强大网站

不蒜子官网(如果统计无效,多半是链接失效了,去获取最新的)

使用PicGo+Github搭建免费图床

最后,我们压缩完后,有些指令不能用简称了,以下是我部署时常用指令

hexo clean
hexo g -s
hexo server
gulp
hexo deploy

6.总结

我的博客基本上算是开发完毕了,实现了代码压缩+CDN优化+国内外双部署

还未完成的部分:备份源码+SEO优化,但这些是可选项,后续再花点时间折腾一下就好了,感谢你能看到这篇文章,觉得不错的话,记得点个赞,加个关注!

(如果以上内容能够解决你的问题那就很好了,如果不能解决你的问题,请在评论区留言,看到了立即回复您,然后更新博客,欢迎您的加入!)

学如逆水行舟,不进则退
  • 点赞 19
  • 收藏
  • 分享
  • 文章举报
一百个Chocolate 博客专家 发布了600 篇原创文章 · 获赞 2156 · 访问量 34万+ 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: