手把手教你使用Hexo和github搭建免費個人博客網站

俗話說的好“吃水不忘挖井人”,當自己體驗過Hexo搭建個人網站後,也來分享一下搭建過程遇到的樂趣以及遇到的坑!

準備工作(電腦配置工具)

在搭建Hexo博客之前,首先需要簡單在你電腦安裝一些工具以及依賴包(具體安裝方法相信大家都會,就省略了)

首先要有一個github賬號
其次安裝node.js,npm依賴
然後安裝git工具(當然電腦自身的cmd工具也是可以用的)

創建github網站(username.github.io的github倉庫)

新建一個名爲“你的用戶名.github.io”的倉庫,比如說,如果你的github用戶名是mengnn,那麼你就新建"mengnn.github.io"的倉庫(必須是你的用戶名,其它名稱無效),將來你的網站訪問地址就是 mengnn.github.io了,對的,就是這麼方便。

<!--more-->

當然,一個github賬戶下只能創建一個以此命名的倉庫,用來直接訪問。

點擊New repository
輸入Repository name,必需爲username.github.io格式。username替換爲用戶名
點擊按鈕Create repository
進入倉庫username.github.io,點擊setting,找到GitHub Pages模塊
點擊choose a theme選擇一個頁面主題
訪問https://username.github.io就可以訪問博客網站了

爲github設置SSH Keys

之所以配置SSH Keys,是因爲你提交代碼肯定要擁有你的github權限纔可以,但是直接使用用戶名和密碼太不安全了,所以我們使用ssh key來解決本地和服務器的連接問題。

首先檢查機器上是否已經存在id_rsa.pub文件

cd ~/. ssh #檢查本機已存在的ssh密鑰

如果不存在那就通過命令生成祕鑰

ssh-keygen -t rsa -C "郵箱地址"

一路回車就好(記得應該是連續3次回車),最終會生成一個文件在用戶目錄下,打開用戶目錄,找到.ssh\id_rsa.pub文件,記事本打開並複製裏面的內容。

打開你的github頁面,點擊setting進入---> SSH and GPG keys ---> New SSH key,然後把你複製的內容放到Key中,其中Title中的內容可以隨便填一個就ok了,如下圖:

添加成功保存就OK了。

測試SSH Key

輸入下面命令,測試SSH Key是否安裝成功

ssh -T [email protected] # 不用改郵箱地址

如果提示Are you sure you want to continue connecting (yes/no)?,輸入yes,然後會類似於:`Hi mengnn! You've successfully authenticated, but GitHub does not provide shell
access.`的字符,說明你安裝成功了。

安裝Hexo

以上準備工作完成後,就要放大招了,對,接下來就是重頭戲-本地部署Hexo。

具體的Hexo介紹,你可以在網上查詢,有很多,當然你也可以去Hexo官網詳細瞭解,這裏就不做過多介紹,不過要特別強調的是,上面的命令行以及下面的npm操作都是通過Git Bash Here操作的,所以前面寫到要提前安裝git工具。

安裝前特別準備

特別注意的是:國內npm安裝依賴實在是太慢太慢太慢了,尤其一些依賴小則一百兆左右,大則幾百甚至上G兆,所以強烈推薦使用淘寶鏡像cnpm安裝依賴,淘寶鏡像安裝方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm是否安裝成功
cnpm -v
//如果出現版本號的信息,說明你安裝成功

然後所有的npm操作你都可以換成cnpm操作了,當然下面爲了大家不混淆,還是用的npm操作,你操作的時候全都可以替換成cnpm。

安裝進行

通過以下命令行全局安裝Hexo

$ npm install -g hexo

初始化倉庫

在你機器的合適位置創建項目文件夾(這個文件夾就是以後你寫博客的存檔文件夾,所有的內容都會在這個裏面),比如我創建的是Blog,然後使用git找到Blog根目錄下

cd Blog

在項目根目錄下初始化你的Hexo。

在初始化之前,尤其搶到一點,你進行的hexo init操作會比較慢,耐心等待,特別特別搶到的事,你的node版本儘量要高於v.6.3.0,不然很大可能你的初始化操作進行一天也不會完成,所以,初始化之前儘可能的檢查一下node版本,升級 一下

cd /f/Blog
hexo init

初始化完成後,在你根目錄下面會生成一些文件

然後你就可以進行hexo操作生成文章以及本地運行

hexo g # 生成對應的html
hexo s # 啓動服務

上面命令執行完成後,你就可以在根目錄的public文件夾下看到對應的生成頁面(這個文件夾的內容也會是你推送到github上的內容)

hexo s是開啓本地預覽服務,打開瀏覽器訪問 http://localhost:4000 即可看到內容。

上傳到github

以上內容都配置好了,你就可以上傳到github上了(首先,ssh key肯定要配置好,其次,配置_config.yml中有關deploy的部分)

在之前,我們已經配置好ssh了,所以接下來我們要配置初始化後生成的_config.yml文件,配置如下:

deploy:
  type: git
  repository: [email protected]:mengnn/mengnn.github.io.git
  branch: master

然後你就可以上傳了

hexo d #上傳本地代碼到github

上傳成功後你就可以訪問你的github域名進行訪問了,比如例子中的[mengnn.github.io]()

更改主題

第一次初始化的時候hexo已經幫我們寫了一篇名爲 Hello World 的文章,默認的主題比較醜。不信你可以自己打開看看。不要急,我們可以更改自己喜歡的主題。當然你可以先在官網中查看自己喜歡的主題,然後下載下來就OK了。我選擇的是一個yilia主題

下載這個主題(當然,下載主題可以有很多方法,最後只要你能下載的主題文件copy到根目錄下的theme文件夾中即可):

cd F:\Blog\themes  #進入到根目錄下的themes文件夾(這個就是主題文件夾)
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #下載yilia主題到文件夾中

下載完成後,你會看到下面的內容(第一個文件就是你剛剛下載的yilia主題文件,第二個是系統默認主題文件)

修改根目錄下的_config.yml中的theme: landscape改爲theme: hexo-theme-yilia,然後重新執行hexo g來重新生成,然後hexo d提交就OK啦。

如果出現一些莫名其妙的問題,可以先執行hexo clean來清理一下public的內容,然後再來重新生成和發佈。

對的,這樣你的新主題就更改成功,然後這個主題下還有很多詳細高端配置,就暫時不在這裏詳說了,放一個我自己配置好的界面:

寫博客

所有的都配置好,怎麼去寫博客呢?

定位到我們的項目文件F:Blogsource_posts中,你所有的初始博客都是保存在這裏的,包括你所有的md文件

cd F:\Blog\source\_posts

定位之後你就可以在定位的文件夾裏生成md文件了

hexo new 'my-first-blog'

當然,你也可以自己手動在_posts文件夾中創建.md文件,進行編寫


---
title: postName #文章頁面上的顯示名稱,一般是中文
date: 2019-08-14 22:30:16 #文章生成時間,一般不改,當然也可以任意修改
categories: 默認分類 #分類
tags: [tag1, tag2, tag3] #文章標籤,可空,多標籤請用格式,注意逗號後面有個空格
description: 附加一段文章摘要,字數最好在140字以內,會出現在meta的description裏面
---

另外在這裏我推薦一個個人認爲比較好用的寫博客工具:Typora,目前爲止我發現的最好用的md文件編輯器,可以上傳圖片,代碼塊,文字編輯,主題更好等等,輕量級而且好用,Typora官網,你可以下載你需要的版本。

以上就是簡單的Hexo+github博客的部署以及上傳,相信對於入門的你來說已經足夠了,後續會推出進階版的文章,請持續關注。

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