hexo 环境变量_小白使用 Github + Hexo 从 0 搭建一个博客
最近有幾位同學在公眾號后臺留言問我的博客站是怎么建站的,思來想去,還是寫一篇從 0 開始吧。
前置準備
我們先聊一下前置準備,可能很多同學一聽說要自己搭一個博客系統,直接就望而卻步。不得有臺服務器么,不得搞個數據庫么,不需要域名備案么?當然,這些確實是建立一個博客站點需要的東西,如果都沒有,問題倒是也不大。
首先,Github 為我們做出了巨大的貢獻,直接幫我們解決服務器和域名問題,當然,在國內訪問 Github 可能會有些慢,但是國內有 Gitee 啊,完全不遜色 Github 的好不好。
博客站的建立,這時我們需要用到 Hexo ,這個博客框架沒有那么的重量級,它是使用 Markdown 直接來寫文章,然后可以將文章編譯成靜態頁面,編譯完成后,我們只需要將編譯好的頁面放在 Github 或者 Gitee 上,就可以直接被訪問到。這樣,我們就省去了一臺數據庫和服務器,文章的內容、標題、標簽等信息就無需放在數據庫中了,可以直接在靜態頁面上訪問到。
那么,接下來,需要的就是一個 Github 或者 Gitee 的賬號了,這個我就不多講,大家自行準備吧。
環境安裝
Node.js
Hexo 的編譯環境是使用 Node.js 的,需要在自己的電腦上安裝 Node.js ,下載地址我直接貼出來:頭條外鏈發不出來,大家可以訪問原文看我個人博客站。各位直接選擇自己對應系統的 Stable 版本安裝就好。
windows 環境下載后一路 next 即可,無需額外選擇什么。安裝完成后環境變量如未自動配置,還需配置下環境變量,配置完成后可以使用如下命令驗證是否安裝成功:
博主安裝的時間比較早,版本比較老了,各位領會精神。
Hexo
接下來我們安裝 Hexo ,這是一個博客框架,Hexo 官方還提供了一個命令行工具,用于快速創建項目、頁面、編譯、部署 Hexo 博客,所以在這之前我們需要先安裝 Hexo 的命令行工具。
安裝完成之后,可以使用如下命令驗證安裝是否成功:
博主這邊的輸出如下:
創建項目
接下來到了重頭戲的時間,開始創建一個博客項目。
接下來,我們使用 Hexo 在本地創建一個項目,并在本地將這個項目整體跑通看看。
在一個自己喜歡的目錄下創建項目,使用以下命令:
這里的 是項目名稱,使用自己喜歡的名稱,我這里使用 firstblog 。
靜靜等待進度條走完,這樣我們在 firstblog 這個文件夾中就有了 Hexo 初始化的相關文件。如圖:
進入這個文件夾中,安裝相關 node 依賴:
接下來,我們可以使用 generate 命令將剛剛生成的文件編譯成靜態 HTML 代碼了。
可以看到輸出結果里面包含了 js、css、font 等內容,并發現他們都處在了項目根目錄下的 public 文件夾下面了。
然后我們使用 Hexo 提供的 server 命令,讓博客在本地運行起來,如下:
服務默認會在 4000 端口,直接在瀏覽器中訪問, 我們看下結果:
到這里,整個博客的架子就好了,我們只使用了 3 個命令。
部署
接下來,我們要將這個建好的博客部署到 Github Page 上驗證一下可用。成功之后我們再進行一些其他的騷操作,比如更換主題,修改配置等等。
這里需要我們先在 Github 上創建一個倉庫。
這里有一點需要注意,GitHub Pages 允許每個賬戶創建一個名為 {username}.github.io 的倉庫,另外它還會自動為這個倉庫分配一個 github.io 的二級域名。各位同學創建命名規則可以跟參照博主的命名方式。
倉庫創建完成后,接下來可以開始進行部署了, Hexo 的部署命令:
在部署前需要先安裝一個插件:
然后我們還需要配置一下本地項目的配置文件 _config.yml ,這個文件在本地項目目錄的跟目錄下,打開修改最下面的部署的部分:
# Deploymentdeploy: type: git repo: {git repo ssh address} branch: master博主這邊修改結果如下:
# Deploymentdeploy: type: git repo: git@github.com:meteor1993/meteor1993.github.io.git branch: master然后執行 hexo deploy 命令,看到以下差不多的內容說明部署成功:
這時,我們就可以訪問一下我們 Github Page 為我們分配的域名了,比如我的倉庫名稱為 meteor1993.github.io ,那我這里就要訪問,頭條外鏈發不出來,大家可以訪問原文看我個人博客站。
這時我們可以去 Github 倉庫看下具體上傳了什么內容:
可以看到,這里就是將我們 public 目錄下的所有文件上傳了,Hexo 把編譯之后的靜態頁面內容上傳到 GitHub 的 master 分支上面去了。
站點配置
我們上面僅僅只是將初始化的頁面部署成功了,博客里還有一些站點的信息尚未配置,這些站點信息是為了讓搜索引擎知道我們的站點是做什么的。
同樣是需要配置項目根目錄的 _config.yml 文件,打開這個文件,找到 site 相關的配置信息。
小編這里的工程僅是做演示使用,并無什么其他的作用,就隨便寫寫了,各位同學可以根據自己的需要做配置:
小編這里主要將語言設置成了中文,我們看下修改后的博客長什么樣:
可以看到其中的時間日期格式變成了中文。這樣我們就完成了博客的站點配置。
修改主題
目前默認的樣式風格并不是那么好看,如果想要換一下的話,就涉及到了主題的修改。目前 Hexo 使用最多的一定是 Next 主題。當然,小編的站點并不是使用的 Next 的主題。
接下來,我們來看下如何在 Hexo 中使用 Next 主題。
首先我們需要將 Next 從 Github 上克隆下來,命令如下:
我們直接將這個主題克隆至項目的 themes 目錄下。
克隆完成后, Next 的源碼就會出現在 themes 目錄下。我們需要修改根目錄下的 _config.yml 文件中的主題配置,這樣我們就可以使用剛才我們克隆好的 Next 主題了:
# Extensionstheme: landscape修改為:
重啟本地服務,我們看下效果:
主題配置
Next 主題同樣為我們提供了豐富的配置,供我們自定義自己的博客站點使用。
在目錄 themesext 中,找到 _config.yml 文件并打開。
Next 同樣為我們準備了幾種樣式可供選擇:
這些樣式同樣都是黑白配色,僅布局風格不同,各位同學可以選擇自己喜歡的布局風格。
關于 Next 的更多配置小編這里就不一一列舉了,屬實有些多,這里提供 Next 主題的官方文檔,是中文版的,有需要修改的同學可自行參考。官方文檔,頭條外鏈發不出來,大家可以訪問原文看我個人博客站。
添加文章
添加文章 Hexo 也為我們提供了相關的命令,比如我們要添加一個名為 test 的文章,如下:
我們可以看到,在 source_posts 的目錄下,創建了一個 test.md 的 Markdown 的文檔。打開看下里面的內容:
這些內容僅是自動創建的,我們還可以添加其他的內容進去,可以給各位同學看下我平時的文章頭:
開頭下方撰寫正文,MarkDown 格式書寫即可。
這樣在下次編譯的時候就會自動識別標題、時間、類別等等,另外還有其他的一些參數設置,可以參考官方文檔,頭條外鏈發不出來,大家可以訪問原文看我個人博客站。
另外在創建新的文章的時候也不是一定要通過命令創建,也可以自己在對應的目錄下新建一個 .md 的文檔,Hexo 在編譯的時候也是同樣會識別的。
本篇文章在這里就分享結束了,各位感興趣的同學可以自己動手嘗試一下。
題外話
小編自己的個人站點為了保持訪問速度和穩定性,部署在騰訊云上并使用了 CDN 加速,并且映射了自己申請的域名,其中比較困難的點是域名的備案和騰訊云是需要產生一定的費用的,如果只是自己使用無需考慮穩定性和訪問速度的話,國內可以部署在 Gitee ,經測試是要比 Github 快很多。
總結
以上是生活随笔為你收集整理的hexo 环境变量_小白使用 Github + Hexo 从 0 搭建一个博客的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 360恶斗腾讯?
- 下一篇: 如何将文件快速拷入自己的谷歌云盘