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

编程问答

Hexo搭建git博客

發布時間：2023/12/19 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Hexo搭建git博客小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?本文主要內容是本站博客使用Next主題的個性化定制和部分優化細節。最后搭建的博客。

注：如果上傳到hexo搭建的gitblogshan上時，代碼塊內的html和js仍然會被解析，可以在代碼塊開頭和結尾加上<xmp></xmp>標簽，hexo就不會解析代碼塊內的內容，但仍然有些字符需要被轉義。

Hexo+github搭建個人博客

Hexo博客搭建的基礎流程為：安裝Node.js→安裝Git→安裝主題→注冊給github并創建pages倉庫→部署

首先可以將Hexo官方文檔看一遍，然后可以參考這篇文章使用Hexo+Github一步步搭建屬于自己的博客（基礎）進行配置。如果想將博客同步到coding上可以查看這篇文章：基于Hexo+Github+Coding搭建個人博客——基礎篇(從菜鳥到放棄)。之后在站點文件夾根目錄，安裝Git部署插件（以后所有安裝的插件都在這個目錄），輸入下面命令：

所在目錄：~/Blog/ npm install hexo-deployer-git --save

然后在站點根目錄下配置文件，編輯：

文件位置：~/Blog/_config.yml url: https://cqupt-wan.github.io/ . .省略... . # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy:type: gitrepository: git@github.com:CQUPT-Wan/CQUPT-Wan.github.io.gitbranch: master# other deployer-type: leancloud_counter_security_sync

將其中的cqupt-wan更改為你的git賬號即可，可以執行hexo s在 http://localhost:4000 本地調試成功后，執行 hexo clean && hexo g && hexo d 上傳到git博客上。

站點根目錄內容

建立好的站點根目錄如下：

. ├── _config.yml ├── package.json ├── scaffolds ├── source | ? ├── _drafts | ? └── _posts └── themes

每個文件或文件夾的功能如下：

_config.yml

站點博客的配置文件，博客的名稱、關鍵詞、作者、語言、博客主題...設置都在里面。

package.json

應用程序信息，新添加的插件內容也會出現在這里面，我們可以不修改這里的內容。

scaffolds

scaffolds就是腳手架的意思，這里放了三個模板文件，分別是新添加博客文章（posts）、新添加博客頁（page）和新添加草稿（draft）的目標樣式。這部分可以修改的內容是，我們可以在模板上添加比如categories等自定義內容

source

source是放置我們博客內容的地方，里面初始只有兩個文件夾，一個是drafts（草稿），一個posts（文章），但之后我們通過命令新建tags（標簽）還有categories（分類）頁后，這里會相應地增加文件夾。

themes

放置主題文件包的地方。Hexo會根據這個文件來生成靜態頁面。初始狀態下只有landscape一個文件夾，后續我們可以添加自己喜歡的。

優化基本功能配置

更換博客主題

兩個Hexo主題下載的地方：

知乎話題：有哪些好看的 Hexo 主題？

Hexo官方：Themes

然后使用clone的方式將主題下載，本站博客選用的是Hexo的next主題

所在目錄：~/Blog/ git clone https://github.com/theme-next/hexo-theme-next themes/next

clone完成后，修改配置文件中的theme選項

文件位置：~/Blog/_config.yml ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next

此外，可以在主題配置文件中修改next主題的不同風格，本站使用的是Gemini風格

文件位置：~/Blog/themes/next/_config.yml # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- ? # Schemes #cheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini

設置Menu

默認只有首頁和歸檔兩個，如果還需要添加其他，需要修改主題配置文件：

文件位置：~/Blog/themes/next/_config.yml menu:home: / || home ?//首頁about: /about/ || user ?//關于tags: /tags/ || tags ?//標簽categories: /categories/ || th ?//分類archives: /archives/ || archive ?//歸檔#schedule: /schedule/ || calendar //日程表#sitemap: /sitemap.xml || sitemap //站點地圖#commonweal: /404/ || heartbeat //公益404

