这里写目录标题

写在之前
开始折腾
- 有一个github账号
- 创建github仓库
- 安装相关软件
- - 安装git工具
  - 安装Node.js
  - 安装Hexo
- 初始化和本地博客的搭建
- - 初始化本地博客
  - 配置git
  - 安装deployer插件
  - 发布博客到 github.io
- 配置好看的主题，并写博客
- - 安装butterfly主题
  - 配置butterfly主题
  - - 应用主题
    - 创建几个页面
    - 修改浏览器标签栏Icon
    - 设置导航栏
    - 设置主页的头部图片和背景图片
    - 设置页脚开启页脚背景
    - 开启页面美化
    - 设置首页动态打字效果
    - 修改侧边栏
    - 设置社交账号
    - 开启繁简体切换和阅读模式
  - 写文章和发布博客
- 一些其他的设置
- - 绑定自己的域名
  - 进行文件更替
- 其它一些注意事项
- - github.io 没有更新的问题

写在之前

在一开始我是在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 git@github.com

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

安装deployer插件

npm install hexo-deployer-git --save

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

发布博客到 github.io

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

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

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

hexo cleanhexo ghexo 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 --savenpm install hexo-wordcount --save

配置butterfly主题

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

应用主题

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

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

创建几个页面

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

标签页
```
hexo new page tags
```
执行上面代码并在source/tags/index.md 的头部添加 type: "tags"

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

top_img 就是页面顶部的背景图片
分类页
```
hexo new page categories
```
执行上面代码并在source/categories/index.md 的头部添加 type: "categories"

title top_img 和上面一样

友情链接页

hexo new page link

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

title top_img 和上面一样

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

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

关于我页面
```
hexo new page about
```
执行上面代码并在source/about/index.md 的头部添加 type: "about"

title top_img 和上面一样
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: truesince: 2022custom_text: 这里可以加一些自己的话copyright: true # Copyright of theme and framework# Footer Background
footer_bg: true

开启页面美化

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

beautify:enable: truefield: post # site/posttitle-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: truehide: falsebutton: truemobile: true # display on mobileposition: right # left or rightcard_author:enable: truedescription:button:enable: trueicon: fab fa-githubtext: Follow Melink: https://github.com/yjr-1100card_announcement:enable: truecontent: 总要记些什么证明我来过card_recent_post:enable: truelimit: 5 # if set 0 will show allsort: date # date or updatedsort_order: # Don't modify the setting unless you know how it workscard_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsesort_order: # Don't modify the setting unless you know how it workscard_tags:enable: truelimit: 40 # if set 0 will show allcolor: falsesort_order: # Don't modify the setting unless you know how it workscard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allsort_order: # Don't modify the setting unless you know how it workscard_webinfo:enable: truepost_count: truelast_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: truesite_pv: truepage_pv: true# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:enable: truepublish_date: 3/28/2022 00:00:00

设置社交账号

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

social:fab fa-github: https://github.com/yjr-1100 || Githubfas fa-envelope: mailto:jiaruiyang221@gmail.com || Email

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

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

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:enable: true# The text of a buttondefault: 繁# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）defaultEncoding: 2# Time delaytranslateDelay: 0# The text of the button when the language is Simplified ChinesemsgToTraditionalChinese: '繁'# The text of the button when the language is Traditional ChinesemsgToSimplifiedChinese: '简'# Read Mode (阅读模式)
readmode: true

写文章和发布博客

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

hexo cleanhexo ghexo 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 cleanhexo ghexo d

一些其他的设置

绑定自己的域名

购买一个域名可以去阿里云进行域名注册
为域名设置解析拿阿里云为例，进入控制台，选择域名解析
添加CNMA解析，我这里添加的是二级域名，
在xxx.github.io的仓库中新建文件名为CNAME，写入你刚才解析的域名
在仓库的 settings 里找到 pages 进行设置，下面的那个对勾需要等一会才能勾选
等一会就可以使用这个域名进行访问了，比如我可以通过 https://yjr1100blog.jerryfirst.top/ 进行博客的访问
使用hexo d 的时候一般会把这个CNAME文件覆盖掉，所以我们可以在本地的source文件夹下创建一个CNAME文件把刚才的内容写进去，这样在进行hexo d 的时候，就也会同时进行上传

进行文件更替

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

在github 中建立一个私有仓库

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

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

在博客的文件夹下执行

git initgit 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 <url> 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 里的这个文件，再添加一次

添加好后，依次执行下面的命令，完成源文件上传,其中git@github.com:yjr-1100/blogdata.git 要改成自己仓库的信息
```
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:yjr-1100/blogdata.git
git push -u origin main
```
以后我们改完文件执行进行提交就好了

其它一些注意事项

github.io 没有更新的问题

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

github+hexo+butterfly 搭建个人博客相关推荐

使用GitHub+Hexo+live2d搭建个人博客
使用GitHub+Hexo+live2d搭建个人博客博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 安装hexo sudo n ...
如何使用Github+Hexo快速搭建个人博客
如何使用Github+Hexo快速搭建个人博客可以移步地址:https://zyt505050.gitee.io/2019/01/27/ru-he-shi-yong-github-hexo-kuai ...
GitHub+hexo+win10 搭建个人博客
GitHub+hexo+win10 搭建个人博客个人感觉这篇很详细,值得收藏. http://hujichn.github.io/2016/04/06/Win10上利用github+hexo建立博客 ...
使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:<使用 Hexo + Next 搭建静态博客> 前言 Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Git ...
hexo评论_【前端简历加分】hexo框架搭建个人博客站点，手把手教学
最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客. 作为应届毕业生或者1-3年工 ...
Github Pages + Hugo 搭建个人博客
文章目录 Github Pages + Hugo 搭建个人博客零.效果一.创建 Github 库二.安装 Hugo 和 Git 三.新建 Hugo 网站四.选择 Hugo 主题五.新建文章 ...
20210826-Gitee+Hexo+NexT搭建个人博客
Gitee+Hexo+NexT搭建个人博客一.准备 1.1 安装 node.js 参考: https://www.cnblogs.com/zhouyu2017/p/6485265.html Node ...
hexo同时在github和gitcafe搭建个人博客
说明自己在使用hexo搭建静态博客的时候踩了许多坑,最终去官网看教程搞定了, 建议用hexo搭建个人博客的时候,最好看清教程的日期和使用的版本,这样就不会因为版本的不同导致的问题了.建议先去hex ...
使用Hexo免费搭建个人博客教程
前言现在各种互联网博客非常的,常见的如CSDN.简书.掘金.博客园等平台,这些博客平台做的都很好,可以直接在上面注册自己的账号写文章,发表的文章在百度.Bing等搜索引擎上也能收到,但缺点是受于平台 ...
node mysql 搭建博客_node.js+Hexo+Git搭建个人博客
今早上考完试回来,接到腾讯云的每月邮件续费通知. 对于一个小开发来讲,买一个云服务器建站最方便不过,但是对于学生党来说还是有些贵. 一想明年7月份,云服务器就一元每月变65每月,加上30来块的域名费, ...

github+hexo+butterfly 搭建个人博客