0成本搭建我的技術博客和我的網站

時間 2020-05-20

原文原文鏈接

摘要:html

首先送上個人我的博客先睹爲快前端

說說搭建我的博客的初衷,前段時間發現本身在博客網站上的文章配圖沒了,感受很難以想象,就萌生了這樣的想法,但真正驅使我去行動起來的緣由是,最近有一次我發表了一篇文章,結果還要審覈,最後告訴我審覈不經過,好吧,我換了一個博客發表,結果給我封號了,封號了,心情一時難以言表.因而憤而起身,決定親自搭建一個博客.github

npm

下面咱們看正文.json

一.前言後端

若是時間算是成本的話,那個人標題可能起錯了.瀏覽器

1.1.爲何要搭建博客緩存

相比較CSDN博客園簡書而言,我的博客是自由的,你的博客風格,博客模板,內容都由你本身定,還能夠本身起名.這是一件很酷的事情.bash

再想一想那滿屏的廣告,和你精美的文章一對比,頓時就沒了興趣,不管是你本身仍是讀者.

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

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主題,主題的使用方式上面已經說過了.

更多主題配置請參閱

Hexo官方主題文檔

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應用.

leancloud地址

按步驟操做便可,獲取 id 和 key.

填入Ayer主題中的_config.yml配置文件(注意是另外一個配置文件)中,位置以下:

# 一、Valine[一款快速、簡潔且高效的無後端評論系統](https://github.com/xCss/Valine)
# 啓用Valine必須先建立leancloud應用， 獲取 id|key 填入便可
leancloud:  
  enable: true
  app_id: ''
  app_key: ''

6.5圖片連接問題

這個是最坑的,由於發表文章都是用Markdown來寫的,圖片是以連接的形式引入的,我主要使用Typora筆記來寫,這樣圖片就不知道存到哪裏了,微信公衆號發表文章的圖片沒法引入,簡書,博客園都不行,因此須要使用圖牀工具.

綜合下來,我使用的圖牀工具是

SM.MS

單次上傳文件不超過10個,每一個不大於5MB,有5G的無償使用空間,操做便捷,建議使用.

七.廢話

以上博客搭建流程就完全完結了,仍是以前的那句話,歡迎你們訂閱和友鏈.

忽然想起李宗盛的一首歌裏的一句歌詞,想說卻還沒說的還不少.

這會殊不知道從何提及了,個人我的博客裏還比較空,這段時間我會逐漸把握在其餘平臺發表的博客和本身之前整理的筆記逐漸所有放到上面去.

給各位小夥伴說句話吧,但願你能在我這裏學到點什麼,而我也能由於你的回饋,讓我學到更多.

有問題的話,歡迎在我的公衆號下方點擊 [聯繫我] ,會有個人我的微信二維碼,掃碼加我微信,咱們共同交流,共同進步.

公衆號後臺回覆 [博客源碼] ,獲取個人我的博客源碼,進行參照搭建.