當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

github page hexo博客gitee_利用Github和hexo搭建个人免费博客

發布時間：2024/7/5 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 github page hexo博客gitee_利用Github和hexo搭建个人免费博客小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

利用Github和hexo搭建個人免費博客詳細過程：

概述：

詳細的介紹了利用github和hexo搭建免費的博客，內容詳細，淺顯易懂，容易上手，大家一起進來看看吧！

1、配置Github相關操作：

? ①新建一個倉庫，點擊【New】

? ②輸入自己的倉庫名，注意：這里的倉庫名的形式一定是http://username.github.io的形式，其中username是你的用戶名。(像我的倉庫名稱就是：http://lures2019.github.io)，并且一個賬號只能擁有一個這樣的倉庫！(倉庫名字一定要和github賬戶名稱一樣，否則后面部署失敗，圖是錯誤的！)

? ③搭建環境：安裝node.js和git(具體安裝過程谷歌搜索)，安裝好后打開cmd，分別輸入node -v和npm -v以及git --version,結果若是下面這樣，說明環境搭建成功：

? 這時桌面鼠標點擊右鍵，可以看到下面這樣：git bash here表示在當前目錄下運行git bash（在不同的目錄下運行效果不一樣，切記）

? ④SSH授權：

? 打開git bash，輸入ssh-keygen -t rsa接著按照提示進行操作(回車三下)，如下所示說明創建公私鑰成功，回車默認是把公鑰和私鑰保存在默認的路徑(我們可以選擇自己的路徑，把路徑輸入即可，但是不建議這么做，否則后面會出bug):

? 接著運行下面的兩條命令：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com" ssh-add ~/.ssh/id_rsa

? 這樣就會在C盤用戶目錄下生成id_rsa和id_rsa.pub這兩個文件，前者是私鑰，后者是公鑰，用記事本打開id_rsa.pub，復制其中的全部內容，添加到GitHub上，這樣本地的id_rsa密鑰就可以和GitHub上的id_rsa.pub公鑰進行配對，授權成功。

? ⑤在github上添加SSH key：

? 點擊右上角的頭像打開setting，在SSH and GPGkey選項中點擊New SSH key，把上述所說的id_rsa.pub中的內容全部復制到框框中，完成授權：

其中SSH的存放目錄是：

SSH key添加之后，就可以在本機的git bash下進行測試，輸入：ssh -T git@github.com進行測試，出現HiXXX，說明授權成功：

注意：如果出現無法登陸的情況，先把之前生成的文件懂刪了以后再重新生成一下ssh，（建議使用默認目錄，否則這個地方會出問題）

2、設置本地博客的設置：

? ①安裝一個文件夾(用來安裝hexo),在git bash中進入這個文件夾下（在git bash中用cd 命令進入或者在該文件夾下右擊點Git bash here ，兩種方法效果一樣）輸入npm install -g hexo安裝hexo即可（要耐心的等會），再輸入npm install hexo --save （耐心的等一會），緊接著輸入 hexo v ,出現如下信息則說明安裝成功:

? 記住：一定要在【環境變量】path下添加node-modules下的.bin目錄，否則hexo v會出現錯誤：

? ②初始化hexo：

? 什么是初始化hexo？就相當于新建一個hexo實例，新建一個文件夾，在這個文件夾下初始化hexo，用hexo init +文件夾路徑或者在該文件夾下打開git bash 進行執行hexo init 命令，比如我在一個叫blog的文件夾初始化了hexo，則這個文件夾下就生成了一個hexo站點所包含的所以文件：

? 初始化成功后，在git bash中進入該目錄，試行命令 hexo s（hexo server的縮寫），啟動本地服務，這樣可以進行本地預覽，hexo可以初始化很多次，產生多個hexo站點。這里我就初始化了一個，在blog文件夾下，如果你初始化了多個hexo站點，想要啟動哪個，就在哪個目錄下執行hexo s 命令。執行后，如下：

? 根據提示，在瀏覽器里打開localhost：4000，如下,說明博客已經搭建成功，不過只能在本地查看，此時還沒有與Github關聯起來！

? ③部署到Github上：

