首页 > 其他分享 >Hexo最新实战:(一)Hexo7.0+GitHub Pages博客搭建

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

时间:2024-05-28 16:10:50浏览次数:17  
标签:Hexo7.0 GitHub Hexo hexo 博客 域名 github

前言

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

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

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

image.png

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

Snipaste_2024-05-23_19-48-32.jpg

检验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 [email protected]” 命令,验证当前的设备是否可以连接。
校验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 'https://github.com/z11r00/z11r00.github.io.git/': Empty reply from server
出现这个报错的是项目初次部署时,原因就是没有设置Token,解决方法就是前面“配置 GitHub”的“提交Token获取”部分。

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

写在后面

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

 

标签:Hexo7.0,GitHub,Hexo,hexo,博客,域名,github
From: https://www.cnblogs.com/zerofc/p/18218246

相关文章

  • 源代码管理工具 github
    GitHub是一个免费开源代码管理平台,它提供了一个远程仓库,用于存放和管理使用Git进行版本控制的代码GitHub结合了Git的版本控制能力与Hub的便利性,为用户提供了一个基于Web的界面,使得开发者可以更加方便地管理项目和协作。通过GitHub,用户可以创建公开或私有的代码仓库,这些仓库可以......
  • 源代码管理工具Github介绍
    GitHub介绍什么是GitHubGitHub是一个基于Git版本控制系统的在线代码托管平台。它于2008年由TomPreston-Werner、ChrisWanstrath、PJHyett和ScottChacon创建,并于2018年被微软收购。GitHub为开发者提供了一个协作开发和版本控制的工具,让他们能够更轻松地管理和共享代码。Git......
  • git更新代码到github仓库注意事项
    更新步骤:1.在电脑项目目录右键选择OpenGitBashhere2.输入命令gitinitgitadd.gitcommit-m"Initialcommit"gitbranch-Mmaingitremoteaddoriginhttps://github.com/你的用户名/你的仓库名.gitgitpush-uoriginmain3.注意事项3.1.Git的全局配置用户名......
  • 代码界的超级英雄:GitHub的奇幻冒险之旅
    GitHub简介GitHub是一个用于代码托管、版本控制和协作开发的平台。它于2008年2月8日由ChrisWanstrath、PJHyett和TomPreston-Werner创立,目前由微软拥有。GitHub是目前最流行的代码托管平台之一,拥有超过8000万个项目和超过2.7亿活跃用户。它被广泛用于各种软件开发项目,包括开......
  • 代码管理工具——GitHub
    一、GitHub介绍GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格式进行托管,故名GitHub。Github可以托管各种git库,并提供一个web界面(用户名.github.io/仓库名)官方网站:www.github.com1、获取最新最热门最实用的开源组件,有助于开发公司项目;2、获......
  • GitHub介绍
    简介GitHub是一个面向开源及私有软件项目的托管平台,因其只支持Git作为唯一的版本库格式进行托管而得名。该平台自2008年4月10日正式上线以来,已成为全球软件开发者和组织机构协作的重要工具。Github作为一个基于Git的代码托管平台,不仅提供版本控制的功能,还为开发者提供了一系列的......
  • 《HelloGitHub》第 98 期
    兴趣是最好的老师,HelloGitHub让你对编程感兴趣!简介HelloGitHub分享GitHub上有趣、入门级的开源项目。https://github.com/521xueweihan/HelloGitHub这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言Python、Java、Go、C/C++、Swift.........
  • ChatGPT-Next-Web一键部署搭建教学:Github开源+Vercel+API 快速部署
    ChatGPT-Next-Web一键部署搭建教学:Github开源+Vercel+API快速部署文章目录ChatGPT-Next-Web一键部署搭建教学:Github开源+Vercel+API快速部署导语:需要用到的链接汇总1、github项目直达地址2、vercel服务器直达地址3、三方API获取一、Github项目`star`+Vercel......
  • GitHub源代码管理工具
    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub拥有1亿以上的开发人员,400万以上组织机构和3.3亿以上资料库,它是开放、自由、分享和协作的,每个人都可以在上面创建仓库、贡献代码、提出pullrequest请求、参与讨论和交......
  • GitHub——开源世界的无限可能
    引言      在数字时代的浪潮中,GitHub已成为无数开发者心中的圣地。作为全球最大的代码托管平台,GitHub不仅见证了无数创新项目的诞生,更成为连接全球开发者的重要桥梁。今天我来简单介绍一下这个开源世界的GOAT,GitHub。一、GitHub的历史与发展      GitHub成......