原 Blog 鏈接:Hexo+Github搭建個人博客(小白版圖文教程)

寫在前面
最近興趣使然,想要搭建一個個人博客。每次看到別人擁有自己的個人主頁都特別羨慕,一直想著自己有一個博客該有多好啊。就這樣折騰了兩天時間,看遍了網上各種各樣雜亂的教程,走了很多彎路,終于成功搭建出來了。等到結束的那一刻,心里很是開心。回想這一整個步驟,其實并不難,很簡單就能掌握。
由于自己是技術小白,很多大神寫的教程看了依舊操作錯誤。多么希望有人能手把手的教你每一步做什么。
有過經歷,才知道好的教程的重要性。因而我將自己建站的步驟詳細記錄下來,以供參考。希望后面想要建站的人不要走彎路了哦~
搭建環境
配置 Node.js 環境
下載 Node.js 安裝文件,根據自己電腦的位數,選擇下載32位或者64位的:http://nodejs.cn/download/
然后安裝下載的文件,保持默認設置就好了,一路點 Next ,很快就安裝完成了。
接著檢查一下 Node 是否安裝好,打開運行窗口,輸入
cmd
,打開命令行:在命令行分別輸入以下命令:
node -v
npm -v
如果出現下圖界面,則說明 node 安裝正確。可以進入下一步了。
配置 Git 環境
去官網下載 Git 安裝文件:
接著進行安裝,如下圖,在 Windows Explorer integration
這一項及下邊的兩項都打上勾:
然后一直 Next 就可以了,安裝完成后同樣檢查一下 Git 是否正確安裝。
Github賬戶的注冊和代碼庫的創建
Github帳號注冊,打開鏈接:https://github.com/,申請一個 Github 帳號;
注冊好之后還需要確認郵箱,打開注冊的郵箱,確認注冊,然后進入下一步;
點擊頁面右上角自己的頭像,點擊下拉菜單的
New repository
,創建一個新的代碼庫:代碼庫的名字最好與你的用戶名相同,格式為
yourname.github.io
,比如我的用戶名是 renkaitest
,那我的代碼庫名即為 renkaitest.github.io
創建成功后出現下圖所示界面,點擊右邊的復制按鈕,復制這個地址:
配置 Github pages
隨便找一個目錄,右擊鼠標,選擇Git Bash Here
,打開一個類似命令行的界面,輸入以下代碼:
$ git clone https://github.com/username/username.github.io
- clone 后面的鏈接即就是上一步復制的那個鏈接,比如我的就是下面的代碼:
$ git clone https://github.com/renkaitest/renkaitest.github.io
然后輸入
cd 你的代碼庫名
,例如 cd renkaitest.github.io
,也可以直接進入該目錄下的一個名為 renkaitest.github.io
的文件夾。
$ cd renkaitest.github.io
- 然后輸入:
$ echo "Hello World" > index.html
接著輸入:
$ git add --all
$ git commit -m "Initial commit"
- 這里會出現一個錯誤,是因為我們沒有設置Git的
user name
和email
,此時輸入以下代碼:
$ git config --global user.email "541638321@qq.com"
$ git config --global user.name "renkaitest"
- 注意:上面的
name
和email
都要換成自己的郵箱和用戶名 - 此時繼續執行以下代碼:
$ git commit -m "Initial commit"
下面
push
到你的代碼庫,輸入代碼:
$ git push -u origin master
- 可能會彈出以下界面讓你登錄,使用 Github 帳號登錄即可。
此時你的 Github Pages 已經配置好了,打開
yourname.github,io
這個網址就能看到你的博客了,yourname 替換成你自己的用戶名。Hexo安裝
找一個目錄,我是在 d:\Hexo
目錄下,鼠標右擊打開 Git Bash Here
,輸入:
$ npm install hexo-cli -g
可能會看到一個 WARN,但是沒關系的,進入下一步。
輸入:
$ npm install hexo --save
- 等一段時間,他安裝完之后檢查一下是否安裝成功,輸入:
$ hexo -v
- 看到相關的版本信息則說明安裝成功。
Hexo配置
初始化 Hexo,首先需要找一個目錄,這個目錄即就是你的博客的所有文件存放的目錄,最好路徑不要太深,我選擇的是 D:\Hexo\blog
。在這個路徑下打開 Git Bash Here
,輸入代碼:
$ hexo init
然后輸入:
$ npm stall
這里 npm 會自動幫你安裝你需要的組件。
繼續輸入:
$ hexo g
生成博客。
輸入:
$ hexo s
啟動服務,會提示以下信息:
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
在瀏覽器打開 http://localhost:4000/ ,將會看到自己的 hexo 博客:
關聯 Hexo 與 Github Page
配置Git個人信息
如果你之前已經配置好git個人信息,請跳過這一個步驟,直接來到步驟2
設置Git的user name和email:(如果是第一次的話)
$ git config --global user.name "renkaitset"
$ git config --global user.email "541638321@qq.com"
生成密鑰
$ ssh-keygen -t rsa -C "541638321@qq.com"
輸入代碼后一直按回車就好了,不用自己定義目錄,生成的
ssh
會存放在 C:\Users\用戶名\.ssh
目錄下,如果找不到 .ssh
目錄,請在文件夾選項中顯示隱藏的項目。
配置 SSH 密匙
進入 Github 網頁,點擊右上角自己的頭像,選擇 Settings
:
配置 SSH and GPG keys
,點擊 New SSH key
:
用 txt 打開剛才生成的 Key,復制到下圖所示區域,點擊
Add SSH key
:配置 Deployment
打開博客目錄下的站點配置文件 _config.yml
,比如我的博客目錄是 D:\Hexo\blog
,找到該目錄下的 _config.yml
。打開他,在最末尾找到 Deployment
,然后按照如下修改:
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
上面的 yourname
都要替換成自己的用戶名,以我的為例:
deploy:
type: git
repo: git@github.com:renkaitest/renkaitest.github.io.git
branch: master
這樣就配置好了,接下來就可以寫博客了。
發布博文
新建一篇博文,在博客存放的目錄里面 Git Bash Here
,執行命令:
$ hexo new post "我的第一篇博文"
然后就會在電腦的目錄下
D:\Hexo\blog\source\_posts
看到一個 我的第一篇博文.md
文件,使用 MarkDown 編輯這篇文章就可以了。文章編輯好后,運行生成、部署命令。
但是此時還缺少一個擴展,因而不能部署,先要執行以下命令:
$ npm install hexo-deployer-git --save
如果沒有執行這個命令,將會提醒:
deloyer not found:git
現在開始執行:
$ hexo g // 生成
$ hexo d // 部署
也可以將這兩個命令一起執行:
$ hexo d -g //在部署前先生成
若出現如下圖所示的信息 INFO Deploy done: git
,則表示部署成功,已經上傳到你的代碼庫。
此時訪問你的地址 https://yourname.github.io ,將會看到剛才寫的文章了。
注:我的主題是自己換過的,可能與你的顯示結果有所不同,做到這一步,你已經成功搭建了自己的博客。已經大功告成了!恭喜你~
總結
以后發布博文,就是以下的步驟:
- 寫博文:
$ hexo new post "博文名字"
- 生成博文:
$ hexo g
- 部署博文:
$ hexo d
- 由于網絡原因,進入你的網頁可能不會立即顯示最新的信息。過幾分鐘就好了~
原 Blog 鏈接:Hexo+Github搭建個人博客(小白版圖文教程)