修改完配置文件后，還需要創建對應的文件夾，以tags標簽為例

所在目錄：~/Blog/ hexo new page "tags"

此外，還需要修改對應文件夾中的index.md文件，comment對應后面的評論系統

文件位置：~/Blog/source/tags/index.md --- title: 所有標簽 date: 2019-05-16 15:12:51 type: "tags" comments: false ---

添加動態背景

修改主題配置文件，將enable改為true即可

文件位置：~/Blog/themes/next/_config.yml # Canvas-nest # Dependencies: https://github.com/theme-next/theme-next-canvas-nest canvas_nest:enable: trueonmobile: true # display on mobile or notcolor: "0,0,255" # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 99 # the number of lines

配置項說明：

color ：線條顏色, 默認: '0,0,255'；三個數字分別為(R,G,B)
opacity：線條透明度（0~1）, 默認: 0.5
count：線條的總數量, 默認: 99
zIndex ：背景的z-index屬性，css屬性用于控制所在層的位置, 默認: -1

添加RSS

首先安裝Hexo插件

所在目錄：~/Blog/npm install --save hexo-generator-feed

編輯站點配置文件

文件位置：~/Blog/_config.yml ## Plugins: https://hexo.io/plugins/ plugins: hexo-generate-feed

配置主題文件

文件位置：~/Blog/themes/next/_config.yml # Set rss to false to disable feed link. # Leave rss as blank to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`. # Set rss to specific value if you have burned your feed already. rss: /atom.xml

修改鏈接樣式

文件位置：~Blog/themes/next/source/css/_common/components/post/post.styl // 文章內鏈接文本樣式 .post-body p a {color: #0593d3; //原始鏈接顏色border-bottom: none;border-bottom: 1px solid #0593d3; //底部分割線顏色&:hover {color: #fc6423; //鼠標經過顏色border-bottom: none;border-bottom: 1px solid #fc6423; //底部分割線顏色} }

修改底部標簽樣式

原本的標簽是‘#’，感覺很丑，所有將rel="tag">#標簽更改為rel="tag"><i class="fa fa-tag">現在這個樣子

文件位置：~/Blog/themes/next/layout/_macro/post.swig <div class="post-tags">{% for tag in post.tags %}<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>{% endfor %}</div><i class="fa fa-tag">

在文章末尾添加“文章結束”標志

首先新建passage-end-tag.swig文件

所在目錄：~/Blog/themes/next/layout/_macro //創建passage-end-tag.swig文件 touch passage-end-tag.swig

編輯該文件

文件位置：~/Blog/themes/next/layout/_macro/passage-end-tag.swig <div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束啦<i class="fa fa-thumbs-up" aria-hidden="true"></i>感謝您的閱讀-------------</div>{% endif %} </div>;

然后修改post.swig配置文件，在END POST BODY之后添加

文件位置：~/Blog/themes/next/layout/_macro\post.swig {% if not is_index %}<div> {% include '../_macro/passage-end-tag.swig' %}</div>{% endif %}

最后修改主題配置文件即可

文件位置：~/Blog/themes/next/_config.yml # 文章末尾添加“本文結束”標記 passage_end_tag:enabled: true

設置網站圖標Favicon

不論是網站的圖標還是頭像都存儲在~/Blog/themes/next/source/images中，只需要將默認的圖片替換掉即可

文件位置：~/Blog/themes/next/_config.yml favicon:small: /images/pikapika-16-16.pngmedium: /images/pikapika-32-32.pngapple_touch_icon: /images/pikapika.pngsafari_pinned_tab: /images/pikapika.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml

圖片轉svg在線生成器

進階高級功能配置

添加熱度

進入LeanCloud官網，進行賬號注冊。登錄后，進入控制臺，創建應用，應用名為Hexo如下圖所示：

創建應用后，點擊存儲，創建Class，Class命名為Counter，操作如下圖所示：

