github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一個(gè)值得加星標(biāo)的公眾號。
趁著周末,搭建了一下 NightTeam 的官方博客和官方主頁,耗時(shí)數(shù)個(gè)小時(shí),兩個(gè)站點(diǎn)終于完工了。
由于 NightTeam 的域名是 nightteam.cn,所以這里官方博客使用了二級域名 blog.nightteam.cn,官方主頁使用了根域名 nightteam.cn,現(xiàn)在兩個(gè)站點(diǎn)都已經(jīng)穩(wěn)定運(yùn)行在 GitHub Pages 上面了,大家如果感興趣可以去看一下。
?NightTeam HomePage:https://nightteam.cn/?NightTeam Blog: https://blog.nightteam.cn/
下面是兩個(gè)站點(diǎn)的預(yù)覽圖:這里的主頁就是用一個(gè)基本的靜態(tài)頁面搭建了,沒有什么技術(shù)含量。博客相對復(fù)雜一點(diǎn),使用了 Hexo 框架,采用了 Next 主題,在搭建的過程中我就順手把搭建的流程大致記錄下來了,在這里擴(kuò)充一下形成一篇記錄,畢竟好記性不如爛筆頭。
于是,這篇《利用 GitHub 從零開始搭建一個(gè)博客》的文章就誕生了。
準(zhǔn)備條件
在這里先跟大家說一些準(zhǔn)備條件,有些同學(xué)可能一聽到搭建博客就望而卻步。弄個(gè)博客網(wǎng)站,不得有臺服務(wù)器嗎?不得搞數(shù)據(jù)庫嗎?不得注冊域名嗎?沒事,如果都沒有,那照樣是能搭建一個(gè)博客的。
GitHub 是個(gè)好東西啊,它提供了 GitHub Pages 幫助我們來架設(shè)一個(gè)靜態(tài)網(wǎng)站,這就解決了服務(wù)器的問題。
Hexo 這個(gè)博客框架沒有那么重量級,它是 MarkDown 直接寫文章的,然后 Hexo 可以直接將文章編譯成靜態(tài)網(wǎng)頁文件并發(fā)布,所以這樣文章的內(nèi)容、標(biāo)題、標(biāo)簽等信息就沒必要存數(shù)據(jù)庫里面了,是直接純靜態(tài)頁面了,這就解決了數(shù)據(jù)庫的問題。
GitHub Pages 允許每個(gè)賬戶創(chuàng)建一個(gè)名為 {username}.github.io 的倉庫,另外它還會自動為這個(gè)倉庫分配一個(gè) github.io 的二級域名,這就解決了域名的問題,當(dāng)然如果想要自定義域名的話,也可以支持。
所以說,基本上,先注冊個(gè) GitHub 賬號就能搞了,下面我們來正式開始吧。
新建項(xiàng)目
首先在 GitHub 新建一個(gè)倉庫(Repository),名稱為 {username}.github.io,注意這個(gè)名比較特殊,必須要是 github.io 為后綴結(jié)尾的。比如 NightTeam 的 GitHub 用戶名就叫 NightTeam,那我就新建一個(gè) nightteam.github.io,新建完成之后就可以進(jìn)行后續(xù)操作了。
另外如果 GitHub 沒有配置 SSH 連接的建議配置一下,這樣后面在部署博客的時(shí)候會更方便。
安裝環(huán)境
安裝 Node.js
首先在自己的電腦上安裝 Node.js,下載地址:https://nodejs.org/zh-cn/download/,可以安裝 Stable 版本。
安裝完畢之后,確保環(huán)境變量配置好,能正常使用?npm?命令。
安裝 Hexo
接下來就需要安裝 Hexo 了,這是一個(gè)博客框架,Hexo 官方還提供了一個(gè)命令行工具,用于快速創(chuàng)建項(xiàng)目、頁面、編譯、部署 Hexo 博客,所以在這之前我們需要先安裝 Hexo 的命令行工具。
命令如下:
npm install -g hexo-cli安裝完畢之后,確保環(huán)境變量配置好,能正常使用?hexo?命令。
初始化項(xiàng)目
接下來我們使用 Hexo 的命令行創(chuàng)建一個(gè)項(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 提供的 server 命令把博客在本地運(yùn)行起來,命令如下:
hexo server運(yùn)行之后命令行輸出如下:
INFO Start processingINFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.它告訴我們在本地 4000 端口上就可以查看博客站點(diǎn)了,如圖所示:
這樣一個(gè)博客的架子就出來了,我們只用了三個(gè)命令就完成了。
部署
接下來我們來將這個(gè)初始化的博客進(jìn)行一下部署,放到 GitHub Pages 上面驗(yàn)證一下其可用性。成功之后我們可以再進(jìn)行后續(xù)的修改,比如修改主題、修改頁面配置等等。
那么怎么把這個(gè)頁面部署到 GitHub Pages 上面呢,其實(shí) Hexo 已經(jīng)給我們提供一個(gè)命令,利用它我們可以直接將博客一鍵部署,不需要手動去配置服務(wù)器或進(jìn)行其他的各項(xiàng)配置。
部署命令如下:
hexo deploy在部署之前,我們需要先知道博客的部署地址,它需要對應(yīng) GitHub 的一個(gè) Repository 的地址,這個(gè)信息需要我們來配置一下。
打開根目錄下的 _config.yml 文件,找到 Deployment 這個(gè)地方,把剛才新建的 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: git@github.com:NightTeam/nightteam.github.io.git branch: master另外我們還需要額外安裝一個(gè)支持 Git 的部署插件,名字叫做 hexo-deployer-git,有了它我們才可以順利將其部署到 GitHub 上面,如果不安裝的話,在執(zhí)行部署命令時(shí)會報(bào)如下錯誤:
Deployer not found: git好,那就讓我們安裝下這個(gè)插件,在項(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 from public 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.66 KiB | 0 bytes/s, done.Total 46 (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 Deploy done: git如果出現(xiàn)類似上面的內(nèi)容,就證明我們的博客已經(jīng)成功部署到 GitHub Pages 上面了,這時(shí)候我們訪問一下 GitHub Repository 同名的鏈接,比如我的 NightTeam 博客的 Repository 名稱取的是 nightteam.github.io,那我就訪問 http://nightteam.github.io,這時(shí)候我們就可以看到跟本地一模一樣的博客內(nèi)容了。
這時(shí)候我們?nèi)?GitHub 上面看看 Hexo 上傳了什么內(nèi)容,打開之后可以看到 master 分支有了這樣的內(nèi)容:
仔細(xì)看看,這實(shí)際上是博客文件夾下面的 public 文件夾下的所有內(nèi)容,Hexo 把編譯之后的靜態(tài)頁面內(nèi)容上傳到 GitHub 的 master 分支上面去了。
這時(shí)候可能就有人有疑問了,那我博客的源碼也想放到 GitHub 上面怎么辦呢?其實(shí)很簡單,新建一個(gè)其他的分支就好了,比如我這邊就新建了一個(gè) 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)行一下博客的基本配置,另外換一個(gè)好看的主題,配置一些其他的內(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: 一個(gè)專注技術(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)基本信息的配置,完成之后可以看到一些基本信息就修改過來了,頁面效果如下:
修改主題
目前來看,整個(gè)頁面的樣式個(gè)人感覺并不是那么好看,想換一個(gè)風(fēng)格,這就涉及到主題的配置了。目前 Hexo 里面應(yīng)用最多的主題基本就是 Next 主題了,個(gè)人感覺這個(gè)主題還是挺好看的,另外它支持的插件和功能也極為豐富,配置了這個(gè)主題,我們的博客可以支持更多的擴(kuò)展功能,比如閱覽進(jìn)度條、中英文空格排版、圖片懶加載等等。
那么首先就讓我們來安裝下 Next 這個(gè)主題吧,目前 Next 主題已經(jīng)更新到 7.x 版本了,我們可以直接到 Next 主題的 GitHub Repository 上把這個(gè)主題下載下來。
主題的 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ù)覽效果如下:
主題配置
現(xiàn)在我們已經(jīng)成功切換到 next 主題上面了,接下來我們就對主題進(jìn)行進(jìn)一步地詳細(xì)配置吧,比如修改樣式、增加其他各項(xiàng)功能的支持,下面逐項(xiàng)道來。
Next 主題內(nèi)部也提供了一個(gè)配置文件,名字同樣叫做 _config.yml,只不過位置不一樣,它在 themes/next 文件夾下,Next 主題里面所有的功能都可以通過這個(gè)配置文件來控制,下文所述的內(nèi)容都是修改的 themes/next/_config.yml 文件。
樣式
Next 主題還提供了多種樣式,風(fēng)格都是類似黑白的搭配,但整個(gè)布局位置不太一樣,通過修改配置文件的 scheme 字段即可,我選了 Pisces 樣式,修改 _config.yml (注意是 themes/next/_config.yml 文件)如下:
scheme: Pisces刷新頁面之后就會變成這種樣式,如圖所示:
另外還有幾個(gè)可選項(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)有一個(gè)網(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配置完成之后刷新頁面,整個(gè)頁面的標(biāo)簽圖標(biāo)就被更新了。
avatar
avatar 這個(gè)就類似站點(diǎn)的頭像,如果設(shè)置了這個(gè),會在站點(diǎn)的作者信息旁邊額外顯示一個(gè)頭像,比如我這邊有一張 avatar.png 圖片:
將其放置到 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ù)喜好選擇是否開啟。
效果如下:
配置完成之后就會顯示頭像。
rss
博客一般是需要 RSS 訂閱的,如果要開啟 RSS 訂閱,這里需要安裝一個(gè)插件,叫做 hexo-generator-feed,安裝完成之后,站點(diǎn)會自動生成 RSS Feed 文件,安裝命令如下:
npm install hexo-generator-feed --save在項(xiàng)目根目錄下運(yùn)行這個(gè)命令,安裝完成之后不需要其他的配置,以后每次編譯生成站點(diǎn)的時(shí)候就會自動生成 RSS Feed 文件了。
code
作為程序猿,代碼塊的顯示還是需要很講究的,默認(rèn)的代碼塊我個(gè)人不是特別喜歡,因此我把代碼的顏色修改為黑色,并把復(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修改前的代碼樣式:
修改后的代碼樣式:
嗯,個(gè)人覺得整體看起來逼格高了不少。
top
我們在瀏覽網(wǎng)頁的時(shí)候,如果已經(jīng)看完了想快速返回到網(wǎng)站的上端,一般都是有一個(gè)按鈕來輔助的,這里也支持它的配置,修改 _config.yml 的 back2top 字段即可,我的設(shè)置如下:
back2top: enable: true # Back to top in sidebar. sidebar: false # Scroll percent label in b2t button. scrollpercent: trueenable 默認(rèn)為 true,即默認(rèn)顯示。sidebar 如果設(shè)置為 true,按鈕會出現(xiàn)在側(cè)欄下方,個(gè)人覺得并不是很好看,就取消了,scrollpercent 就是顯示閱讀百分比,個(gè)人覺得還不錯,就將其設(shè)置為 true。
具體的效果大家可以設(shè)置后根據(jù)喜好選擇。
reading_process
reading_process,閱讀進(jìn)度。大家可能注意到有些站點(diǎn)的最上側(cè)會出現(xiàn)一個(gè)細(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è)置之后顯示效果如下:
bookmark
書簽,可以根據(jù)閱讀歷史記錄,在下次打開頁面的時(shí)候快速幫助我們定位到上次的位置,大家可以根據(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: autogithub_banner
在一些技術(shù)博客上,大家可能注意到在頁面的右上角有個(gè) 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,顯示效果如下:
可以看到在頁面右上角顯示了 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 這些。
作為一名程序員,我個(gè)人比較喜歡 gitalk,它是利用 GitHub 的 Issue 來當(dāng)評論,樣式也比較不錯。
首先需要在 GitHub 上面注冊一個(gè) 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)如下頁面:
GitHub 授權(quán)登錄之后就可以使用了,評論的內(nèi)容會自動出現(xiàn)在 Issue 里面。
pangu
我個(gè)人有個(gè)強(qiáng)迫癥,那就是寫中文和英文的時(shí)候中間必須要留有間距,一個(gè)簡單直接的方法就是中間加個(gè)空格,但某些情況下可能習(xí)慣性不加或者忘記加了,這就導(dǎo)致中英文混排并不是那么美觀。
pangu 就是來解決這個(gè)問題的,我們只需要在主題里面開啟這個(gè)選項(xiàng),在編譯生成頁面的時(shí)候,中英文之間就會自動添加空格,看起來更加美觀。
具體的修改如下:
pangu: truemath
可能在一些情況下我們需要寫一個(gè)公式,比如演示一個(gè)算法推導(dǎo)過程,MarkDown 是支持公式顯示的,Hexo 的 Next 主題同樣是支持的。
Next 主題提供了兩個(gè)渲染引擎,分別是 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: truemathjax 的使用需要我們額外安裝一個(gè)插件,叫做 hexo-renderer-kramed,另外也可以安裝 hexo-renderer-pandoc,命令如下:
npm un hexo-renderer-marked --savenpm i hexo-renderer-kramed --save另外還有其他的插件支持,大家可以到官方文檔查看。
pjax
可能大家聽說過 Ajax,沒聽說過 pjax,這個(gè)技術(shù)實(shí)際上就是利用 Ajax 技術(shù)實(shí)現(xiàn)了局部頁面刷新,既可以實(shí)現(xiàn) URL 的更換,又可以做到無刷新加載。
要開啟這個(gè)功能需要先將 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)在整個(gè)站點(diǎn)只有一篇文章,那么我們怎樣來增加其他的文章呢?
這個(gè)很簡單,只需要調(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 格式書寫即可。
這樣在下次編譯的時(shí)候就會自動識別標(biāo)題、時(shí)間、類別等等,另外還有其他的一些參數(shù)設(shè)置,可以參考文檔:https://hexo.io/zh-cn/docs/writing.html。
標(biāo)簽頁
現(xiàn)在我們的博客只有首頁、文章頁,如果我們想要增加標(biāo)簽頁,可以自行添加,這里 Hexo 也給我們提供了這個(gè)功能,在根目錄執(zhí)行命令如下:
hexo new page tags執(zhí)行這個(gè)命令之后會自動幫我們生成一個(gè) source/tags/index.md 文件,內(nèi)容就只有這樣子的:
---title: tagsdate: 2019-09-26 16:44:17---我們可以自行添加一個(gè) type 字段來指定頁面的類型:
type: tagscomments: false然后再在主題的 _config.yml 文件將這個(gè)頁面的鏈接添加到主菜單里面,修改 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),效果如下:
可以看到左側(cè)導(dǎo)航也出現(xiàn)了標(biāo)簽,點(diǎn)擊之后右側(cè)會顯示標(biāo)簽的列表。
分類頁
分類功能和標(biāo)簽類似,一個(gè)文章可以對應(yīng)某個(gè)分類,如果要增加分類頁面可以使用如下命令創(chuàng)建:
hexo new page categories然后同樣的,會生成一個(gè) source/categories/index.md 文件。
我們可以自行添加一個(gè) type 字段來指定頁面的類型:
type: categoriescomments: false然后再在主題的 _config.yml 文件將這個(gè)頁面的鏈接添加到主菜單里面,修改 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這樣頁面就會增加分類的支持,效果如下:
搜索頁
很多情況下我們需要搜索全站的內(nèi)容,所以一個(gè)搜索功能的支持也是很有必要的。
如果要添加搜索功能,需要先安裝一個(gè)插件,叫做 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 頁面
另外還需要添加一個(gè) 404 頁面,直接在根目錄 source 文件夾新建一個(gè) 404.md 文件即可,內(nèi)容可以仿照如下:
---title: 404 Not Founddate: 2019-09-22 10:41:27---對不起,您所訪問的頁面不存在或者已刪除。您可以<a href="https://blog.nightteam.cn>">點(diǎn)擊此處</a>返回首頁。center><blockquote class="blockquote-center"> NightTeamblockquote>這里面的一些相關(guān)信息和鏈接可以替換成自己的。
增加了這個(gè) 404 頁面之后就可以
完成了上面的配置基本就完成了大半了,其實(shí) Hexo 還有很多很多功能,這里就介紹不過來了,大家可以直接參考官方文檔:https://hexo.io/zh-cn/docs/ 查看更多的配置。
部署腳本
最后我這邊還增加了一個(gè)簡易版的部署腳本,其實(shí)就是重新 gererate 下文件,然后重新部署。在根目錄下新建一個(gè) deploy.sh 的腳本文件,內(nèi)容如下:
hexo cleanhexo generatehexo deploy這樣我們在部署發(fā)布的時(shí)候只需要執(zhí)行:
sh deploy.sh就可以完成博客的更新了,非常簡單。
自定義域名
將頁面修改之后可以用上面的腳本重新部署下博客,其內(nèi)容便會跟著更新。
另外我們也可以在 GitHub 的 Repository 里面設(shè)置域名,找到 Settings,拉到下面,可以看到有個(gè) GitHub Pages 的配置項(xiàng),如圖所示:
下面有個(gè) custom domain 的選項(xiàng),輸入你想自定義的域名地址,然后添加 CNAME 解析就好了。
另外下面還有一個(gè) Enforce HTTPS 的選項(xiàng),GitHub Pages 會在我們配置自定義域名之后自動幫我們配置 HTTPS 服務(wù)。剛配置完自定義域名的時(shí)候可能這個(gè)選項(xiàng)是不可用的,一段時(shí)間后等到其可以勾選了,直接勾選即可,這樣整個(gè)博客就會變成 HTTPS 協(xié)議的了。
另外有一個(gè)值得注意的地方,如果配置了自定義域名,在目前的情況下,每次部署的時(shí)候這個(gè)自定義域名的設(shè)置是會被自動清除的。所以為了避免這個(gè)情況,我們需要在項(xiàng)目目錄下面新建一個(gè) CNAME 文件,路徑為 source/CNAME,內(nèi)容就是自定義域名。
比如我就在 source 目錄下新建了一個(gè) CNAME 文件,內(nèi)容為:
blog.nightteam.cn這樣避免了每次部署的時(shí)候自定義域名被清除的情況了。
以上就是從零搭建一個(gè) Hexo 博客的流程,希望對大家有幫助。
References
[1]?https://realfavicongenerator.net:?https://realfavicongenerator.net/
文章作者:「夜幕團(tuán)隊(duì) NightTeam」 - 崔慶才
文章審閱:「夜幕團(tuán)隊(duì) NightTeam」 - Loco
夜幕團(tuán)隊(duì)成立于 2019 年,團(tuán)隊(duì)包括崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。
涉獵的編程語言包括但不限于 Python、Rust、C++、Go,領(lǐng)域涵蓋爬蟲、深度學(xué)習(xí)、服務(wù)研發(fā)、對象存儲等。團(tuán)隊(duì)非正亦非邪,只做認(rèn)為對的事情,請大家小心。
總結(jié)
以上是生活随笔為你收集整理的github项目怎么运行_利用 GitHub 从零开始搭建一个博客的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 时间感悟人生哲理句子 关于时间的唯美句子
- 下一篇: 文明礼仪宣传口号文案28句