這里寫目錄標題

• 寫在之前
• 開始折騰
• • 有一個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 搭建个人博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。