- 前言：搭建博客要自己打代碼嗎？
- 開始動手：搭建博客的步驟
- 個性化：更換主題！！
- 寫博客：初識 markdown 語法
- 倒騰主題
前言
搭建博客難嗎？
看完這篇你就知道有多簡單 :P
搭建個人博客需要自己打代碼嗎？
想要美美噠，肯定是要一點的啊:disappointed_relieved:
但是說白咯，搭建博客和做程序一個道理：個人的時間和精力是有限的，一個程序往往都是使用了一堆別人的東西，來完成一個屬于你自己的作品。沒有人能夠有那樣的經歷和智慧在建一座磚瓦房之前研究燒磚、搭瓦，建造，結構力學等等等等。
我們所需要完成的是站在巨人們的肩膀上看遠一點，想深一點。
搭建我們的這樣一個博客需要用到的主要配件：Hexo、Hexo 主題、Git、GithubPages、Gitment，這些都不需要自己去獨立完成。而且這些都是免費的，除了買域名需要少許的錢。或者你執意要搭在自己的服務器上，當然這個從價格的計算上就不能一概而論了:（
總之搭建自己的博客無論從價格上，還是說耗費的時間和精力上都是微不足道的。畢竟，人家設計好的東西，我們只要直接拿來用就可以了。
概念簡要介紹：
- Github：這個必須有，無論是文字工作者還是程序員都得有一個，全世界人民認可的好東西。當然搭建博客你甚至不需要會操作它。但是誰知道你會不會突然就學會了呢？？ :smiling_imp:
- Git：Git是目前世界上最先進的分布式版本控制系統。:+1:
- Hexo：Hexo是一款基于Node.js的靜態博客框架，依賴少易于安裝使用，可以方便的生成靜態網頁托管在GitHub和Heroku上，是搭建博客的首選框架之一。
- GithubPages：是Github推出的功能，只要你建立了github.io這個特殊的倉庫庫，github 就默認你在使用它。它相當于一個服務器，可以保存你的所有博客文件，類似電腦上博客站點的一份備份。
當然，搭建博客時你可以什么都不懂。但為了以后能更好的操作你的博客，建議在搭建成功之后，好好學習一下 Git 和 github 的使用。初步了解可以通過廖雪峰大大的博客。
為什么一個人需要寫博客？？
這個問題建議你看看這篇文字：為什么你要寫博客？。
雖然你可以什么都不懂，但以下3樣東西你必須要有：
耐心：搭建博客是一件非常折騰的事情，所以耐心很重要
細心：一定要細心，確保每一步都是正確的。
一定的學習能力和鉆研精神，遇到困難一定要面對它，主動解決。
搭建博客需要多長時間？
可能每個人都不太一樣:smile:，這里我給出幾個層次：
半天：只是搭建，不涉及到換域名和個性化，并且了解背景知識。那么只要半天便可以搭建完成
一天：需要了解背景知識，并且換了域名和主題，但沒有太多的個性化
兩天：設置評論，字數統計等
三天甚至更多：各種找個性化插件和設置，一直在折騰的人
當然，前兩種都是你沒有遇到太大的坑或者困難所給出的估計時間。這種就比較折騰了。我個人是不太推薦的:boom:，因為你實際上把太多精力放在倒騰博客頁面而不是內容上了。始終要記得寫博客才是重點呢~~~
搭建個人博客的步驟
給出我博客的地址吧~點擊這里
一、GitHub創建個人倉庫
登錄到GitHub,如果沒有GitHub帳號，使用某個郵箱注冊一個 GitHub 帳號：點擊個人頁面中的 New repository 創建新倉庫。
倉庫的名字設定為：自己注冊時的用戶名 +.github.io
例如
我的用戶名為：Bitnut
那么我的倉庫名字就是：Bitnut.github.io
可見這個倉庫是每個賬號只能創建一個的特殊類型倉庫
至此，你就已經相當于給自己的博客利用 github 的服務器搭了一個后臺。很簡單對不對~~
- 注意幾點：
- 注冊的郵箱一定要驗證，否則不會成功；
- 倉庫名字必須是：username.github.io，其中username是你的用戶名；
- 倉庫創建成功不會立即生效，需要過一段時間，大概10-30分鐘，或者更久，我的等了半個小時才生效；
二、安裝Git
為什么要安裝它呢？因為在 win 下其他的類 Linux、Unix 的 git shell 可能會在用的時候出毛病，用 git 官方的能夠避免這類問題。
從Git官網下載：
Git - Downloading Package--win
Git - Downloading Package--mac
Git - Downloading Package--linux
下載安裝完成后，在命令行里輸入 git -v 看看版本并測試是否安裝成功.
若安裝失敗，參看其他詳細的 Git 安裝教程。
三、將你本地的 Git 與 GitHub 帳號綁定。
右鍵喚出 Git Bash。或者在菜單里搜索 Git Bash，設置 user.name 和user.email 配置信息：
git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub注冊郵箱"
生成ssh密鑰文件：
為什么要配置這個呢？因為你提交代碼肯定要擁有你的github權限才可以，但是直接使用用戶名和密碼太不安全了，所以我們使用ssh key來解決本地和服務器的連接問題。
cd ~/. ssh #檢查本機已存在的ssh密鑰
如果提示：No such file or directory 說明你是第一次使用git。
生成密匙：
ssh-keygen -t rsa -C "郵件地址"
然后連續3次回車，最終會生成一個文件在用戶目錄下
ls -a #直接查看所有文件
cat .ssh\id_rsa.pub #直接終端打開文件即可
復制里面的內容，打開你的github主頁，進入個人設置 -> SSH and GPG keys -> New SSH key：
Title為標題，任意填即可，將剛剛復制的id_rsa.pub內容粘貼進去，最后點擊Add SSH key。
測試是否成功添加公鑰
在 Git Bash 中檢測 GitHub 公鑰設置是否成功，輸入 ssh git@github.com
如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes，然后會看到：
Hi Bitnut! You've successfully authenticated, but GitHub does not provide shell access.
如上則說明成功。這里之所以設置GitHub密鑰原因是，通過非對稱加密的公鑰與私鑰來完成加密，公鑰放置在GitHub上，私鑰放置在自己的電腦里。GitHub要求每次推送代碼都是合法用戶，所以每次推送都需要輸入賬號密碼驗證推送用戶是否是合法用戶，為了省去每次輸入密碼的步驟，采用了ssh，當你推送的時候，git就會匹配你的私鑰跟GitHub上面的公鑰是否是配對的，若是匹配就認為你是合法用戶，則允許推送。這樣可以保證每次的推送都是正確合法的。
安裝Node.js
由于 Hexo 基于 Node.js 因此我們到官網上下載一下 node.js。
Node.js下載地址：Download | Node.js
下載安裝包，安裝Node.js會包含環境變量及npm的安裝，安裝后，檢測Node.js是否安裝成功，在命令行中輸入 node -v 檢測npm是否安裝成功。
- 如果 git bash 里面報錯，到環境變量里面看看有沒有 nodejs。沒有的需要把nodejs的地址添加一下。如果已經有了，重啟電腦應該就 OK。
至此，安裝Hexo的環境全部配置完成。:clap::clap:
安裝Hexo
Hexo就是我們的個人博客網站的框架，這里需要自己在電腦常里創建一個文件夾。
注意不要在這個文件夾下面試用 Git 創建倉庫，因為后面安裝的主題內可能會帶有 git 倉庫，這樣會導致包管理的混亂。
可以隨意命名，這里命名為 Blog，Hexo 框架和以后我們自己發布的網頁都在保存在這個本地文件夾中。創建好后，不需要進入文件夾中，在文件夾的父目錄直接喚出 Git Bash。
使用npm命令安裝Hexo，輸入：
npm install -g hexo-cli
初始化我們的博客，輸入：
hexo init Blog
注意，這里的命令都是作用在剛剛創建的Blog文件夾中。進入到文件夾中
查看一下我們的目錄結構：
為了檢測我們的網站雛形，分別按順序輸入以下三條命令：
hexo new test_my_site #創建一篇新文章
hexo g #生成文件
hexo s #本地 server 部署
這樣我們在本地成功部署了我們的博客
打開瀏覽器輸入地址：
localhost:4000
厲害了小:fire:汁
常用的Hexo 命令
npm install hexo -g #安裝Hexo
npm update hexo -g #升級
hexo init #初始化博客
命令簡寫
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #啟動服務預覽
hexo d == hexo deploy #部署
hexo server #Hexo會監視文件變動并自動更新，無須重啟服務器
hexo server -s #靜態模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定義 IP
hexo clean #清除緩存，若是網頁正常情況下可以忽略這條命令
剛剛的三個命令依次是新建一篇博客文章、生成網頁、在本地預覽的操作。
把博客的更新部署到 Github 上
上面只是在本地預覽，接下來要做的就是就是推送更新，也就是發布網站，讓我們的網站可以被更多的人訪問。在設置之前，
需要區分一下兩個概念：
- 在 Blog 根目錄里的_config.yml文件稱為站點配置文件
- 進入根目錄里的themes文件夾，里面也有個_config.yml文件，這個稱為主題配置文件
下一步將我們的Hexo與GitHub關聯起來，打開站點的配置文件_config.yml，翻到最后修改為：
deploy:
type: git
repo: 這里填入你之前在GitHub上創建倉庫的完整路徑
branch: master
保存站點配置文件。
以上的所有操作其實是在給 hexo d 這個命令做相應的配置，讓 hexo 知道你要把 blog 部署在哪個位置，很顯然，我們部署在我們GitHub的倉庫里。最后安裝Git部署插件，輸入命令：
npm install hexo-deployer-git --save
完成后，我們分別輸入三條命令：
hexo clean
hexo g
hexo d
第三條的 hexo d 就是部署網站命令，d是deploy的縮寫。完成后，打開瀏覽器，在地址欄輸入你的放置個人網站的倉庫路徑，即 http://xxxx.github.io 。其中的 xxxx 就是的GitHub用戶名：
你就會發現你的博客已經上線了，可以在網絡上被訪問了。
- 注意：如果你前面操作的很快，那么你到這一步有可能沒法訪問，因為github那邊給你的網站部署需要花費一些時間，大概需要最長半個小時的時間。
更換主題！！！
默認主題:neutral_face:emmmm，不是很好看。所以我們進行到了至關重要的一步！要知道，帥。是一輩子的事情~~~顏值不夠看，看ni:horse:呢對吧？
個人最欣賞的主題：hexo-theme-yilia
這個主題兼顧了顏值和效率，同時在手機端可以有非常好的體驗，因此我選擇了它。
當然你也可以選擇其他主題。主題傳送門：Themes 我自己使用的是 yilia 主題，可以在blog目錄中的themes文件夾中查看你自己主題是什么。
首先下載這個主題：
在根目錄喚出 Git Bash,
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
這是將 yilia 主題下載到 Blog 目錄的 themes 主題下的 yilia 文件夾中。打開站點的_config.yml配置文件，將里面的 theme: landscape 改為 theme: yilia，然后重新執行 hexo g 來重新生成。
如果出現一些莫名其妙的問題，可以先執行 hexo clean ，可以清理 public 文件夾里面的內容。然后重新生成和發布即可。
初識Markdown語法
Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。Markdown語法簡潔明了、容易掌握，而且功能比純文本更強，因此寫博客使用它，可以讓用戶更加專注的寫文章，而不需要費盡心力的考慮樣式，相對于html已經算是輕量級語言，像有道云筆記也支持Markdown寫作。并且Markdown完全兼容html，也就是可以在文章里直接插入html代碼。比如給博文添加音樂，就可以直接把音樂的外鏈html代碼插入文章中。具體語法參看：Markdown 語法說明(簡體中文版) 可以說十分鐘就可以入門。當然，工欲善其事必先利其器，選擇一個好的Markdown編輯器也是非常重要的，這里推薦MarkPad 和The Markdown Editor for Windows ，這是帶有預覽效果的編輯器，也可以使用本地的文本編輯器，更多的Markdown的語法與編輯器自己可以搜索了解。
發布文章
我們開始正式發布上線博客文章，在命令行中輸入：
hexo n "博客名字"
我們會發現在blog根目錄下的source文件夾中的_post文件夾中多了一個 博客名字.md 文件，使用Markdown編輯器打開，就可以開始你的個人博客之旅了，Markdown常用的樣式也就十來種，完全能夠滿足一般博文的樣式要求，這是我的一篇博文內容示例：
通過帶有預覽樣式的Markdown編輯器實時預覽書寫的博文樣式，也可以通過命令 hexo s --debug 在本地瀏覽器的localhost:4000 預覽博文效果。寫好博文并且樣式無誤后，通過hexo g、hexo d 生成、部署網頁。隨后可以在瀏覽器中輸入域名瀏覽。
倒騰主題
下面是我在倒騰 yilia 主題的時候遇到的一些坑
首先這個主題是國人寫的，所以基本沒有一些設置跟著主題里的配置文件的注釋走就好。
但是一些小問題其實沒有被直接在注釋里面提到的，可能會給你造成一些麻煩，這里我列舉一些。
設置打賞還有自己的頭像
圖片請保存在主題的 /source/img 下，但是在配置文件里面寫的時候注意了，要寫成 /img/zhifubao.jpg，具體原因主要還是涉及到地址的訪問問題，因為每次訪問默認都會到 /theme/source 下尋找，所以重復填寫 /source 可能會導致圖片加載不出來的小問題。
設置 favicon
收藏夾圖標設置，這個可以到在線的網站上直接生成一個：favicon制作，然后在主題中設置 favicon 項即可。
aboutme想寫長一點怎么辦？
沒問題，在你想換行的地方添加 <br> 就好。
以我自己的為例：
aboutme: 是個正在考研的選手<br>性別男，愛好女<br><br>熱愛體育、美食、讀書、旅游、美女等等<br><br>對金融很感興趣<br>本科研究過區塊鏈和網站開發。
微信分享那里會出現一些問題
好像本來主題里百度的二維碼生成 api 沒起作用呢。
現在很多大網站都有這樣的一個功能，使用手機掃描一下網頁上的二維碼便可快速在手機上訪問網站。在自己的博客里面想要實現這樣的功能其實很簡單，下面分享幾個在線生成網址二維碼的API接口。都是可以采用http協議接口，部分可以使用https協議，無需下載安裝什么軟件，可簡單方便地引用，是最簡單、最便捷的免費網址二維碼生成工具。
- 推薦的幾個在線生成網址二維碼的API接口：
- 百度網盤(可使用https)
http://pan.baidu.com/share/qrcode?w=150&h=150&url= - iClick接口 (無https)
http://bshare.optimix.asia/barCode?site=weixin&url= - JiaThis 接口(無https)
http://s.jiathis.com/qrcode.php?url= - 聯圖網(無https)
http://qr.liantu.com/api.php?text= - K780數據網(支持https和http)
http://api.k780.com:88/?app=qr.get&data= - QR Code Generator(https接口)
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=
- 使用說明：
- 打開 Chrome 或者其他瀏覽器，點擊頁面里的分享中的微信圖標，郵件點擊彈出窗口，點擊
檢查元素或檢查或者審查等等，看個人的瀏覽器版本。查找到對應的 HTML 中的代碼行。 - 復制里面任何一段代碼，用某個 IDE 或者編輯器(我自己使用的是 vscode)，利用代碼查找功能查找到對應的代碼。
- 把網站替換為以上的任意一個試試看。會有延遲，多刷新幾次試試看。
完成
讓博客網址使用全英文路徑
上面的微信分享二維碼功能完成之后，手機掃碼出來卻不能訪問，為什么呢？？
原因在于你的文章可能使用了中文命名，而 hexo 默認使用了文章標題作為網址
解決方案：修改 permalink 變量
在博客根目錄的配置文件（_config.yml）中這樣修改：
permalink: :year/:month/:day/:title # 這是原配置
permalink: :year/:id/ # 替換為此新配置
并且在.\scaffolds\post.md中修改為：
- （注意新增了一個id:）
title: {{ title }}
id: {{date}}
date: {{ date }}
tags:
這里我的 id 初始化的時候是日期，包含年月日時分秒。為了美觀和便于識別，我在上傳的時候會修改這個 id 使他保證和其他文章不沖突。
我的做法是使用創建日期中的月+日+時+分+秒來定義一個id，比如月日-時分秒 。
評論功能添加
大家可以去看看，我最后采用的是 Gitment,十分美觀可用性強。
主要步驟有：
注冊 OAuth Application 點擊此處注冊。其他內容可以隨意填寫，但要確保填入正確的 callback URL（一般是評論頁面對應的域名，如 https://imsun.net）。通過這個步驟你會得到一個 client ID 和一個 client secret。
-
在配置文件里面填寫相應的內容，下面的都填上~
gitment_owner: 'Bitnut' #你的 GitHub ID
gitment_repo: 'comment' #存儲評論的 repo,注意是名字不是地址！
client ID
client secret
評論的其他的一些坑點我參考了這篇文章,有問題注意上去看看！
最后我給出我自己的配置文件
# Header
menu:
主頁: /
隨筆: /tags/隨筆/
金融: /tags/金融/
計算機: /tags/計算機/
SCUT: /tags/SCUT/
# SubNav
subnav:
github: "https://github.com/Bitnut/Bitnut.github.io"
weibo: "https://weibo.com/u/5724174787/home"
rss: "#"
zhihu: "https://www.zhihu.com/people/lalalapc/activities"
#qq: "#"
#weixin: "#"
#jianshu: "#"
#douban: "#"
#segmentfault: "#"
#bilibili: "#"
#acfun: "#"
#mail: "mailto:litten225@qq.com"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
rss: /atom.xml
# 是否需要修改 root 路徑
# 如果您的網站存放在子目錄中，例如 http://yoursite.com/blog，
# 請將您的 url 設為 http://yoursite.com/blog 并把 root 設為 /blog/。
root: /
# Content
# 文章太長，截斷按鈕文字
excerpt_link: '繼續'
# 文章卡片右下角常駐鏈接，不需要請設置為false
show_all_link: '展開全文'
# 數學公式
mathjax: false
# 是否在新窗口打開鏈接
open_in_new: false
# 打賞
# 打賞type設定：0-關閉打賞； 1-文章對應的md文件里有reward:true屬性，才有打賞； 2-所有文章均有打賞
reward_type: 2
# 打賞wording
reward_wording: '感謝您的瓜！希望這篇文字能給你帶來幫助~'
# 支付寶二維碼圖片地址，跟你設置頭像的方式一樣。比如：/assets/img/alipay.jpg
alipay: '/img/zhifubao.jpg'
# 微信二維碼圖片地址
weixin: '/img/weixin.jpg'
# 目錄
# 目錄設定：0-不顯示目錄； 1-文章對應的md文件里有toc:true屬性，才有目錄； 2-所有文章均顯示目錄
toc: 1
# 根據自己的習慣來設置，如果你的目錄標題習慣有標號，置為true即可隱藏hexo重復的序號；否則置為false
toc_hide_index: true
# 目錄為空時的提示
toc_empty_wording: '目錄，不存在的…'
# 是否有快速回到頂部的按鈕
top: true
# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: '/img/guage.png'
#你的頭像url
avatar: '/img/gua.jpg'
#是否開啟分享
share_jia: true
#評論：1、多說；2、網易云跟帖；3、暢言；4、Disqus；5、Gitment
#不需要使用某項，直接設置值為false，或注釋掉
#具體請參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/
#1、多說
duoshuo: false
#2、網易云跟帖
wangyiyun: false
#3、暢言
changyan_appid: false
changyan_conf: false
#4、Disqus 在hexo根目錄的config里也有disqus_shortname字段，優先使用yilia的
disqus: false
#5、Gitment
gitment_owner: 'Bitnut' #你的 GitHub ID
gitment_repo: 'comment' #存儲評論的 repo
gitment_oauth:
client_id: bu ke yi!! #client ID
client_secret: bu ke yi!! #client secret
# 樣式定制 - 一般不需要修改，除非有很強的定制欲望…
style:
# 頭像上面的背景顏色
header: '#4d4d4d'
# 右滑板塊背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
# slider的設置
slider:
# 是否默認展開tags板塊
showTags: false
# 智能菜單
# 如不需要，將該對應項置為false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '所有文章'
friends: '友鏈'
aboutme: '關于我'
friends:
友情鏈接1: http://localhost:4000/
友情鏈接2: http://localhost:4000/
友情鏈接3: http://localhost:4000/
友情鏈接4: http://localhost:4000/
友情鏈接5: http://localhost:4000/
友情鏈接6: http://localhost:4000/
aboutme: 是個正在考研的選手<br>性別男，愛好女<br><br>熱愛體育、美食、讀書、旅游、美女等等<br><br>對金融很感興趣<br>本科研究過區塊鏈和網站開發。
