使用 hexo+Github 部署自己的博客
¶🍀hexo简介
- hexo是一个简单、快速、强大的博客发布工具,支持Markdown格式,有众多优秀插件和主题
¶❔如何部署
- 一些参考的视频链接—— 🐑 CodeSheep和📹 Master_lisa
- 🔥本文所使用系统为window10,对于linux或是mac用户还需再搜索相关教程,对比着操作,也能愉快的部署👍
🌿 安装nodejs
🌵 安装Git
- Windows 下载和安装Git
- Linux安装Git
sudo apt-get install git
- 安装之后进行Git配置
- 配置用户名
git config --global user.name "用户名"
- 配置邮箱地址
git config --global user.email "你的邮箱地址"
- 创建公钥
ssh-keygen -t rsa -C "user@example.com"
会在用户目录~/.ssh
下创建有id_rsa
和id_rsa.pub
两个文件- Windows下则在
C:\user\xxx\.ssh
目录下
- Windows下则在
- 导入公钥 登录Github,进入设置 settings -> SSH and GPG keys -> New SSH key 创建一个SSH key——
Title
可以随意填,Key
中填id_rsa.pub
中的内容,点击创建,公钥就导入完成
- 配置用户名
- 安装之后进行Git配置
🌴 安装hexo
- 安装前可以先更换npm的源为淘宝镜像
- 安装nodejs的时候就已经安装了npm工具了
- 可以用
node -v
和npm -v
来查看所安装的版本
- 可以用
- 更换为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
- 配置后可通过
npm config get registry
或者是npm info express
验证是否成功 - 如果想还原为npm默认镜像源
npm config set registry https://registry.npmjs.org/
- 配置后可通过
- 安装nodejs的时候就已经安装了npm工具了
- 安装hexo
npm install -g hexo-cli
- 运行完成之后hexo框架就安装完成了
🍃 初始化一个Blog
- 新建一个文件夹(位置任意)—— 例如
D:\myblog
linux下也同样操作 - 打开
Git bash
或是cmd
并cd
到目标目录下 hexo init
初始化一个blog
hexo g
生成静态文件
hexo s
开启本地预览
- 访问 http://localhost:4000
- 至此,本地的hexo就搭建完成了,接下来就是将本地的博客上传到Github
¶📌hexo常用命令
1 | hexo new "postName" #新建文章 |
¶👾 上传到GitHub
-
在github创建一个以
username.github.io
命名的仓库,例如我的就是rcxxx.github.io
-
安装插件
npm install hexo-deployer-git
-
配置
_config.yml
中有关deploy的部分1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repository: <这里填你仓库的ssh地址>
branch: <填分支——新的github分支为main> -
hexo部署到github时会删掉README文件
- 生成文件时会将所有的md文件都渲染成html文件,push的时候就把README给删掉了
-
解决办法
- 修改
_config.yml
文件- 在
skip_render:
增加skip_render: README.md
- 可以在生成的时候跳过
README.md
文件
- 在
- 修改
-
hexo g
生成静态文件 -
hexo d
推送到Github
-
完成之后就可以通过
username.github.io
来实现博客的访问到这里你的一个博客就已经部署到github上了
¶[进阶]-关联自己的域名
username.github.io
是 Github
免费提供的域名,如果你拥有自己的域名的话,可以关联自己的域名
- 首先你需要先购买一个自己的域名,阿里云、腾讯云等等都可以,记得申请证书和备案
操作如下
- 打开你名字为
username.github.io
的仓库的Settings
,向下划找到Github Pages
栏填入你自己的域名,这时候Enforce HTTPS
是不可选取的
- 到你的域名控制台新建一条
CNAME
解析,记录值填你的username.github.io
- 回到
Github Pages
设置勾选上Enforce HTTPS
- 在你博客的
source/
目录下新建一个没有后缀的CNAME
文件,内容只需要填你刚才创建解析的域名地址 - 接下来就可以通过你自己的域名访问博客了
- 为了防止之后
hexo d -g
的时候覆盖掉
¶新建一篇博文
hexo new <模板> <文章名>
新建文章CNAME
文件,可以在博客的source/
目录下创建一个CNAME
文件,内容填你自己的域名即可
¶🌼 关于美化
⛳️ 修改主题
-
butterfly —— 这个主题看到一眼就爱上了
- 下载主题 在本地博客目录打开
git bash
然后git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
- 修改站点配置文件
_config.yml
,将主题修改为Butterfly
1
2
3
4# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Butterfly- 为便于后续平滑升级,在
source
目录下创建_data
文件夹,将Themes/Butterfly
目录下的_config.yml
复制一份到source/_data
目录下,并改名为_config.butterfly.yml
- 如果
hexo
版本高于 4.2.0,则需要安装cheerio
npm install cheerio@0.22.0 --save
- 安装两个需要的插件
npm install hexo-renderer-pug hexo-renderer-stylus
hexo s -g
生成静态文件并打开本地预览- 访问 http://localhost:4000
- 下载主题 在本地博客目录打开
-
可以看到主题已经修改成功了
hexo d
推送到github 通过username.github.io
访问查看主题是否修改成功- 其它细节设置可以参考Butterfly的文档来配置。
🎃 修改网站Icon
- 修改步骤
- 找一张自己喜欢的图片,命名为
favicon.png
- 将图片放在
myblog\themes\Butterfly\source\img
中(myblog是hexo空间,Butterfly是所选主题的目录)——替换掉原有的favicon.png
hexo clean
清理后重新生成提交,就可以看到网站图标已经更改了
- 找一张自己喜欢的图片,命名为
- 修改完成
¶📦 butterfly主题的配置
¶关于 _config.yml
需要修改的内容
- 具体内容为
1
2
3
4
5
6
7
8
9
10
11
12# Site
title: —— 标题
subtitle: '' —— 字幕
description: '' —— 说明
keywords: —— 关键词
author: —— 作者 也就是自己
language: en —— 语言 有三种 en-英文 zh-CN 简体中文 zh-TW 繁体中文
timezone: '' —— 时间 建议设置成 'Asia/Shanghai'
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com —— 可以设置为你自己的域名 _config.yml
中将post_asset_folder: false
设置为post_asset_folder: true
即可在新建文章时同时创建一个同名文件夹 —— 相较于把图片都放在source/img
中的方法,更加整洁,将图片随着文章分类- 插入图片时路径设置为
./文件夹/xxx.png
即可 hexo
默认无法自动处理文章插入本地图片,需要通过扩展插件支持- 安装
npm install https://github.com/7ym0n/hexo-asset-image --sa
- 重新生成静态文件即可正确显示图片
- 安装
- 插入图片时路径设置为
- Hexo中使用emoji表情
- Butterfly的文档中有详细的各种部分的配置教程,按照自己的风格来设置就好