Github Pages + Hexo 搭建个人博客

  1. 修改配置文件:(不要用windows的记事本),推荐使用Sublime Text3

  2. 下载Git:Git

  3. 下载Node.js:Node.js

  4. 查看环境安装是否成功:node -v 出现版本号,npm -v 出现版本号,git --version 出现版本号

  5. 如果node -v 报错的话,那么将Node.js的安装路径加到环境变量中。

  6. 设置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/immyw/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

美化参考

Xpand的hexo主题配置

感谢以下博客提供的学习参考

Butterfly 安裝文檔(一) 快速開始

Butterfly 安裝文檔(二) 主題頁面

Butterfly 安装文档(三) 主题配置

Butterfly 安装文档(四) 主题配置

Butterfly 主题更新总结

Hexo博客之butterfly主题优雅魔改系列

Hexo 大结局

推送到GitHub

注册GitHub账号

  1. 注册GitHub账号

  2. 新建仓库,仓库名为你的用户名.github.io

git配置

  1. 配置个人信息

git config --global user.name "XXXX"
git config --global user.email "[email protected]"
  1. 生成密钥,一路回车

ssh-keygen -t rsa -C "[email protected]"
  1. 复制公钥id_rsa.pub

  2. 在GitHub中添加ssh key https://github.com/settings/keys

  3. 修改 hexo 根目录下的文件_config.yml 中的 deploy,添加仓库地址

deploy:
  type: git
  repo:
      github: [email protected]:xiaopengand/xiaopengand.github.io.git
      gitee: [email protected]:xpand/xpand.git #我这是双部署
  branch: master
  1. 生成并上传仓库

hexo g -d
  1. 如果没有 hexo-deployer-git,安装

  2. npm install hexo-deployer-git --save

域名解析

暂时不写了

域名解析成功,但显示404

404
在博客目录下/soure/文件下创建一个CNAME的文件,文件内容填你的域名地址 例如我的:

www.qwas.top
qwas.top
-> 加入科技玩家交流群组:点击加入 <-
注意:
1.文中二维码和链接可能带有邀请性质,请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头,拉app注册等信息,发现必小黑屋。
4.同一种信息仅发一次,多发会被删除。
5.文章中源码或APP等,无法保证其绝对安全,需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @xpand 发布。如若转载,请注明出处: 科技玩家 » Github Pages + Hexo 搭建个人博客

给TA买糖
共{{data.count}}人
人已买糖
教程玩家投稿精选文章

抓CK自动上传的APP,提交了新版本(v1.1.1)

2022-4-26 10:05:30

教程玩家投稿

巧用“cloudflare Warp”解决青龙黑IP的问题

2022-4-27 20:24:31

56 条回复 A文章作者 M管理员
贴心提醒
请认真对待作者付出,勿发表无意义言论,触发过滤规则的评论将无法提交,包含敏感词的评论会自动变成待审核状态哦。
  1. Carol

    不明觉厉,支持一下👍🏻👍🏻👍🏻

  2. 瓜gua

    不明觉厉,支持一下👍🏻👍🏻👍🏻

  3. 雨辰

    学习了

  4. Carol

    干货颇多,给你点点赞🤔

  5. Carol

    点赞,感觉真不错👍🏻

  6. 枫笙

    打卡升级

  7. collick

    不说都知道厉害!

  8. Carol

    学习了!!!来顶一下👍

  9. 小祥

    打卡升级ss

  10. 柚年呦

    打卡升级

  11. PublicClassKF

    打卡升级

  12. 小逼崽子

    支持一下👍🏻

  13. 黑桃A

    不明觉厉,支持一下👍🏻👍🏻👍🏻

  14. Carol

    厉害了!内容不错,来顶顶帖!👍

  15. Carol

    有意思,Carol我来支持一下🤔

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索