? 強調：兩個概念站點配置文件：初始化hexo的那個文件夾下的_config.yml文件；主題配置文件：theme目錄下的每個主題文件夾的_config.yml文件 (每個主題都有一個主題配置文件，但是一個站點只有一個站點配置文件)打開站點配置文件先打開配置文檔_config.yml，對它做如下修改，repository后面的內容是 git@gitbub.com:username/庫地址的形式注意：type、repository、branch冒號的后面都有一個空格（切記所有配置文件中冒號與值之間都有一個空格）

（其中，repository后面的是你的倉庫的地址，我的應該是lures2019/http://lures2019.github.io，后面已經修改了），這個在文末(需要自己添加！)

? 這樣就配置好啦，接下來在git bash中把網站部署到github上。打開github，通過ssh登錄github，即執行指令ssh -T git@github.com ，必須先登錄才能部署，在本地預覽的時候不需要這一步，接著執行三部曲

?hexo clean （清理緩存什么的，執行一下沒壞處）hexo g （生成靜態文件）hexo d （部署到github上，如果只是本地預覽把這一步換為 hexo s）
這樣就完成了，在瀏覽器里輸入庫地址就能訪問我們在github上搭建的博客了，比如我的庫地址如上（斜杠后面的）lures.github.io:

? 注意：如果在部署時執行命令hexo d時出現：Error Deployer not found: git，需要執行下面的步驟：

安裝hexo-deployer-git:$ npm install hexo-deployer-git --save 重新deploy:$ hexo deploy

現在可以在瀏覽器上搜索：http://lures.github.io可以查看博客了;

3、更換主題(以next主題為例)：

? （1）下載主題：

? 安裝指令: 首先打開git bash進入根目錄即 “ /blog/blog” 執行命令: git clone https://github.com/theme-next/hexo-theme-next themes/next 此時會從next主題的作者的github倉庫克隆next主題到我們本地的 /blog/theme/next文件夾下：

安裝完成后，打開【站點配置文件】即hexo下的_config.yml文件，找到theme字段，并將值更改為next，【Ctrl +s】進行保存：（記事本打開）

接著，依次執行下面的代碼：

hexo clean hexo g hexo d

? 截圖如下：

? 接著，咱就可以在瀏覽器之前的網址進行刷新了：

(next主題有四種選擇，上面這個只是最簡潔的一種，我選擇的是Gemini布局)

? （2）修改主題配置文件：

? 打開themes下的_config.yml文件進行修改操作：

? 【Ctrl+s】進行保存后，接著運行三個命令：

hexo clean hexo g hexo d

我就不截圖了，部署成功后的網址刷新結果是：

（注意：如果刷新后發現next主題并沒有變化，可能是剛開始的時候hexo下的_config.yml文件的repository后面的名字錯誤(我剛開始犯下的錯誤)

4、設置語言：

? 在站點配置文件【即hexo下的_config.yml】中設置語言：

5、字數統計和閱讀時長(網站底部/文章內)：

? ①首先安裝插件：npm install hexo-symbols-count-time --save

? 文件夾中出現這個名稱的目錄就說明插件安裝成功，如下圖：

? ②然后修改主題配置文件【即themes下的_config.yml】

? ③運行之前的三個命令并刷新網址后得到截圖：

? 出現亂碼的方式是這樣的，看下圖：

? 當我們把ANSI編碼換成UTF-8編碼后，出現的圖片是這樣的：

? 發現全部都是亂碼，我們只需要重寫再寫一遍，再次運行之前的三個命令并刷新網址就可以得到新的界面了：

6、添加busuanzi：統計瀏覽次數(本站總訪問數，本站總訪問量)：

? 打開/blog/themes/next/layout/_partials/footer.swig 在文件底部添加下面的代碼:

<div class="powered-by"><i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">本站總訪客數:<span id="busuanzi_value_site_uv"></span>  | </span><span id="busuanzi_container_site_pv"> 本站總訪問量<span id="busuanzi_value_site_pv"></span>次</span></div></div>

? 現在【Ctrl +s】保存并運行三條命令后刷新網址得到新的界面：

7、添加網站的安全運行時間：

? 打開/blog/themes/next/layout/_partials/footer.swig 在文件底部添加下面的代碼:

