自己動手搭建一個hexo博客demo

曾幾何時,自己動手做一個博客的想法愈加強烈,想在裏面放一些更多除了技術之外的東西,比如烹飪的美食,比如PVP的視頻,比如拍攝的照片,比如籃球足球的評論。在這種需求下,我從衆多博客框架裏面選擇了hexo,原因就是“很多人都推薦hexo”....(囧)於是乎我在windows裏搞一個,由於我在公司的網絡是可以跨越長城的,所以搞github有一點天然的優勢。而且github的博客不用花錢搞域名,他直接免費提供...


在搞github的時候牆裂推薦各位去用命令行,有linux的基本基礎就可以很熟練的使用命令行搞github, 它的客戶端真的不如命令行好用。


準備工作

先去註冊一個github,然後去https://git-scm.com 上下載一個最新的git windows的客戶端,我下載的是2.15.1版本,如圖:

image.png


下載完畢之後,就把這個exe文件安裝,然後在“開始”裏找到git再打開“Git Bash”,我的github賬號是RorschachChan,電子郵件也已經配置過,所以現在就在這個bash窗口裏寫入如下語句:

$ git config --global user.name "RorschachChan"
$ git config --global user.email "[email protected]"

image.png


上面git config --global 參數,表示你這臺機器上所有的Git倉庫都會使用這個配置。


再去https://nodejs.org/en/download/ 上根據自己windows的情況,下載最新的nodejs,

image.png


下載完了之後就一路next,然後需要退出重進一下git bash,在bash的命令行裏輸入$node -v,看到版本號就是OK,同時輸入node,$會變成>,然後輸入.exit就可以退出返回到bash。

image.png


然後就是安裝hexo,hexo的安裝比較簡單,就是在git bash裏輸入$ npm install -g hexo-cli $npm install -g hexo,然後需要等待一會,如果出現了“npm ERR! ”不要怕,重新輸入一次應該就會好了,安裝完畢之後,輸入$ hexo -v查看hexo的版本,如圖:

image.png

image.png


然後建立一個github ssh密鑰,在git bash裏輸入$ ssh-keygen -t rsa -C "你的郵箱",然後告訴密鑰生成的路徑(下圖黃框)以及會讓你輸入對應的口訣(紅色箭頭),這個口訣很重要,要妥善保存,如圖:

1.png


這個密碼會在你提交項目時使用,如果爲空的話提交項目時則不用輸入。這個設置是防止別人往你的項目裏提交內容。這時候去C:\Users\33664\.ssh的路徑裏就會看到一對鑰匙,id_rsa是私鑰,不能泄露出去,id_rsa.pub是公鑰,可以放心地告訴任何人。

image.png


來到github的個人配置裏,選擇“SSH and GPG keys”,然後輸入title和id_rsa.pub的內容,點擊“add ssh key”。如圖:

image.png


準備工作的最後一步,就是建立一個文件夾,我的文件夾建立在E盤下,名字就叫hexo。


開始搭建博客

首先在git bash裏進入/e/hexo,然後輸入$hexo init,這個命令是初始化命令,再輸入$hexo -g來生成靜態文件,執行之後,hexo就會在public文件夾生成相關html文件,這些文件將來都是要提交到github上你的用戶名.github.io的倉庫上去的。然後可以輸入$hexo s來啓動hexo,這個時候跑到瀏覽器裏輸入localhost:4000 就會看到hexo博客最初的一個樣子,如圖:

image.png


這個默認的主題比較難看,我們去https://github.com/iissnan/hexo-theme-next 下載最近一個比較火爆的主題next,並且把這個下載到hexo文件夾裏的themes/next裏,語句是: $ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

image.png


然後打開hexo文件夾裏的_config,把原有的theme註釋,換成新的next,注意,中間是有空格的!

#theme: landscape
theme: next


然後$ hexo clean$ hexo g清除 Hexo 的緩存和重新生成靜態文件,再次$ hexo s啓動進程,來到瀏覽看一下發現博客的樣子就變成下面的樣子了:

image.png


這個看上去就簡單大方很多了吧。


把博客上傳到github

現在有人問了,這個博客看上去好像很美,但是有兩個致命的缺陷:第一,內容都是在我的windows裏,如果我這個電腦壞了/出差/換新硬盤,那麼如何保證我以前文件?第二,我啓動進程需要執行$ hexo -s,如果我電腦關機了,豈不是博客無法打開?


需要解決就要把磁盤上的內容傳遞到github庫裏了,同時github是常開進程的,這樣既可以更新我們的內容又不會關閉博客進程,除非github這個網站黃了。


先去github網站去建立一個庫(repository),這裏我直接選擇了公共讀,如圖:

image.png

然後在hexo文件夾裏面,修改一下_config.xml的幾個地方:

# Site
title: 石錘淡啤酒    #這個是網站在標籤頁的標題
subtitle: 生活就是等待戈多    #這個是副標題
description: 這裏記錄的不只有代碼,還有生活和思想!    #這裏也可以寫網站的關鍵詞,也可以矯情的寫點別的
author: Chris Chan    #這個作者會在網頁最下面顯示
language: zh-Hans    #這裏表示簡體中文
timezone:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: [email protected]:RorschachChan/RorschachChan.github.io.git    #這裏寫的就是剛剛申請的庫名
  branch: master


建立完庫以及修改保存了_config.xml之後,我們執行一句$ hexo d部署命令,在執行的時候需要輸入當時你建立id_rsa時候的口訣,剛剛申請的那個口訣不會這麼快就忘了吧。

image.png


返回到github的網站就看到hexo裏所有的內容都上傳到了github網站裏了,如圖: 

image.png


在瀏覽器裏輸入“https://你的用戶名.github.io”,就看到了博客界面:

image.png


同理,如果你的github用戶名是test,建立的是test.github.io的倉庫(必須是你的用戶名,其它名稱無效),將來你的網站訪問地址就是 http://test.github.io 了,每一個github賬戶最多隻能創建一個這樣可以直接使用域名訪問的倉庫。


至此,建立一個博客demo就到此結束了!



參考資料:https://baoyuzhang.github.io/2017/04/28/【Hexo搭建獨立博客全紀錄】(一)使用Git和Github/

參考資料:https://github.com/iissnan/hexo-theme-next 

參考資料:http://opiece.me/2015/04/09/hexo-guide/ 

參考資料:http://shenzekun.cn/hexo的next主題個性化配置教程.html 強烈推薦這篇文章,可以讓你把next主題的博客做的更加漂亮!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章