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

news2024/12/23 4:30:01

前言

很多平台都能写博客还有创作激励,为什么我又要搭一个?为什么这次要选择用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.coloradmin.cn/o/1710007.html

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

相关文章

鸿蒙大厂目前政策变现沉淀思考

鸿蒙引擎定制优化 鸿蒙端hotfix: 技术栈太大了,但是鸿蒙需要学习什么呢? 什么最有价值? 这就是接下来需要表达下我的观点: 1、APP开发 2、应用市场技术专员 【游戏、电商重型APP性能的处理 SmartPerf、构建自己的工…

如果一个开发初学者从今天开始,他们应该学习什么?

What should a beginner developer learn if they were to start today? by Scott Hanselman 如果从今天才开始学习,新手开发者要学习什么? 新的开发人员今天应该从哪里开始? 他们应该学习什么来为自己的职业生涯做好准备?Sco…

做微火全域运营服务商要注意的风险有哪些?

随着全域运营赛道日渐兴起,微火全域运营服务商申请人不断增多,逐渐成为众多新兴职业中的一大热门。 所谓微火全域运营服务商,顾名思义,就是通过操作微火全域运营系统做全域运营的一类群体,其业务范围为公域和私域内所有…

IC开发——Verilator

1. 简介 Verilator 是一个开源的 Verilog 和 SystemVerilog 硬件描述语言 (HDL) 仿真器。它是一个高性能的仿真器,可以将 Verilog 和 SystemVerilog 代码转换为 C/SystemC 代码,并生成可执行的仿真模型。 Verilator 的主要特点包括: 高性能:Verilator 生成的仿真模型具有非常…

Bootstrap 3.x 版本基础引入指南

Bootstrap 是一款广受欢迎的前端框架,它简化了网页设计与开发流程,帮助开发者快速创建响应式布局和美观的网页界面。本文将向您介绍如何在项目中引入 Bootstrap 3.x 版本的基本步骤,包括 CSS 和 JavaScript 文件的引用,以及必要的…

关于Java Agent的使用、工作原理、及hotspot源码 解析

说明: 本文很长,长到超出了掘金编辑器的限制字符数 10万,所以我在最后边只是图解,没有更多的文字和代码描述了,本文知识点较多,如果没接触过agent那必然大概率会懵(大部分知识点讲解完后&#x…

瑞_Windows环境下使用bat重启jar包等服务

文章目录 命令示例重启ray-project.jar重启redis服务 🙊 前言:经验分享——Windows环境下使用.bat批处理文件重启 jar 包等服务。在学习或者工作日常中,有时候会需要在 Windows 系统环境下去启动 jar 包或其它服务,此时如果使用关…

百世慧入选第七届数字中国建设峰会“2024企业数字化转型典型应用案例”

5月24日-25日,第七届数字中国建设峰会在福州举行。本届峰会是国家数据工作体系优化调整后首次举办的数字中国建设峰会,主题为“释放数据要素价值,发展新质生产力”。 为了全方位展示各领域数字化最新成果,共创数字中国美好未来&a…

mail发送调用接口如何与三方服务无缝对接?

mail发送调用接口的性能怎么样?调用邮件接口的技巧? 为了提高效率和自动化水平,企业通常会选择使用mail发送调用接口。然而,仅仅使用这些接口还不够,如何与各种第三方服务无缝对接同样至关重要。AokSend将探讨如何有效…

Golang性能分析工具pprof--远程分析时无法定位源代码行数问题解决方案

场景 通过命令行模式的list命令,为了查看指标消耗在具体哪一行,需要源代码。但实际程序是部署在线上或者程序的源代码目录变了,则pprof从默认路径找不到代码,无法显示是哪一行的问题。 通过浏览器模式的source页面,有…

Linux java jni调用C++封装动态库

由于项目中java需要调用第三方提供的C动态库;由于第三方动态库传入的参数较多,还伴随着指针传入操作,导致java调用极为不便!因此催生出对于第三方的C动态库进行二次封装。java调用只需按结构传入一个结构化的string即可。话不多说…

狂暴少帅短视频:成都科成博通文化传媒公司

狂暴少帅短视频:热血与激情的碰撞 在当下这个信息爆炸的时代,短视频以其独特的魅力迅速占领了人们的视线。而在众多短视频创作者中,一位名为“狂暴少帅”的创作者以其独特的风格和引人入胜的内容,赢得了广大网友的喜爱和追捧。今…

关于pdfbox读取pdf

最近,想着将pdf的文件进行读取其内容,发现了一个比较好用的依赖pdfbox。目前使用这个依赖,进行实现一个简单实例,如果之后需要使用到更深的了解,会进行更新。这里提醒一下:jdk8尽量采用pdfbox3.x版本。 对…

怎样查看JavaScript中没有输出结果的数组值?

在JavaScript中,可以方便地定义和使用数组,对于已经定义的数组,怎样查看其值呢? 看下面的示例,并运行它。 上面的示例中,标签不完整,请补充完整再试运行。你知道少了什么标签么? 注…

react ant 表格实现 拖拽排序和多选

项目背景 : react ant 要实现 : 有多选功能(实现批量删除 , 也可以全选) 可以拖拽(可以复制 , 方便顶部的搜索功能) 要实现效果如下 1 这是最初的拖拽功能实现 , 不能复制表格里的内容 , 不符合要求 2 更改了ROW的内容 , 实现了可以复制表格内容 代码 //控制是否可以选中表格…

拉普拉斯IPO:科技与产业深度融合,实现业务领域延展

我国拥有全球最具竞争优势的光伏产业链,基于降本增效的需求,光伏产业对于技术革新具有持续的需求。拉普拉斯新能源科技股份有限公司(以下简称“拉普拉斯”)凭借深厚的技术积累,以及对光伏产业深刻的理解,聚…

GitLab的安装及基础操作

1. 项目目标 (1)熟练使用rpm包安装gitlab (2)熟练配置gitlab (3)熟练创建gitlab群组、成员、项目 (4)熟练使用gitlab推送和拉取代码 2. 项目准备 2.1. 规划节点 主机名 主机I…

数据结构初阶 栈

一. 栈的基本介绍 1. 基本概念 栈是一种线性表 是一种特殊的数据结构 栈顶:进行数据插入和删除操作的一端 另一端叫做栈底 压栈:插入数据叫做压栈 压栈的数据在栈顶 出栈: 栈的删除操作叫做出栈 出栈操作也是在栈顶 栈遵循一个原则 叫做…

人脸检测--FaceNet(四)

FaceNet 是一个由 Google 研究团队开发的人脸识别系统,它基于深度学习技术,可以实现高精度的人脸识别、验证和聚类任务。FaceNet 通过学习直接从图像像素到人脸嵌入的映射,使得它在各种人脸识别任务中表现出色。下面是对 FaceNet 的详细介绍&…

python探索时钟模拟之旅:从设计到实现

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、引言 二、设计时钟类 三、代码实现 四、扩展功能:指定步数后自动停止 五…