查看AppID和AppKey，如下圖所示：

加入熱度符號：

文件位置：~/Blog/themes/next/layout/_macro\post.swig {# LeanCloud PageView #}{% if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %}<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-eye"></i></span>{% if theme.post_meta.item_text %}<span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>{% endif %}<span class="leancloud-visitors-count"></span><span>℃</span></span>{% endif %}

添加來必得云跟帖功能

首先去來必力注冊賬號，然后進入后臺管理系統，如下圖所示：

拷貝下圖中的data-uid

編輯主題配置文件，將上面的data-uid粘貼到下面位置

文件位置：~/Blog/themes/next/_config.yml # LiveRe comments system # You can get your uid from https://livere.com/insight/myCode (General web site) livere_uid:

當分類、標簽、關于等組件需要隱藏評論功能時

編輯index.md文件，添加comments將其值設為false:

文件位置：~/Blog/source/about title: About Me date: 2019-05-16 16:04:06 type: "about" comments: false

配置網站底部內容

底部隱藏Hexo強力驅動

設置主題配置文件

文件位置：~/Blog/themes/next/_config.yml footer:# Specify the date when the site was setup. If not defined, current year will be used.since: 2019

修改中文內容

文件位置：~/Blog/themes/next/languages/zh-CN.yml footer:powered: "由 %s 個人專屬"theme: 主題total_views: 總訪問量total_visitors: 總訪客量

打開Blog/themes/next/layout/_partials/footer.swig，修改相應代碼。

文件位置：~/Blog/themes/next/layout/_partials/footer.swig {% if theme.footer.powered.enable %}<div class="powered-by">{##}{{ __('footer.powered', next_url('https://github.com/CQUPT-Wan', 'CQUPT-Wan', {class: 'theme-link'})) }}{##}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{##}</div> {% endif %}

網站底部字數統計

安裝hexo插件，切換到根目錄：

根目錄：~/Blog npm install hexo-wordcount --save

在~/Blog/themes/next/layout/_partials/footer.swig添加代碼：注意這段代碼添加的位置和底部最后顯示的位置相關，我是加在author后面

文件位置：~/Blog/themes/next/layout/_partials/footer.swig<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || author }}</span><span class="post-meta-divider">|</span><div class="theme-info"><div class="powered-by"></div><span class="post-count">博客全站共{{ totalcount(site) }}字</span></div>

讓頁腳的心跳動起來

首先編輯主題配置文件

文件位置：~/Blog/themes/next/_config.yml icon: # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: heart

然后編輯

文件位置：~/Blog/themes/next/layout/_partials/footer.swig <span class="with-love" id="heart">

最后編輯custom.styl，加入：

文件位置：~/Blog/themes/next/source/css/_custom/custom.styl // 自定義頁腳跳動的心樣式 @keyframes heartAnimate {0%,100%{transform:scale(1);}10%,30%{transform:scale(0.9);}20%,40%,60%,80%{transform:scale(1.1);}50%,70%{transform:scale(1.1);} } #heart {animation: heartAnimate 1.33s ease-in-out infinite; } .with-love {color: rgb(255, 0, 0); }

添加DaoVoice在線聯系

首先到DaoVoice注冊賬號，登錄成過后，進入到后臺管理，點擊應用設置——>安裝到網站查看安裝代碼和AppID。

將安裝代碼添加到Blog/themes/next/layout/_partials/head.swig中：

文件位置：~/Blog/themes/next/layout/_partials/head.swig {% if theme.daovoice %}<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")daovoice('init', {app_id: "{{theme.daovoice_app_id}}"});daovoice('update');</script> {% endif %}

配置主題文件

文件位置：~/Blog/themes/next/_config.yml # Online contact daovoice: true daovoice_app_id: ab02c609

Hexo博客添加站內搜索

NexT主題支持集成 Swiftype、微搜索、Local Search 和 Algolia。

