hexo搭建个人博客系列【1】:hexo + Butterfly主题 + github pages部署
Hexo安装
git安装
官网下载地址:https://git-scm.com/
nodeJs下载
官网下载地址:https://nodejs.org/en/
如官网无法下载,可以从我的网盘里下https://pan.quark.cn/s/45ffe8eac1df?pwd=AiKy 提取码:AiKy
npm切换淘宝镜像
全局切换命令:
npm config set registry http://registry.npm.taobao.org/
查看镜像命令:
npm get registry
切回官方镜像:
npm config set registry http://www.npmjs.org
hexo安装
安装命令:
npm install -g hexo
查看版本:
hexo v
hexo博客文件夹始化
hexo 文件夹,是未来博客运转的目标文件夹,写文、主题安装等等都在这里完成。
请在指定路径新建文件夹(英文名),右键空白处,选择 Git Bash here,输入指令:
hexo init
项目结构解析:
├── _config.yml # 主配置文件
├── scaffolds/ # 模板目录
├── source/ # 内容源文件
│ ├── _posts/ # Markdown文章
├── themes/ # 主题目录
└── package.json # 项目依赖
依赖安装:
npm install
完成后依次输入下面命令,启动本地服务器进行预览:
hexo g # 生成页面
hexo s # 启动预览
访问 http://localhost:4000,出现 Hexo 默认页面,本地博客安装成功!
Butterfly主题安装
在hexo安装根目录执行clone命令(这个命令会把主题clone到hexo的themes文件夹下):
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
安装pug 和 stylus 渲染器命令:
npm install hexo-renderer-pug hexo-renderer-stylus --save
修改hexo根目录的_config.yml文件,选择使用butterfly主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
为了減少升级主题带来的不便,我们可以把主题文件夹 中的 _config.yml 重命名为 _config.butterfly.yml,复制到 Hexo 根目录 下与_config.yml同级。
Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中,比如博客的标题、作者信息和邮箱等等资料,而和主题样式相关的配置放在 _config.butterfly.yml 中,那么在将来你想换一个主题是很方便的。
github pages部署
利用github pages部署静态网站
- 创建代码仓库
登录GitHub新建仓库,命名为username.github.io(必须精确匹配)
仓库类型选择Public(免费)
初始化README(可选)
创建后默认自动启用 HTTPS,博客地址为:https://用户名.github.io
- git关联github
配置用户名和邮箱:
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱"
接着生成 ssh 密钥文件,输入如下命令后直接三次回车即可,一般不需要设置密码;
# 生成 ssh 密钥
ssh-keygen -t rsa -C "github 注册邮箱"
一般执行上述命令之后,会生成 id_rsa 和 id_rsa.pub 两个文件(C:\Users\Administrator.ssh),前者是我们私有的,而后者则是对外开放的。接着找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥,用记事本打开,将内容复制;
最后登录github,在setting中打开SSH and GPG keys
在新增中填写title和复制的密钥,点击新增即可。
验证连接:
打开 Git Bash,输入 命令:
ssh -T git@github.com
出现 “Are you sure……”,输入 yes 回车确认。
显示 “Hi xxx! You’ve successfully……” 即连接成功。
- 部署 Hexo 到 GitHub Pages
首先安装 hexo-deployer-git:
npm install hexo-deployer-git --save
然后修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git # 你的仓库地址
branch: master
完成后运行 hexo d 将网站上传部署到 GitHub Pages。
完成!这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。
更多推荐




所有评论(0)