zoukankan      html  css  js  c++  java
  • 给博客使用Butterfly主题并部署到GitHub服务器

    目录

    前言

    一、安装Butterfly主题

    二、将本地博客部署到GitHub服务器

    三、将个人域名与GitHub绑定


    前言

    安装完Hexo框架后,自带的主题在thems文件夹下可以查看,应用后界面:

    Hexo提供了290+主题,点击可前往官网访问:Hexo主题 

    我选择的主题是 Butterfly ,安装后的界面如下:

    图源:Butterfly官方Github   我的个人博客:XJHui'S BLOG

    一、安装Butterfly主题

    1、可供选择的版本

    注意:两个版本供使用者选择,我首次安装的是第二个开发版,虽是开发版但装完还没发现什么Bug,教程就以开发版为例。

    2、命令行安装主题

    sudo su //进入root账户
    
    git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

    安装成功:

    注意:如果此过程报错,可能是git的问题,请翻看 上篇文章 或自行百度解决。

    3、修改配置

    说明:主题安装完成后并不会自动应用,要修改框架下的_config.yml配置文件。

    ①进入安装Hexo框架的文件夹(文件夹名称未必为blog,取决于安装的位置):

    cd blog/

    注意:查看blog文件夹中包含的文件是否与下图相同,否则代表进错文件夹了。

    ②修改配置文件:

    vim _config.yml

    错误:原因是未安装vim,,执行 apt install vim 后继续输入上面命令。

    往下翻找到thems,将其后面的文字修改为Butterfly(与前面thems之间有一个空格)

    注意:需要vim基础,用ubuntu先把基础的vim学好233333333。

    4、将Butterfly的配置文件移动到source/_data下

    说明:这样是为了让主题更平滑,Butterfly 使用了 data files特性(可乐不加冰),移动后平滑效果可能更好(个人猜测)。

    mkdir source/_data //创建文件夹
    cp themes/Butterfly/_config.yml source/_data/butterfly.yml //复制并重命名

    注意:以后的配置修改都是基于butterfly.yml

    5、测试配置是否修改成功

    hexo clean
    hexo g //报错看错误1
    hexo s //报错看错误2

    浏览器输入localhost:4000查看主题是否应用成功

    错误1:

    解决方法:在 Butterfly主题官方GitHub主页 给出了解决方案

    npm install cheerio@0.22.0 --save //如果使用cpnm可能更快

    错误2:

    解决方法:cyw1227(需要安装pug以及stylus的渲染器,安装速度有点慢耐心等待)

    npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

    安装成功:

    注意:上图即为Butterfly原始样式,未对配置文件做任何修改。

    二、将本地博客部署到GitHub服务器

    说明:仅本地访问博客远远不能满足我们的需求,实现远程访问离不开将其部署到服务器上,服务器可以购买云服务器也可选用其它例如GitHub提供的免费服务器。

    1、准备GitHub仓库

    ①新建仓库(如果你已经创建了该仓库请务必备份数据,因为仓库内原始数据会被覆盖,然后跳至第③步)

    ②输入新仓库信息

    注意:填写的域名信息格式必须为:用户名.github.io 否则即使创建成功也不可使用。

    ③安装git插件

    cnpm install --save hexo-deployer-git

    注意:如果未安装cnpm会报错,可以用npm代替上面命令中的cnpm。

    ④修改配置文件

    vim _config.yml 

    翻到最底部:按照下图修改,repo填写自己的url

    ⑤部署到远端

    hexo clean //依次执行这三个命令,不建议直接执行hexo d
    hexo g
    hexo d

    错误1:

    解决方法:

    npm install --save hexo-deployer-git  

    感谢:乔小乔jojo

    错误2:原因:git未配置邮箱和名字

    解决方法:

    git config --global user.name "yourname"  //自己的用户名
    git config --global user.email "youremail@163.com"  //自己的邮箱

    错误3:GitHub上未配置公钥

    图源:没没没没没没没

    解决方法:

    ssh-keygen -C '你的邮箱账号@163.com' -t rsa //一路回车
    vim ~/.ssh/id_rsa.pub      //复制里面的密钥

    注意:SSH key title 任意。感谢:王雨城

    ⑥推送完成

    浏览器输入:https://用户名.github.io 即可访问。

    错误:报错404 

    ①如果未绑定个人域名,按照下图操作:

    ②已绑定个人域名,按照下图操作(亲测可行):

    感谢:半缘青荇

    三、将个人域名与GitHub绑定

    说明:GitHub提供的域名太长,可以自己购买喜欢的域名与之绑定。阿里云购买的域名为例(XJH'S BLOG

    2、进入 阿里云 依次点击:域名-》解析

    3、添加两条记录,分别为:

    添加完成后如下图:

    4、进入GitHub,添加 CNAME 文件:

    输入file名称和域名点击保存:

    5、修改GitHub设置:

    ①进入项目的设置(如图):

    GitHub Pages下添加自己的域名:

    感谢:Mr_XQ

    就可以使用自己的域名远程访问搭建好的博客啦。

    新手操作,不足请留言评论。

    下一篇:短短1天我学会了如何修改Butterfly的配置文件 

  • 相关阅读:
    eclipse测试链接sql server2008 数据库
    Java中的日期格式转化
    java.sql.SQLException: Field 'id' doesn't have a default value(用eclipse操作数据库时报了这种奇怪的错误)的原因与解决方法
    Java进程与线程的区别
    Java开发岗位面试题归类
    JavaScript 里,$ 代表什么?/JQuery是什么语言?/html中用link标签引入css时的中 rel="stylesheet"属性?/EL表达式是什么?
    (一)初识EasyTouch
    简单影子制作
    屏幕分辨率
    VuforiaAR 教程
  • 原文地址:https://www.cnblogs.com/ldu-xingjiahui/p/12594025.html
Copyright © 2011-2022 走看看