个人博客搭建及部署

话不多说直接开干

本次使用的博客框架是 hexo ,主题是butterfly

需要用到的工具

Node
git
hexo
github

安装node

选择自己的系统安装即可

修改npm源. npm下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像。打开终端，运行如下命令:

1	npm config set registry https://registry.npm.taobao.org

安装hexo

1	npm install -g hexo-cli

验证是否安装成功

hexo -v

初始化hexo

在你想要创建博客的位置打开终端

1	hexo init blogdemo(项目名称)

本地运行

cd 进入博客根目录

运行hexo s启动博客在本地运行

这样博客就在本地启动成功了,之后写博客时可以现在本地看一下运行效果再发布;

github创建仓库

配置hexo

打开博客根目录中的**_config.yml**文件到最下面修改如下:

deploy:
# 添加 git
  type: git
  # 添加下面两行,链接是你刚刚复制的链接
  repo: https://github.com/kaliluying/kaliluying.github.io.git
  # 分支,之前是master现在GitHub改成了main
  branch: main

将博客挂载到 GitHub Pages

安装 hexo-deployer-git

1	npm install hexo-deployer-git --save

部署

1
2
3

hexo clean		
hexo generate
hexo deploy

hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
hexo generate：生成静态文件，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写

第一次可能会让输入用户名密码,跟随提示就好了

访问你设置的仓库名: https://kaliluying.github.io/ 就可以成功访问了

修改hexo主题

默认的主题太丑了,可以换一个主题,这里我用的是butterfly

官网 : https://butterfly.js.org/

演示地址: https://tzy1997.com/

安装

在博客根目录下运行

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

在themes 目录下就有了一个butterfly的目录

打开博客根目录中的**_config.yml**文件到最下面修改如下:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly    # 原来是landscape更换成butterfly

安装pug以及stylus的渲染器

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

再次运行,就可以在本地看效果

1
2
3

hexo clean		
hexo g
hexo s

想要进一步DIY可以参考这篇博客

教程: https://tzy1997.com/articles/hexo1600/

点击下载博客: