github+hexo+butterfly 搭建个人博客

写在之前

---

在一开始我是在CSDN上写博客，记录一些学习过程，由于每次写完 markdown 再发布的过程比较麻烦，又不想花大价钱租服务器，所以暂时想到了是使用 github page 来做个人博客，进行学习过程的记录

开始折腾

---

有一个github账号

这方面的相关博客和教程比较多，这里就不再过多赘述了，其实一步一步来就可以

放一个官网链接 github传送门

创建github仓库

上面两种方式都可以进入仓库创建界面，进入后显示如下

这里需要注意，仓库的名字必须是 XXX.github.io , 其中XXX 要和你前面的用户名相同，仓库的discription 自己想写什么就写什么，就的对仓库的一个描述，最后点击 Create repository 就可以了

---

安装相关软件

安装git工具

点击上方 logol 传送去git官网，选择和系统相符的git版本进行下载安装，安装过程中想改安装位置的可以改一下，其他的一直下一步就好了

如果

安装好后，我们右键可以看到 git bash 和 git gui 就已经安装好了

对于git的使用和安装可以看 廖雪峰老师的官网

安装Node.js

这里我推进使用 nvm 来管理 node 的版本,因为在我做项目过程中，可能需要维护别人的老项目，所以node版本经常不匹配，使用 nvm 进行node 版本的管理，可用方便的切换不同版本的 node 。

windows的话，可以在github上下载nvm 打开我们可以看到两个版本

• nvm-noinstall.zip：绿色免安装版，但使用时需进行配置

• nvm-setup.zip：安装版，推荐使用

nvm的具体安装和使用简书Do_Du有详细的步骤，可以进行参考

安装Hexo

点击上方 logo 可以去官网了解更多Hexo的内容

npm install hexo-cli -g

复制上面这句代码，在一个没有中文的路径下新建一个文件夹做为博客的目录

进入文件夹中，右键 git bash here,并粘贴代码回车运行

看到updated 1 package 就安装好了

---

初始化和本地博客的搭建

初始化本地博客

cd ../

hexo init blog

在刚才初始化的窗口分别键入上面两句代码，对本地博客进行初始化

当看到图中的信息后，你的本地博客就初始化完成了，可以进入刚才博客的文件夹（这里我的文件夹名字是blog），发现多了很多文件

cd blog/

npm install

使用上面第一条命令进入文件夹内，blog需要替换为自己的文件夹名称

进入后使用第二条命令进行依赖的安装

看到如上图信息就安装成功了

hexo s

在博客的根目录下（即刚才博客的文件夹下）输入上面的命令，启动博客

可以看到如图的输出信息，我们可以在 localhost:4000去看一下我们博客现在的样子,大概就是下面这样

停止运行我们只需要输入 Ctrl+C 就可以了

配置git

如果不是第一次使用git可以跳过这一步

在刚才的git bash 中输入

cd ~/.ssh

如果提示 No such file or directory 说明你是第一次使用git

先配置使用git人的身份，在git bash 中分别输入下面两个命令，用户名 用github的用户名就好 邮箱 也使用注册github的邮箱

git config --global user.name "这里换上你的用户名"
git config --global user.email "这里换上你的邮箱"

再进行git的ssh配置,同样 邮箱 使用注册github的邮箱

ssh-keygen -t rsa -C "这里换上你的邮箱"

命令执行后需要进行三次确认，按回车就完了

命令执行完成后，在用户目录(就的c盘下User里你用户名的目录)的 .ssh目录 下会生成2个名为id_rsa和id_rsa.pub的文件

打开github 点击右上角你的头像，进入settings

选择 SSH and GPG keys

点击New SSH key，并把之前生成的id_rsa.pub文件，用记事本打开，将内容复制到key下的文本框,title的话自己随便写一个自己明白的就好，最后点击 Add SSH key

回到git bash 输入下面的命令

$ ssh -T [email protected]

看到 access 就成功了，如果是第一次，可能需要确认一下，输入yes后回车，就会提示成功

安装deployer插件

npm install hexo-deployer-git --save

在博客文件夹目录下，的git bash中输入上面的命令进行安装

发布博客到 github.io

想要发布博客到XXX.github.io 首先要让hexo 知道你的github位置，进入本地博客根目录修改一些配置，在博客的文件夹下打开_config.yml 开始编辑

1. 修改url:
   

2. 修改deploy,注意红标的地方写自己的github名称，branch默认的话现在是main，之前好多博客中写的是master这是之前的分支名称，如果没有改过，那么就是main
   

修改配置后，在git bash 中分别输入

hexo clean

hexo g

hexo d

等待命令执行完成，就发布成功了，可以打开你的地址进行查看https://XXX.github.io 这里XXX 就是你的用户名，比如我的 https://yjr-1100.github.io

---

配置好看的主题，并写博客

又到了最麻烦和最开心的时刻，配置好看的主题让你的博客变的独一无二吧

安装butterfly主题

你可以在 hexo的主题库 中找到自己喜欢的主题，这里我用的是 butterfly 主题

打开主题的主页，里面其实有很多详细的教程

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

在你的博客根目录下执行上面的代码，下载主题

为了使这个主题可用，我们还需要安装几个插件，再博客的根目录下运行下面的命令

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

npm install hexo-wordcount --save

配置butterfly主题

注意在进行下面配置过程中随时执行 hexo clean hexo g hexo s 来确保没有出错，并且注意: 后面都会有空格，如果报错即时检查

应用主题

我们需要继续配置 _config.yml 文件来应用我们的主题，在_config.yml 文件中找到 theme 填写我们主题的名字

并且在博客文件夹根目录下新建一个_config.butterfly.yml 的文件，将主题的配置文件复制进去，目前这个版本的主题配置文件在 /themes/butterfly/_config.yml

创建几个页面

这里我只创建了几个目前我需要的，可以根据主题官方的说明进行其他的配置

1. 标签页

   hexo new page tags
   

   执行上面代码并在source/tags/index.md 的头部添加 type: "tags"
   

   title 就是页面中间显示的内容，自己根据喜好写就好

   top_img 就是页面顶部的背景图片

2. 分类页

   hexo new page categories
   

   执行上面代码并在source/categories/index.md 的头部添加 type: "categories"
   

   title top_img 和上面一样

3. 友情链接页

   hexo new page link
   

   执行上面代码并在source/link/index.md 的头部添加 type: "link"
   

   title top_img 和上面一样

   对于友情链接的设置我们需要在 source 目录下新建一个_data 文件夹，并创建一个 link.yml ，按照下面的内容进行修改

   - class_name: 友情链接
     class_desc: 那些人，那些事
     link_list:
      - name: Hexo
        link: https://hexo.io/zh-tw/
        avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
        descr: 快速、简单且强大的网誌框架
   
   - class_name: 网站
     class_desc: 没问题，就是学习
     link_list:
      - name: jquery之家
        link: http://www.htmleaf.com/
        avatar: https://cdn.jsdelivr.net/gh/yjr-1100/Photobag/githubioimg/jqueryhome.jpg
     descr: 自由分享jQuery、html5和css3的插件库
      - name: jquery插件库
        link: https://www.jq22.com/
        avatar: https://www.jq22.com/img/logo.png
        descr: jquery插件库
      - name: AcWing
        link: https://www.acwing.com/
        avatar: https://cdn.acwing.com/media/activity/surface/logo100x100.png
        descr: 算法刷题
   

4. 关于我页面

   hexo new page about
   

   执行上面代码并在source/about/index.md 的头部添加 type: "about"
   

   title top_img 和上面一样

5. 404页面

   主题内部内置了一个404，我们只需要打开就好，进入_config.butterfly.yml 找到下面的设置，把 enable 改为 true

   

修改浏览器标签栏Icon

在themes/butterfly/source/img/ 文件夹下，放一个自己的icon ，在 _config.butterfly.yml 文件中，找到 favicon 进行编辑，改为自己图片的路径

# Favicon（網站圖標）
favicon: /img/favicon.ico

设置导航栏

在 _config.butterfly.yml 文件中，找到 menu 进行编辑

menu:
  主页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  链接||fas fa-list:
    友情链接: /link/ || fas fa-link
    关于: /about/ || fas fa-heart

设置主页的头部图片和背景图片

在 _config.butterfly.yml 文件中，找到 index_img 和 archive_img ，在后面写上图片的url,其他的有兴趣也可以设置,找到background 在后面写上背景图片的url

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(https://cdn.jsdelivr.net/gh/yjr-1100/Photobag/githubioimg/bizhi3.jpg)

设置页脚开启页脚背景

在 _config.butterfly.yml 文件中，找到 footer 修改 enable 为 true，找到 footer_bg 修改为 true

footer:
  owner:
    enable: true
    since: 2022
  custom_text: 这里可以加一些自己的话
  copyright: true # Copyright of theme and framework

# Footer Background
footer_bg: true

开启页面美化

在 _config.butterfly.yml 文件中，找到 beautify 修改 enable 为 true

beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

设置首页动态打字效果

在 _config.butterfly.yml 文件中，找到 subtitle 修改 enable 为 true ,并在 sub 下写自己的想打的句子

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 人生没有白走的路，弯路也算数
    - 总有一天，你会渐渐活出写满答案的人生
    - 今天不想跑，所以才去跑，这才是长距离跑者的思维方式

修改侧边栏

在 _config.butterfly.yml 文件中，找到 aside 修改 enable 为 true ,并在 card_announcement 下修改公告内容，在 card_author 下修改自己的Github链接，找到 busuanzi 打开访问人数 ，找到 runtimeshow 打开网页运行时间

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/yjr-1100
  card_announcement:
    enable: true
    content: 总要记些什么证明我来过
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    # sort_order: # Don't modify the setting unless you know how it works

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 3/28/2022 00:00:00

设置社交账号

在 _config.butterfly.yml 文件中，找到 social 修改,冒号前面的是图标，使用的图标库是 font-awesome v6,冒号后边是网址和名称

social:
  fab fa-github: https://github.com/yjr-1100 || Github
  fas fa-envelope: mailto:[email protected] || Email

开启繁简体切换和阅读模式

在 _config.butterfly.yml 文件中，找到 translate 修改 enable 为 true ，找到 readmode 修改为 true

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: true
  # The text of a button
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '简'

# Read Mode (阅读模式)
readmode: true

写文章和发布博客

配置好后，再运行下面三个命令，打开本地博客看一下

hexo clean

hexo g

hexo s

当我们需要写博客的时候，我们可以使用命令

hexo new post 文章名

来创建一个文件，改文件的位置就在 /source/_posts 下，我们可以打开新建好的 .md 文件进行编辑。

hexo new post 命令使用的就是post模板，可以在/scaffolds 文件夹下找到改模板，我们可以编辑模板的头部，方便以后生成。

---
title: {{ title }}
date: {{ date }}
tags:
categories:
keywords:
description:
top_img: https://cdn.jsdelivr.net/gh/yjr-1100/Photobag/githubioimg/background_4k.jpg
cover:
---

其中：

tags 用来写新增文章的标签

categories 指明文章的分类，这个指明后会自动在分类页面被归类

description 描述本篇文章，类似摘要

top_img 指定文章头部的图片

cover 指定文章在首页展示时的缩略图

keywords 就是页面关键字

我们写好后，就可以在本地博客看到新写的博客了，再次执行下面的命令，就可以发布到github.io 中了

hexo clean

hexo g

hexo d

一些其他的设置

绑定自己的域名

1. 购买一个域名 可以去阿里云 进行域名注册

2. 为域名设置解析 拿阿里云为例，进入控制台，选择域名解析

   

3. 添加CNMA解析，我这里添加的是二级域名，

   

4. 在xxx.github.io的仓库中新建文件名为CNAME，写入你刚才解析的域名

   

5. 在仓库的 settings 里找到 pages 进行设置，下面的那个对勾需要等一会才能勾选

6. 等一会就可以使用这个域名进行访问了，比如我可以通过 https://yjr1100blog.jerryfirst.top/ 进行博客的访问

7. 使用hexo d 的时候一般会把这个CNAME文件覆盖掉，所以我们可以在本地的source文件夹下创建一个CNAME文件把刚才的内容写进去，这样在进行hexo d 的时候，就也会同时进行上传

进行文件更替

我们xxxx.github.io仓库里的文件只有 hexo g hexo d后的内容，没有源文件，加入我们电脑坏了，数据丢了，我们的博客就没了，所以我们建一个私有仓库进行我们原文件的更替

1. 在github 中建立一个私有仓库

   

2. 在博客文件夹下创建 .gitignore 文件，内容入下

   .DS_Store
   Thumbs.db
   db.json
   *.log
   node_modules/
   public/
   .deploy*/
   .vscode/
   /.idea/
   .deploy_git*/
   .idea
   themes/butterfly/.git
   

3. 在博客的文件夹下 执行

   git init
   
   git add .
   

   如果执行 git add . 提示

   hint: You've added another git repository inside your current repository.
   hint: Clones of the outer repository will not contain the     contents of
   hint: the embedded repository and will not know how to    obtain it.
   hint: If you meant to add a submodule, use:
   hint:
   hint:   git submodule add  themes/butterfly
   hint:
   hint: If you added this path by mistake, you can remove it    from the
   hint: index with:
   hint:
   hint:   git rm --cached themes/butterfly
   hint:
   hint: See "git help submodule" for more information.
   
   

   这个意思因为 themes/butterfly/ 下也有一个 .git 文件夹 ,git 认为 themes/butterfly 是子仓库，但是对于子仓库还需要配置其他东西才可以进行 add 所以有了这个提示

   如果想要提交 themes/butterfly 中的内容，那我们可以选择删了 themes/butterfly 下的 .git 文件，并执行git rm -f --cached themes/butterfly 先删了add 里的这个文件，再添加一次

4. 添加好后，依次执行下面的命令，完成源文件上传,其中[email protected]:yjr-1100/blogdata.git 要改成自己仓库的信息

   git commit -m "first commit"
   git branch -M main
   git remote add origin [email protected]:yjr-1100/blogdata.git
   git push -u origin main
   

5. 以后我们改完文件执行进行提交就好了

其它一些注意事项

github.io 没有更新的问题

如果git bash 中执行 hexo d 没有报错，仓库里的东西也更新了，但是你的xxx.github.io 却没有立刻得到更新，请耐心等一等，也可能github pages还在deploy