<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span> <script>var now = new Date(); function createtime() { var grt= new Date("12/08/2019 16:00:00");//此處修改你的建站時間或者網站上線時間 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全運行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒"; } setInterval("createtime()",250); </script>

? 運行三個命令并刷新網址后的截圖是：

8、靜態背景圖片：

? 在下圖的路徑下新建一個文件夾：background：

? 接著，打開主題配置文件，在文末加上background_image: bg-8.jpg;,截圖如下：

(透明度暫時不知道怎么設置，QAQ，hexo6后靜態背景我沒找到實現辦法，害得我想了好久，哭了~)

9、添加評論系統(以valine為例)：

? 先注冊leancloud賬號，獲取自己的appid,appkey:

? (注意：class名稱必須是Counter)

? 打開主題配置文件，修改如下：

valine:enable: true # 為true時啟用評論appid: # 這里填寫上面得到的APP ID 注意空一格再輸入ID和key,appkey: # 這里填寫上面得到的APP KEYnotify: false # 郵件通知verify: false # 驗證碼placeholder: #評論框中預設的文字,隨意填寫avatar: mm # gravatar style 頭像,采用gravatar頭像,到http://cn.gravatar.com/了解guest_info: nick,mail,link # custom comment header 訪客信息,顯示在評論框上面,三者可隨意選擇或全選pageSize: 10 # pagination size 評論分頁大小visitor: false #

10、添加熱度：

? 修改主題配置文件：

leancloud_visitors:enable: trueapp_id: #填入你leancloud賬號的appidapp_key: #填入你leancloud賬號的appkey

? 打開/blog/themes/next/layout/_macro/post.swig,在畫紅線的區域添加℃：

然后打開，/blog/themes/next/languages/zh-CN.yml,將畫紅框的改為熱度就OK了：

11、為博客添加寵物：

? ①在hexo根目錄下安裝插件：npm install -save hexo-helper-live2d

? ②安裝需要的寵物插件:寵物樣式源碼地址：

? npm install {package}

? 其中，{package}是替換為你要安裝的寵物名，如 live2d-widget-model-z16

? 具體指令：npm install live2d-widget-model-z16

? ③在站點配置文件中加上如下代碼：

live2d:enable: true #開啟寵物scriptFrom: localmodel:use: live2d-widget-model-z16display:position: right #指定寵物顯示的位置width: 300 #指定寵物顯示的寬度height: 600 #指定寵物顯示的高度mobile:show: true #是否在手機上顯示

12、鼠標點擊出現桃心效果：

? ①在 /themes/next/source/js 下新建文件 love.js，在love.js 文件中添加以下代碼：

? ②然后在 themesnextlayout_layout.swig 文件末尾添加以下代碼：

<script type="text/javascript" src="/js/love.js"></script>

13、網頁底部的動態桃心圖像：

? 修改主題配置文件：

icon:name: heart #如果name的值為heart表示引用fontawesome網站上的心形圖標animated: true #如果想用動態圖標應該將animated的值設為truecolor: "#ff0000" #圖標的色--用16進制數

14、設置網站的圖標Favicon：

? ①下載一個32*32的圖片，并改名為favicon.ico, 然后放到/blog/themes/next/source/images目錄

? ②修改主題配置文件：

favicon:small: /images/favicon-16x16-next.pngmedium: /images/favicon.icoapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg

15、添加打賞：

# Reward (Donate) reward_settings:enable: true animation: truecomment: 只想買包辣條reward:wechatpay: /images/wechatpay.png #微信收款碼alipay: /images/alipay.png #支付寶收款碼#bitcoin: /images/bitcoin.png

16、在右上角或者左上角實現fork me on github

? 訪問：https://github.blog/2008-12-19-github-ribbons/

? 或者是http://tholman.com/github-corners/

? 選擇合適的圖標，并復制代碼！

? /blog/themes/next/layout/_layout.swig文件中進行配置. next表示的是當前你使用的主題的樣式.

(注意：其中href后面的是我們自己的地址)

17、側邊欄社交鏈接

? ① 修改主題配置文件: 鏈接放置在 social 字段下，一行一個鏈接。其鍵值格式是顯示文本: 鏈接地址：

social:GitHub: https://github.com/lures2019 || githubE-Mail: mailto:zhichaowang94@gmail.com || envelopeWeibo: https://weibo.com/zhichaowang94/home?wvr=5 || weibo#Google: https://plus.google.com/yourname || google#Twitter: https://twitter.com/yourname || twitter#FB Page: https://www.facebook.com/yourname || facebookStackOverflow: https://stackoverflow.com/users/12209371/王智超 || stack-overflow#YouTube: https://youtube.com/yourname || youtube#Instagram: https://instagram.com/yourname || instagram#Skype: skype:yourname?call|chat || skype#RSS: /atom.xml || rsssocial_icons:enable: trueicons_only: falsetransition: false#圖標：Github: githubE-Mail: envelopeWeibo: weiboStackOverflow: stack-overflow

18、網頁雪花飄落效果：

? ①在 Hexothemesnextsourcejs 目錄下新建一個 snow.js 文件，粘貼以下代碼：

/*樣式一*/ (function($){$.fn.snow = function(options){var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),documentHeight = $(document).height(),documentWidth = $(document).width(),defaults = {minSize : 10,maxSize : 20,newOn : 1000,flakeColor : "#AFDAEF" /* 此處可以定義雪花顏色，若要白色可以改為#FFFFFF */},options = $.extend({}, defaults, options);var interval= setInterval( function(){var startPositionLeft = Math.random() * documentWidth - 100,startOpacity = 0.5 + Math.random(),sizeFlake = options.minSize + Math.random() * options.maxSize,endPositionTop = documentHeight - 200,endPositionLeft = startPositionLeft - 500 + Math.random() * 500,durationFall = documentHeight * 10 + Math.random() * 5000;$flake.clone().appendTo('body').css({left: startPositionLeft,opacity: startOpacity,'font-size': sizeFlake,color: options.flakeColor}).animate({top: endPositionTop,left: endPositionLeft,opacity: 0.2},durationFall,'linear',function(){$(this).remove()});}, options.newOn);}; })(jQuery); $(function(){$.fn.snow({ minSize: 5, /* 定義雪花最小尺寸 */maxSize: 50,/* 定義雪花最大尺寸 */newOn: 300 /* 定義密集程度，數字越小越密集 */}); }); /*樣式二*/ /* 控制下雪 */ function snowFall(snow) {/* 可配置屬性 */snow = snow || {};this.maxFlake = snow.maxFlake || 200; /* 最多片數 */this.flakeSize = snow.flakeSize || 10; /* 雪花形狀 */this.fallSpeed = snow.fallSpeed || 1; /* 墜落速度 */ } /* 兼容寫法 */ requestAnimationFrame = window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||window.oRequestAnimationFrame ||function(callback) { setTimeout(callback, 1000 / 60); };cancelAnimationFrame = window.cancelAnimationFrame ||window.mozCancelAnimationFrame ||window.webkitCancelAnimationFrame ||window.msCancelAnimationFrame ||window.oCancelAnimationFrame; /* 開始下雪 */ snowFall.prototype.start = function(){/* 創建畫布 */snowCanvas.apply(this);/* 創建雪花形狀 */createFlakes.apply(this);/* 畫雪 */drawSnow.apply(this) } /* 創建畫布 */ function snowCanvas() {/* 添加Dom結點 */var snowcanvas = document.createElement("canvas");snowcanvas.id = "snowfall";snowcanvas.width = window.innerWidth;snowcanvas.height = document.body.clientHeight;snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");document.getElementsByTagName("body")[0].appendChild(snowcanvas);this.canvas = snowcanvas;this.ctx = snowcanvas.getContext("2d");/* 窗口大小改變的處理 */window.onresize = function() {snowcanvas.width = window.innerWidth;/* snowcanvas.height = window.innerHeight */} } /* 雪運動對象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {this.x = Math.floor(Math.random() * canvasWidth); /* x坐標 */this.y = Math.floor(Math.random() * canvasHeight); /* y坐標 */this.size = Math.random() * flakeSize + 2; /* 形狀 */this.maxSize = flakeSize; /* 最大形狀 */this.speed = Math.random() * 1 + fallSpeed; /* 墜落速度 */this.fallSpeed = fallSpeed; /* 墜落速度 */this.velY = this.speed; /* Y方向速度 */this.velX = 0; /* X方向速度 */this.stepSize = Math.random() / 30; /* 步長 */this.step = 0 /* 步數 */ } flakeMove.prototype.update = function() {var x = this.x,y = this.y;/* 左右擺動(余弦) */this.velX *= 0.98;if (this.velY <= this.speed) {this.velY = this.speed}this.velX += Math.cos(this.step += .05) * this.stepSize;this.y += this.velY;this.x += this.velX;/* 飛出邊界的處理 */if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {this.reset(canvas.width, canvas.height)} }; /* 飛出邊界-放置最頂端繼續墜落 */ flakeMove.prototype.reset = function(width, height) {this.x = Math.floor(Math.random() * width);this.y = 0;this.size = Math.random() * this.maxSize + 2;this.speed = Math.random() * 1 + this.fallSpeed;this.velY = this.speed;this.velX = 0; }; // 渲染雪花-隨機形狀（此處可修改雪花顏色！！！） flakeMove.prototype.render = function(ctx) {var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此處是雪花顏色，默認是白色 */snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改為其他顏色，請自行查 */snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16進制的RGB 顏色代碼。 */ctx.save();ctx.fillStyle = snowFlake;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();ctx.restore(); }; /* 創建雪花-定義形狀 */ function createFlakes() {var maxFlake = this.maxFlake,flakes = this.flakes = [],canvas = this.canvas;for (var i = 0; i < maxFlake; i++) {flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))} } /* 畫雪 */ function drawSnow() {var maxFlake = this.maxFlake,flakes = this.flakes;ctx = this.ctx, canvas = this.canvas, that = this;/* 清空雪花 */ctx.clearRect(0, 0, canvas.width, canvas.height);for (var e = 0; e < maxFlake; e++) {flakes[e].update();flakes[e].render(ctx);}/* 一幀一幀的畫 */this.loop = requestAnimationFrame(function() {drawSnow.apply(that);}); } /* 調用及控制方法 */ var snow = new snowFall({maxFlake:60}); snow.start();

? ②然后在 Hexothemesnextlayout_layout. swig文件里引用即可：

<script type="text/javascript" src="jssnow.js"></script>如果沒效果，請確認網頁是否已載入JQurey，如果沒有請在下雪代碼之前引入JQ即可： <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

? 運行后截圖效果：

19、添加作者頭像：

? ①在images目錄下下載作者頭像并命名為：avatar.png

? ②在主題配置文件中：

? 將false改成true，url對應改變即可

? 運行并截圖：

20、配置主菜單：

? ①打開主題配置文件，按照下面格式添加邊欄菜單：

menu:home: / || homeabout: /about/ || user #關于我tags: /tags/ || tags #標簽云#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap

? ②標簽云：使用 Hexo 命令新建一個名為 tags 的頁面即可：

? hexo new page tags

? 該頁面標題可以在文件 hexosourcetagsindex.md 中修改

? ③about頁面：

? 使用 Hexo 命令新建一個名為 about 的頁面即可

? hexo new page about

? 該頁面內容在文件 hexosourceaboutindex.md 中修改：

21、在每篇文章末尾統一添加“本文結束”標記：

? ①在路徑 themesnextlayout_macro 中新建 passage-end-tag.swig 文件,并添加以下內容：

<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>{% endif %} </div>

? ②接著打開themesnextlayout_macropost.swig文件，在post-body 之后， post-footer 之前添加如下畫紅色部分代碼（post-footer之前兩個DIV）：

? 代碼如下：

<div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %} </div>

? 然后打開主題配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文結束”標記 passage_end_tag:enabled: true

? 完成以上設置之后，在每篇文章之后都會添加如上效果圖的樣子。

22、在網站底部加上訪問量：

? ①打開themesnextlayout_partialsfooter.swig文件,在copyright前加上畫紅線這句話：

? 代碼如下：

? <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

? 然后再合適的位置添加顯示統計的代碼，如圖：

? 代碼如下：

23、隱藏網頁底部powered By Hexo / 強力驅動

? 打開themes/next/layout/_partials/footer.swig,使用””隱藏之間的代碼即可，或者直接刪除。

? 運行截圖：

完！

總結

以上是生活随笔為你收集整理的github page hexo博客gitee_利用Github和hexo搭建个人免费博客的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： C++_虚继承_虚函数_纯虚函数(多继承
下一篇： bcp 不能调用where 子句_MyS