日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

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

编程问答

hexo 环境变量_小白使用 Github + Hexo 从 0 搭建一个博客

發布時間:2023/12/10 编程问答 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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 搭建一个博客的全部內容,希望文章能夠幫你解決所遇到的問題。

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