Hexo+Github+vercel 搭建个人博客教程(二)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 这篇教程接上篇教程,在上篇教程的基础上在进行

前言

  • 全文根目录值安装 hexo 框架的根目录,主题目录至 安装 butterfly 主题的目录
  • 配置文件指 _config 配置文件,主题配置文件指 _config.butterfly 主题配置文件

博客关键页面生成

博客有一些关键页面需要手动生成,你需要什么页面,就用此方法生成即可

标签页

进入 Hexo 博客的根目录,执行:

CODE

hexo new page tags

打开 source/tags/index.md 文件,修改如下:

CODE

---
title: 标签
date: 2022-08-03 12:53:45
type: "tags"
---

分类页

进入 Hexo 博客的根目录,执行:

CODE

hexo new page categories

打开 source/categories/index.md 文件,修改如下:

CODE

---
title: 分类
date: 2022-03-11 12:56:06
type: "categories"
---

友情链接

创建友情链接页面

进入 Hexo 博客的根目录,执行:

CODE

hexo new page link

打开 source/link/index.md 文件,修改如下:

CODE

---
title: 友情链接
date: 2022-03-11 12:57:48
type: "link"
---

友情链接添加

在Hexo博客目录中的 source/friends/创建一个文件lndex.md`,一个简单的友情链接就有了

网络异常,图片无法展示
|

CODE

---
title: friends
date: 2022-08-03 08:18:23
type: "friends"
layout: "friends"
---
# 友链交换
想要交换友链的小伙伴,欢迎在留言板留言,留言格式:
* **名称:**你的博客名称
* **地址:**你的博客地址
* **简介:**一句话简介
* **头像:**你的头像地址
例如我的博客友链,大家可以加到自己博客里哦:
* **名称:**余白
* **地址:**https://heiyushaoye.github.io
* **简介:**无处不在
* **头像:**头像地址
  • 预览效果如下,就表示成功了,然后直接跳到帮助文档的404页面
    网络异常,图片无法展示
    |

关于我

进入 Hexo 博客的根目录,执行:

CODE

hexo new page about

打开 source/about-me/index.md 文件,修改如下:

CODE

---
title: 关于作者
date: 2022-03-11 13:01:21
type: "about"
---
  • 说明:

重点:所有的文件都在source,这个文件夹下,按照官方文档提示,修改文件即可!

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 修改完成后,通过路由本地预览一下好了没,要养成习惯,完成一步,预览一步,这一出现错误好纠正

tags 其实就是对应的你要实现功能的名称,需要预览什么 功能,就修改成对应的功能名称

404 页面添加

  • 找到:node_modules——————>hexo-theme-butterfly——————>_config.yml
  • 【前面操作过的可以直接打开内容即可】 将文件里面的内容全部复制,执行图下面的操作,然后将所有代码粘贴到新建的文件里,这个文件就是我们主题配置的文件
    网络异常,图片无法展示
    |
  • 找到error 404 ,将帮助内容置换即可
    网络异常,图片无法展示
    |

主页背景更改

两种方式选择一个即可【 第一个使用了,没有成功的话在使用第二个,要想背景好看建议掌握第二种方式自己写,或者引入别人的css样式 】

方式一:

更改其图标、主页背景等部分内容,在主题的配置文件下

  • 更改背景的话建议使用占位图(就是将本地图片上传到图床)
    网络异常,图片无法展示
    |

  • 更改主页 主题背景的时候,如果要使用本地图片记得创建文件夹 img ,将图片放进此文文件,方便管理,复制其路径,粘贴到对应位置,然后在注意一下本地图片的格式即可, .表示当前路径

网络异常,图片无法展示
|

  • 留意: 如果你的网站根目录不是/,使用本地图片时,需加上你的根目录。
    例如:网站是https://yoursite.com/blog,引用一张img/xx.png图片,则设置backgroundurl(/blog/img/xx.png)

方式二(通过数据文件的方式):

在 source/_data/style.styl 文件中添加:(如果没有这个路径的话添加即可)

CODE

// 背景
body {
  background-image:url(../images/bg.webp);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}
//设置透明度
//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.8);
}
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}
//搜索框(local-search)的透明度设置
.popup {
  opacity: 0.8;
}

background-image 就是你的背景图啦。

主题配置(一)

面章节带大家看了一下文档,当然官方文档还有很多,这里就不罗列了,希望大家掌握方法,仔细阅读文档,重要的我会在这强调

这里只强调几点:

  • 官方文档,可能格式没有设置,需要自己调整一下缩进
  • 每新增一个功能最好本地预览下,成功了在执行后面的
  • 为了以后大家配置方便,最好配置一下package.json,就可以通过编辑器运行这行代码,就不用傻傻的一个一个敲了!

    CODE
"server": "hexo clean && hexo generate && hexo server"
修改第九行,这行代码可以省去每次都要清理,然后生成静态页面,这个步骤,
然后每次运行的时候也可以不用去输入命令行,可以找到这行代码然后点击 server 运行即可
  • 都开始主题配置了,大多数修改的文件都是 _ config.butterfly.yml 这个主题配置文件

导航栏的说明:

  • 注意:
  • 圆圈是你要在 source 文件夹下建立的文件夹,名称相同,然后在新建的文件夹下,新建index.md 文件
  • 方框的内容是自己随意更改的
  • 注意一下文档的缩进

网络异常,图片无法展示
|

  • 详解:
  • 分类 是指标签栏的名称
  • / 内容 / 是指路径,source文件夹下——->categories文件夹下——->i ndex.md 文件【自动去匹配】
  • fas fa-home 是图标
  • 网络异常,图片无法展示
    |

  • 导航栏的修改(注意二级的格式)

    CODE
menu:
  主页: / || fas fa-home
  时间线: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  链接||fas fa-list:
    友链: /link/ || fas fa-link
    关于: /about/ || fas fa-heart

字数统计

CODE

BASH
cnpm install hexo-wordcount --save

修改主题配置文件:

CODE

YMLwordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

如需调整右侧卡片网站信息内项目的数据,在文件/butterfly/layout/includes/widgets/card_webinfo.pug中操作。

目录折叠

由于我个人的目录比较大,完全展开三级目录的话,右边栏就完全被目录铺满了。butterfly主题提供了目录可折叠的选项,只需要在主题配置文件/butterfly/config.yml设置:

YML

card_categories:
enable:true
limit:0# if set 0 will show all
expand:true# none/true/false
sort_order:# Don't modify the setting unless you know how it works

主题配置(二)

重点看下我提的内容,其余想加的可以自己看下文档,然后添加上即可

  • 评论系统 (我目前使用来必力,但是我觉得没必要,为了给你们演示下,后期应该会关掉,毕竟也没多少人看我的文章)

如有需要看后面章节自行添加即可

  • 搜索系统
  • 直接点 本地搜素 ———> hexo-algoliasearch 然后看帮助文档,按照文档步骤一步一步操作即可
  • 打开终端 使用命令:npm install hexo-algoliasearch --save,安装需要的插件
  • 项目的根目录 _config.yml 配置文件下,将如下我修改过的代码复制到文件末尾(官方给的那个有 坑 )。

    CODE
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 看下 _config.butterfly.yml 文件的 local_search 有没有打开,打开了就预览一下效果,有搜索框了就欧克了!!

网络异常,图片无法展示
|

  • 页面美化
  • 根据官方文档和我修改的beautifly,在结合你的喜好,修改一下就好了

    CODE
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'
  • 网站的副标题,根据自己的喜好调试即可,附上我的样式
    网络异常,图片无法展示
    |

  • 设置主页面高度,根据自己的喜好设置即可
    网络异常,图片无法展示
    |

  • 字数统计
    根据文档自己设置一下
  • prefetch (預加載)、pangu、pjax,将这些服务开启。(false改为true即可)

进阶文档

PS:

  • 这部分根据自己喜好,看官方文档配置即可
  • 魔改官方主题的尽头其实就是默认就好哈哈

gulp压缩

根据下方推荐视频配置即可

随着网站的发展,你的文件会越来越多,安装这个插件,可以压缩代码,从而实现代码部分的优化,根据我的步骤一步一步操作即可

CODE

安装gulp的cli:
	npm install --global gulp-cli
安装gulp本身工具:
	npm install gulp -g
npm install gulp-htmlclean --save-dev
npm install --save gulp-html-minifier-terser
npm install gulp-clean-css --save-dev
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env
npm install --save-de
v gulp-imagemin
  • 在根目录下,创建文件 gulpfile.js 文件

添加来必力评论系统

  • 我选择这个系统,是因为这个系统能过滤一些不友好的评论,评论能及时提醒、免费等,但是用了几天后发现,太简洁了于是换了Twikoo 评论系统,就不做过多的介绍了。
  • 来比力可以看我的教程,并附上一篇大佬的教程:Vercel + MongoDB 方案搭建 Twikoo 评论系统 包含全部评论系统的搭建

当然也可以选择其它的,自己根据帮助文档配置下 喜欢折腾,美观的就不建议这个评论系统了,建议 Twikoo

来比力评论系统

  • 在主题配置文件找到 comments
    网络异常,图片无法展示
    |

  • 注册来必力,然后登录,然后右上角管理页面,输入必要的信息,最后出现以下的界面,将对应的uid 输入配置文件即可
    网络异常,图片无法展示
    |

网络异常,图片无法展示
|

粘贴的时候注意格式,只粘贴引号里面的内容,还有冒号后面有一个空格

  • 在来必力系统进行一些必要的设置,比如:评论邮件提醒,选择登录方式等等
  • 最后本地运行,随便找一篇文章,看效果即可
    网络异常,图片无法展示
    |

插入代码自定义样式的说明

  • 自定义代码的拆入方法
  • 先找到 主题配置文件的 inject
    一般样式文件会放到 head 里面 ,js文件放在 bottom 里面
  • 新建文件夹,按照箭头位置创建即可,名称随意
    网络异常,图片无法展示
    |

  • 将新建的文件夹,引入到 inject 里面即可,然后运行项目即可
    网络异常,图片无法展示
    |

  • 底部的样式修改(掌握方法后,直接去网上找一些别人改好的样式,复制粘贴即可)
    方法:直接F12然后找到你要修改的标签id,然后返回刚才那个建好的css文件,在里面添加css代码,修改对应的样式即可
    比如修改底部样式为透明
    网络异常,图片无法展示
    |

网络异常,图片无法展示
|

  • 底部添加多个内容信息,并且点击跳转的说明:(有需要的自行了解一下)
    网络异常,图片无法展示
    |

具体效果如下:

网络异常,图片无法展示
|

博客添加文章说明

  • 首先在博客根目录下右键打开git bash,安装一个扩展npm i hexo-deployer-git
  • 然后输入 hexo new post “article title” ,新建一篇文章。article title 是你的文件名称,自行更改
  • 然后打开D:blog\source\_posts的目录,可以发现下面多了一个.md文件,在内容部分就可以添加你想加入的内容即可(ps:图片最好上传到图床)
  • 编写完markdown文件后,根目录下输入hexo g生成静态网页,然后输入hexo s可以本地预览效果,最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

    CODE
hexo clean
hexo g
hexo s
hexo d
  • 博客文件的说明:
  • .md 文件的下面这部分是你的文章信息的配置,根据官方文档或者安装相应的插件,调整为对应的属性即可,这些属性什么含义,参考官方帮助文档即可
    网络异常,图片无法展示
    |

  • 在这个部分下面就是你文章的主题内容了,根据 markdown 的语法自行编辑即可
  • 安装了什么插件就加入对应的标签信息配置即可

博客的部署

通过前面的步骤,你的网址已经出具成果了,想必大家已经迫不及待的想看看成果了把,这个章节就和大家唠唠部署这件事,

首先需要明确:通过部署可以提高你博客的访问速度,请大家务必看完此章节内容

域名

推荐: .top 结尾的域名,首年新用户只需要1元,来年只需要25一年

购买方式:什么平台都可以

域名的备案授权

  • 用新用户的身份买一个轻量的服务器
  • 腾讯云、阿里云等,尽量域名在哪买的就在那买服务器
  • 某宝去买授权嘛,备案域名
  • 服务器到期后,可以不续费服务器,然后备案,具体的方式就不说了,下去自行了解

双线部署及全站 CDN 加速

以前 coding 部署是国内用的人最多的方式,乃何被某腾收购,需要域名并且备案

当然我这里提供两套方案:收费的和不收费的自行选择即可,(ps:会详细注明那套收费那套不收费)

准备

下面两个方案这个部分都需要先操作这个单元,当然这是有域名的情况下,没有域名的就可以直接看 vercel 免费部署

  • 部署到 GitHub
    这里就不bb了,看上面内容就行
  • 购买域名
  • 这里不再赘述,要会基本的解析操作。
  • 添加解析记录(ps:这个小节看下,后面 vercel 部署还会在讲)
    网络异常,图片无法展示
    |

  • 绑定域名
  • 首先要获取博客当前默认域名的 ip ,打开 cmd 输入

    CODE
ping username.github.io
# username记得替换成你的用户名
  • 网络异常,图片无法展示
    |
  • 获取到的ip地址填入域名解析
    网络异常,图片无法展示
    |

  • 进入解析页面后需要添加两条记录。
    网络异常,图片无法展示
    |
  • 两条记录的说明:
    实质起作用的其实是第一条A记录,而第二条CNAME记录指向的其实是www的二级域名。
  • Github的 Pages 功能 自定义上你的域名
  • 步骤:打开 Github你的博客项目——> Settings 选项卡 ——> GiPages 选项:在 Custom domain 添加你的自定义域名
    刷新页面 如果能勾选 Enforce HTTPS 即完成。
    网络异常,图片无法展示
    |

问题汇总

  • 如果你将你的域名配置到 github 上了,以后修改了,重新部署的话,GitHub显示已经上传成功了,但是用你的域名访问,没有变话,这就需要你重新去 解析一下域名

部署到 coding

此方案为收费方案

  • 跟着下方视频一步一步操作即可

部署到vercel

此方案为免费方案,但是还是部署在国外的懂的都懂

  • 注册账号
    进入Vercel官网,先去注册一个账号,使用GIthub账号来登录Vercel。
  • 部署网站
    进入 Dashboard,点击New project 创建项目
    网络异常,图片无法展示
    |

  • 这里可以从已有的 git repository 中导入,也可以选择一个模板。将你的博客项目导入即可
    网络异常,图片无法展示
    |

  • 接下来 点击Deploy,然后静等网站安装依赖以及部署
  • 等项目部署完成,到你的项目出现以下页面,将箭头所指网页,到浏览器就可以访问了
    网络异常,图片无法展示
    |

自定义域名

如果有自己的域名,还可以在 vercel 中进行设置。首先进入 blog 的控制台,在Settings -> Domains 添加域名。‘

网络异常,图片无法展示
|

  • 接着域名需要 DNS 解析到 vercel 提供的记录值
    网络异常,图片无法展示
    |

  • 登录所在的域名服务商,根据 Vercel 提供的记录值,添加两条记录
    网络异常,图片无法展示
    |

  • 此时回到Vercel,可以看到记录值成功生效。
    网络异常,图片无法展示
    |

  • 此时访问自己的域名,同样也能访问到页面
说明
  • 当主分支有代码被推送,Vercel 将会重新拉取代码,并重新构建部署(构建速度可观)
  • 同时vercel还支持serverless,也就是说,不仅能部署静态站点,还能部署后端服务,不过肯定有一定的限制。
  • 默认状态下,Vercel 将会颁发并自动更新 SSL 证书。
  • 也可以用vercel的部署+又拍云cdn 对访问速度进行优化,感兴趣的可以操作下

自动部署

  • 推荐阅读博文

魔改记录

  • 到这个板块,希望你看完了官方文档里面的内容后,将已经添加的必要功能添加后,在看此章节后面的内容
  • 到这里了也希望大家记录一下自己的魔改记录,方便以后!!!
  • 这个板块的内容其实就是,就是在你网址美化的基础上进行魔改,当网页该有的轮子都造出来后,就是怎么让你的网页变的炫酷起来,那就是添加css、js等特效,具体的记录请参考这篇文章:butterfly美化记录

问题汇总

常见问题

  1. 安装Hexo时遇见的报错
    网络异常,图片无法展示
    |

解决办法:

重新配置了下npm安装的全局模块所在的路径,以及缓存cache的路径,又检查了一下环境变量是否正确

设置全局模块命令:

CODE

npm config set prefix "D:\node\node_global"

设置cache模块命令

CODE

npm config set cache "D:\node\node_cache"
  1. 上传到GitHub碰到 “ Deployer not found ” 问题

解决办法:重新 deploy 即可。

CODE

npm install hexo-deployer-git --save

然后 hexo d 就能提交成功

问题解决思路

  • 我在安装hexo 的过程中也出现了很多问题,我谈谈是怎么解决的
  • 遇见问题不要慌,先找找报错信息,找到报错信息后,首先要弄懂什么意思,看是自己配置问题还是其它问题
  • 如果报错的是某个文件第几行的话,大概率是配置问题,就得去提示的文件检查语法
  • 若不是配置问题在百度,大多数情况下都会有解决教程,然后根据解决办法解决下
  • 若你将报错信息百度,未能百度到答案,这时就要求助大佬或者使用git进行版本回退
  • 最后终极大法,那就是删除干净文件重新安装即可

总结

  • 按照步骤本教程一个基本的网页就搭建出来了,后面就是对网页的美化和优化
  • 优化推荐阅读博客
  • 这个系统毕竟是白嫖的,我相信大家的初衷也是白嫖把哈哈,但是有些事情我还得说明下:
  • 虽然是白嫖的,但访问速度和系统稳定性,是网站的最重要的标准,如果你不想花钱的话,我建议有些炫酷的美化功能能省则省,把该有的页面完善下就可以了,毕竟简洁也是一种美
  • 在你美化博客的过程中,最好简单记录下你使用了什么功能,这样后面修改,更新相对容易些,比如:你觉得有更好的方案了,你就可以根据自己的记录,去删除掉之前的然后加上新的
  • 说明:有什么问题欢迎大家来星球大家共同探讨,或者给我留言
  • 最后:既然,你迈出了这一步就好好diy,维护好你的系统!!!!


相关文章
|
24天前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
26天前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
29天前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
1月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
1月前
|
算法 程序员 开发工具
GitHub上新!14个Python项目详细教程(附完整代码)
Python作为程序员的宠儿,越来越得到人们的关注,使用Python进行应用程序开发的也越来越多。 今天给小伙伴们分享的这份项目教程完整代码已上传至GitHub,你可以选择跟着这份教程一段一段的手敲出来这几个项目,也可以直接从GitHub上copy下来。
|
2月前
|
C语言 Python
专为编程小白设计的Python零基础入门教程,GitHub星标破W
市面上大多数技术类的书籍都着重于一步步的构建系统的知识体系,并不是说这样就是不对的,但这样按部就班的学习注定了需要花费大量的时间用来掌握“基础知识”,或死记硬背,或慢慢理解。 然而世界不会迁就你,而是在步步紧逼的告诉你要赶紧学完,赶紧找工作,赶紧挣钱,这才是你生活的基础。 今天给小伙伴们带来了一份《编程小白的第一步Python书》,这本书是专为零基础小白设计的,不会告诉“先学C语言,会更好理解Python”这种狗屁道理。而是先带你掌握搭建项目所用到的最少得知识,再真实的项目搭建中实践自己的所学,逐渐的完善知识体系。
|
2月前
|
Python
封神!霸榜GitHub的零基础Python教程居然是本早教书
近期托朋友的福,给大家找来了一份Python早教书,本来是给我大侄子准备的,结果看我发现更适合零基础学编程的小白。 你想想看,本来就是给孩子看的东西,能难到哪里去,孩子都能上手的东西,到咱手里那还不得上天啊!
|
2月前
|
算法 程序员 开发工具
GitHub上新!14个Python项目详细教程(附完整代码)
Python作为程序员的宠儿,越来越得到人们的关注,使用Python进行应用程序开发的也越来越多。 今天给小伙伴们分享的这份项目教程完整代码已上传至GitHub,你可以选择跟着这份教程一段一段的手敲出来这几个项目,也可以直接从GitHub上copy下来。
|
2月前
|
C语言 Python
专为编程小白设计的Python零基础入门教程,GitHub星标破W
市面上大多数技术类的书籍都着重于一步步的构建系统的知识体系,并不是说这样就是不对的,但这样按部就班的学习注定了需要花费大量的时间用来掌握“基础知识”,或死记硬背,或慢慢理解。 然而世界不会迁就你,而是在步步紧逼的告诉你要赶紧学完,赶紧找工作,赶紧挣钱,这才是你生活的基础。 今天给小伙伴们带来了一份《编程小白的第一步Python书》,这本书是专为零基础小白设计的,不会告诉“先学C语言,会更好理解Python”这种狗屁道理。而是先带你掌握搭建项目所用到的最少得知识,再真实的项目搭建中实践自己的所学,逐渐的完善知识体系
封神!霸榜GitHub的零基础Python教程居然是本早教书
网络资料千千万,下载收藏占一半!你想想看,本来就是给孩子看的东西,能难到哪里去,孩子都能上手的东西,到咱手里那还不得上天啊!