簡單優雅的搭建個人博客

前言

啊啊啊~~~ ,經過差不多兩天的持續摸索優化，個人博客算是初步完成了，現在自己看的效果還是非常不錯的。這篇文章就是講我怎麼搭建一個這樣的博客的。早在17年的時候就用hexo 結合github搭建過個人博客，但是那時候還太年輕，也沒有維護，後面就廢掉了。18年的時候又一時興起搭建了一個。比17年的時候好看些，但是沒有什麼訪問量，可能沒有做seo 優化，也沒有維護多長時間就放著了，前幾天上去看，界面顯示都還正常，就是內容太幼稚了。所以時隔一年，我胡漢三又回來了。痛下決心，把整體的博客都搭建好了，包含界面渲染，RSS,評論系統，站內搜索，seo 優化等等。現在讓我們開始吧。博客傳送門：coding:http://quellanan.coding.me/

github:https://quellanan.github.io/

最終效果

我們先來看看效果吧，這樣對你們可能更有吸引力，更有動力搭建一個屬於自己的bolg 啦。

主頁面是這樣的，包含首頁、標籤、分類、歸檔、關於、互動、搜索、還有右側的主頁。最喜歡標籤這一頁，可以看出整個網站對哪一類的文章寫的比較多。

還可以通過標籤找到對應的文章。還有就就是頁腳的網站統計，頁面訪問人數和訪問量的統計。已經整個站點博文的字數。這些相信都是自建博主們最關心的。我也是最關心這部分哈哈，畢竟訪問量和人數上去了就有持續更新的動力啦。

打賞功能，已經版權申明，還有側邊的文章目錄也是超讚的。

評論功能，這個評論也是很給力的吧，增加了博主和讀者之間的交流。和評論類似還有一個，就是網站右下角那個類似微信圖標的那個，那個也是可以直接和博主溝通的喲，不賴吧。這些只是網站的一部分功能，其他的就不說了，開始動手吧

環境準備

1. 安裝git：
2. https://git-scm.com/book/zh/v2/起步-安裝-Git
3. 安裝git 之後又配置用戶名和郵箱，和github 一致

#全局配置用戶名
git config --global user.name "nameVal"
#全局配置郵箱
git config --global user.email "[email protected]"

1. 安裝node.js：https://nodejs.org/en/
2. 這兩個不管你linux 還是windows 都非常好安裝，網上關鍵字搜索一下，有官方教程。
3. 註冊github登錄賬號：https://github.com/
4. 創建好和用戶名一樣的項目

1. 
   
2. 註冊coding登錄賬號：https://coding.net/login
3. 也是一樣的，創建一個和名稱相同的項目。這裡說一下為什麼要用coding，其實不用也可以，coding 和github 的作用一樣的，都是作為pages 以及使用他們的域名。不同的是github 是國外的，而coding 是國內的。github搭建的博客不容易被百度檢索到，而coding 可以。大家可以根據個人喜好選擇吧。這裡我是兩個都用了，反正就多一條配置。

配置秘鑰

$ cd ~
$ ssh-keygen -t rsa -C "[email protected]"

將生成的秘鑰配置到github 和coding 上就好了

安裝hexo

安裝好git 和node 之後，安裝hexo 就很方便

npm install hexo-cli -g

隨後我們創建一個blog 文件夾，用來存放我們的blog.

cd blog
hexo init
npm install

這樣基本的框架就已經搭建好了，可以啟動看下效果

hexo clean //清緩存
hexo g //編譯
hexo s //本地運行
hexo d // 上傳到github 或者coding 

主題選擇

在搭建好框架之後，現在當然是找一個自己喜歡的主題啦，我個人比較喜歡next ,然後就在網上找了一個next 主題，功能配置基本都有了，我就是參照這個大佬的配置過來的。

配置：https://github.com/ipyker/hexo-next-theme

將這位大佬的主題下載下來後，放到我們自己的主題中去就好了。常見的修改按照這位大佬提示的修改就可以。

保存源碼

好了，主題和框架都有了，那接下來其實寫博客發佈就好了，其實前面的我前兩年走到這裡了，所以前面沒有很細的講。但是有一些基礎的人應該都可以做到，如果不行，可以通過我提到的關鍵字搜索也可以在網上找到詳細的教程。為什麼這次又要重新搭建，因為之前沒有保存源碼，導致github 上只存了pages 的代碼。沒有保存源碼，所以如果源碼丟了就得重新搭建了。所以這次學聰明瞭知道保存源碼，不管是換電腦還是什麼的，做號備份就不怕了。我這裡講源碼保存在github 上，我們在github項目項目上創建一個分支 save，用來保存源碼。master 分支用來pages頁面展示。

將創建的save 分支設置為默認分支。

然後在本地clone 項目。進入項目

git add .
git commit -m "your description"
git push origin save

我們 _config.yml 配置是提交到 master 分支

 deploy:
 type: git
 repository: 
 github: [email protected]:QuellanAn/QuellanAn.github.io.git
 coding: [email protected]:quellanan/QuellanAn.git
 branch: master

現在開始，之後的操作就簡單了。想要編譯發佈就

 hexo clean 
 hexo g
 hexo d

保存到github就

git pull 
git add .
git status
git commint -m "description"
git push origin save

我博文的源碼地址：https://github.com/QuellanAn/QuellanAn.github.io

這些都是我已經配置好了，你們可以直接clone下來，進入 blog 文件夾然後進行運行修改就可以了。所以我前面都講的比較簡單。

SEO

現在我們博客已經建好了，我們要新增博客的話在source / _posts 目錄下增加就好了。

但是我們現在面臨的一個問題是，我們的博客沒有訪問量怎麼辦，不能通過谷歌搜索和百度搜索搜索到，而是需要直接通過輸入準確的網址進行訪問，這樣肯定是不利於我們增加博客瀏覽量的。所以我們需要將我們的網址添加到百度和谷歌搜索中。

谷歌：https://search.google.com/search-console

將下載的html 放到public 文件夾下。

然後

hexo g
hexo d

發佈到我們的網站上。然後進行驗證就可以驗證通過。

這個驗證之後，我們再提交站點地圖。站點地圖我都配置好了，如果你們用我的模版的話，直接在網站站點地圖提交就好了

這樣過段時間谷歌就能搜索到你的博客啦。

百度提交站點：https://ziyuan.baidu.com/site/index

添加網站，驗證方法和google 是一樣的，都用html 文件驗證就好了驗證完成之後，點擊Robots,檢測並更新。

我的模版裡面已經配置好了。可以直接檢測到。

雖然我做了這些，但是好像百度還沒有搜錄，還得再等兩天再看看。

番外

好了，到此為止，個人博客搭建就到這這裡了，大家如果也想要搭建一個自己的博客，可以把文中說的準備工作做好，然後自己下載我的源碼來用，把信息修改成自己的就好了。有什麼不懂了可以及時加我微信溝通。因為我模版裡，我的博文原稿都在裡面，所以各位用的時候記得刪掉，或者記得標記為轉載謝謝❤

可能講的內容不夠詳細，沒有細節沒有講到，對小白不太友好，但是考慮到其實網上有很多詳細的教程，我這裡就把我認為重要的講了出來，希望對大家有幫助。

後續加油♡

歡迎大家關注個人公眾號 "程序員愛酸奶"

分享各種學習資料，包含java，linux，大數據等。資料包含視頻文檔以及源碼，同時分享本人及投遞的優質技術博文。

如果大家喜歡記得關注和分享喲❤