利用 Hexo + Github 搭建自己的博客


扯在前面

在很久很久以前,一直就想搭建屬於自己的一個博客,但由於各種原因,最終都不了了之,恰好最近突然有了興趣,於是就自己參照網上的教程,搭建了屬於自己的博客。

至於為什么要搭建自己的博客了?哈哈,大概是為了裝逼吧。

之前有選擇其它平台,記點自己的學習筆記,做技術這行,要不斷學習新知識,俗話說的好,好記性不如爛筆頭,如果不記筆記,三天學習,兩天忘記。自己搭建博客的話,樣式的選擇也比較自由,可以自己選擇,不需要受限於各大平台。

網上搜 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注冊一個

傳送門:https://github.com/

注冊完登錄后,在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

就可以看到更新了。是不是很簡單呢?

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM