当前位置:   article > 正文

2024最新Hexo+GitHubPages搭建个人博客_hexo+github搭建个人博客

hexo+github搭建个人博客

Hexo是一个快速、简洁且高效的博客框架,有丰富的主题和插件可供使用。这篇文章讲述如何使用Hexo+GitHub Pages搭建个人博客。

1. 环境需求

Hexo是基于Node.js的框架,同时我们要用到git进行部署。

官网地址(推荐安装最新版本):

安装完成后在终端进行验证,按下win+R打开运行窗口

在这里插入图片描述

输入cmd,回车,即可打开终端

在这里插入图片描述

输入命令验证环境是否搭建成功

在这里插入图片描述

若安装过程中遇到问题,可百度解决,这里不做过多讲解

2. 本地搭建Hexo博客

我们现在本地将博客搭建起来,搭建方法可自行到官网查阅官方文档,官网地址:Hexo

小白可依据以下详细步骤搭建:

新建Blog文件夹用来存放博客程序,位置任意。我这里建在D盘下

在这里插入图片描述

右键->显示更多选项,点击Open Git Bash here,如果无此选项,请检查环境搭建时候成功

在这里插入图片描述

打开后输入以下命令一键安装hexo

npm install -g hexo-cli
  • 1

可能遇到的问题:

输入命令后长时间卡住无法安装成功,可参考以下解决方案

此时按下Ctrl+C停止当前命令,输入以下命令安装淘宝镜像

npm config set registry https://registry.npmmirror.com
  • 1

然后重新输入命令安装hexo

完成后输入以下命令初始化并安装组件

hexo init
npm install
  • 1
  • 2

可能遇到的问题:

输入hexo init后,可能卡在INFO Install dependencies不动,此时需按下Ctrl+C停止此命令,继续输入npm install即可。

启动服务器(默认情况下,访问网址为: http://localhost:4000/

hexo server
  • 1

在这里插入图片描述

按住Ctrl键,再用鼠标左键点击网址,可在浏览器中打开预览页面

在这里插入图片描述

hexo在本地搭建完成,可参考官方文档继续完善。

3. 部署到GitHub Pages

3.1 创建GitHub仓库

GitHub新建仓库,仓库名为用户名.github.io,这里的用户名替换为你自己GitHub上的用户名

比如我的用户名是RationalDysaniaer,新建的仓库名就是rationaldysaniaer.github.io

在这里插入图片描述

创建时选择public,推荐勾选Add a REAMD file为仓库创建描述文件

3.2 将博客部署到GitHub

在刚刚创建的文件夹下再次打开git bush,安装hexo-deployer-git插件

npm install hexo-deployer-git --save
  • 1

打开_config.yml文件,更改最后面的deploy内容,用户名替换为自己的github用户名

deploy:
  type: git
  repository: https://github.com/用户名/用户名.github.io.git  
  branch: m
  • 1
  • 2
  • 3
  • 4

生成静态文件

hexo g
  • 1

上传到GitHub

hexo d
  • 1

此时出现弹窗:

在这里插入图片描述

需输入用户名,出现第二个弹窗,输入密码

在这里插入图片描述

这时发现报错,我们看到提示信息

raraxiaremote: Support for password authentication was removed on August 13, 2021

意思是2021年8月13日取消了对密码身份验证的支持,我们需要使用GitHub的个人访问令牌来代替密码

在设置->开发者设置

在这里插入图片描述

在这里插入图片描述

创建新token

在这里插入图片描述

填写Note为hexo,勾选repo授予权限

在这里插入图片描述

点击最下方Generate token创建成功后,复制该token

重复之前的上传操作,使用access token代替密码,即可上传成功

3.3 使用ssh密钥链接GitHub

每次上传都需要输入一次用户名和token显然比较麻烦,安全性也较低,配置ssh后就可以更加方便的上传文件

打开C盘,进入Users文件夹,接着打开电脑用户名文件夹,寻找是否有.ssh文件夹,如果有的话需删除掉,没有就继续进行下面的步骤

在这里插入图片描述

在该文件夹下右键打开Git Bash,输入以下命令生成ssh密钥,中途需按下三次回车键

ssh-keygen -t rsa -C "github绑定的邮箱"
  • 1

成功后在该目录下生成了.ssh文件夹,用记事本打开.ssh文件夹下的id_rsa.pub文件,复制里面的内容

在GitHub设置中点击SSH and GPG keys选项,点击New SSH key

在这里插入图片描述

出现以下界面

在这里插入图片描述

填写Title为hexo,将复制的内容粘贴到Key文本框中,点击Add SSH key后输入GitHub密码,即可添加成功

再次打开Git Bush,输入以下命令验证是否能连接成功

ssh -T git@github.com
  • 1

如果询问是否继续连接,输入yes即可,如下图出现successfully即为连接成功

在这里插入图片描述

最后,配置用户名和邮箱

git config --global user.name "Github上的username"
git config --global user.email "GitHub绑定的邮箱"
  • 1
  • 2

恭喜你已经成功配置好了ssh连接GitHub,可以无需在上传时输入用户名密码了。

博客地址:https://用户名.github.io

将用户名替换为你自己的GitHub用户名,就可以通过此网址访问你的博客了,快将自己的博客网址发给你的小伙伴炫耀一下吧!

如果想要时博客更加美观,可以到hexo官网下载博客主题,同时查看官方文档修改配置文件,发表博客文章,一点点完善你的博客。

4. 部署到Vercel加速访问

GitHub在国内需要科学上网,不然就算能访问速度也跟蜗牛一样。如果想把博客分享给朋友,他不会科学上网打不开,岂不尴尬。我们可以通过Vercel加速访问,使你的小伙伴无需翻墙就能看到你的博客。

打开Vercel官网登录页面: Vercel,点击右上角注册按钮开始注册,我们是个人用户所以选择第一项Hobby,输入用户名

在这里插入图片描述

选择继续GitHub上,连接GitHub,注册成功

在这里插入图片描述

添加新项目

在这里插入图片描述

点击Install

在这里插入图片描述

选择你的GitHub中博客所在的存储库,Install

在这里插入图片描述

点击Import导入

在这里插入图片描述

点击Display部署

在这里插入图片描述

上传完成后点击Continue to Dashboard跳转到主页

在这里插入图片描述

点击上方Setting可进入设置界面更改项目名称

在这里插入图片描述

到这里就算完成部署了,可以通过项目主页的的Domains访问你的博客。

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/617355
推荐阅读
相关标签
  

闽ICP备14008679号