Hexo最新实战:(一)Hexo7.0+GitHub Pages博客搭建

前言

很多平台都能写博客还有创作激励,为什么我又要搭一个?为什么这次要选择用Hexo框架?

对应的原因是流量自由和省钱,第一个,很多平台能写但不是都有收益,而且平台有自身的规则,比如会屏蔽一些推广类信息。如果我哪天做了一产品,是没办法直接用平台博客的方式硬推的,至少放码和链接不行。第二个用Hexo搭到GitHub上,我可以不用买服务器,毕竟现在也还没有想法要做一个什么样的东西。

总之,有个独立博客,相比平台博客在内容约束上更自由。有想法了就发出来,做了游戏什么的就放出来,md的文章以后要存储备份可以转word,更方便在副业的路上轻装探索。

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架,用于快速、简单且高效地搭建个人或团队的静态博客网站。说白了他是一个静态网站生成器,我们新增文章只需要编辑md文件,通过运行命令再生成像html的静态文件。其实我挺早听过Hexo,但一直没用,直到我cms搭的博客别人挂马后。我关闭网站全面使用平台博客,但经种种原因,我又萌生了建独立博客的想法,并且这次打算走长期路线,第一步先记录上次Hexo搭建过程仅供参考。

流程

  • 本地构建Hexo

  • 配置 GitHub

  • 代码上传与备份

  • 个性化域名绑定

环境搭建

Hexo的博客,不管是页面的添加还是构建都是通过npm命令,所以最基本要把Node安装了。项目部署和部署的地方又在GitHub,所以Git也要提前装好。这里强调一下,运行Hexo命令最好在Git的GUI窗口里,不要用Windows的cmd,坑多,关于Node和Git环境安装就跳过了。

构建Hexo

安装Hexo

npm install -g hexo

检验Hexo是否安装

hexo -v

项目构建

# 创建一blog项目
hexo init blog
​
# 进入项目
cd blog
​
# 安装依赖包
npm install

其他操作

#右键 Git Bush,用户项目自动化部署
npm install hexo-deployer-git --save
​
hexo _config.yml中文乱码问题
用Notepad++等编辑器打开,选择 “编码” -> “转为UTF-8编码”

安装项目开发者操作包.jpg

项目预览

# 清理旧的静态文件
hexo clean
​
# 生成静态文件
hexo g
​
# 运行预览项目
hexo s

Snipaste_2024-05-23_19-55-21.jpg

Snipaste_2024-05-23_19-57-44.jpg

配置 GitHub

这里虽然只是写的配置GitHub,其实包含了本地用Git生成SSH密钥对,和GitHub上公钥添加,提交Token的获取,以及Pages服务的开启。还有仓库名的建立也有讲究,下面就从这些点开始逐一展开。

建立仓库

仓库名是个什么讲究法呢?就是格式要保持 “github账号名.github.io”, 比如我的账户名是“z11r00”,那么仓库就要建成 “z11r00.github.io”。如果不这样,最后等用Hexo部署完毕后,初始的域名可能就是 “github账号名.github.io/仓库名”,会在后面多了一个路径,而且hexo的config没有设置好连css都加载不出来。

image.png

设置SSH

GitHub 的 SSH(Secure Shell)主要用于安全地连接到 GitHub 服务器,其实就是平时Git常用的克隆、拉取、提交、推送等操作。而好处除了安全外,就是提交代码不用每次都要输入账号密码。如果安装了hexo-deployer-git的话,只需一个命令就可以完成项目从静态构建到自动部署。

生成SSH密钥对

打开Git面板,输入 “ssh-keygen -t rsa -C GitHub账户”, 这里的GitHUb账户是你登陆GitHub的邮箱等方式。生成后找到目录下的id_rsa.pub(公钥),用编辑器打开并复制。

实际生成id_rsa文件.jpg

GitHub中添加SSH公钥

登陆GitHub网站,点击个人头像,找到 “Settings”->"SSH and GPG keys"后,点击 “New SSH keys”,最后将前面复制的很长的公钥字符串粘贴到Key文本框中。

