摘要:
首先送上我的個人博客先睹為快
說說搭建個人博客的初衷,前段時間發現自己在博客網站上的文章配圖沒了,感覺很不可思議,就萌生了這樣的想法,但真正驅使我去行動起來的原因是,最近有一次我發表了一篇文章,結果還要審核,最后告訴我審核不通過,好吧,我換了一個博客發表,結果給我封號了,封號了,心情一時難以言表.於是憤而起身,決定親自搭建一個博客.
下面我們看正文.
一.前言
如果時間算是成本的話,那我的標題可能起錯了.
1.1.為什么要搭建博客
相比較CSDN博客園簡書而言,個人博客是自由的,你的博客風格,博客模板,內容都由你自己定,還可以自己起名.這是一件很酷的事情.
再想想那滿屏的廣告,和你精美的文章一對比,頓時就沒了興趣,不論是你自己還是讀者.
1.2.搭建博客難嗎?
我以前認為搭建博客需要進行域名申請,服務器購買,網站備案,所以操作了一次,而且打算自己寫個網站出來,后來我失敗了.
我前端啥都不懂,讓我寫網站?那個時候的我肯定是哪里出了問題,這么高大上的事情還是留給更有實力的人來做吧.
就這幾天我搭建博客的整個過程來看,其實搭建博客並不難,當然我還在摳官方文檔,這個就另說了.
按照我個人的教程來說,搭建一個個人博客花費的時間一個小時不到就可以了.當然你是嚴格按照教程來做的.
不過有一點得提醒一下蠢蠢欲動的你,如果你想把博客做的好看一點的話,會花費更多的精力,當然,最多再加一小時.
二.博客采用的技術
之前我就說過博客完全是依托於GitHub pages來搭建的,不要關閉,且認真看下去.
Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建托管服務，站點可以被免費托管在 Github 上，你可以選擇使用 Github Pages 默認提供的域名 github.io 或者自定義域名來發布站點。
2.1.博客采用的選型
靜態博客的選型主要有兩種:
①GitHub 上 結合 Jekyll 搭建的博客，Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文本格式的文檔，通過一個轉換器（如 Markdown）和我們的 Liquid 渲染器轉化成一個完整的可發布的靜態網站，你可以發布在任何你喜愛的服務器上。Jekyll 也可以運行在 GitHub Page 上，也就是說，你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網站，而且是完全免費的。
②本地渲染好 HTML 后，上傳到服務端，代表作品就是 hexo。
簡單說，第一種方式，就是我們在本地寫好 markdown 之后，直接上傳到服務端，服務端會自動渲染成 HTML，然后展示給用戶，第二種方案則是我們在本地寫好 markdown 之后，在本地將 markdown 渲染成 HTML，然后將渲染好的 HTML 上傳到服務端。（markdown 小伙伴們應該都了解吧，我就不做過多介紹了）
這里我選用的就是第二種方式,至於為啥選用第二種搭建博客的方式呢,主要原因有Jekyll技術文檔是英文的,並且采用翻譯全程不准確,而hexo竟然有中文文檔.(我能把我看不懂英文文檔的事情告訴你?)
其實主要原因是hexo輕便,訪問迅速,博客模板支持也很好,而Jekyll的幾個博客模板我都不是很喜歡.兩者各有優劣,因人而異.
2.2.所涉及的其他技術
①git的本地部署
②Node.js的安裝(安裝時不要忘記添加環境變量)
③閱讀中文的能力
注意git的安裝和Node的安裝網上都有教程,本身安裝也基本上都是下一步的操作.有出現問題的可以聯系我,這里就不多說了.
在cmd中,測試有版本號則安裝成功
三.開始搭建博客
3.1.安裝Hexo
cmd命令行輸入安裝命令:
npm install -g hexo-cli
安裝成功后,在Hexo安裝的本地新建一個文件夾,這個文件夾就是你的博客根目錄
我是直接在電腦E盤下面進行安裝的,所以我在E盤下新建一個文件夾lubians
3.2開始搭建網站
進入剛才新建的文件夾lubians,啟動命令行工具cmd
輸入下面的命令初始化當前文件夾
hexo init lubians
接下來再輸入以下命令安裝相關的依賴
npm install
安裝完成后這時你的文件夾目錄大概是下面這個樣子:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
我的文件夾圖樣
以上的文件和文件夾中,我們來重點關注兩個, _config.yml 文件和 themes 文件夾
_config.yml 文件中，我們可以做網站的一些基本配置，例如網站的 title，描述，關鍵字、圖標等，這些配置大都見名知意。如下：
# Site
title: 魯邊
subtitle: 昨天,今天,明天
description: 本站是魯邊的技術分享博客。
keywords: Hadoop,Hadoop生態圈,Java
author: lubians
email: ftongyu@qq.com
language: zh-Hans
timezone: Asia/Shanghai
配置完成后,在lubians文件夾下啟動cmd命令行工具,輸入:
hexo ghexo s
就已經啟動項目了
這里的hexo g 就類似於打包編譯的過程,生成靜態的HTML文件,hexo s 則是啟動服務的意思.
在瀏覽器中輸入http://localhost:4000 就可以看到網站了,博客效果:
說一下hexo里面的幾個命令
| 命令 | 簡寫 | 中文含義 |
|---|---|---|
| hexo server | hexo s | 本地啟動 |
| hexo generate | hexo g | 生成靜態文件 |
| hexo deploy | hexo d | 部署網站 |
| hexo clean | 清除緩存和已經生成的靜態文件 |
這四個是最常用的,其他相關命令可以參考Hexo文檔,基本上用不到.
四.自定義主題
到這里我們的博客搭建已經告一段落了,但是呢,有人就問了,我的博客界面怎么和剛才的頁面展示不一樣.這就涉及到自定義主題和上面我們說要關注的另一個文件目錄 themes 有關了.
4.1主題
Hexo生態是比較豐富的,有很多可供選擇的主題,上面展示的界面是默認的主題landscape,我使用的主題是shenyu的作用Ayer,GitHub地址:
https://github.com/Shen-Yu/hexo-theme-ayer.git
這里再提供兩個主題供大家參考
https://github.com/litten/hexo-theme-yilia.git
https://github.com/iissnan/hexo-theme-next.git
4.2配置
首先進入到themes目錄下,這個目錄里原本就有一個landscape文件夾,放的是默認的主題.
這里就需要在GitHub上克隆你喜歡的主題到themes目錄下,當然也可以直接將主題文件下載后拷貝進來.直接在后台回復 [Ayer] 獲取主題文件.
以我使用的主題為例,在themes下啟動cmd命令行,輸入clone命令:
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git
克隆成功后,修改lubians的 _config.yml文件,將主題修改為 Ayer(注意冒號后有空格),如下:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Ayer
注意這里有兩個_config.yml文件,一個是最外層文件夾下的_config.yml,還有一個是主題文件里的_config.yml.
其中外層_config.yml文件里是我們對整個博客的配置,主題文件里的_config.yml是對主題的一些相關配置,要區分開.
4.3打包啟動
主題創建好之后，接下來就是對主題的配置了，這個比較容易，直接參考官方文檔即可。
配置完成后，執行如下命令，即可看到新的主題效果：
在lubians文件夾下啟動cmd命令行輸入:
hexo clean
hexo g
hexo s
五.發布到GitHub上
最后一步
5.1創建GitHub倉庫
以 自己的GitHub ID.github.io 為名創建一個 public 倉庫，例如我的 ID 為 lubians，創建的倉庫如下：
這里一定注意倉庫名字前綴是需要和Owner一致,我的Owner是lubians,那么我的倉庫名為lubians.github.io .新建成功后,修改lubians文件夾下的_config.yml 文件,配置剛才創建的GitHub倉庫地址,如下,將deploy修改為：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:lubians/lubians.github.io.git
branch: master
5.2發布
接下來使用Git bash來進行命令的執行,在lubians文件夾中右鍵,點擊Git bash選項進入Git命令行,執行命令:
npm install hexo-deployer-git --save
最后在同文件夾下使用cmd命令行輸入命令來發布:
hexo clean
hexo g
hexo d
執行完成后,你的數據就已經上傳到Github了,接下來直接訪問
就可以看到自己的個人站點了,記住把鏈接里的lubians換成你自己的github設置的倉庫名.
以上就完成了整個個人博客的搭建.
六.搭建個人博客遇到的問題
還沒完呢,可以先搭建,之后遇到問題,再來這里看看有沒有同樣的問題
6.1.沒有git環境和Node.js環境
我因為新入手的一台筆記本,沒有相關環境,整個過程需要重新配置,記住一點,安裝以上兩個環境的時候都可以按照官方文檔來,但是一定安裝完成后配置環境變量,如果環境變量不會配,那我就沒辦法了,百度吧
6.2頁面太簡陋,不好看
我是個追求 審美的人,哈哈,再摳了一整天的Hexo的中文文檔后,搭建了個人博客,發現賊丑,然后就在網上各種尋找模板,最后使用Ayer主題,主題的使用方式上面已經說過了.
更多主題配置請參閱
6.3.模板引入搜索功能
這里需要使用命令下載安裝一個搜索插件,在lubians文件夾中啟用cmd命令行,輸入:
npm install hexo-generator-search
然后在_config.yml配置文件中配置:
search:
path: search.xml
field: post
format: html
還有一個網站用戶訂閱功能,提高自己的博客影響力嘛,同樣,下載安裝
npm install hexo-generator-feed
_config.yml中配置
feed:
type: atom
path: atom.xml
limit: 100
6.4引入博客的評論功能
我的評論使用的是：Valine,Valine是一款快速、簡潔且高效的無后端評論系統.
注意啟用Valine必須先創建leancloud應用.
按步驟操作即可,獲取 id 和 key.
填入Ayer主題中的_config.yml配置文件(注意是另一個配置文件)中,位置如下:
# 1、Valine[一款快速、簡潔且高效的無后端評論系統](https://github.com/xCss/Valine)
# 啟用Valine必須先創建leancloud應用， 獲取 id|key 填入即可
leancloud:
enable: true
app_id: ''
app_key: ''
6.5圖片鏈接問題
這個是最坑的,因為發表文章都是用Markdown來寫的,圖片是以鏈接的形式引入的,我主要使用Typora筆記來寫,這樣圖片就不知道存到哪里了,微信公眾號發表文章的圖片無法引入,簡書,博客園都不行,所以需要使用圖床工具.
綜合下來,我使用的圖床工具是
單次上傳文件不超過10個,每個不大於5MB,有5G的免費使用空間,操作便捷,建議使用.
七.廢話
以上博客搭建流程就徹底完結了,還是之前的那句話,歡迎大家訂閱和友鏈.
突然想起李宗盛的一首歌里的一句歌詞,想說卻還沒說的還很多.
這會卻不知道從何說起了,我的個人博客里還比較空,這段時間我會逐漸把握在其他平台發表的博客和自己以前整理的筆記逐漸全部放到上面去.
給各位小伙伴說句話吧,希望你能在我這里學到點什么,而我也能因為你的回饋,讓我學到更多.
有問題的話,歡迎在個人公眾號下方點擊 [聯系我] ,會有我的個人微信二維碼,掃碼加我微信,我們共同交流,共同進步.
公眾號后台回復 [博客源碼] ,獲取我的個人博客源碼,進行參照搭建.
我是魯邊,2020 peace and love.
按例，我的個人公眾號：魯邊社，歡迎關注
