扯在前面
在很久很久以前,一直就想搭建屬於自己的一個博客,但由於各種原因,最終都不了了之,恰好最近突然有了興趣,於是就自己參照網上的教程,搭建了屬於自己的博客。
至於為什么要搭建自己的博客了?哈哈,大概是為了裝逼吧。
之前有選擇其它平台,記點自己的學習筆記,做技術這行,要不斷學習新知識,俗話說的好,好記性不如爛筆頭,如果不記筆記,三天學習,兩天忘記。自己搭建博客的話,樣式的選擇也比較自由,可以自己選擇,不需要受限於各大平台。
網上搜 hexo 關鍵字,這樣的教程一大堆,為什么我還要寫這篇文章呢?因為我沒能根據某篇文章能從頭到尾一步步很順利地走下來,要么因為軟件版本問題,要么因為自己的水平問題,踩了很多坑啊,幸運地是,經過自己不斷努力,慢慢把坑填平了。
進入正題
利用 hexo + github 搭建博客大概如下幾步:
- Git 的安裝和准備(本地配置)
-node.js 的安裝和准備(遠程空間配置)
-Github 賬戶配置(部署和發布)
那么我的第一步是安裝 Git 咯?不!我第一步是花錢買了個域名。相信我,當你花完錢之后,在接下來的步驟中遇到問題,你解決問題的信念會更強,並且花錢越多,離成功會越近。所以買個.cn之類的域名,你就成功了一半。
不買域名行不行?當然可以。買域名是為了更好的裝逼。
Hexo簡介
Hexo是一款基於Node.js的靜態博客框架,使用Markdown(或其他渲染引擎)解析文章,依賴少易於安裝,可在幾秒內利用現有主題生成靜態網頁。框架提供了很詳細的中文文檔,大家可以進入Hexo官網查看。
傳送門:http://hexo.io/zh-cn/
搭建環境准備
安裝Git
Git是一個先進的分布式版本控制工具,可以有效處理不同規模的項目版本管理。這里用於管理你的Hexo文章,將本地的博客上傳至Github。到Git官網選擇合適的版本下載,安裝后會有一個Git Bash的命令行工具,之后用該工具操作Git。
傳送門:https://gitforwindows.org/
檢查是否安裝成功:
git --version
正常顯示版本號,無報錯即為安裝成功。 另外,Windows環境下在Git安裝完成后,可以使用Git Bash來進行后續命令行操作。
安裝Node.js
Hexo基於Node.js,所以需要安裝Node.js及npm工具。可進入Node.js中文網下載,選擇LTS(長期支持版本)即可。
傳送門:http://nodejs.cn/download/
檢查是否安裝成功:
node -v
npm -v
正常顯示版本號,無報錯即為安裝成功。
博客本地搭建
安裝Hexo
在屏幕上任意地方右鍵打開Git Bash,輸入命令:
npm install -g hexo-cli
檢查是否安裝成功:
hexo -v
初始化博客
在電腦上新建一個文件夾,比如創建一個文件夾blog,然后cd
到這個文件夾下(或者在這個文件夾下直接右鍵git bash打開)
接下來初始化一下hexo
hexo init myblog
這個myblog可以自己取什么名字都行,然后
cd myblog npm install
博客目錄介紹
新建完成后,指定文件夾的目錄如下:
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes
_config.yml 網站的配置信息,可以在此配置大部分的參數。
package.json 應用程序的信息,新添加的插件內容也會顯示在這里,可以不做修改。
scaffolds 模板文件夾,新建文章時,Hexo會根據scaffolds來建立文件。 Hexo的模板是指在新建的Markdown文件中默認填充的內容,我們可以在模板上添加自定義內容,比如categories,tags等。
source文件夾是存放用戶資源的地方,也就是我們的博客內容。初始設置兩個文件夾,posts(文章)和drafts(草稿)。之后通過命令新建頁面后,文件夾數量會增加。
themes 主題文件夾,用於存放主題文件包,Hexo會根據主題內容生成靜態頁面,默認主題為landscape,可根據個人喜好進行更改。
博客本地效果
Git Bash執行以下命令:
hexo -g
hexo server
打開hexo的服務,在瀏覽器輸入localhost:4000就可以看到你生成的博客了。
大概長這樣:
使用Ctrl+C可關閉本地服務。
Github部署
創建個人倉庫
首先,你要有一個GitHub賬戶,去github注冊一個
注冊完登錄后,在GitHub.com中看到一個New repository,新建倉庫
創建一個和你用戶名相同的倉庫,后面加.github.io,只有這樣,將來要部署到GitHub page的時候,才會被識別,也就是xxxx.github.io,其中xxx就是你注冊GitHub的用戶名。我這里是已經建過了。
點擊create repository。
配置SSH
打開Git Bash,輸入以下命令,生成本地密鑰。這里用戶名和郵箱僅作演示,用戶名為你Github的用戶名,郵箱為你Github的郵箱。
git config --global user.name "huangenet" git config --global user.email "123@qq.com"
輸入以下命令,檢查輸入是否正確:
git config user.name
git config user.email
確認無誤后,輸入以下命令,創建SSH:
ssh-keygen -t rsa -C "123@qq.com"
此時在用戶文件夾下,已經生成了.ssh文件夾,在本地找到這個文件夾。
id_rsa是你這台電腦的私人秘鑰,id_rsa.pub是公共秘鑰。把公鑰放在GitHub上,當你連接自己的Github賬號時,它就會根據公鑰匹配你的私鑰,當能夠相互匹配時,才能夠順利的通過Git上傳你的文件到GitHub上。 在Github的設置中,找到SSH and GPG keys,新建SSH Key,以文本方式打開id_rsa.pub文件,將內容復制到Key,標題隨便起,添加Key。
在gitbash中,查看是否成功
ssh -T git@github.com
部署代碼到Github
打開站點配置文件_config.yml,拉到最底部,找到deploy字段,按如下格式修改其內容:
deploy: type: git repository: git@github.com:huangenet/huangenet.github.io.git branch: master
把用戶名換成你的
回到Git Bash,安裝deploy-git ,用於使用命令部署到Github。
npm install hexo-deployer-git --save
然后執行:
hexo clean
hexo generate
hexo deploy
其中 hexo clean
清除了你之前生成的東西,可以省略。hexo generate
顧名思義,生成靜態文章,可以用 hexo g
縮寫hexo deploy
部署文章,可以用hexo d
縮寫
出現下圖所示說明部署成功,此時代碼已同步至Github。
打開網址http://yourname.github.io就可以看到Hexo博客了。
常用命令
Hexo文檔中命令很多,但你並不需要記住每一個。在博客的使用過程中,主要的命令如下:
hexo n 新建文章/頁面
hexo g 生成靜態頁面
hexo s 本地查看內容
hexo d 部署到Github
更多命令看這里
設置個人域名
現在你的個人網站的地址是 yourname.github.io
,如果覺得這個網址逼格不太夠,這就需要你設置個人域名了。但是需要花錢。
從騰訊雲或阿里雲購買一個域名,將它解析到github
打開Git Bash或cmd命令行控制台,輸入:
ping yourname.github.io
解析時,記錄類型選A或CNAME,A記錄的記錄值為上一步得到的IP地址,CNAME記錄的記錄值為你的Github Pages博客域名。同時添加兩條記錄可保證無論是否添加www都可以訪問。
主機記錄就是域名前綴,常見用法有:
www:解析后的域名為www.aliyun.com
@:直接解析主域名aliyun.com
泛解析:匹配其他所有域名aliyun.com
mail:將域名解析為mail.aliyun.com,通常用於解析郵箱服務器
二級域名:如:abc.aliyun.com,填寫abc
登錄Github,進入博客站點對應的倉庫,選擇Settings,設置Custom Domain為你的域名。
Github Pages默認支持https,可以通過勾選Enforce HTTPS使用https訪問網站。
在本地博客站點根目錄的source文件夾下,創建一個名為CNAME的文件(文件名大寫,無后綴),填寫域名信息。
這里,域名加不加www均可
在綁定了新域名后,原來的yourname.github.io域名依舊可以使用,訪問時會自動跳轉至已綁定的個人域名。 在Git Bash中,輸入以下命令:
hexo clean
hexo g
hexo d
過不了多久,再打開你的瀏覽器,輸入你自己的域名,就可以看到搭建的網站啦!
接下來你就可以正式開始寫文章了。
hexo new newpapername
然后在source/_post中打開markdown文件,就可以開始編輯了。當你寫完的時候,再
hexo clean
hexo g
hexo d
就可以看到更新了。是不是很簡單呢?