基于hexo搭建github个人博客网站
配置hexo
安装node.js
node自带npm
安装git
安装git移步到Git学习笔记
node -v
npm -v
git -v
安装hexo
新建一个文件夹,作为存储你网站的本地资源,我这里取名为 myBlog
npm install -g hexo-cli
初始化 myBlog
hexo init
安装npm
npm install
检查是否安装成功 这时候,我们的myBlog目录下就有了一堆的文件
启动服务站点
hexo g
hexo s
这样一个基本的hexo就搭建好了
访问
就可以看到基本效果了
使用主题
访问hexo主题站
https://hexo.io/themes/
找到心仪的主题,或者你也可以自己写前端文件。
下载的主题放在myBlog的theme下
应用主题
在 _config.yml
里,更改 theme
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
更改下载的主题的 _config.yml
文件, 一般作者都有教程或者写注释, 跟着来就行
我使用的主题地址为
https://github.com/hai-zou/hexo-theme-sea
https://github.com/jerryc127/hexo-theme-butterfly
常用命令
hexo clean # 清楚已经生成的内容
hexo g # hexo generate,生成静态文件
hexo s # hexo server,启动hexo服务,端口号一般为4000
hexo d # hexo deploy,提交代码到github
配置github
新建仓库
仓库名必须是 你的用户名.github.io
, 其余不再赘述
上传hexo到github上
这里需要安装git插件
npm install hexo-deployer-git --save
修改主配置的yml
更改URL
将自带的改为你的博客域名,使用的github就是 https://你的用户名.github.io
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://pennxiang.github.io
更改远程仓库配置
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: git@github.com:pennxiang/pennxiang.github.io.git
branch: main
repo: 你的github仓库地址,我使用了ssh,所以是git开头,没有用ssh的话用https开头的就行
branch: 以你的github上显示的为准, 有的可能是master
其余配置参考
接着我们在 myBlog
目录下使用
hexo clean && hexo g && hexo d
即可部署到github, 这里如果没有配置ssh,需要每次都填写账号和密码
生成SSH
检查本机是否存在ssh key
cd ~/.ssh
ls
如果有内容,则存在本地ssh key, 跳过下一步
生成ssh key
ssh-keygen -t rsa -C "xxx@xxx.com"
xxx@xxx.com
:如果是github就是你的github主页
接着需要一直按回车,大约四次
获取ssh key内容
cd ~/.ssh
cat id_rsa.pub
windows在复制 c:\用户\xx\.ssh\id_rsa.pub
的内容, xx为你windows上的账号
添加公钥到github
点击右上角头像 --> 点击 Settings
--> 点击 SSH and GPG key
--> 点击 new ssh key
--> 粘贴保存 --> 在命令行输入 ssh -T git@github.com
验证是否设置成功
博客配置
这一步就比较痛苦了,尤其是对前端学的不是很深入的人(没错, 说的就是我自己)。总之记住,theme只改config
文件资源全部放在source文件夹
文章的格式
title: # 文章标题
date: # 文章发布日期 2024-03-27 09:22:23
categories: # 文章分类
tags: # 文章标签
abstract: # 摘要
comments: # 是否展示评论,默认 true
sticky: # 置顶,按数值大小排序
hexo
内置的有
归档页面:/archives/
分类页面:/categories/
标签页面:/tags/
这些内容不需要我们创建, 他们都是 hexo
根据 _posts
的内容自动生成的, 因此,我们的格式就十分重要!!!
其余我们自建的文件夹,里面都需要有一个index.md, 这样hexo才能给我们渲染为html,同时里面引入资源尽量使用html语言,使用markdown可能会识别不出来, 我就被这个坑了好久
标签页的图标设置
在 # Site
下添加这么一句
favicon: /favicon.ico
同时我们的图标文件需放在 source
目录下
启动搜索功能
一般有本地搜索,基本够用
其他配置
可以参考官方的教程,butterfly
的官方文档写的比较详细,地址如下