在github上優雅的搭建我的博客

前言

啊啊啊～～～,通過差很少兩天的持續摸索優化，我的博客算是初步完成了，如今本身看的效果仍是很是不錯的。這篇文章就是講我怎麼搭建一個這樣的博客的。早在17年的時候就用hexo 結合github搭建過我的博客，可是那時候還太年輕，也沒有維護，後面就廢掉了。18年的時候又一時興起搭建了一個。比17年的時候好看些，可是沒有什麼訪問量，可能沒有作seo 優化，也沒有維護多長時間就放着了，前幾天上去看，界面顯示都還正常，就是內容太幼稚了。因此時隔一年，我胡漢三又回來了。痛下決心，把總體的博客都搭建好了，包含界面渲染，RSS,評論系統，站內搜索，seo 優化等等。如今讓咱們開始吧。

 

博客傳送門：
coding:http://quellanan.coding.me/

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

最終效果

咱們先來看看效果吧，這樣對大家可能更有吸引力，更有動力搭建一個屬於本身的bolg 啦。

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

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

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

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

環境準備

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

#全局配置用戶名
git config --global user.name "nameVal"
#全局配置郵箱
git config --global user.email "eamil@qq.com"

1. 安裝node.js：https://nodejs.org/en/
   這兩個無論你linux 仍是windows 都很是好安裝，網上關鍵字搜索一下，有官方教程。

2. 註冊github登陸帳號：https://github.com/
   建立好和用戶名同樣的項目
   

3. 註冊coding登陸帳號：https://coding.net/login
   也是同樣的，建立一個和名稱相同的項目。這裏說一下爲何要用coding，其實不用也能夠，coding 和github 的做用同樣的，都是做爲pages 以及使用他們的域名。不一樣的是github 是國外的，而coding 是國內的。github搭建的博客不容易被百度檢索到，而coding 能夠。你們能夠根據我的喜愛選擇吧。這裏我是兩個都用了，反正就多一條配置。

   配置祕鑰

$ cd ~
$ ssh-keygen -t rsa -C "your_email@youremail.com"

將生成的祕鑰配置到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: git@github.com:QuellanAn/QuellanAn.github.io.git coding: git@git.dev.tencent.com: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，大數據等。資料包含視頻文檔以及源碼，同時分享本人及投遞的優質技術博文。

若是你們喜歡記得關注和分享喲❤

==