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相关的内容,如果我那个小游戏软著下来了,可能博客的事情就会延后一点。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024第三届AIGC开发者大会圆桌论坛:AI Agent中国落地发展现状及多模态结合具身智能的发展展望

在2024年第三届AIGC开发者大会上,多位业内专家齐聚一堂,共同探讨了AI Agent在中国的落地发展现状以及多模态结合具身智能的发展前景。本次圆桌论坛的嘉宾包括: Fast JP作者于金龙Agent创始人莫西莫必胜作者秦瑞January Agent创始人李晨 多模…

C++编程函数中switch实例用法

switch语法 switch (func_cb.sta) switch后续跟随多个成对的case和break,分别包含if/endif判断语句 每个 case 后跟一个要比较的值和一个冒号,当被测试的变量等于 case 中的常量时,case下一行的语句将被执行 switch 语句可以嵌套。 嵌套时&am…

爬虫逆向实例小记——某数据知识管理网站-DES-ECB模式

aHR0cHM6Ly9rZC5uc2ZjLmNuL2ZpbmFsUHJvamVjdEluaXQ 注意:本文是逆向部分比较少,主要为了流程走通,限于代码搬运工。 第一步:分析页面 此网站经过请求响应,可以看出响应内容为加密内容。 第二步:判断加密类型 在XHR …

【Linux】解决误操作libc.so.6导致的问题,补充:升级glibc注意事项

千万不要轻易动/usr/lib64/libc.so.6。 glibc是Linux系统中最底层的api,Linux几乎所有运行库都依赖glibc。/usr/lib64/libc.so.6属于glibc,在centos7中是个软链接。 一旦误删或误操作libc.so.6,或者glibc新版本不兼容等原因,都可…

c++编程(13)——vector的模拟实现

欢迎来到博主的专栏——c编程 博主ID:代码小豪 文章目录 前言vector的模拟实现vector的成员对象插入、删除、扩容访问vector元素构造函数 填坑:为什么拷贝vector类元素的时候不能用浅拷贝末尾源代码: 前言 博主目前的水平还不能很明确的描述…

CV之Nougat:Nougat(一种基于神经网络实现OCR功能的视觉转换器模型)的简介、安装和使用方法、案例应用之详细攻略

CV之Nougat:Nougat(一种基于神经网络实现OCR功能的视觉转换器模型)的简介、安装和使用方法、案例应用之详细攻略 目录 相关论文 《Nougat: Neural Optical Understanding for Academic Documents》的翻译与解读 Nougat的简介 Nougat的安装和使用方法 1、安装 …

短视频拍摄方式有哪些:四川鑫悦里文化传媒有限公司

​短视频拍摄方式有哪些 在数字化时代,短视频以其短小精悍、传播迅速的特点,成为了人们表达自我、分享生活的重要工具。然而,想要制作出引人入胜的短视频,除了创意和构思,拍摄方式的选择也至关重要。四川鑫悦里文化传…

JavaEE:Servlet创建和使用及生命周期介绍

目录 ▐ Servlet概述 ▐ Servlet的创建和使用 ▐ Servlet中方法介绍 ▐ Servlet的生命周期 ▐ Servlet概述 • Servlet是Server Applet的简称,意思是 用Java编写的服务器端的程序,Servlet被部署在服务器中,而服务器负责管理并调用Servle…

香橙派KunpengPro测评之使用C语言操控40pin引脚

香橙派KunpengPro测评之使用C语言操控40pin引脚 香橙派KunpengPro介绍香橙派实物图香橙派登录界面香橙派KunpengPro的登录界面香橙派KunpengPro的原始桌面香橙派KunpengPro内安装了VScode等软件香橙派KunpengPro的终端 香橙派硬件参数核心性能图形与显示接口丰富性扩展与兼容性…

2024年中国金融行业网络安全研究报告

网络安全一直是国家安全的核心组成部分,特别是在金融行业,金融机构拥有大量的敏感数据,包括个人信息、交易记录、财务报告等,这些数据的安全直接关系到消费者的利益和金融市场的稳定,因此金融行业在网络安全建设领域一…

短道速滑短视频:四川京之华锦信息技术公司

短道速滑短视频:冰雪激情的视觉盛宴 随着冬奥会的热度不断攀升,短道速滑作为其中一项紧张刺激、充满观赏性的运动,受到了越来越多人的关注。而在社交媒体和短视频平台的助力下,短道速滑短视频成为了人们了解、欣赏这项运动的新窗…

MPLS原理与配置

1.MPLS概述 (1)传统IP路由转发 (2)MPLS基本概念 ⦁ MPLS起源于IPv4(Internet Protocol version 4),其核心技术可扩展到多种网络协议,包括IPv6(Internet Protocol ver…

LFSR线性反馈移位寄存器及Verilog实现

一、LFSR LFSR线性反馈移位寄存器,通常由移位寄存器和异或门组成,主要用于产生伪随机序列等。 线性反馈的含义是各个寄存器的输出通过一个反馈函数连接到第一级触发器的输入;LFSR中的寄存器的个数被称为LFSR的级数。 LFSR分为两类&#xff…

【机器学习】K-近邻算法(KNN)全面解析

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 K-近邻算法(KNN)全面解析概述1. 基本概念与原理1.1 KNN算…

【Vue学习记录】如何通过Vue-cli创建并启动一个项目}}}}}}

1.安装node.js 略 2.安装npm.js 略 3.安装Vue 略 4.安装Vue.cli 略 步骤1-4 参考: 最详细的vue安装教程 5.在Vue.cli里创建一个新项目 略 6.启动这个新项目 略 步骤5-6 参考: 五分钟教你使用vue-cli3创建项目(三种创建方式&#…

卢文岩博士受邀参与中国科学院大学校友论坛 解码DPU核心价值

近日,第五届中国科学院大学校友创新论坛正式举行,本次论坛聚焦科技前沿领域,旨在搭建高端对话平台,促进产学研深度融合。在大算力时代——AI技术前沿沙龙上,中科驭数高级副总裁、CTO卢文岩博士受邀分享《DPU——连接算…

【马蹄集】— 百度之星 2023

BD202301公园 可以先 b f s bfs bfs统计一下 t , f t,f t,f到达每个点的距离&#xff0c;还有 n n n到达其他点的距离即其他点到达 n n n的距离 然后枚举每个点 直接计算得到最小值即可 注意特判有人无法到达 n n n的情况 code: #include<bits/stdc.h> #define endl \n…

MaxKB,基于 LLM 大语言模型的知识库问答系统,开箱即用,支持快速嵌入到第三方业务系统。

MaxKB 是一款基于 LLM 大语言模型的知识库问答系统。MaxKB Max Knowledge Base&#xff0c;旨在成为企业的最强大脑。开箱即用&#xff0c;支持快速嵌入到第三方业务系统。 项目链接 github.com/1Panel-dev/MaxKB 项目介绍 MaxKB 是一款基于 LLM 大语言模型的知识库问答系统…

C++代码使用ClangCL编译注意事项

遇到cmake指定模板类工程使用msvc的clang编译器编译代码&#xff0c;代码变量出现与预期不符的问题&#xff1b; 如下&#xff1a; clangcl将实现放到头文件里则不会出现这样的情况&#xff1b; 最后按照pcl的模板类写法则解决这个问题&#xff1b;

WPF之TextBlock文本标签

TextBlock: 用于显示文本内容 常用属性 Text设置展示的文本fontsize设置字体大小FontWeight设置字体粗细FontFamily设置字体样式 实例 <Grid><TextBlock Text"显示文本"FontSize"10"FontWeight"Bold"Foreground"red">&l…