博客环境搭建
- 修改配置文件:(不要用windows的记事本),推荐使用Sublime Text3、NodePad++但是官方有污蔑国家的公告,新疆、香港。
- 下载Git:Git
- 下载Node.js:Node.js
- 查看环境安装是否成功:node -v 出现版本号,npm -v 出现版本号,git --version 出现版本号
- 如果node -v 报错的话,那么将Node.js的安装路径加到环境变量中。
- 设置npm的镜像源:查看npm的配置
#查看npm的配置
npm config list
#默认源
npm config set registry https://registry.npmjs.org
#临时改变镜像源
npm --registry=https://registry.npm.taobao.org
#永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
#另一种方式,编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org
本地安装hexo静态博客框架
hexo框架安装初始化
新建一个文件夹,比如BolgTest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择Git Bash Here,然后依次输入如下命令:
# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称> #初始化文件夹
cd <新建文件夹的名称>
npm install # 安装博客所需要的依赖文件
生成运行
#生成Hexo页面
hexo g
#启动服务
hexo s
浏览器中打开http://localhost:4000
或者127.0.0.1:4000
,可以看到一个网页,说明Hexo博客已经成功在本地运行。
主题选择个性化修改
选择主题:在github上找套自己喜欢的主题,下在完解压到<blog安装路径>/themes/下。
站点配置修改在<blog安装路径>/_config.yml,主题配置文件在<blog安装路径>/themes/<>
本博客采用 butterfly 主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
#或者
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
应用站点
修改站点配置文件_config.yml
,把主题改为 butterfly
theme: butterfly
个性化修改前安装插件
个性化修改前安装插件
安装 pug 以及 stylus 渲染器插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
安装将要用到的插件插件
注脚插件(可选): hexo-reference,reference 插件说明。
部署插件 (必要): hexo-deployer-git
npm install hexo-wordcount hexo-wordcount hexo-generator-search hexo-reference hexo-deployer-git --save
美化参考
感谢以下博客提供的学习参考
Butterfly 安裝文檔(一) 快速開始
Butterfly 安裝文檔(二) 主題頁面
Butterfly 安装文档(三) 主题配置
Butterfly 安装文档(四) 主题配置
Butterfly 主题更新总结
Hexo博客之butterfly主题优雅魔改系列
Hexo 大结局
推送到GitHub
注册GitHub账号
- 注册GitHub账号
- 新建仓库,仓库名为
你的用户名.github.io
git配置
- 配置个人信息
git config --global user.name "XXXX"
git config --global user.email "XXXXXXXXX@XXX.com"
- 生成密钥,一路回车
ssh-keygen -t rsa -C "XXXXXXXXX@XXX.com"
- 复制公钥
id_rsa.pub
- 在GitHub中添加ssh key https://github.com/settings/keys
- 修改 hexo 根目录下的文件
_config.yml
中的 deploy,添加仓库地址
deploy:
type: git
repo:
github: git@github.com:xiaopengand/xiaopengand.github.io.git
gitee: git@gitee.com:xpand/xpand.git #我这是双部署
branch: master
- 生成并上传仓库
hexo g -d
- 如果没有 hexo-deployer-git,安装
npm install hexo-deployer-git --save
域名解析
暂时不写了
域名解析成功,但显示404
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEFf7Okw-1654157727718)(https://fastly.jsdelivr.net/gh/xiaopengand/img@latest/2020/12/22/9535cadc3817d753f331130550d5b2bc.png)]
在博客目录下/soure/
文件下创建一个CNAME的文件,文件内容填你的域名地址
例如我的:
www.qwas.top
qwas.top