hexo个人博客搭建————基础流程
2024-07-06 05:05:44

hexo搭建的流程几乎烂大街了,19年的时候搭建时候写的,没想到现在又用上了。

这是老早之前的文档,这次翻出来重新梳理搭建流程,完善几个细节,为了后续给其他人提供便利。

正文

配置环境

安装并配置好Node.js环境,只要常规的输入以下命令,如果输出版本号了,证明已经安装成功

1
node -v
1
npm -v

安装Git和配置好Git环境,同上,用git版本号来确定以下有没有问题

1
git --version

注册项目

Github账户注册,新建项目:账户名.github.io,并且需要勾选Initialize this repository with a README

比如我这里,是在GitHub上,建的CrazyStudent14.github.io项目。

注意:国内的码云实际上也是支持这个操作的,不过码云有个缺陷,就是如果你后续想绑定域名来访问这个博客的话,码云因为国内的政策问题,无法绑定,而github无所谓,所以,部署的时候,考虑清楚自己的需求。

本地准备

这个流程有点长,主要是在本地完成博客的准备和构建

以下流程尽可能的全程命令行操作

本地自己先部署Hexo项目,在自己认为合适的地方创个文件夹。

我是在E盘建了一个blog文件夹,然后npm全局安装一个Hexo依赖

1
2
E:\>cd gitpro/blog
E:\gitPro\blog>npm install hexo -g

安装完成hexo之后,hexo -v,查hexo的版本号,检查hexo是否安装成功

1
E:\gitPro\blog>hexo -v

至此,本地部署的前期工作完成,输入hexo init,初始化该文件夹(有点漫长的等待。。。)

完成安装后,出现Start blogging with Hexo!这就代表Hexo已经在这个文件夹下初始化成功可,在本地完成项目新建了。

1
E:\gitPro\blog>hexo init

这时候的项目,是个架子,没有安装依赖,相当于炒菜有锅没买菜一样,所以,需要npm来安装依赖。

输入npm install,安装所需要的组件,等安装成功之后就行了。

1
npm install

输入hexo g,先完成项目构建

1
E:\gitPro\blog>hexo g

输入hexo s,开启服务器,访问本地化网址,如果没有端口占用的话,一般是http://localhost:4000/

1
E:\gitPro\blog>hexo s

假如页面一直无法跳转,那么可能端口被占用了,输入“hexo server -p 端口号”来改变端口号。

这样的话,我们会直接启动http://localhost:5000/

1
E:\gitPro\blog>hexo s -p 5000

准备秘钥

这一步操作有点繁琐,我的教程只是个大纲,如果要是不清楚细节,可以在掘金详细搜一下这里的小标题,里边应该有很多详细操作。

注意:如果是首次设置git本地的秘钥,请按照如下流程操作,如果已经有秘钥了,其实生成部分可以跳过。

设置Git的user name和email

我这里随便取个crazystudent14的假名字做演示,如果自己部署,不要抄名字,名字和邮箱换成自己的!

1
2
E:\gitPro\blog>git config --global user.name "crazystudent14"
E:\gitPro\blog>git config --global user.name "crazystudent14@test.com"
Git生成SSH密钥

为了将Hexo与Github page联系起来,切换到C盘,准备生成秘钥文件

1
2
C:\Users\crazystudent14>cd C:\Users\crazystudent14\.ssh
C:\Users\crazystudent14>ssh-keygen -t rsa -C "crazystudent14@163.com"

判断id_rsaid_rsa.pubknown_hosts这三个文件是否存在。

我这里是win系统,如果是linux和mac系统,自己查一下相关的命令,或者到对应的文件夹去看一下。反正就是看看这个文件夹下边有没有这是三个文件,有的话,可以继续做。

在github上添加key

登录Github,点击头像下的settings,找到左侧的SSH and GPG keys。

点击new ssh key按钮,将id_rsa.pub文件里的内容复制上去,title就填写blog(这个title就是告诉你,这个Key是做什么用的,相当于备注)

检测Key是否添加成功

输入ssh -T git@github.com,测试添加ssh是否成功。如果看到Hi后面是你的用户名,就说明成功了

1
ssh -T git@coding.net

准备发布

好了,一切终于快结束了,我们再确认下流程。

  1. 配置完成本地环境
  2. 在github注册好项目
  3. 本地完成Hexo博客的准备
  4. 在github添加自己的本地生成的key

确认以上流程完成后,我们可以进行最后一步了。

设置deploy

在博客项目的根件夹中,我这里是E:\gitPro\blog,找到_config.yml文件。

配置Deployment,修改repo值(在末尾),repo值是你在github项目里的ssh(右下角)

1
2
3
4
deploy:
type: 'git'
repository: 'git@github.com:CrazyStudent14/CrazyStudent14.github.io.git'
branch: 'master'

在生成以及部署文章之前,需要安装一个扩展:npm install hexo-deployer-git –save

1
npm install hexo-deployer-git --save
部署deploy
1
hexo d -g

项目根目录中,执行命令hexo d -g,生成以及部署了(记住这个命令,这是用来把文章提交到Github上的命令,以后会经常用的)

部署成功后访问你的地址:http://用户名.github.io。那么将看到生成的文章

写新博客

通过以下命令创建新文件,我们会在source/_posts目录下将会看到已经创建的文件,然后在新文件中写文章就行了。

写完之后,继续部署ok。

1
hexo new post "博客名"

好了,到此为止,最基本的hexo+github搭建流程结束了。

我们看看效果吧。

外部访问

在建好的项目,点击右侧settings的tab栏目,向下拉到GitHub Pages,你会看到那边有个网址

1
https://CrazyStudent14.github.io

这时候,你已经有了一个部署在github上的hexo博客了。

2024-07-06 05:05:44
Next