github添加ssh.jpg

github添加ssh key.jpg

github粘贴ssh.jpg

验证设备是否可连接

通过 “ssh -T git@github.com” 命令,验证当前的设备是否可以连接。

校验ssh是否绑定.jpg

获取提交的token

虽然说SSH连接不用一直登陆,但是初次还要要的。而且不光要输入账号密码还需要一个提交用的Token,没有这个,运行hexo d一直提示Logon failed, 这个后面会集中列出报错事故的。

获取token,还是进入“Settins”,找到 “Developer settings”->“Personal access tokens”->“Tokens(classic)”, 然后设置备注和过期时间。最主要的权限要勾选 “workflow”、“gist”、“user”,点击 “Generate”按钮,生成的"ghp_"为前缀的就是token了,复制并保存下来。

提交仓库失败1.jpg

提交仓库失败3.jpg

提交仓库失败4.jpg

提交仓库失败5.jpg

项目部署

项目部署的其实是将Hexo生成的静态文件提交到github上,后期添加文章也就是markdown文件,继续重新生成,重新部署。而项目的代码却在本地,虽然代码量不多,但是里面的package.json和_config.yml,以及用到的主题包,还是有必要保存一下。所以我这里的方法是,静态部署项目放在一个公有仓库,而项目源代码单独提交到一私有仓库下。

修改配置

打开项目根目录下的_config.yml,主要添加仓库的地址,其他的配置下篇再介绍。因为hexo很多玩法更多的是配置和各种依赖,比如可以添加统计、留言、修改主题、站内搜索、甚至广告位等等。

image.png

静态文件生成

通过 “hexo clean” 先清理,然后执行 “hexo g” 重新生成。

将博客编译为静态文件项目.jpg

开始部署

通过命令 “hexo d”,开始部署项目,如果第一次运行,就需要前面提到的输入github账号密码。确认Login后会再次弹一个窗口就是输入Token了,最后完成部署。这里需要注意一下的是,最好用Git面板运行命令,如果是cmd很有可能第二次的窗无法弹出,亲测坑点。

页面上传.jpg

image.png

访问测试

部署完成就进入仓库下,除了查看提交的代码外,打开仓库下的 “Settings”,找到 “Pages”。

提交仓库失败6.jpg

个性化域名绑定

有一个git域名其实也不错,为什么还要买一个去绑定呢?一个是我本身这域名就空在这里,第二个是可以给博客增加一点IP点,第三个是更利于某度的爬取。我看其他博主说国内一些搜索引擎屏蔽了github的pages博客,当然我没有验证过,下次也要做SEO相关的时候可以测试一下。

获取IP地址

要想知道当前项目部署的独立IP地址,只需要ping一下github分配的域名,比如我直接 “ping z11r00.github.io”就可以看到了。

IP获取.jpg

域名解析

进入购买的域名控制台,给自己的域名添加两个解析,一个指向旧域名,一个解析到前面获取到的IP地址。

域名解析.jpg

项目绑定域名

进入仓库的“Settings”下,点击 “Pages”,找到 “Custom domain”,将自己的域名粘贴进文本框保存。然后在项目的“source” 新建CNAME(没有后缀), 打开文件粘贴域名,比如我的zerofc.cn,最后再重新部署项目访问。

image.png

报错汇总

1.extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug 项目启动后报的这个,是因为缺失了一些依赖包,上面的是没有 pug 以及 stylus 的渲染器,解决方法就是安装对应的依赖。

npm install hexo-renderer-pug hexo-renderer-stylus --save

2.运行后打开hexo博客上的中文乱码 解决方法是用Notepad++等编辑器打开,选择 “编码” -> “转为UTF-8编码”。

3.unable to access ''xxxxxx": Empty reply from server 出现这个报错的是项目初次部署时,原因就是没有设置Token,解决方法就是前面“配置 GitHub”的“提交Token获取”部分。

