文章

基于hexo搭建github个人博客网站

配置hexo

安装node.js

https://nodejs.org/en/download/

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就搭建好了

访问

http://localhost:4000

就可以看到基本效果了

使用主题

访问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

其余配置参考

https://hexo.io/zh-cn/docs/configuration.html

接着我们在 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的官方文档写的比较详细,地址如下

https://butterfly.js.org/

许可协议:  CC BY 4.0