安裝 hexo-generator-search

目錄：~/Blog npm install hexo-generator-search --save

安裝 hexo-generator-searchdb

目錄：~/Blog npm install hexo-generator-searchdb --save

編輯站點配置文件

文件位置：~/Blog/_config.yml # 搜索 search:path: search.xmlfield: postformat: htmllimit: 10000

編輯主題配置文件，設置Local searchenable為ture

文件位置：~/Blog/themes/next/_config.yml # Local search # Dependencies: https://github.com/theme-next/hexo-generator-searchdb local_search:enable: true# If auto, trigger search by changing input.# If manual, trigger search by pressing enter key or search button.trigger: auto# Show top n results per article, show all results by setting to -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: false

文章底部添加版權聲明

在目錄 ~/Blog/themes/next/layout/_macro/ 下添加 my-copyright.swig ，內容如下：

文件位置：~/Blog/themes/next/layout/_macro/my-copyright.swig {% if page.copyright %} <div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p><p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p><p><span>發布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><span class="copy-path" ?title="點擊復制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" ?aria-label="復制成功！"></i></span></p><p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文鏈接及作者。</p> ? </div> <script> var clipboard = new Clipboard('.fa-clipboard');$(".fa-clipboard").click(function(){clipboard.on('success', function(){swal({ ? title: "", ? text: '復制成功',icon: "success", showConfirmButton: true});});}); ? </script> {% endif %}

在目錄~/Blog/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl，添加以下代碼：