4.unable to access 'xxxxxxxxxx': The requested URL returned error: 403 出现这个一般就是间接性打开GitHub网站,毕竟是国外网站,多刷新几下,多请求几下就可以了。

写在后面

既然博客已经搭起来了,后面还有分两步走,凑成三部曲。第一个是Hexo的各种配置和插件的玩法,第二个是Hexo博客SEO相关的内容,如果我那个小游戏软著下来了,可能博客的事情就会延后一点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/18663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【区块链】外部应用程序与区块链进行交互

一,外部应用程序与区块链进行交互案例目标与流程 1.1案例目标 掌握FISCO BCOS应用环境的搭建 与使用(FISCO BCOSWeBASE)掌握基于Java SpringBoot的应 用程序后端项目搭建与开发。掌握应用程序后端与FISCO BCOS 链的交互。掌握应用程序前端…

WPF hc:PropertyGrid 嵌套显示

重点: 编写Edit特性即可: public class ParameterEditor : PropertyEditorBase{public override FrameworkElement CreateElement(PropertyItem propertyItem){var pg new PropertyGrid();return pg;}public override DependencyProperty GetDependen…

基于Vue+SpirngBoot的博客管理平台的设计与实现(论文+源码)_kaic

摘 要 随着当下社会的发展,互联网已经成为时代的主流,从此进入了互联网时代,对大部分人来说,互联网在日常生活中的应用是越来越频繁,大家都在互联网当中互相交流、学习、娱乐。博客正是扮演这样一个角色。博客已成为当…

实验八 单区域OSPF路由协议配置

一、实验目的 掌握 OSPF 动态路由协议的配置、诊断方法。 二、实验步骤 1、 运行Cisco Packet Tracer软件,在逻辑工作区放入三台路由器、两台工作站PC及一台笔记本,分别点击各路由器,打开其配置窗口,关闭电源,分别加…

Python装饰器的应用

Python 中的装饰器是一种语法糖,可以在运行时,动态的给函数或类添加功能。装饰器本质上是一个函数,使用 函数名就是可实现绑定给函数的第二个功能 。它的作用就是在不修改被装饰对象源代码和调用方式的前提下为被装饰对象添加额外的功能。 …

Ownips+Coze海外社媒数据分析实战指南

目录 一、引言二、ISP代理简介三、应用实践——基于Ownips和coze的社媒智能分析助手3.1、Twitter趋势数据采集3.1.1、Twitter趋势数据接口分析3.1.2、Ownips原生住宅ISP选取与配置3.1.3、数据采集 3.2、基于Ownips和Coze的社媒智能助手3.2.1、Ownips数据采集插件集成3.2.2、创建…

【Unity入门】认识Unity编辑器

Unity 是一个广泛应用于游戏开发的强大引擎,从 1.0 版本开始到现在,其编辑器的基本框架一直保持稳定。其基于组件架构的设计,使得界面使用起来直观且高效。为了更好地理解 Unity 的界面,我们可以将其比喻为搭建一个舞台。以下是对…

【AI+chat】推荐一款基于大模型的智能对话机器人,支持微信公众号、企业微信应用、飞书、钉钉接入

之前写了一篇文章, coze配置 kimichat集成到微信公众号聊天 【AIchat】手把手配置kimichat集成到微信公众号中对话聊天 。 有同学私信我有没有开源项目, 这里推荐一款chatgpt-on-wechat。 官方git地址:https://github.com/zhayujie/ch…

Yann LeCun 和 Elon Musk 就 AI 监管激烈交锋

🦉 AI新闻 🚀 Yann LeCun 和 Elon Musk 就 AI 监管激烈交锋 摘要:昨天,Yann LeCun 和Elon Musk 在社交媒体就人工智能的安全性和监管问题展开激烈辩论。LeCun 认为目前对 AI 的担忧和监管为时过早,主张开放和共享。而…

Ps:消失点滤镜 - 透视平面和网格

Ps菜单:滤镜/消失点 Filter/Vanishing Point 快捷键:Ctrl Alt V “消失点”滤镜中的透视平面 Plane和网格 Grid用于在编辑图像时保持正确的透视效果。 只有定义了与图像透视对齐的矩形平面,才能在消失点中进行编辑。平面的精确度确定了能否…

vue数字翻盘,翻转效果

数字翻转的效果 实现数字翻转的效果上面为出来的样子 下面为代码&#xff0c;使用的时候直接引入&#xff0c;还有就是把图片的路径自己换成自己或者先用颜色替代&#xff0c;传入num和numlength即可 <template><div v-for"(item, index) in processedNums&quo…

MOS管开关电路简单笔记

没错&#xff0c;这一篇还是备忘录&#xff0c;复杂的东西一律不讨论。主要讨论增强型的PMOS与NMOS。 PMOS 首先上场的是PMOS,它的导通条件&#xff1a;Vg-Vs<0且|Vg-Vs>Vgsth|&#xff0c;PMOS的电流流向是S->D,D端接负载&#xff0c;S端接受控电源。MOS管一般无法…

Java Web集成开发环境Eclipse的安装及web项目创建

第一步&#xff1a;下载安装JDK http://t.csdnimg.cn/RzTBXhttp://t.csdnimg.cn/RzTBX 第二步&#xff1a;下载安装Tomcat Tomcat下载安装以及配置_tomcat下载配置-CSDN博客文章浏览阅读2.5k次&#xff0c;点赞2次&#xff0c;收藏13次。Tomcat下载安装及其配置_tomcat下载配…

【云原生】kubernetes中的认证、权限设置--RBAC授权原理分析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

【云原生 | 59】Docker中通过docker-compose部署ELK

目录 1、组件介绍 2 、项目环境 2.1 各个环境版本 2.2 Docker-Compose变量配置 2.3 Docker-Compose服务配置 3、在Services中声明了四个服务 3.1 ElasticSearch服务 3.2 Logstash服务 3.3 Kibana服务 3.4 Filebeat服务 4、使用方法 4.1 方法一 4.2 方法二 5、启动…

MySQL8报错Public Key Retrieval is not allowedz 怎么解决?

问题描述 当我们使用数据库管理工具连接mysql8的时候&#xff0c;可能遇到报错&#xff1a; Public Key Retrieval is not allowed 解决办法 1、在连接属性中配置allowPublicKeyRetrieval设置为true 2、在连接URL中加上配置allowPublicKeyRetrieval为true

margin-left: auto;使元素靠右

摘要&#xff1a; 今天写样式遇到一个东西&#xff0c;就是需要表单居右显示的&#xff0c;但是作用了弹性布局&#xff0c;其他的都不行的&#xff0c;一开始使用了浮动&#xff0c;但是使用了浮动后盒子就不继承父盒子的宽度了&#xff0c;移动端还行&#xff0c;自动回到100…

被追着问UUID和自增ID做主键哪个好,为什么?

之前无意间看到群友讨论到用什么做主键比较好 其实 UUID 和自增主键 ID 是常用于数据库主键的两种方式&#xff0c;各自具有独特的优缺点。 UUID UUID 是一个由 128 位组成的唯一标识符&#xff0c;通常以字符串形式表示。它可以通过不同的算法生成&#xff0c;例如基于时间…

postgressql——Tuple学习(2)

Tuple含义 作用 PG并没有像Oracle那样的undo来存放旧数据&#xff0c;而且PG没有真正意义上的delete&#xff0c;而是将旧版本直接存放于relation文件中&#xff0c;也就是成为了dead tuple。我们可以理解成“过期的数据”含义 tuple就相当于一个存储数据的小容器&#xff0c;…

【机器学习】解锁AI密码:神经网络算法详解与前沿探索

&#x1f440;传送门&#x1f440; &#x1f50d;引言&#x1f340;神经网络的基本原理&#x1f680;神经网络的结构&#x1f4d5;神经网络的训练过程&#x1f686;神经网络的应用实例&#x1f496;未来发展趋势&#x1f496;结语 &#x1f50d;引言 随着人工智能技术的飞速发…