使用hexo搭建github博客

前端_辉仔
130 阅读5分钟

Hexo 搭建博客

既然都写文章了,那么为什么不在github上写bolg呢,这次就跟着我一起搭建一个bolg吧!

为什么搭建blog?

假如你写了一段精美的代码,写了一篇很好的文章,学到了很棒的技术,那么是不是想要分享给他人,一起学习,进步?那么github作为最大的开源社区,你肯定也想将你的文章发到上面去. 而文章总不能一个又一个readme.md往上堆吧?所以我们可以选择搭建一个博客,将文章统一放到github上的站点,统一管理.

为什么选用hexo

  1. 使用的人很多(这基本上就是最简单又值得肯定的理由)
  2. 搭建简单易入门(还简单,更应该选它了)
  3. 方便,一键生成静态站点

环境配置

先声明,我的电脑是windows,但是对于linux和mac来说,操作都是大差不差的

需要有node环境,另外还需本地安装git,git直接官网下载安装即可,本地桌面右击会有git bash here的选项

什么?怎么安装配置node环境?看我的另一篇文章,简单的方式搭建,又不容易出问题.

hexo下载

安装hexo

npm install hexo-cli -g

在node环境下输入上面的命令就完成了,即全局安装了hexo. 输入

hexo -v

验证安装

image.png 我这里的hexo的版本是4.3.0.(node版本是16.13.1, npm版本是8.3.0)现在就可以开始了.

初始化本地博客

在自己想要存放的文件夹下进入cmd/powershell,初始化命令

hexo init ./myBlog

image.png

再输入

ls
cd myBlog
npm i
hexo g
hexo s

image.png 其中hexo g为生存静态文件,hexo s为启动服务器。 可以看到本地博客已经在 http://localhost:4000/ 跑起来了,试着去访问一下吧!看完就可以在命令行ctrl+c退出!到这里本地博客搭建就结束了!

git配置

配置gti用户名和密码

查看用户名：  git config --global user.name

查看邮箱：  git config --global user.email

删除用户名 git config --global --unset user.name 要删的用户名

增加用户名 git config —global —add user.name 新加的用户名

修改用户名 git config --global user.name 用户名

修改邮箱 git config --global user.email 邮箱

我们这里需要增加一个用户,绑定邮箱(参照上面的方式,把中文改成自己的name,email)需要注意的是 --global表示全局声明,也就是本地账户都用这个账户.

创建远程仓库

就是将本地git账户与github远程仓库连接,首先你得有github账户,有就行,没有就注册,注册方式有很多,照着官网流程走就行了.

接下来就是创建仓库

首先创建本地密钥

ssh-keygen -t rsa -C “Github的注册邮箱地址”

一路y加回车就好,走完之后会提示

Your public key has been saved in /Users/zjjk/.ssh/id_rsa.pub.

路径不同这个.pub文件位置也不一样,找到它,并用文本编辑器打开它,复制里面的内容就可以了.

对了,推荐英语不好的小伙伴可以在油猴上下载github中文化插件,很实用.

image.png

image.png

image.png

image.png

按照流程走就可,密钥标题任你取,将复制的.pub文件内容paste到密钥栏就可以了,添加ssh密钥.成功就表示本地与远程通过ssh密钥连接上啦.

创建博客

点击我的仓库,新建,只需输入仓库名字和描述就可以了,可以把新建readme文件勾上,就不要自己建立分支了.

然后我们需要将

打包本地项目并上传

首先根据next官网描述 建站 | Hexo更改_config.yml里面的配置信息

title: 辉仔的博客

subtitle: 辉仔的知识/技术分享

description: 这是前端辉仔的博客

author: 辉仔

language: zh-CN

timezone: Asia/Shanghai

还有就是最后的

deploy:
  type: git

  repository: https://github.com/miolingdaiwei/huizai-s-blog.git

  branch: main

注意,配置文件每一个变量: 后面都要跟空格,repository(仓库)就是你的仓库地址,branch就选择你创建好的分支,这样就配置好啦!

然后我们就可以走流程在本地查看网站

hexo clean 
hexo g
hexo s

为了查看效果,我们也可以新建一个页面

hexo new hello-myBolg

可以看到soure文件夹下多了hello-myBlog.md文件,这就是新建的页面

这时再次执行上面的流程,打开页面,可以看到新增了hello-myBlog

上传git page站点

前面在配置文件中设置好了deploy信息,我们可以直接执行

hexo deploy

image.png 这里就成功了,我们再去设置远程仓库站点,打开仓库的设置,找到git page,设置

这时我们直接访问git page站点

明显此时的网站并没有样式！所以我们还需要添加主题

添加主题

主题有很多,搜hexo主题可以搜到很多。这里就使用next(简约风)

git clone https://github.com/iissnan/hexo-theme-next themes/next

执行完后将配置文件的样式变量改为next

image.png

再次走流程,就可以看到样式啦!

然后再上传到hexo deploy上传就可以在git page站点访问到带主题的博客了! image.png

几个注意点

本地样式加载出错可以考虑几个点,安装svg插件

npm i hexo-renderer-swig

git page站点访问不了或者乱码可以考虑几个点 repository是否正确对应仓库地址? 分支是否正确? 将配置文件的url变量值设为git page站点的网址

结语

本次hexo搭建github博客的教程就到这里啦,具体hexo命令，配置等等可以到Hexo继续学习.

本次的文章到这里就结束啦！♥♥♥读者大大们认为写的不错的话点个赞再走哦 ♥♥♥ 我们一起学习！一起进步!

avatar
文章
阅读
粉丝