天天看點

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

部落格:其實部落格的正式名稱是網絡日記,見名知意,是使用特定軟體在網絡上出版發表和張貼個人文章的人,或者是一種由個人管理不定期更新文章的網站。

現在是網際網路逐漸發展,已經出現了很多可以供自己寫部落格的網站,大家可以在上面 發表自己的文章,供自己記錄或者是供他人閱讀。但是,可不可以自己搭建一個隻屬于自己的個人部落格網站呢?這篇文章就帶你從0開始搭建一個自己的個人部落格網站,并部署到屬于自己伺服器。這裡有一點要說的是,沒有伺服器的同學使用自己機器的linux系統也是一樣的操作。我們選用一個很好用的部落格架構Hexo進行搭建我們的個人部落格。

部落格架構Hexo介紹:

Hexo是一個快速,簡介而且高效的部落格架構,Hexo 使用Markdown(或其他渲染引擎)解析文章,在幾秒内,即可生成一個靜态網頁展示我們釋出的文章,同時也提供了大量精美的部落客題供我們使用。

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

Hexo部落格架構的優點

速度極快:Node.js 所帶來的超快生成速度,讓上百個頁面在幾秒内瞬間完成渲染。

支援MarkDown:Hexo 支援 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多數插件。

一鍵部署:隻需一條指令即可部署到 GitHub Pages, Heroku 或其他平台。

插件和可擴充性:這個也是hexo很強大的一個地方,強大的 API 帶來無限的可能,與數種模闆引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)輕易內建

Hexo部落格架構搭建:

我們使用Centos7系統作為示範,使用其他linux系統也是可以的,隻需要更換為對應Linux版本的軟體安裝指令即可。

1.安裝Git

直接使用yum安裝即可,在指令行輸入 yum -y install git

完成之後輸入git version 檢視是否安裝成功,如果顯示git版本資訊即為成功,如下:

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

目錄檔案說明:

_config.yml:網站的配置資訊,您可以在此配置大部分的參數。

package.json:應用程式的資訊。EJS, Stylus 和 Markdown renderer 已預設安裝,您可以自由移除。

scaffolds:模版檔案夾。當您建立文章時Hexo 會根據 scaffold 來建立檔案Hexo的模闆是指在建立的文章檔案中預設填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那麼每次建立一篇文章時都會包含這個修改。

source:資源檔案夾是存放使用者資源的地方。除 _posts 檔案夾之外,開頭命名為 _ (下劃線)的檔案 / 檔案夾和隐藏的檔案将會被忽略。Markdown 和 HTML 檔案會被解析并放到 public 檔案夾,而其他檔案會被拷貝過去。

themes:主題 檔案夾。Hexo 會根據主題來生成靜态頁面。

檢視hexo的版本以及對應的資料:

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

這裡我建立了一篇标題為First_Blog的部落格,建立之後hexo目錄下面的source/_post檔案夾下會産生一個First_Blog.md的檔案

4.2:編輯文章

進入到上面說的那個目錄下可以看到我們建立的部落格檔案:

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

title:标題

tage:标簽

categories:分類

date:時間

這些标注大家在-----區域可以進行使用

4.3:釋出文章

輸入如下指令,生成靜态網頁,靜态網頁會存放在public檔案下

hexo  g

hexo s

1

2

之後就可以去浏覽器通路了!可以看到我們釋出的文章已經成功在浏覽器顯示,到這裡個人部落格網站就已經成功搭建了。

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

5.主題的選擇:

主題網站:

https://hexo.io/themes/

hexo提供了大量精美的主題供我們選擇,選擇喜歡的主題,在hexo目錄下的themes檔案夾下使用git clone下載下傳主題,之後再配置檔案_config.yml把theme後面修改成下載下傳的主題的名字,之後運作hexo clean ,hexo g即可看到生效的主題。

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

将Hexo部署上線到伺服器:

如果是有伺服器的小夥伴,也可以将Hexo部署到伺服器供全網通路,伺服器的購買這裡就不多說,阿裡雲跟騰訊雲上面對于學生也有較為優惠的價格。部署到伺服器的話,就需要将上面的全部操作,在你的伺服器系統上面執行,之後我們使用Nginx(反向代理伺服器)進行部署。

Nginx安裝:

Nginx是一款高性能的 HTTP 和反向代理伺服器,這裡我們采用編譯安裝的方式,按照下面的指引依次執行指令

從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!
從零開始部署到上線:手把手教你搭建屬于自己的個人部落格網站!

之後再重新開機nginx服務,開啟hexo服務,這個時候使用公網的ip就可以通路到我們的hexo服務了!