打造屬於自己的博客系統

前言

以前寫博客時用的是CSDN、 博客園、新浪博客之類的博客系統,這類博客系統好處就是什麼都弄好了,自己只需要寫文章即可,但是一類大缺點就是廣告太多,打開一篇文章,基本滿屏都是廣告,讓人看下去的願望都沒有,所以一直打算先搞個自己的博客系統,專門記錄一下學習過程。

我的博客鏈接:https://crazyandcoder.work/

在這裏插入圖片描述

正文

關於hexo的簡介請看官網介紹《詳細介紹

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用
Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。

而我們要做的就是現在本地寫好文章,然後解析成HTML文件,最後再部署到github上面顯示出來,總的來說,過程還是蠻簡單的,而且步驟也簡單,只需要幾條命令即可,下面我們來具體實現。

搭建過程

配置

首先需要下載一些配置軟件:

  1. hexo,生成本地的文章
  2. node.js ,用來生成靜態頁面的
  3. git ,把本地的hexo內容提交到github上去.
  4. 申請github賬號 ,部署到博客
  5. 申請 阿里雲 域名,綁定github.io

注意: 這裏面申請的github賬號的名稱就是以後你博客的域名,所以一定要起一個有個性的名字。

安裝node.js和git沒有啥好說,直接下載軟件安裝即可,傻瓜式安裝。

下面來說一下安裝hexo,需要用到以下的命令:

npm install -g hexo-cli

正常情況下,輸入以上命令即可安裝成功,測試一下,輸入命令,顯示版本號即表明安裝成功,如果中間過程中出現任何問題,請自行百度解決

C:\Windows\System32>hexo -v
顯示內容:
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
hexo-cli: 1.0.1
os: Windows_NT 6.1.7601 win32 ia32
http_parser: 1.0
node: 0.10.29
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.27
zlib: 1.2.3
modules: 11
openssl: 1.0.1h

運行博客系統

以上軟件安裝好,我們就已經生成了一個博客系統,只不過這是最基礎也是最簡潔的博客系統,我們來測試一下。

在本地磁盤新建一個目錄,這以後就是我們寫博客的地方啦譬如我在E盤新建一個hexo目錄,同時進入到該目錄下

C:\Windows\System32>cd E:\hexo

進行初始化一下:

C:\Windows\System32>hexo init
顯示內容:
E:\hexo>hexo init
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\liji\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
INFO  Cloning hexo-starter to E:\hexo
Cloning into 'E:\hexo'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git
) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 724, done.
Rremote: Total 724 (delta 0), reused 0 (delta 0), pack-reused 724eceiving object
Receiving objects: 100% (724/724), 2.51
Resolving deltas: 100% (381/381), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e
22468d38'

這樣就生成了一個默認的博客系統。
我們來查看一下默認的博客系統是什麼樣子,
輸入以下命令:

E:\hexo>hexo generate
等待幾秒結束後,輸入
E:\hexo>hexo s
成功後會顯示:
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我們在瀏覽器上面輸入以上地址 http://localhost:4000/: 我們就會打開一個本地的HTML頁面,這就是我們的博客原型,

不過這只能在本地訪問,別人還是不能訪問到,要想別人也能看到的話,接下來我們就要發佈到github上面去。

發佈到GitHub

那麼問題來了,我們該如何發佈到github上面呢?

1、首先我們,需要在github上面新建一個賬號,點擊進入github官網註冊一個賬號,這個賬號就對應我們的博客訪問地址,譬如,我註冊的賬號就是crazyandcoder,那麼我的博客訪問地址就是http://crazyandcoder.github.io/

2、新建一個repository,輸入名字。
在這裏插入圖片描述

3、配置我們的hexo init生成的配置文件

在這裏插入圖片描述
4、在最後面添加我們剛剛新建的repository,裏面的test就是我們剛剛創建的repository
在這裏插入圖片描述
5、最後發佈

hexo deploy

測試,在瀏覽器中輸入博客地址 http://賬戶名.github.io/ 就可以進行測試了,別人也可以訪問了。

總結:

以後我們進行寫文章到發佈到我們的博客系統上去總共要經歷一下幾個步驟:

  1. hexo new ”postName” #新建文章
  2. hexo new page ”pageName” #新建頁面
  3. hexo generate #生成靜態頁面至public目錄
  4. hexo server #開啓預覽訪問端口(默認端口4000,’ctrl + c’關閉server)
  5. hexo deploy #將.deploy目錄部署到GitHub

其中第一步在本地創建文章,會在本地博客目錄下生成文章。
在這裏插入圖片描述
然後我們就可以打開文件,在裏面寫文章。

寫好文章後,我們需要將其生成HTML文件,如何生成,這就需要使用第三步的命令:

hexo generate

生成文章後,我們首先可以在本地預覽一下,如果沒有什麼問題的話可以發佈到github上面。使用以下命令:

hexo depoly

等待幾秒即可發佈完成

博客主題選取

以上就是用hexo + github搭建自己的博客系統的內容。最後附上一些常用的hexo主題,供大家自己選擇:傳送門+hexo主題

綁定域名

我自己用的域名是阿里雲域名,很便宜,一年不到10塊錢,很划算,接下來我們需要將上面http://賬戶名.github.io/ 綁定自己申請的域名上面,這樣我們就可以直接訪問域名就可以查看博客了。

購買域名

域名的話,我推薦阿里雲,畢竟大公司,靠譜。我們購買域名的時候,首先需要查詢一下,這個域名有沒有被別人註冊過。域名查詢,到這個網址上面查詢一下,如果沒有被註冊過,即表明你可以申請使用的。譬如,我們搜索jackboyblog.tech這個博客域名,沒有被註冊,你就可以購買,資金充足可以購買頂級域名,不然的可以選擇一些普通的,譬如tech.work等。我自己的就是work,很便宜,才幾塊錢一年。
在這裏插入圖片描述

域名解析

(1)在你的github博客倉庫下創建一個名字爲 CNAME的文件,在其中填寫你的域名地址 ,注意 :不要包含Http://和www

在這裏插入圖片描述

注意: 不要包含Http://和www
在這裏插入圖片描述
(2)進入你的博客github倉庫 ,點擊settings,查看Custom domian這一項是否已經填寫好並保存

在這裏插入圖片描述

(3)解析你的域名,你可以在終端中ping一下你的 github博客的地址,得到ip
在這裏插入圖片描述

(4)進入域名解析控制檯,點擊解析,點擊 添加紀錄 ,記錄類型選擇A,主機記錄填:www 記錄值填你的IP TTL默認就好了(調大TTL值可以提高域名的解析穩定性和速度,如果近期要更改IP的話建議調小點)

再點擊 添加記錄 記錄類型選擇A,主機記錄填:@ 記錄值填你的IP TTL默認就好了;

在這裏插入圖片描述

經過以上步驟,我們過個10分鐘左右即可訪問自己的域名博客了。我的是:https://crazyandcoder.work/

在這裏插入圖片描述

以上便是搭建自己博客系統所有的步驟,記錄總結一下,有需要的朋友可以參考一下。

關於作者

專注於 Android 開發多年,喜歡寫 blog 記錄總結學習經驗,blog 同步更新於本人的公衆號,歡迎大家關注,一起交流學習~

在這裏插入圖片描述

發佈了154 篇原創文章 · 獲贊 48 · 訪問量 21萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章