当前位置:   article > 正文

Hexo+Github Pages搭建个人博客(超详细教程)_hexo + github page搭建个人博客

hexo + github page搭建个人博客

GitHub创建个人仓库

第一步 注册

登录到 GitHub ,如果没有 GitHub 帐号,请使用你的邮箱注册 GitHub 帐号:https://github.com
在这里插入图片描述

第二步 创建一个存储库(repository)

登录成功之后,点击 GitHub 中的 New repository 创建新仓库,仓库名应该为:用户名 .github.io 。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第三步 下载Git,并创建ssh密钥

在这里插入图片描述
安装好 Git 后,只需要进行下面的配置即可。

配置信息

1 git config --global user.name "你的GitHub用户名"
2 git config --global user.email "你的GitHub注册邮箱"
  • 1
  • 2

生成ssh密钥

1 ssh-keygen -t rsa -C "你的GitHub注册邮箱"
  • 1

然后直接三个回车即可,默认不需要设置密码。最后得到了两个文件(在C盘的.ssh文件夹中):id_rsa和id_rsa.pub。
在这里插入图片描述
在这里插入图片描述
登上Github,点设置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第四步 创建一个Github Pages repository

桌面右击Git bash here,键入以下命令:

git clone https://github.com/username/username.github.io

cd username.github.io
echo "Hello World" > index.html

git add --all
git commit -m "Initial commit"
git push -u origin master
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

详情可以参考这个官方教程 GitHub Pages 写的十分好懂,按这个做完之后你就有了一个你的网址 username.github.io,里面有一句 Hello World!然后就可以通过点击https://username.github.io.访问你的网站!

Hexo

现在离一个好网站只差一步了,接下来就是把某个好网站的所有文件拷贝到你的库里面。
GitHub官方建议你使用博客生成工具 Jekyll 。GitHub在库的设置里面还提供Jekyll主题选择。而我推荐使用Hexo生成工具。
要使用Hexo,需要在你的系统中支持Node.js以及Git,Git我们前面已经装好了,只要装Node.js就好了!
https://nodejs.org/en/download/
安装完成后,即可使用 npm 安装 Hexo。
桌面右击Git bash here,然后键入指令:

#在d盘放Hexo
cd d:/hexo
npm install -g hexo-cli
  • 1
  • 2
  • 3

安装好 Hexo 后,马上就能使用了。首先初始化博客,在E盘新建一个文件夹MyBlog,用来放博客的文件,进入MyBlog文件夹,右击Git bash here,输入:

 hexo init myBlog
  • 1

接着,输入以下命令以启动服务器,你的网站会在 http://localhost:4000 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,无须重启服务器。

hexo s
  • 1

Hexo 提供了快速方便的一键部署功能,只需一条命令就能将网站部署到服务器上。
在开始之前,必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:

1 deploy:
2   type: git
  • 1
  • 2

接着,键入

hexo d
  • 1

即可部署到服务器了。

Hexo 主题

hexo自带的主题是很朴素的!所以你博客一看就充满了贫穷的气味!咦~
所以,要想拥有一个炫酷的博客,那自然要换上一个高大上的主题喽~
博主使用的是hexo-theme-matery 这款主题。
从github git clone 下主题到hexo的themes文件夹中,

在这里插入图片描述
然后在hexo根目录中的_config.yml更换主题:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery
  • 1
  • 2
  • 3
  • 4

然后,更新到服务器就能看到更换后的主题了!
当然,更详细的DIY,可以通过https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/,进行细致自定义。
这里放上我自定义后的博客主题:

在这里插入图片描述
在这里插入图片描述

其他高级使用技巧

绑定独立域名

最后还可以去腾讯云买一个独属于自己的域名。
这里贴上一个博主的教程。https://blog.csdn.net/heimu24/article/details/81159099

图床

图床可以去七牛云,但是,博主我偷了个懒,直接在CSDN发一个只粘贴了图片的博文,直接拿CSDN作为我的图床了。

live2d看板娘

发现好多的博客页面上有这样一个看板娘,身为老二刺螈,怎么可能放过呢?
嘿嘿嘿~
首先,先去github搜刮一遍,找到一个Star 3k 的live2d 开源包。
https://github.com/EYHN/hexo-helper-live2d
然后,根据它的readme,博主劈里啪啦操作了一番,简易步骤如下:

1、安装模块

在hexo根目录执行命令

npm install --save hexo-helper-live2d
  • 1

2、挑选中意的看板娘

live2d提供了一些现有的看板娘模型,当然,最好是自己捏,这里贴上live2d的官方网站,有兴趣的可以去学习一下如何捏老婆:https://www.live2d.com/
博主这里就直接使用官方提供的看板娘了!具体模型有:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
当然看名字是看不出啥的啦!所以博主我,贴心的找了一给博主放的预览图:
Live2D看板娘+模型预览

3、下载模型及配置

挑选了自己中意的看板娘,下一步当然就是抱回家啦!
博主相中了live2d-widget-model-shizuku这名小可爱。
shizuku
首先,下载模型:

---博主使用的模型shizuku
# npm install live2d-widget-model-shizuku
  • 1
  • 2

接着配置_config.yml 文件:
在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.
参阅 live2d-widget.js API

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

最后更新博客到github就好了!

看到没?我家的看板娘超级可爱!!!

总结

好了,大概过程就是这样了!最后贴上我的小破站地址。
青枫阁
欢迎诸位客官大老爷~~
完结撒花~
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/639914
推荐阅读
相关标签
  

闽ICP备14008679号