文件位置：~/Blog/themes/next/source/css/_common/components/post/my-post-copyright.styl .my_post_copyright {width: 85%;max-width: 45em;margin: 2.8em auto 0;padding: 0.5em 1.0em;border: 1px solid #d3d3d3;font-size: 0.93rem;line-height: 1.6em;word-break: break-all;background: rgba(255,255,255,0.4); } .my_post_copyright p{margin:0;} .my_post_copyright span {display: inline-block;width: 5.2em;color: #b5b5b5;font-weight: bold; } .my_post_copyright .raw {margin-left: 1em;width: 5em; } .my_post_copyright a {color: #808080;border-bottom:0; } .my_post_copyright a:hover {color: #a3d2a3;text-decoration: underline; } .my_post_copyright:hover .fa-clipboard {color: #000; } .my_post_copyright .post-url:hover {font-weight: normal; } .my_post_copyright .copy-path {margin-left: 1em;width: 1em;+mobile(){display:none;} } .my_post_copyright .copy-path:hover {color: #808080;cursor: pointer; } ?

修改~/Blog/themes/next/layout/_macro/post.swig，在END POST BODY后面添加以下代碼：

文件位置：~/Blog/themes/next/layout/_macro/post.swig <div>{% if not is_index %}{% include 'my-copyright.swig' %}{% endif %}</div>

在~/Blog/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代碼：@import "my-post-copyright"

修改網站url

因為寫的博客存在中文標題，如果直接用默認的url會出現中文，這樣容易出現網址Bug。而且默認的網址不是html靜態網址，修改方式如下

文件位置：~/Blog/_config.yml #permalink: :year/:month/:day/:title/ permalink: :year:month:day-:url_name.html permalink_defaults:url_name: index

這里的url_name需要在每篇新建博客的.md文件中設置你想設置的網址名，如果嫌麻煩可以修改模板

文件位置：~/Blog/scaffolds/post.md --- title: {{ title }} url_name: date: {{ date }} tags: categories: copyright: ---

對于標簽中的中文，可以編輯站點配置文件進行設定：

文件位置：~/Blog/_config.yml # Category & Tag default_category: uncategorized # URL 中的分類和標簽「翻譯」成英文 category_map:機器學習: MachineLearning自然語言處理: NLP深度學習: DeepLearning數據結構: DataStructure編程實踐: Coding tag_map:

側欄加入已運行時間

首先加入下面代碼

文件位置：~/Blog/themes/next/layout/_custom/sidebar.swig <div id="days"></div> <script> function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("05/15/2019 15:13:14"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=setzero(Math.floor(e_hrsold)); e_minsold=(e_hrsold-hrsold)*60; minsold=setzero(Math.floor((e_hrsold-hrsold)*60)); seconds=setzero(Math.floor((e_minsold-minsold)*60)); document.getElementById('days').innerHTML="已運行 "+daysold+" 天 "+hrsold+" 小時 "+minsold+" 分 "+seconds+" 秒"; } function setzero(i){ if (i<10) {i="0" + i}; return i; } show_date_time(); </script>

上面Date需要修改為你自己的，然后修改文件：

文件位置：~/Blog/themes/next/layout/_macro/sidebar.swig{# Blogroll #}{% if theme.links %}<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>{{ theme.links_title }} <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i></div><ul class="links-of-blogroll-list">{% for name, link in theme.links %}<li class="links-of-blogroll-item"><a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a></li>{% endfor %}</ul> + ? ? ? {% include '../_custom/sidebar.swig' %}</div>{% endif %} ? - ? ? ? {% include '../_custom/sidebar.swig' %}

如果需要修改顏色，則可以修改custom.styl

// 自定義的側欄時間樣式 #days {display: block;color: #f56e25;font-size: 10px;margin-top: 10px; } .site-overview {text-align: center; }

設置頁面內容居中

本博客使用的主題是Next.Mist，首頁內容默認為

如果想修改標題的位置居中或者‘閱讀全文’居中，首先可以F12審查元素查看要修改內容的class，然后進行修改

文件位置：~/Blog/themes/next/source/css/_schemes/Mist/_posts-expanded.styl // Post Expanded // -------------------------------------------------- .posts-expand {padding-top: 0; ?.post-title,.post-meta {text-align: center $site-meta-text-align; ?//文章屬性位置+mobile() { text-align: center; }}.post-eof { display: none; } ?.post { margin-top: 120px; }.post:first-child { margin-top: 0; } ?.post-meta {margin-top: 5px;margin-bottom: 20px;} ?.post-title {position: center; ?//文章標題位置font-size: $font-size-headings-base;font-weight: 400;+mobile() { font-size: $font-size-headings-small; }+desktop-large() { font-size: $font-size-headings-large; }}.post-title:hover:before { background: $black-deep; } ?.post-body {+mobile() { font-size: $font-size-base; }} ?.post-body img { margin: 0; } ?.post-tags {text-align: left;a {padding: 1px 5px;background: $whitesmoke;border-bottom: none;}a:hover { background: $grey-light; }}.post-nav { margin-top: 40px; } } ? .post-button {margin-top: 20px;text-align: right; ?//閱讀全文位置 ?a {padding: 0;font-size: $font-size-base;//color: $grey-dim;background: none;border: none;border-bottom: 2px solid $grey-dim;transition-property: border; ?+mobile() { font-size: $font-size-small; }+desktop-large() { font-size: $font-size-large; } ?&:hover { border-bottom-color: $black-deep; }} }

如果要修改其他主題的內容位置，將~/Blog/themes/next/source/css/_schemes/Mist/_posts-expanded.styl中的Mist修改即可。

參考大佬的文章

tips：大佬的博客可不僅僅有一篇文章，多在上面逗留會，也許會有甜品。
打造個性超贊博客Hexo+NexT+GitHubPages的超深度優化
hexo的next主題個性化教程:打造炫酷網站
Hext-Next配置超炫網頁效果
最后如果轉載，麻煩留個本文的鏈接，因為如果讀者或我自己發現文章有錯誤，我會在這里更正，留個本文的鏈接，防止我暫時的疏漏耽誤了他人寶貴的時間。

總結

以上是生活随笔為你收集整理的Hexo搭建git博客的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：《超级马力欧兄弟大电影》今日上线流媒体平
下一篇：牛客网剑指offer编程实践1-10题