<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          利用 GitHub 從零開始搭建一個博客

          共 15261字,需瀏覽 31分鐘

           ·

          2019-09-26 23:21


          閱讀本文大概需要 10?分鐘。


          趁著周末,搭建了一下 NightTeam 的官方博客和官方主頁,耗時數(shù)個小時,兩個站點(diǎn)終于完工了。這里寫一篇文章順手記錄了下來。不過這篇原創(chuàng)我發(fā)在了 NightTeam 上面了,這邊我就作為轉(zhuǎn)載了。

          由于 NightTeam 的域名是 nightteam.cn,所以這里官方博客使用了二級域名 blog.nightteam.cn,官方主頁使用了根域名 nightteam.cn,現(xiàn)在兩個站點(diǎn)都已經(jīng)穩(wěn)定運(yùn)行在 GitHub Pages 上面了,大家如果感興趣可以去看一下。

          ?NightTeam HomePage:https://nightteam.cn/?NightTeam Blog: https://blog.nightteam.cn/

          下面是兩個站點(diǎn)的預(yù)覽圖:ec4d6c6619733adbc9e5df7278938b36.webp2f713305a8d3e777c3e7509043b10d04.webp

          這里的主頁就是用一個基本的靜態(tài)頁面搭建了,沒有什么技術(shù)含量。博客相對復(fù)雜一點(diǎn),使用了 Hexo 框架,采用了 Next 主題,在搭建的過程中我就順手把搭建的流程大致記錄下來了,在這里擴(kuò)充一下形成一篇記錄,畢竟好記性不如爛筆頭。

          于是,這篇《利用 GitHub 從零開始搭建一個博客》的文章就誕生了。

          準(zhǔn)備條件

          在這里先跟大家說一些準(zhǔn)備條件,有些同學(xué)可能一聽到搭建博客就望而卻步。弄個博客網(wǎng)站,不得有臺服務(wù)器嗎?不得搞數(shù)據(jù)庫嗎?不得注冊域名嗎?沒事,如果都沒有,那照樣是能搭建一個博客的。

          GitHub 是個好東西啊,它提供了 GitHub Pages 幫助我們來架設(shè)一個靜態(tài)網(wǎng)站,這就解決了服務(wù)器的問題。

          Hexo 這個博客框架沒有那么重量級,它是 MarkDown 直接寫文章的,然后 Hexo 可以直接將文章編譯成靜態(tài)網(wǎng)頁文件并發(fā)布,所以這樣文章的內(nèi)容、標(biāo)題、標(biāo)簽等信息就沒必要存數(shù)據(jù)庫里面了,是直接純靜態(tài)頁面了,這就解決了數(shù)據(jù)庫的問題。

          GitHub Pages 允許每個賬戶創(chuàng)建一個名為 {username}.github.io 的倉庫,另外它還會自動為這個倉庫分配一個 github.io 的二級域名,這就解決了域名的問題,當(dāng)然如果想要自定義域名的話,也可以支持。

          所以說,基本上,先注冊個 GitHub 賬號就能搞了,下面我們來正式開始吧。

          新建項(xiàng)目

          首先在 GitHub 新建一個倉庫(Repository),名稱為 {username}.github.io,注意這個名比較特殊,必須要是 github.io 為后綴結(jié)尾的。比如 NightTeam 的 GitHub 用戶名就叫 NightTeam,那我就新建一個 nightteam.github.io,新建完成之后就可以進(jìn)行后續(xù)操作了。

          另外如果 GitHub 沒有配置 SSH 連接的建議配置一下,這樣后面在部署博客的時候會更方便。

          安裝環(huán)境

          安裝 Node.js

          首先在自己的電腦上安裝 Node.js,下載地址:https://nodejs.org/zh-cn/download/,可以安裝 Stable 版本。

          安裝完畢之后,確保環(huán)境變量配置好,能正常使用?npm?命令。

          安裝 Hexo

          接下來就需要安裝 Hexo 了,這是一個博客框架,Hexo 官方還提供了一個命令行工具,用于快速創(chuàng)建項(xiàng)目、頁面、編譯、部署 Hexo 博客,所以在這之前我們需要先安裝 Hexo 的命令行工具。

          命令如下:

          npm install -g hexo-cli

          安裝完畢之后,確保環(huán)境變量配置好,能正常使用?hexo?命令。

          初始化項(xiàng)目

          接下來我們使用 Hexo 的命令行創(chuàng)建一個項(xiàng)目,并將其在本地跑起來,整體跑通看看。

          首先使用如下命令創(chuàng)建項(xiàng)目:

          hexo init {name}

          這里的 name 就是項(xiàng)目名,我這里要創(chuàng)建 NightTeam 的博客,我就把項(xiàng)目取名為 nightteam 了,用了純小寫,命令如下:

          hexo init nightteam

          這樣 nightteam 文件夾下就會出現(xiàn) Hexo 的初始化文件,包括 themes、scaffolds、source 等文件夾,這些內(nèi)容暫且先不用管是做什么的,我們先知道有什么,然后一步步走下去看看都發(fā)生了什么變化。

          接下來我們首先進(jìn)入新生成的文件夾里面,然后調(diào)用 Hexo 的 generate 命令,將 Hexo 編譯生成 HTML 代碼,命令如下:

          hexo generate

          可以看到輸出結(jié)果里面包含了 js、css、font 等內(nèi)容,并發(fā)現(xiàn)他們都處在了項(xiàng)目根目錄下的 public 文件夾下面了。

          然后我們利用 Hexo 提供的 serve 命令把博客在本地運(yùn)行起來,命令如下:

          hexo serve

          運(yùn)行之后命令行輸出如下:

          INFO  Start processingINFO  Hexois running at http://localhost:4000 . Press Ctrl+C to stop.

          它告訴我們在本地 4000 端口上就可以查看博客站點(diǎn)了,如圖所示:

          a6e81f5009f3b5fbd1ea1a2ec50e1783.webp

          這樣一個博客的架子就出來了,我們只用了三個命令就完成了。

          部署

          接下來我們來將這個初始化的博客進(jìn)行一下部署,放到 GitHub Pages 上面驗(yàn)證一下其可用性。成功之后我們可以再進(jìn)行后續(xù)的修改,比如修改主題、修改頁面配置等等。

          那么怎么把這個頁面部署到 GitHub Pages 上面呢,其實(shí) Hexo 已經(jīng)給我們提供一個命令,利用它我們可以直接將博客一鍵部署,不需要手動去配置服務(wù)器或進(jìn)行其他的各項(xiàng)配置。

          部署命令如下:

          hexo deploy

          在部署之前,我們需要先知道博客的部署地址,它需要對應(yīng) GitHub 的一個 Repository 的地址,這個信息需要我們來配置一下。

          打開根目錄下的 _config.yml 文件,找到 Deployment 這個地方,把剛才新建的 Repository 的地址貼過來,然后指定分支為 master 分支,最終修改為如下內(nèi)容:

          # Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: {git repo ssh address}  branch: master

          我的就修改為如下內(nèi)容:

          # Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: [email protected]:NightTeam/nightteam.github.io.git  branch: master

          另外我們還需要額外安裝一個支持 Git 的部署插件,名字叫做 hexo-deployer-git,有了它我們才可以順利將其部署到 GitHub 上面,如果不安裝的話,在執(zhí)行部署命令時會報如下錯誤:

          Deployernot found: git

          好,那就讓我們安裝下這個插件,在項(xiàng)目目錄下執(zhí)行安裝命令如下:

          npm install hexo-deployer-git --save

          安裝成功之后,執(zhí)行部署命令:

          hexo deploy

          運(yùn)行結(jié)果類似如下:

          INFO  Deploying: gitINFO  Clearing.deploy_git folder...INFO  Copying files frompublic folder...INFO  Copying files from extend dirs...On branch masternothing to commit, working directory cleanCounting objects:46,done.Delta compression using up to 8 threads.Compressing objects:100%(36/36),done.Writing objects:100%(46/46),507.66KiB|0 bytes/s,done.Total46(delta 3), reused 0(delta 0)remote:Resolving deltas:100%(3/3),done.To git@github.com:NightTeam/nightteam.github.io.git*[new branch]      HEAD -> masterBranch master set up to track remote branch master from git@github.com:NightTeam/nightteam.github.io.git.INFO  Deploydone: git

          如果出現(xiàn)類似上面的內(nèi)容,就證明我們的博客已經(jīng)成功部署到 GitHub Pages 上面了,這時候我們訪問一下 GitHub Repository 同名的鏈接,比如我的 NightTeam 博客的 Repository 名稱取的是 nightteam.github.io,那我就訪問 http://nightteam.github.io,這時候我們就可以看到跟本地一模一樣的博客內(nèi)容了。

          6d4e22506f27bc8de87cd84e891982b1.webp

          這時候我們?nèi)?GitHub 上面看看 Hexo 上傳了什么內(nèi)容,打開之后可以看到 master 分支有了這樣的內(nèi)容:

          58254ab95d500a650c4889e548358754.webp

          仔細(xì)看看,這實(shí)際上是博客文件夾下面的 public 文件夾下的所有內(nèi)容,Hexo 把編譯之后的靜態(tài)頁面內(nèi)容上傳到 GitHub 的 master 分支上面去了。

          這時候可能就有人有疑問了,那我博客的源碼也想放到 GitHub 上面怎么辦呢?其實(shí)很簡單,新建一個其他的分支就好了,比如我這邊就新建了一個 source 分支,代表博客源碼的意思。

          具體的添加過程就很簡單了,參加如下命令:

          git initgit checkout -b sourcegit add -Agit commit -m "init blog"git remote add origin git@github.com:{username}/{username}.github.io.gitgit push origin source

          成功之后,可以到 GitHub 上再切換下默認(rèn)分支,比如我就把默認(rèn)的分支設(shè)置為了 source,當(dāng)然不換也可以。

          配置站點(diǎn)信息

          完成如上內(nèi)容之后,實(shí)際上我們只完成了博客搭建的一小步,因?yàn)槲覀儍H僅是把初始化的頁面部署成功了,博客里面還沒有設(shè)置任何有效的信息。下面就讓我們來進(jìn)行一下博客的基本配置,另外換一個好看的主題,配置一些其他的內(nèi)容,讓博客真正變成屬于我們自己的博客吧。

          下面我就以自己的站點(diǎn) NightTeam 為例,修改一些基本的配置,比如站點(diǎn)名、站點(diǎn)描述等等。

          修改根目錄下的 _config.yml 文件,找到 Site 區(qū)域,這里面可以配置站點(diǎn)標(biāo)題 title、副標(biāo)題 subtitle 等內(nèi)容、關(guān)鍵字 keywords 等內(nèi)容,比如我的就修改為如下內(nèi)容:

          # Sitetitle: NightTeamsubtitle: 一個專注技術(shù)的組織description: 涉獵的主要編程語言為 Python、Rust、C++、Go,領(lǐng)域涵蓋爬蟲、深度學(xué)習(xí)、服務(wù)研發(fā)和對象存儲等。keywords: "Python, Rust, C++, Go, 爬蟲, 深度學(xué)習(xí), 服務(wù)研發(fā), 對象存儲"author: NightTeam

          這里大家可以參照格式把內(nèi)容改成自己的。

          另外還可以設(shè)置一下語言,如果要設(shè)置為漢語的話可以將 language 的字段設(shè)置為 zh-CN,修改如下:

          language: zh-CN

          這樣就完成了站點(diǎn)基本信息的配置,完成之后可以看到一些基本信息就修改過來了,頁面效果如下:

          b2630e4047bdac24bb570b65cb018fc3.webp

          修改主題

          目前來看,整個頁面的樣式個人感覺并不是那么好看,想換一個風(fēng)格,這就涉及到主題的配置了。目前 Hexo 里面應(yīng)用最多的主題基本就是 Next 主題了,個人感覺這個主題還是挺好看的,另外它支持的插件和功能也極為豐富,配置了這個主題,我們的博客可以支持更多的擴(kuò)展功能,比如閱覽進(jìn)度條、中英文空格排版、圖片懶加載等等。

          那么首先就讓我們來安裝下 Next 這個主題吧,目前 Next 主題已經(jīng)更新到 7.x 版本了,我們可以直接到 Next 主題的 GitHub Repository 上把這個主題下載下來。

          主題的 GitHub 地址是:https://github.com/theme-next/hexo-theme-next,我們可以直接把 master 分支 Clone 下來。

          首先命令行進(jìn)入到項(xiàng)目的根目錄,執(zhí)行如下命令即可:

          git clone https://github.com/theme-next/hexo-theme-next themes/next

          執(zhí)行完畢之后 Next 主題的源碼就會出現(xiàn)在項(xiàng)目的 themes/next 文件夾下。

          然后我們需要修改下博客所用的主題名稱,修改項(xiàng)目根目錄下的 _config.yml 文件,找到 theme 字段,修改為 next 即可,修改如下:

          theme:next

          然后本地重新開啟服務(wù),訪問刷新下頁面,就可以看到 next 主題就切換成功了,預(yù)覽效果如下:

          3b1bf51f02bfdab9e8bcb500e2b00ff5.webp

          主題配置

          現(xiàn)在我們已經(jīng)成功切換到 next 主題上面了,接下來我們就對主題進(jìn)行進(jìn)一步地詳細(xì)配置吧,比如修改樣式、增加其他各項(xiàng)功能的支持,下面逐項(xiàng)道來。

          Next 主題內(nèi)部也提供了一個配置文件,名字同樣叫做 _config.yml,只不過位置不一樣,它在 themes/next 文件夾下,Next 主題里面所有的功能都可以通過這個配置文件來控制,下文所述的內(nèi)容都是修改的 themes/next/_config.yml 文件。

          樣式

          Next 主題還提供了多種樣式,風(fēng)格都是類似黑白的搭配,但整個布局位置不太一樣,通過修改配置文件的 scheme 字段即可,我選了 Pisces 樣式,修改 _config.yml (注意是 themes/next/_config.yml 文件)如下:

          scheme:Pisces

          刷新頁面之后就會變成這種樣式,如圖所示:

          20027bb0c5ae90767283971609a9d0a5.webp

          另外還有幾個可選項(xiàng),比如:

          # scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini

          大家可以自行根據(jù)喜好選擇。

          favicon

          favicon 就是站點(diǎn)標(biāo)簽欄的小圖標(biāo),默認(rèn)是用的 Hexo 的小圖標(biāo),如果我們有站點(diǎn) Logo 的圖片的話,我們可以自己定制小圖標(biāo)。

          但這并不意味著我們需要自己用 PS 自己來設(shè)計(jì),已經(jīng)有一個網(wǎng)站可以直接將圖片轉(zhuǎn)化為站點(diǎn)小圖標(biāo),站點(diǎn)鏈接為:https://realfavicongenerator.net[1],到這里上傳一張圖,便可以直接打包下載各種尺寸和適配不同設(shè)備的小圖標(biāo)。

          圖標(biāo)下載下來之后把它放在 themes/next/source/images 目錄下面。

          然后在配置文件里面找到 favicon 配置項(xiàng),把一些相關(guān)路徑配置進(jìn)去即可,示例如下:

          favicon:  small:/images/favicon-16x16.png  medium:/images/favicon-32x32.png  apple_touch_icon:/images/apple-touch-icon.png  safari_pinned_tab:/images/safari-pinned-tab.svg

          配置完成之后刷新頁面,整個頁面的標(biāo)簽圖標(biāo)就被更新了。

          avatar

          avatar 這個就類似站點(diǎn)的頭像,如果設(shè)置了這個,會在站點(diǎn)的作者信息旁邊額外顯示一個頭像,比如我這邊有一張 avatar.png 圖片:

          07a7c85821887b8e18a7e5c75c0392a4.webp

          將其放置到 themes/next/source/images/avatar.png 路徑,然后在主題 _config.yml 文件下編輯 avatar 的配置,修改為正確的路徑即可。

          # Sidebar Avataravatar:  # In theme directory (source/images): /images/avatar.gif  # In site directory (source/uploads): /uploads/avatar.gif  # You can also use other linking images.  url: /images/avatar.png  # If true, the avatar would be dispalyed in circle.  rounded: true  # If true, the avatar would be rotated with the cursor.  rotated: true

          這里有 rounded 選項(xiàng)是是否顯示圓形,rotated 是是否帶有旋轉(zhuǎn)效果,大家可以根據(jù)喜好選擇是否開啟。

          效果如下:

          6d09930faa57afcfe34e05c4ece6e4fc.webp

          配置完成之后就會顯示頭像。

          rss

          博客一般是需要 RSS 訂閱的,如果要開啟 RSS 訂閱,這里需要安裝一個插件,叫做 hexo-generator-feed,安裝完成之后,站點(diǎn)會自動生成 RSS Feed 文件,安裝命令如下:

          npm install hexo-generator-feed --save

          在項(xiàng)目根目錄下運(yùn)行這個命令,安裝完成之后不需要其他的配置,以后每次編譯生成站點(diǎn)的時候就會自動生成 RSS Feed 文件了。

          code

          作為程序猿,代碼塊的顯示還是需要很講究的,默認(rèn)的代碼塊我個人不是特別喜歡,因此我把代碼的顏色修改為黑色,并把復(fù)制按鈕的樣式修改為類似 Mac 的樣式,修改 _config.yml 文件的 codeblock 區(qū)塊如下:

          codeblock:# Code Highlight theme  # Available values: normal | night | night eighties | night blue | night bright  # See: https://github.com/chriskempson/tomorrow-theme  highlight_theme: night bright  # Add copy button on codeblock  copy_button:    enable: true    # Show text copy result.    show_result: true    # Available values: default | flat | mac    style: mac

          修改前的代碼樣式:

          671618f8d37e3303516ce987e0c23977.webp

          修改后的代碼樣式:

          d78ff66d70ee1b5912731cc16f02b044.webp

          嗯,個人覺得整體看起來逼格高了不少。

          top

          我們在瀏覽網(wǎng)頁的時候,如果已經(jīng)看完了想快速返回到網(wǎng)站的上端,一般都是有一個按鈕來輔助的,這里也支持它的配置,修改 _config.yml 的 back2top 字段即可,我的設(shè)置如下:

          back2top:  enable:true# Back to top in sidebar.  sidebar: false  # Scroll percent label in b2t button.  scrollpercent: true

          enable 默認(rèn)為 true,即默認(rèn)顯示。sidebar 如果設(shè)置為 true,按鈕會出現(xiàn)在側(cè)欄下方,個人覺得并不是很好看,就取消了,scrollpercent 就是顯示閱讀百分比,個人覺得還不錯,就將其設(shè)置為 true。

          具體的效果大家可以設(shè)置后根據(jù)喜好選擇。

          reading_process

          reading_process,閱讀進(jìn)度。大家可能注意到有些站點(diǎn)的最上側(cè)會出現(xiàn)一個細(xì)細(xì)的進(jìn)度條,代表頁面加載進(jìn)度和閱讀進(jìn)度,如果大家想設(shè)置的話也可以試試,我將其打開了,修改 _config.yml 如下:

          reading_progress:  enable:true# Available values: top | bottom  position: top  color: "#222"  height: 2px

          設(shè)置之后顯示效果如下:

          4bad7c6404477a30652a5e687e882688.webp

          bookmark

          書簽,可以根據(jù)閱讀歷史記錄,在下次打開頁面的時候快速幫助我們定位到上次的位置,大家可以根據(jù)喜好開啟和關(guān)閉,我的配置如下:

          bookmark:  enable:false# Customize the color of the bookmark.  color: "#222"  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.  # If manual, only save it by clicking the bookmark-icon.  save: auto

          github_banner

          在一些技術(shù)博客上,大家可能注意到在頁面的右上角有個 GitHub 圖標(biāo),點(diǎn)擊之后可以跳轉(zhuǎn)到其源碼頁面,可以為 GitHub Repository 引流,大家如果想顯示的話可以自行選擇打開,我的配置如下:

          # `Follow me on GitHub` banner in the top-right corner.github_banner:  enable: true  permalink: https://github.com/NightTeam/nightteam.github.io  title: NightTeam GitHub

          記得修改下鏈接 permalink 和標(biāo)題 title,顯示效果如下:

          14c7884df04e124cc30edab3152dea37.webp

          可以看到在頁面右上角顯示了 GitHub 的圖標(biāo),點(diǎn)擊可以進(jìn)去到 Repository 頁面。

          gitalk

          由于 Hexo 的博客是靜態(tài)博客,而且也沒有連接數(shù)據(jù)庫的功能,所以它的評論功能是不能自行集成的,但可以集成第三方的服務(wù)。

          Next 主題里面提供了多種評論插件的集成,有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 這些。

          作為一名程序員,我個人比較喜歡 gitalk,它是利用 GitHub 的 Issue 來當(dāng)評論,樣式也比較不錯。

          首先需要在 GitHub 上面注冊一個 OAuth Application,鏈接為:https://github.com/settings/applications/new,注冊完畢之后拿到 Client ID、Client Secret 就可以了。

          首先需要在 _config.yml 文件的 comments 區(qū)域配置使用 gitalk:

          # Multiple Comment System Supportcomments:  # Available values: tabs | buttons  style: tabs  # Choose a comment system to be displayed by default.  # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte  active: gitalk

          主要是 comments.active 字段選擇對應(yīng)的名稱即可。

          然后找打 gitalk 配置,添加它的各項(xiàng)配置:

          # Gitalk# Demo: https://gitalk.github.io# For more information: https://github.com/gitalk/gitalkgitalk:  enable: true  github_id: NightTeam  repo: nightteam.github.io # Repository name to store issues  client_id: {your client id} # GitHub Application Client ID  client_secret: {your client secret} # GitHub Application Client Secret  admin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issues  distraction_free_mode: true # Facebook-like distraction free mode  # Gitalk's display language depends on user's browser or system environment  # If you want everyone visiting your site to see a uniform language, you can set a force language value  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW  language: zh-CN

          配置完成之后 gitalk 就可以使用了,點(diǎn)擊進(jìn)入文章頁面,就會出現(xiàn)如下頁面:

          9524e0dc8eb99cad856b9d4c663a31b8.webp

          GitHub 授權(quán)登錄之后就可以使用了,評論的內(nèi)容會自動出現(xiàn)在 Issue 里面。

          pangu

          我個人有個強(qiáng)迫癥,那就是寫中文和英文的時候中間必須要留有間距,一個簡單直接的方法就是中間加個空格,但某些情況下可能習(xí)慣性不加或者忘記加了,這就導(dǎo)致中英文混排并不是那么美觀。

          pangu 就是來解決這個問題的,我們只需要在主題里面開啟這個選項(xiàng),在編譯生成頁面的時候,中英文之間就會自動添加空格,看起來更加美觀。

          具體的修改如下:

          pangu:true

          math

          可能在一些情況下我們需要寫一個公式,比如演示一個算法推導(dǎo)過程,MarkDown 是支持公式顯示的,Hexo 的 Next 主題同樣是支持的。

          Next 主題提供了兩個渲染引擎,分別是 mathjax 和 katex,后者相對前者來說渲染速度更快,而且不需要 JavaScript 的額外支持,但后者支持的功能現(xiàn)在還不如前者豐富,具體的對比可以看官方文檔:https://theme-next.org/docs/third-party-services/math-equations。

          所以我這里選擇了 mathjax,通過修改配置即可啟用:

          math:  enable:true
          # Default (true) will load mathjax / katex script on demand. # That is it only render those page which has `mathjax: true` in Front-matter. # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE. per_page: true
          # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support. mathjax: enable: true # See: https://mhchem.github.io/MathJax-mhchem/ mhchem: true

          mathjax 的使用需要我們額外安裝一個插件,叫做 hexo-renderer-kramed,另外也可以安裝 hexo-renderer-pandoc,命令如下:

          npm un hexo-renderer-marked --savenpm i hexo-renderer-kramed --save

          另外還有其他的插件支持,大家可以到官方文檔查看。

          pjax

          可能大家聽說過 Ajax,沒聽說過 pjax,這個技術(shù)實(shí)際上就是利用 Ajax 技術(shù)實(shí)現(xiàn)了局部頁面刷新,既可以實(shí)現(xiàn) URL 的更換,有可以做到無刷新加載。

          要開啟這個功能需要先將 pjax 功能開啟,然后安裝對應(yīng)的 pjax 依賴庫,首先修改 _config.yml 修改如下:

          pjax:true

          然后安裝依賴庫,切換到 next 主題下,然后安裝依賴庫:

          $ cd themes/next$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

          這樣 pjax 就開啟了,頁面就可以實(shí)現(xiàn)無刷新加載了。

          另外關(guān)于 Next 主題的設(shè)置還有挺多的,這里就介紹到這里了,更多的主題設(shè)置大家可以參考官方文檔:https://theme-next.org/docs/。

          文章

          現(xiàn)在整個站點(diǎn)只有一篇文章,那么我們怎樣來增加其他的文章呢?

          這個很簡單,只需要調(diào)用 Hexo 提供的命令即可,比如我們要新建一篇「HelloWorld」的文章,命令如下:

          hexo new hello-world

          創(chuàng)建的文章會出現(xiàn)在?source/_posts?文件夾下,是 MarkDown 格式。

          在文章開頭通過如下格式添加必要信息:

          ---title:標(biāo)題# 自動創(chuàng)建,如 hello-worlddate: 日期 # 自動創(chuàng)建,如 2019-09-22 01:47:21tags: - 標(biāo)簽1- 標(biāo)簽2- 標(biāo)簽3categories:- 分類1- 分類2---

          開頭下方撰寫正文,MarkDown 格式書寫即可。

          這樣在下次編譯的時候就會自動識別標(biāo)題、時間、類別等等,另外還有其他的一些參數(shù)設(shè)置,可以參考文檔:https://hexo.io/zh-cn/docs/writing.html。

          標(biāo)簽頁

          現(xiàn)在我們的博客只有首頁、文章頁,如果我們想要增加標(biāo)簽頁,可以自行添加,這里 Hexo 也給我們提供了這個功能,在根目錄執(zhí)行命令如下:

          hexo new page tags

          執(zhí)行這個命令之后會自動幫我們生成一個 source/tags/index.md 文件,內(nèi)容就只有這樣子的:

          ---title: tagsdate:2019-09-2616:44:17---

          我們可以自行添加一個 type 字段來指定頁面的類型:

          type: tagscomments:false

          然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面,修改 menu 字段如下:

          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

          這樣重新本地啟動看下頁面狀態(tài),效果如下:

          828d76715295547f32b1c7acffba34e3.webp

          可以看到左側(cè)導(dǎo)航也出現(xiàn)了標(biāo)簽,點(diǎn)擊之后右側(cè)會顯示標(biāo)簽的列表。

          分類頁

          分類功能和標(biāo)簽類似,一個文章可以對應(yīng)某個分類,如果要增加分類頁面可以使用如下命令創(chuàng)建:

          hexo new page categories

          然后同樣地,會生成一個 source/categories/index.md 文件。

          我們可以自行添加一個 type 字段來指定頁面的類型:

          type: categoriescomments:false

          然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面,修改 menu 字段如下:

          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

          這樣頁面就會增加分類的支持,效果如下:

          4c0d6b7c5265ea94afd6e65ef2f1605f.webp

          搜索頁

          很多情況下我們需要搜索全站的內(nèi)容,所以一個搜索功能的支持也是很有必要的。

          如果要添加搜索的支持,需要先安裝一個插件,叫做 hexo-generator-searchdb,命令如下:

          npm install hexo-generator-searchdb --save

          然后在項(xiàng)目的 _config.yml 里面添加搜索設(shè)置如下:

          search:  path: search.xml  field: post  format: html  limit:10000

          然后在主題的 _config.yml 里面修改如下:

          # Local search# Dependencies: https://github.com/wzpan/hexo-generator-searchlocal_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 -1  top_n_per_article: 5  # Unescape html strings to the readable one.  unescape: false  # Preload the search data when the page loads.  preload: false

          這里用的是 Local Search,如果想啟用其他是 Search Service 的話可以參考官方文檔:https://theme-next.org/docs/third-party-services/search-services。

          404 頁面

          另外還需要添加一個 404 頁面,直接在根目錄 source 文件夾新建一個 404.md 文件即可,內(nèi)容可以仿照如下:

          ---title:404NotFounddate:2019-09-2210:41:27---
          對不起,您所訪問的頁面不存在或者已刪除。您可以<a href="https://blog.nightteam.cn>">點(diǎn)擊此處</a>返回首頁。center>
          <blockquote class="blockquote-center">NightTeamblockquote>

          這里面的一些相關(guān)信息和鏈接可以替換成自己的。

          增加了這個 404 頁面之后就可以

          完成了上面的配置基本就完成了大半了,其實(shí) Hexo 還有很多很多功能,這里就介紹不過來了,大家可以直接參考官方文檔:https://hexo.io/zh-cn/docs/ 查看更多的配置。

          部署腳本

          最后我這邊還增加了一個簡易版的部署腳本,其實(shí)就是重新 gererate 下文件,然后重新部署。在根目錄下新建一個 deploy.sh 的腳本文件,內(nèi)容如下:

          hexo cleanhexo generatehexo deploy

          這樣我們在部署發(fā)布的時候只需要執(zhí)行:

          sh deploy.sh

          就可以完成博客的更新了,非常簡單。

          自定義域名

          將頁面修改之后可以用上面的腳本重新部署下博客,其內(nèi)容便會跟著更新。

          另外我們也可以在 GitHub 的 Repository 里面設(shè)置域名,找到 Settings,拉到下面,可以看到有個 GitHub Pages 的配置項(xiàng),如圖所示:

          d5c528581690021afba8a76d78cb6189.webp

          下面有個 custom domain 的選項(xiàng),輸入你想自定義的域名地址,然后添加 CNAME 解析就好了。

          另外下面還有一個 Enforce HTTPS 的選項(xiàng),GitHub Pages 會在我們配置自定義域名之后自動幫我們配置 HTTPS 服務(wù)。剛配置完自定義域名的時候可能這個選項(xiàng)是不可用的,一段時間后等到其可以勾選了,直接勾選即可,這樣整個博客就會變成 HTTPS 的協(xié)議的了。

          另外有一個值得注意的地方,如果配置了自定義域名,在目前的情況下,每次部署的時候這個自定義域名的設(shè)置是會被自動清除的。所以為了避免這個情況,我們需要在項(xiàng)目目錄下面新建一個 CNAME 文件,路徑為 source/CNAME,內(nèi)容就是自定義域名。

          比如我就在 source 目錄下新建了一個 CNAME 文件,內(nèi)容為:

          blog.nightteam.cn

          這樣避免了每次部署的時候自定義域名被清除的情況了。

          以上就是從零搭建一個 Hexo 博客的流程,希望對大家有幫助。

          References

          [1]?https://realfavicongenerator.net:?https://realfavicongenerator.net/


          崔慶才

          靜覓博客博主,《Python3網(wǎng)絡(luò)爬蟲開發(fā)實(shí)戰(zhàn)》作者

          隱形字

          個人公眾號:進(jìn)擊的Coder

          fefb55ee76e7b87f3907851a2ec9e4e7.webpf952e9fafbf9b47100c52bd4312b4bb6.webp

          長按識別二維碼關(guān)注


          好文和朋友一起看~
          瀏覽 144
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  黄色视频大全在线观看 | 黄片在线播放免费观看a | 青青草原免费在线视频 | 播播影院在线特别黄色视频看看你 | 成年美女黄网站色奶头大全 |